Please, don't do these things (For web developers)

1. Spamming Alerts

I guess, everybody knows about the alert() function. That's why people always use this function to create an alert when user opens a project. The text in these alerts is often the same: mostly it just says "hi" and asks to upvote. But this thing is very irritating. Press the button below to see typical alerts that fire when user opens a webpage. To be honest, I almost never read what is written in these onload alerts, espesially when there are a lot of them. So if you need to notify the user about something important, just note it somewhere on the webpage or use SweetAlert. Besides being annoying, these alerts may prevent API fetching process if you place alert before fetching.

2. Pixel Width

Imagine that I need to make an element to take the whole width of the screen. I will use the CSS width property with the value of 720px because this is the width of my screen. Click the button to see the element with a width of 720px.

I am 720 px wide!

If you are wondering why is it not the whole width of the screen but even wider and causes the horisontal scroll to appear: it is because everyone's screens moslty have different sizes, widths and resolutions. So instead of using pixel use 100vw or 100%.

3. Centering elements incorrectly

Let's create a simple layout:

Element

Just a blue div with a text being in the center of the page (let's imagine that the greyish thing is our webpage). I saw a lot of people, especially beginners trying to do it with top and left properties, like this:

/* Code [CSS] */
top: 47%;
left: 25%;

And here's the result:

Element

But if you look closer, you'll see that the element is not perfecly centered, spaces to the left and to the right are not equal. Even if you'll manage to find perfect top and left values, if you change contents of the element, you will have to change these values again.
That's why you should use display:flex;. But display:flex; does not center elements on its own. There are two additional properties you should use: justify-content: center; and align-items: center;. The first property will center child element horizontally, the second will center it vertically. Results:

Element

Perfectly centered and it will remain centered even if you change the content:

The quick brown fox jumps over the lazy dog. Almost before we knew it, we had left the ground.

I hope you learned something new. Bye!

3 Things You Never Should Do as a Web Developer.