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!

Learning resources

A collection of all my created resources for free!

Frontend Tips

Better variable names

Numeric separator

Native date picker

Native color picker

Problems and 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.