When learning a new skill, at first you might get intimidated. That intimidation can grow to become frustration which can then lead to a lack of motivation. You must stay motivated when learning something new, especially in demanding areas like web development.
One thing capable of drying up that motivation is spending too much time making corrections. Let’s be realistic sometimes, we jump right into writing code, without proper planning and then suffer the consequences. Equip yourself with the right knowledge and tools the earlier the better, save yourself from potentially sabotaging that juice you’ve got for learning.
Use easily recognizable class names
I cannot stress the benefits of naming classes in a way you can easily identify its purpose. You might think that there’s no need to stress about class naming, but for big projects, it is necessary. The advantage arises when you want to make changes to your code.
Avoid unnecessary containers
When you start learning how to use flexbox and grid, you might begin to think that everything needs to be in a container. Unless you want to group elements or apply certain layout design, chances are, you don’t need another DIV.
I used to make this mistake a lot, especially with images, I always had my images wrapped inside a DIV, even when it’s just a single image. The result of this can make your code look very unprofessional. You can give the image a display block property if you want the image to occupy its own space.
Style as you go
Now, this is very subjective but, it’s very easy to get lost when your HTML code grows bigger. Adding markup for a section, and styling it just makes it easier to navigate, and sometimes, it is a faster way of finishing your project.
Use borders or background colors to inspect spacings and sizes
The heading speaks for itself. It is a common practice among web developers to add borders of different colors to get a visual on element positioning, size, and spacings (margins and paddings). It’s a way of debugging your code. You can always take it out once you are satisfied with the result.
Learn to use DevTools on time to debug your code
Web browsers have blessed us with a superpower in DevTools. At first, it can be quite intimidating, but it doesn’t take long to understand what each tab does. Learning your browser’s DevTools on time will save you a lot of headaches debugging your code from your editor. You can identify the culprit element by inspecting it and changing styles right inside the style tab of the browser’s DevTools without editing your CSS file. This makes it easier and safer to play around while guaranteeing that you don’t add more bugs to the already existing one by accident.
For Chrome and Firefox, clicking F12 will launch the DevTools browser window. Clicking CTRL+SHIFT+C will highlight each element you hover. You can see the element’s width, height, and styles.
Learn version control ASAP
I cannot forget the number of times I deleted many lines of code and started from scratch because I couldn’t identify the reasons I was having issues.
From Git’s documentation, a version control system is “a system that records changes to a file or set of files over time so that you can recall specific versions later.”
There is so much you can get out of learning version control (VC for short). It can help you go back in time to the previous state of your code. It makes collaborative work seamless. Think of VC as a backup tool, but a backup tool on steroids.
- Make your repository(folder) a git repository
Alternatively, if you are not too familiar with the command line and you prefer a GUI, there are good ones i can recommend like
Spend more time planning and less time coding
In a nutshell, spend a lot of time figuring out the layouts and design structure. Identify related groups or sections that will share similar styling. Doing this will ensure that your coding hours are well spent.