visit
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.
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 . (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 .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 . (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: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 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.Curious about the Bootcamp I mentioned earlier? Take a look in if you want to accelerate your learning towards your first software development job!