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?

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

 has one significant disadvantage - we can't style it. Here CSS comes to the rescue! We can create a 

 using data attributes and style it with CSS. Let's see the code snippet.

And here is our result of our code on codepen:

A short tutorial on creating an HTML and CSS tooltip without a single line of javascript. All you need to know is data-atributes

Problems and Solutions

Short solutions for real-life frontend problems, divided into a few categories.

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?

Extra space below image

How to limit text to n lines with CSS?

How to create a tooltip in HTML and CSS?

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.