Stavros Ioannidis (@istavros)

How to make simple slideshow using cool CSS and JS features

Hello. Today I'm making a simple slideshow using cool CSS and JS features. I'm gonna be using: CSS variables CSS transformations CSS functions CSS grid JS Proxy The HTML <div class="slideshow"> <div class="slides-container"> <div class="slid...

Nov 13, 2022 · 7 min readistavros.dev

How to create a brand logo grid

In this post I will demonstrate how to create a brand logo grid like the one below: The tricky part of such a grid is the colored gap between the logo tiles. The solution I came up with, I think is acceptable. I added a 1px box-shadow to the grid it...

Oct 30, 2022 · 1 min readistavros.dev

Two ways to handle ltr/rtl on a page.

When creating a multilingual web page you might need to handle languages written from right to left. This comes with some design issues. First, you must add the dir attribute to your root (<html>) element. But the dir attribute alone cannot tackle ev...

1Oct 21, 2022 · 2 min readistavros.dev

Work needs meaning

Hello again. In this post, I'm going to share a thought I had. For the last six months, I've been struggling with not-so-interesting work. It was some things that I had to do that were so boring I almost believed that I didn't like my job anymore. I ...

Oct 14, 2022 · 3 min readistavros.dev

How to choose between grid and flex for a listing page

When we need to show a list of items, such as products in a product list page, we have the following two css alternatives: display: grid display: flex I will demonstrate both here and I will explain why I choose one over the other. Usually, we have...

Jul 22, 2022 · 2 min readistavros.dev

Stavros Ioannidis

About

Available for

Stavros Ioannidis's blogs

How to make simple slideshow using cool CSS and JS features

How to create a brand logo grid

Two ways to handle ltr/rtl on a page.

Work needs meaning

How to choose between grid and flex for a listing page

Stavros Ioannidis

About

Available for

Stavros Ioannidis's blogs

How to make simple slideshow using cool CSS and JS features

How to create a brand logo grid

Two ways to handle ltr/rtl on a page.

Work needs meaning

How to choose between grid and flex for a listing page

Stavros Ioannidis

About

Available for

Stavros Ioannidis's blogs

How to make simple slideshow using cool CSS and JS features

How to create a brand logo grid

Two ways to handle ltr/rtl on a page.

Work needs meaning

How to choose between grid and flex for a listing page

Search Hashnode

Stavros Ioannidis

About

Available for

Stavros Ioannidis's blogs

How to make simple slideshow using cool CSS and JS features

How to create a brand logo grid

Two ways to handle ltr/rtl on a page.

Work needs meaning

How to choose between grid and flex for a listing page