When taking our first steps in programming and learning how to create websites, we often make various mistakes. There is nothing wrong with that, everyone started at some point and made many mistakes. However, it is worth developing yourself and avoiding these mistakes over time, thanks to which we will become better at our craft. In this article, I will show you what are the most common mistakes made by beginners who create their first websites in HTML and CSS, and I will also describe how to avoid them. If you want to be a good programmer and not make basic mistakes, then you should definitely read this article to the end.
Mistake 1. Using a table as a skeleton (layout) of a website.
Please remember that a table should only be used to present data in this format. Some beginners sometimes try to make a table the skeleton of the entire page, such a layout of their page, so that it is easier for them to place elements in the right places and so that it is scalable. However, this is bad practice. There are better ways to position elements properly, for example by using flexbox or grid, which I will also introduce to you in the next articles. It is also much easier.
Mistake 2. Improper use of headings on the page.
In HTML, we can use headings from h1 to h6. Always use these headings according to their intended purpose. There should be no more than one h1 heading on 1 subpage. Use these headings according to semantics, i.e. h1 is the most important text on the page, h2 is slightly less important and so on up to h6, which is the least important. Of course, not every text on the page will also be a heading.
Mistake 3. Improper formatting of the HTML code.
Remember to format HTML tags properly. Use appropriate indentation and vertical spacing when necessary. This will make your code more readable for both you and other programmers. Visual Studio Code also helps you in this regard. Just install the appropriate extension, e.g. prettier, and improve formatting when saving.
Mistake 4. Placing CSS styles inline or directly in the head.
Remember to always place CSS styles in a separate file. Sure, there may be exceptions, but this is the best practice and above all try to stick to it. The worst thing is when you declare styles in different places, e.g. you have some styles in a separate file, some inline in tags, and still others in the head. It is difficult to find your way around this code later and no one wants to touch it. We always place CSS styles in a separate file and only link to it in the head.
Mistake 5. Failure to complete the "alt" attribute for images.
Remember to always add and correctly complete the alt attribute to the photo. Thanks to this, if for some reason the photo is not displayed, this text will be displayed. In addition, the information in this attribute is also important in the context of SEO, e.g. for the Google search engine. You cannot skip this attribute.
Mistake 6. Using the "<br />" tag in a way that is not intended.
Do not overuse the br tag, this tag is only used to create vertical space in text. Do not create spaces, for example, between 2 images or any elements vertically using this tag. We do such things using margins.
Mistake 7. Using divs everywhere.
Remember the semantics of tags. You can't use divs everywhere, you should use the appropriate tags. I often come across a record where instead of creating a header tag and e.g. footer, the programmer uses divs and gives them classes header and footer, respectively, so this is a bad approach. Avoid something like this. Different tags were created for this purpose, to be used according to their intended purpose. Of course, in both cases your page will be displayed identically, but this is bad, because in HTML semantics, using good patterns and using tags according to their intended purpose are important.
Mistake 8. Bad definition of colors.
To define colors, use hexadecimal or rgba values when transparency is required. Do not use color names directly, because this causes several problems. Such colors are not always unambiguous and some browsers may interpret them differently, it is much better to use precisely defined colors. And you can do it as I mentioned, e.g. using hexadecimal values.
Mistake 9. Bad naming.
All names of classes or identifiers should be in English. If the names are multi-element, separate them with hyphens. In some companies you may come across other naming conventions and that's ok, but in such a case remember to always keep the names consistent for the entire project. In addition, I recommend using naming in accordance with the BEM methodology, i.e. Block Element Modifier.
Mistake 10. Not knowing all the units.
Remember that in addition to px we have a lot of other units and often others may be more appropriate in a given situation. It is worth learning how to use units depending on the situation. In addition to px, which are also useful in some situations, it is worth considering using more responsive units such as rems, percentages or viewports.
Mistake 11. Using inappropriate components on forms.
A very common mistake made by beginners is using components in a way that is not intended for them. If you expect a password to be entered on a form, use an input with the password type, i.e. a passwordbox, if you need color, use an input with the color type, if you expect users to provide a date, use an input with the date type, etc. Each data type has a corresponding component and that is how we should use them. Sure, you could handle everything on an input with the text type, but that is not the point. We want to make our lives easier and use dedicated controls. If the user has to provide a color, do not make them enter the exact value in the field, but let them choose the appropriate color from the user interface. Similarly with dates, let the user choose the appropriate date from the calendar, and not type it in by hand. The password should also be hidden on the user interface and the same goes for other components. So to sum up, use components dedicated to their types. Beginner programmers often forget about this, which is a huge mistake.
Mistake 12. Setting 0 with the unit.
If you want to set the value to 0px, or 0 with any other unit, you can omit this unit in the record. It is enough to write just 0 and it is an unambiguous record. There is no need to use unnecessary characters here.
Mistake 13. Unskilled attempts to center elements vertically and horizontally.
If you want to set an element perfectly in the center, you can do it very easily using flexbox. I have already seen various attempts to center elements, adding a lot of code, and in fact all you need to do is use flexbox. Then all you have to do is set the display property to flex, justify-content to center and align-items to center and the element inside the container will be perfectly centered. Without flexbox it is much more difficult and it was done differently depending on the elements inside. So remember this method.
Mistake 14. No "name" attribute for fields on the form.
Each field on the form, i.e. input should have the name attribute set, thanks to which you will be able to send all data to the server correctly.
HTML CSS School
If you want to learn how to create beautiful websites, consider joining the HTML and CSS School (more info here).
