Below you can find tips for beginners on how to create a better code without committing a lot of time or effort into it. Remember about those, and your code quality will improve in no time. If you are planning to work in a web development agency, you can’t make any mistakes like this one.
Avoid adding style attributes to HTML elements
HTML is a language used to describe the structure of the website, not style attributes. That’s why it’s better to avoid adding <style> attributes to the elements. As you know, we have a separate language to do so. It’s called a CSS and you should describe the style of elements using this option adding style to the rule. But why is it the best solution?
First of all, using HTML to name a style of attributes is so-called anti-pattern - against all basic rules of programming. We are separating it into two programming languages, because if in the case of any problems with the code it’s much easier to look for it and debug it only in one place. It’s going to improve the process and avoid the mess. Remember - messy and unorganized code is the biggest enemy of the developer-beginner.
Avoid id
Assigning id is not a necessity and not all of the elements in your HTML code have to have it. The id should be well-thought-out and serve a certain function or purpose. If you don’t want to style certain elements or manipulate it with JavaScript in any way id is just making your code messier.
Remember, that id is unique for every element. Don’t assign this same one to more than one element.
Be consistent with class/id naming
If your code was working right before changing id or class of elements and right now is dead? The most probable that in the process of change you have overlooked some code and haven’t updated it in all the places that it is used. For time-saving purposes use the “search” function.
When working as a part of a team in a web development agency you are often sharing one project with other specialists. Don’t cause trouble for the rest of the squad and pay attention.
Be thrifty with <head> section
The head section is the place, where all of the most important scripts should be, to load DOM and in consequence all website content as fast as possible. It’s important because the fastest your website is, the more user engagement it’s generating.
Having that information in mind, don’t put JavaScript code in head tags if you really don’t have to. When the user is entering the website, all scripts are loading at one time. The head section is loaded first, so it has to be downloaded and rendered before the rest of the website content. More unnecessary code you have in this section, the slower loading is.
The solution is really simple. If you don’t need your script to launch before loading DOM, just put it at the end of the <body> section.
Remember about semantics and be careful
Every programming language has its own rules of calling and defining all the elements. It’s important to use it in the proper way. Naming elements right will help you keeping code clean and is decreasing the chance of bugs and other malfunctions.
Remember about semantics, especially in the beginning of your programming adventure. It’s one of the most important good practice that is going to affect the quality of your code in the future.
If graphics or style on your website are not loaded properly the first thing that you should check if you have correctly typed the file path. Everybody can make a typo in the name of the folder or extension. Double-checking can save you a lot of time later in the process.