An Important Thing for Beginner Developer

When I started learning to code, I was always asking myself how could I speed up my development to become a professional as soon as I could. If you’re commencing your coding journey, you probably asked yourself this already. That’s natural to think about, mainly if you’re changing careers or simply if you value a lot your time.

In this phase we often want to know what language to learn, or which of them offers more opportunities in the job market. That’s all valid, but not the most important. Let’s ask the right question: “How can I develop the skills needed to land my first job as fast as I can?”

Joining one of the best Bootcamps in the world helped me a lot to figure out what makes the difference in the learning curve, and hopefully what I’m going to share here will help you speed up your development as well.   

When we’re learning to code, things are amazing and overwhelming at the same time. We get awesome results from some simple lines of code and this feels great, but when we glimpse all that exists in this market we can be intimidated by how much there is to learn. Fear not! Of course, it’ll demand many hours of dedication, but there is something very important to consider to improve your development immediately.

The one thing you should know since now is: the code itself matters a LOT. Seriously. Take your time to think about this. The available coding languages are very powerful and there are countless resources to improve your outcomes, so results are already expected from anyone.

Getting the work done is the most basic requirement for any job in software development, but it is far from being enough. The quality of your code can determine if you get a job or not.

Software programs are built by teams, not individuals. So you should know that to become a professional as soon as possible, you should look to improve your code in two main parameters: Readability and Efficiency.

Readability determines how comprehensible and maintainable is your code to yourself and other developers, what includes proper naming to elements and functions and the way you organize your code. This is of huge importance and it is not an easy task to thrive on.

Efficiency is how much code you used to achieve the goal, compared to what was actually needed. Efficient code is clean and as short as it can be.

To become a professional, more than knowing many different technologies, you should be able to build very clean, lean, effective, organized, and flexible high-quality solutions in one or a few technologies, depending on what you are focusing on.

And you should be able to do this as quickly as possible, another reason to practice a lot.

Ok, but how can you start practicing all of this?

Here I list some powerful suggestions to help you improve the quality of your code and accelerate your professional growth along the way. Considering that you’re probably entering the programming field now, I’ll give suggestions to improve the fundamental blocks of web development: HTML and CSS. Later you can apply the concepts to other languages.

How to practice writing better HTML/CSS code

There are some best practices in code writing that you should be applying in your projects. If you try to follow these instructions in all your projects, soon you’ll be writing more efficient code naturally.

1. Avoid IDs (and give preference to Classes)

If you’re reading this, you should have a good idea about what are CSS Selectors. If not, you should take a look at this. (Recommended)

ID’s are unique selectors, meaning you can’t have more than one ID with the same name in one document. Also, they have a very high specificity, making things confusing by not being able to get overrode by more flexible selectors (such as Classes). If you don't know yet how specificity works in CSS, I strongly recommend you visit this link.

Because of those characteristics, IDs are not recommended to style your project. Try to use Classes for that matter, and leave IDs to be used when you get to Javascript, to direct dynamic functionalities and other very specific and unique features.

2. Use naming conventions

This has the potential to revolutionize your code. Naming conventions are designed to standardize as much as possible the identification structures of all the elements in your code, leaving a nice and comprehensive body of selectors that helps you understand where is each element, what is its role, and what kind of modification is it being submitted to.  The most popular naming convention is called BEM, and you can know more about it in this link. (Again, highly recommended)

In short, the most important part of BEM for beginners is the basic naming structure for Classes:

Use only a descriptive name for blocks. (Ex: .block, .navbar, .container);

For elements inside the blocks, add two underlines to block names to indicate element dependency (Ex: .block__title, .navbar__menu, .container__header);

When you want to apply some modifier to an element, add ”--” (two dashes) to describe the modifier type (Ex: .block__title--color-red, .navbar__menu--visited, .container__header--centered);

So your HTML and CSS would look something like this:

Arranging the names with care can help a lot to make your code better for reading, managing, and maintaining. It seems somewhat ‘dirty’ at first because the class’s names tend to get big, but with the time you’ll realize it has many upsides. 

3. Use comments

Comments are a very good way to communicate with humans, since they're the only way you can write whatever you want in your code. You can use them to explain some piece of code particularly difficult to understand, to leave some warning messages to avoid bugs or in many other ways. Don't be scared to use them.

4. Think before you write

Planning your code can sound obvious, but it’s not what we do naturally. Of course, you don’t need to draw a map with all the steps you’ll need to build your project, but analyzing your needs upfront can be enormously beneficial. 

Building from Scratch

If you’re building a website from scratch, try to draw it somewhere to get a clear idea of what is the final product, and think of each part of the project in these terms: 

• How can I optimize the use of paddings and margins?
• Is there a way of creating some standards for positioning?
• How can I optimize the usage of the classes and other styling selectors?
• How I need each element behaving with the change of the screen size? What does that imply in my options for styling it?

You’ll know you are in the right way when you see that your code is getting smaller and there are many configurations you are reusing in several places inside your code. That way you’ll have less code written and getting the desired results.

Cloning an existing Website

The most common practice for beginners, though, is to clone websites to develop their skills. This is a good practice since it forces you to find ways of getting the exact same result of the target webpage, and this is good to make you think about which tools would be of better use in each case. For that matter, you could use PESTICIDE to see the boxes of the elements on the target website to have a good idea of what’s going on there. Even better, you can use it in your own project to see what is making that div misbehave or not respond to that margin you tried to add. Just try this awesome extension. You can thank me later. 

And of course, the questions I mentioned earlier should be asked here too, always thinking about how to optimize everything in your code.

Conclusion

Keeping these ideas in mind will help you improve your coding skills along with your learning journey, and soon you’ll be able to build high-quality code. This is a skill you’ll soon be glad to have developed, and it will be highly valued by future employers. But don’t worry if this looks difficult at first, as everything that it’s worth it demands practice and patience.

Bonus

Curious about the Bootcamp I mentioned earlier? Take a look in Microverse if you want to accelerate your learning towards your first software development job!