I'm back! Today I'm sharing a simple modern house to warm up. This house will have three brothers soon. Also, there will be a timelapse with my comment on how I created it!

Simple modern house created with CSS only. A warm-up before I will start making more CSS art! 

Modern house 1/4

Today I was looking for new illustration inspiration for my CSS City, and I came across this adorable animals illustration. I love animals! I had many dogs, cats, parrots, pigeons, rabbits, guinea pigs, hamsters, fish, and many more🤯. Also, most of my tattoos are animals 🤣

Adorable illustration of animals created with CSS! 

Animals Posters Gallery

Another fancy building for my CSS city! This time I found a beautiful school building. Every town should have a school, so mine have it too! 😎

School Building

School building

A simple step-by-step tutorial on how to generate custom meta images for your website with Node script 

Learn how to Generate Seo Images with a simple Node.js script

Learn how to Generate Seo Images with simple Node.js script

A look at the Claymorphism - a new UI design trend from a developer's point of view with multiple examples how to create it with CSS

How To Create Claymorphism Using CSS

How To Create an Claymorphism Using CSS

I completely rewrote my blog with Next.js, Emotion, MDX, and Storyblok. This is the story why and how I did that.

How I Rewrote My Blog with Next.js

How I rewrote my blog

Knowing how to google is an essential skill for a developer. Everyone does it - from junior developers to seniors with ten years of experience.

Know How to Google Is Important. Do You Know How Do It?

Design trends are creating like a new javascript framework. Some of them are good and accessible to all users, and some of them are not.

Aurora UI - how to create with CSS

A short tutorial on how to start with single div images. To create a simple image, you need to know only one thing: how backgrounds in CSS works.

How to Fall In Love With Single Div Illustrations

To add, remove or toggle element's class, first of all, we need to get this element. The most modern way is to use 

. Javascript have element.classList property, which will return DOMTokenList collection attributes of the element. And that's how we can manipulate elements classes.

To remove class from element, we need to use 

Lastly, to toggle class (remove, if class exist and add if the class doesn't exist), we need to use the 

But what if we want to add specific class to all existing classes? We need to use different selector - 

, which will return a list of elements with class from parameter. Then, to add, remove or toggle class, we should use 

Short cheatsheet for adding, removing, and toggling CSS classes in vanilla javascript. You no longer have to remember it!

How to change element's class with Javascript?

This space below the image is not a bug or an issue, and it is a default browser behavior. Images created with 

 property. Every text, not only in programming, have various properties. This extra gap exists because of the 

. Long story short: descender is the gap below the baseline of the font. So, if our image is treated as text, it has to have a descender.

There are multiple different ways to fix this problem:

I can recommend the first solution for this problem. It's the easiest one.

I don't recommend the last two solutions because it will set font-size or line-height to all text nodes in div.

Also, font-size: 0 will affect image ALT font-size. If your image doesn't work, your alt text won't display too (okay, it will display but with font-size:0, so it will be invisible.

Image below was fixed by adding display:block to image.

One of the most common problems that almost every junior frontend developer has is extra space below the image. Let's learn how to fix it with CSS

Extra space below image

The easiest way to limit text to n lines is to use

.  N can be any positive number, but it will be two or three lines most of the time. On my blog, I'm using 

 in all post-type components to ensure that it will have the same height as siblings.

White-space and overflow will do the job, while text-overflow will add three dots at the end of the line.

 truncation is supported by all major browsers except IE11 and Opera Mini.

 to 3,6em. Max lines are calculated in this way: 3,6em divided by 1,8em equals 2 lines.

Sometimes, we have to trim text to limit the number of lines. There are a few ways to do it with pure CSS. Let's learn how to achieve that

How to limit text to n lines with CSS?

How to limit text to n lines

Variables in programming should be named to achieve one goal: to explain what it does and why it exists. Variables with good naming save time for all people because you already know what this variable stands for.

Meaningful and easy to pronounce variable names are much better than random names. It helps other developers to read your code without any problems

Better variable names

The proposal "Numeric Separators" allows underscores as separators in numeric literals, and it's a part of ES12.

Numeric separators allow using big numbers more transparently.

Underscore in numbers is called a numeric separator. It allows to use big numbers efficiently in javascript

Numeric separator

HTML allows creating a date picker out of the box! You don't need to import any other library to have a date picker. Just use 

It might look different on different browsers and OS. Internet Explorer does not support the native HTML date picker.

You might not need another library to solve your problem. If you need a date picker, choose HTML Native date picker. It is supported by all major browser

Native date picker

Not many people know that HTML allows you to have a color picker out of the box!  You don't need any extra javascript library to do this. All you need to do is to use 

It might look different on different browsers and OS.

Did you know you don't have to use an additional javascript library to add a color picker on your website? You can use native HTML input type color!

Albert Walicki

Frontend Developer & Entrepreneur

About me 👋

Find me here

Latest articles

Learn how to Generate Seo Images with a simple Node.js script

How To Create Claymorphism Using CSS

How I Rewrote My Blog with Next.js

Know How to Google Is Important. Do You Know How Do It?

Aurora UI - how to create with CSS

How to Fall In Love With Single Div Illustrations

Youtube videos

School - CSS Art - timelapse

CSS art & illustrations

Modern house 1/4

Animals Posters Gallery

School Building

Frontend tips

Better variable names

Numeric separator

Native date picker

Native color picker

Problems & solutions

How to change element's class with Javascript?

Extra space below image

How to limit text to n lines with CSS?

Hello, i’m Albert Walicki. i’m a frontend developer and cofounder of development & design agency Hype4 and education platform Hype4 Academy. I wrote a book for Junior Frontend developers called Frontend Unicorn.