June 24th 2020
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)
2. Use naming conventions
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
And of course, the questions I mentioned earlier should be asked here too, always thinking about how to optimize everything in your code.
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.