JUNIORS FRONT-END: GOOD PRACTICE GUIDELINES TO CODE IN HTML AND CSS

ARE YOU THINKING ABOUT BECOMING A FRONT-END DEVELOPER?

After our first Sprint in Adalab, we are here to show you a guideline of good practices that every future programmer should know and put into practice. Put pen to paper!

We know that learning to program is fundamental. Nowadays everything is digital and if we want to make decisions and understand how the world works, we need basic knowledge about the algorithms that invade our everyday life. This can be a bit scary, but learning is always great! In addition, the Internet is full of resources to learn code, but when you are self-taught, and you are starting out, it is difficult to identify which resources are good and which are not. We bring you a small guide of good practices so that your code has the best possible quality. :)

1- Semantics is very important

Every website has to have <header>, <main> and <footer>.

Semantic tags are essential to organize our HTML. It depends on them so that search engines can identify easily the content of our website and so more people will visit the site. But it’s not all about the visits, don’t be selfish! Semantic labels help us to make our web accessible for blind people to understand the structure of the web well. Ain’t it great?

2- Enough with all the Divs already!

If you inspect the code of a random website, you are likely to see that it’s invaded by <div>s, but it is not the best practice. Surely there is an another semantic tag for what you are looking for. Exhaust all resources before using a div. If we have not convinced you yet, go back to point 1.

3- Use classes!

When we learn to program we always do small projects in which it seems that the classes are not necessary. But before giving styles with label selectors, we recommend that you identify all your HTML with classes. It will make it much easier to find something when you need it, and your code will be easier to read. We recommend that you use the BEM system for class naming or camelCase.

4 CSS over HTML

Although on the Internet you will find a lot of tutorials where they include the styles directly in the HTML, do not do it! The styles are always in the css.

5. Inheritance

You can avoid writing unneeded lines of code by using inheritance. Below, we show the minimum lines of code that should appear when you write the styles of the BODY element. In this way your other elements can inherit these styles.

In addition, we bring you the concept “minireset” (see attached image above) with this asterisk at the beginning of your css we get to apply this style to each of the classes in our HTML . However, don’t think that this concept will solve your life! You have to be careful with this, so for us it’s useful to use it to put border-sizing: border-box. In this way, we make sure that all our boxes are governed by this model and thus the padding provided will not give us headaches.

6. Do not abuse using position

Believe in us! Flexbox can become your best friend when you know him well. You will be BFFs! Using absolute and relative positions to place the elements of your page is not a good practice and can lead to some problems. Here we show you some key points or master moves which are very useful to apply the positions:

-Fix the header of your page: normally we would do this with position fixed. With this strategy, we set the header of our page at the top and this will allow us to scroll down and keeps the element in the same position.

-Positioning within an element. If we want to position an element (child) inside another element (father), a great strategy that usually works quite well is the following:

• Put a position relative to the element that works as a father.
• Put a position absolute to the element that works as a child.

Once this is done, we could place the child element where we would want. An example is in the following image. The main purpose is to place the purple square in the middle of the pink container element.

7. Teamwork!

When you work as a team, do not establish strong emotional ties with you code or feel offended if someone in your team suggests changes in it, open your mind! The advantages of working in a group is that you do not have all the knowledge and know all the techniques that make your website the next revolution. This world in which we work is changing and there are a thousand ways of doing things. The key idea is to believe that the improvements they are suggesting to you, will make you improve as a front-end developer. Do not think that they try to modify your little and dear baby.

8. Rest is very important

One could say that the most important thing in the field of programming is rest. If you are exhausted, you will not get the results you expect and will probably take even more time to finish your website. Our recommendation is that you take breaks every 1.5 hours for about 15–20 minutes. Occasionally, we become obsessed with trying to solve a problem or a program that does not work for us, and we lose track of time. Have a Break, have a Kit Kat!

It is not only important that your project is beautiful, visibly attractive, and eye-catching. What is really important is that the code behind your website is correct, readable, and easy to understand….not only for you but for the rest of your team. With these 8 tips, you’ll be closer to becoming a great front-end programmer and besides that you’ll be a developer who takes care of the smallest details, paying the same attention to semantics and accessibility as to styles.

This article was created in collaboration with clara harguindey