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!

Native color picker

An anchor tag can also be used differently. It allows us to open a mailbox and fill in an address email, call a number or even create a text message for a certain number!

An anchor tag can also be used differently. You can send a mail, sms or make a phone call!

Power of anchor tag

CSS allows us to style required inputs out of the box! All you need to do is to add 

  attribute and then style your input with 

Styling required inputs out of the box with CSS pseudo class selector

Required or not?

 pseduo class selector to change the style of the selected text. You can't change all CSS properties, but only these:

CSS allows to style selection text. Style yours to match your website!

Style your selected text

You can easily style your input placeholders with CSS pseudo-elements.

To support all browsers, you need to add prefixes:

Remember to add them separately! If you add them in this way:

Your code won't work! You can read about it here on 

You can easily style your input placeholders with CSS pseudo-elements. Styling input placeholders will improve the UX of your forms!

Style your placeholders

If the spacing between the last field and the button is too big, it may feel disconnected. It misleads users that the button is not what actually sends the form.

Avoid too big spaces between elements like this to have a better user experience.

If the spacing between the last field and the button is too big, it may feel disconnected. It misleads users that the button is not what sends the form.

Connect button with the form

You can take advantage of CSS selectors to color different anchors with a different color! Look at the example; it's so simple.

You can take advantage of CSS selectors to color different anchors with a different colors! For example pdf files, external or internal links!

Color your links with specific href

Color your links

  will find your first line in your HTML element and will style it differently. Do you don't have to use any javascript magic to achieve that! Just use this selector.

Selector ::first-line  will find your first line in your HTML element and will style it differently.

Target first line of sentence

Target first line

You can easily create fancy styles for your sentences in HTML elements. Do you remember the initial letters in ancient books? You can create a similar style! 

You can easily create fancy styles for your texts in HTML elements targeting the first letter of the sentence.

Target first letter of element

Target first letter

Javascript has a lot of different methods. I created a simplified version of the five most common methods that you will use every day!

Javascript has a lot of different methods. Let's learn how to use the five most common methods on emoji example!

Most common javascript methods

In the example on the left, when the error messages are displayed, the spacing between forms makes all the fields blend into one large column.

Add more space to separate fields and create a more precise layout!

Add some space!

 element was created to be used as a recommendation list for inputs. You can choose available options or type your answer.

The <datalist> element was created to be used as a recommendation list for inputs. You can choose available options or type your answer.

Suggestion datalist for inputs

You should always visually prioritize one of the buttons. They should NEVER look exactly the same. The more important button is always CTA (call to action) and it should be more prominent.

Always prioritize one button in the group.

Call to Action button

Call to action buttons

Do you know that ULR (Uniform Resource Locator) has its own scheme?

URL scheme

Gradient text

gradient-text

We can replace four lines of code with only one using shorthands!

- second part is our position of the background

- then we have a position-size separator 

- after the separator, we have background-size

This is not over! Background can have more properties:

Background shorthand is necessary while creating single-div illustrations.

CSS background has many properties. We can combine many lines with only one using shorthand. Let's see how to replace four major ones with only one line.

Learn frontend tips

All my tips are created with detailed explanations to make learning easier for you!