11 concepts to master as a coding newbie.
Grasp the basics before moving onto other languages.
This article is expressly for newbies first starting out with code. The purpose is to give a rough framework before moving onto other areas like bootstrap, jquery or javascript.
1 Learn to use Emmet. If you have never heard of it, then make sure you hear about it before you progress any further. It will enhance your coding speed like nothing else. If your text editor does not have it then get a different one.
Atom, Brackets and Sublime Text all have it as an add-on.
Just install Emmet and then practice using it. Every project you start henceforth use Emmet.
For the basic shortcuts, here is a cheat sheet.
Here is a short video to see Emmet in action.
2 Learn the box-model in CSS. I know this one is extremely basic and really goes to the very foundations of CSS. But it is amazing how many people get tripped up by it on their coding projects. Or alternatively why their design is not looking how they want it to look.
Understanding that every component within HTML/CSS is a box of some description is vital. Then understanding how the boxes interact with each other is also important.
3 Learn the display property in CSS. This ties in with the previous point about the box model. The display property consists of 4 major values, inline, inline-block, block, and none. When and where to use these displays can often get confusing. It really helps to understand the fundamental theory behind how these property values work.
This article has some great walkarounds and fixes to common issues.
4 Learn the position property in CSS. Again this ties in nicely with the previous two points. The position property always gets confused with the display property. There are 4 major values in this property. Static, fixed, absolute, and relative.
This article on positioning content is absolutely brilliant. A definite read.
5 Learn the float property in CSS. This is the final point for CSS. Float goes hand in hand with the direct layout of your HTML as does the inline and inline-block values. Understanding how points 2–5 work together, common issues, walkarounds, and general functioning are vital. I can’t stress this enough. Master these points before you move onto any framework with CSS. In the long run, it will make your life easier. When you have mastered the theory, practice it with code.
This brief, but solid tutorial covers all these points mentioned. Definitely worth checking out.
6 Learn to write clean code. Get into good habits early. There is nothing worse than looking through dirty code. By dirty, I mean not indented correctly and the over use of the <div> tag. <div> is not the answer to all your problems. You want to learn about semantic HTML. It is important. If you want to impress future employers — CLEAN CODE. In addition to helping you on this quest, there are a number of add-ons that automatically indent your code and align it correctly. You can get this for most text-editors.
I use Atom and the package in my case is called beautify.
Read this article on HTML semantics.
7 Validate your code. Sticking with the clean code concept, it is important to validate your code properly for errors. Do that here for HTML and here for CSS.
8 Learn responsive coding. I believe it is a good habit to write your code with responsiveness in mind, even if it isn’t important. Meaning all your paddings, margins, font-sizes, widths and heights etc should be in the appropriate format. Using em, rem and/or percentages is a good habit to start early. Using em/rem and percentages throughout your code can actually make your task of adjusting the layout for different screen types much easier later on. Rem and percentages work based on the primary value you set for font-size at the beginning of your CSS document. At the end, you can simply adjust this one value and it will adjust the entire outlook throughout the CSS file.
Now I know there are some that think this is stone age thinking. The main take home point is this; understand the thinking behind it. You decide how you code.
To understand more on this debate check out this article. The article itself is too long in my opinion, but the comments section is where you will find the magic. Really worth a read.
9 Learn your shortcuts for your text-editor. Every text-editor has an abundance of shortcuts and they can be really useful. Duplicating a specific line of code. Jumping to a certain section with the press of one button. It sounds ridiculously juvenile, but it doesn’t take long to learn and it will speed up your work flow considerably.
I use Atom and here is a cheat sheet for this. There will be equivalent for your text-editor. In Atom you can also pin the keybindings to the side so you have a constant visual if needed.
10 Grab yourself a professional photo editing program. Personally, I think Adobe is too bloated and expensive for my needs. If you already own it then fantastic, it is still the industry standard. However, there are two very good products I would highly recommend that can totally replace Adobe straight away. They are both affordable and at present do not require further payment for updates. Affinity Photo and Affinity Designer.
At some point, you will need to get your hands on these because you will come across a time when you need to edit a photo, make an icon or simply adjust something digital.
11 Learn about white space, fonts, and colors. Starting out in coding is hard as there is simply so much to know. When making projects it is even harder because no one trains you in the visual components of coding. Something I have noticed again and again when viewing people’s tribute pages and portfolios on freecodecamp is the desire to use plenty of images and color. Basically to express. Unfortunately, it is often tragically overly done.
Now I don’t mean to be critical — not at all. I admire everyone’s effort and I am very far away from getting this myself. But understanding this triad of white space, fonts, and colors is… oh so vital. Learning the relationship between fonts and the partnering of colors is the backbone and foundation of design. White space is also pivotal because it defines your layout and the visual cues for the reader.
For all your font needs check out this website — it is massive.
This website covers a pretty big catchment area for color and color palettes. Also, this Medium post is brilliant about color.
Once again this article is designed for the newbie starting out. If you have any further questions please feel free to ask.
All the best in your coding everyone. Until next Sunday….
