7 Useful Tips for HTML & CSS Rookies

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.

If you’re working on a news website and you have a section for sports news, you can name the class of the container sports or sports-container instead of news-section-4 or bottom-news-container or even something more absurd. Whenever you intend to make changes weeks or months later, you can easily identify the section you’re styling since the name is unique. There is a popular technique for naming classes known as The Block, Element, Modifier methodology, (commonly referred to as BEM) which you can read about here.

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.

You don't need to do much to get started with git, the best version control tool in the market. After installing git, you only need a few git commands to get you started.

• Make your repository(folder) a git repository

git init

• After making modifications to your files and you would like to save the state of that file

git add FILE(S)
git commit

• If you want to add new features or fix an issue, it is best practice to create a new branch like this

git checkout -b FEATURE_BRANCH

• After completing the feature or fixing the bugs and you would like to add those changes

git checkout MAIN_BRANCH
git merge FEATURE_BRANCH

Alternatively, if you are not too familiar with the command line and you prefer a GUI, there are good ones i can recommend like

1. sublime merge
2. gitkraken
3. git-cola

There are hundreds of resources available to learn git, but i recommend following the path based on your preferred mode of learning from this link

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.

Happy Coding!