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 a placeholder to a <select> element in HTML, you can use the <option> element as the placeholder and give it the disabled and selected attributes. Here is an example:

This prevents the user from selecting this option from the dropdown menu and instead creates a select> element with the placeholder "Select an option." The placeholder will appear in the dropdown menu when the user clicks the select> element, but it won't be selectable. The placeholder will be changed to the selected option whenever the user chooses one of the other choices.

How to add a placeholder for HTML <select> component?

How to add placeholder for HTML select?

To disable resizing an <textarea> element in HTML, you can use the resize property and set it to none. Here is an example:

As a result, the user won't be able to resize the textarea> element using the resize handle that, by default, appears in the component's bottom-right corner. Remember that this property does not affect other elements like input; only textarea> components are.

To disable resizing of textarea, we need to set only one CSS property.

How to Disable the Resize of the <textarea> HTML Element?

How to disable resize of textarea?

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?

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 & Freelancer

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 add a placeholder for HTML <select> component?

How to Disable the Resize of the <textarea> HTML Element?

How to change element's class with Javascript?

Hello, I'm a frontend developer with over six years of experience, freelancer. I'm also a mentor for junior frontend developers. I wrote a book for Junior Frontend developers called Frontend Unicorn.