HTML and CSS Tips From a Newbie

About a month ago I started Microverse’s Technical Curriculum and two days ago I finished its first module, HTML and CSS.

Before this experience, I didn’t have much knowledge about these two technologies. I didn’t have much experience with writing for computers at all. 

As an absolute beginner, I think that starting with the basics of the front end is a good idea even if you’re not planning to touch them ever again. This is because learning them correctly will set you on the right path for the rest of your journey.

When you start writing HTML and CSS, which by the way aren’t considered programming languages but instructions your browser reads to render beautiful websites, you’ll find yourself entering a new world that although at the very beginning may seem daunting, in a matter of a few days you’ll start to recognize as familiar and ever easier to understand.

I think that the most frustrating part of learning HTML and CSS is getting the basics of positioning right. You’ll find explanations of how your browser reads your code from top to bottom and how it is going to be displayed this way. However, soon enough you’ll find that this explanation is too limiting and you’ll find yourself thinking of ways to position your elements in more interesting ways. How about positioning them side to side, fix them on top, center their content and so on.

I’ve come up with a simple list of items newbies should keep in mind when they’re just starting their coding journey and they are the following:

1. Every HTML element should be thought of as a box

This is the first and maybe the most important concept to keep in mind. Whenever you write an HTML element, think of it as a box with some characteristics and attributes you can change to make your page look the way you want it to look. 

Once you start learning CSS you’ll find something called “The Box Model”. It states that every element on your HTML page is wrapped by a series of boxes. At the very center of everything, there’s your content. The first box that wraps it is its padding, followed by its borders and finally its margins. 

Some tools will help you visualize this better. I’ve been using “Pesticide” by Paul Molluzo (https://paul.molluzzo.com) and its been a game-changer for me. This is a Google Chrome extension that’ll highlight all the boxes inside any website and will give you a better outlook of how thing are working. I’d recommend you try it first with some of your favourite websites and then use it to debug your sites once you start coding.

2. Absolute and relative positioning is not the end

The first thing you’re going to learn about positioning is how to position your elements either absolutely or relatively. At first, these concepts do not make any sense. At all. Don’t worry. These properties are only the tip of the iceberg when it comes to positioning. The more you learn, you’ll find that there’s a pretty vast toolset that will help you overcome the limitations of absolute and relative positioning. There’re floats and flexbox, and don’t get me started with grids. They’re awesome and I’ve found myself using them for almost every project I’ve been working on lately. 

However, you do need to learn absolute, relative, fixed and sticky positioning. I found this video

to be a superb resource when I was just starting to learn CSS. It explains the basics of these properties and clears out any confusion you may have had about them. You should repeat it as many times as you need it and work on some projects only using these type of positioning before moving onto learning more interesting tools. It’ll suck big time, but it’ll be worth it later on. 

3. Using linters and validators

I found out about HTML validators and CSS linters while working on my first Microverse project and I wish I knew about them from the beginning. 

These tools will help you to produce code of better quality and one that conforms to styling norms that make it easier to read. For my HTML files, I use the W3C Markup Validation Service (https://validator.w3.org), and for my CSS files I use Stickler (https://stickler-ci.com).

These two tools have helped me a lot to correct the small mistakes that’ll inevitably appear when I work on my projects. Even if you are the type of person that notices every single mistake, it’ll be hard to keep up with them once your files start to increase in size and there are too many lines to account for. My advice is that you get used to using these services or any other tools alike so when your code is audited it is more legible and easier to inspect. 

4. Drawing your projects before coding them

This one is a technique that I’ve applied in many of my projects to visualize them better before jumping into my code editor. When you’re working on complex projects, be it cloning a huge website, or making one from scratch, it is easy to get confused and lost with how many containers you’ll need, where they’re going to go, what positioning technique you’re going to use and so many other factors.

Drawing your websites on a sheet of paper will help you to get an overview of the complexity of the project and at the very least to write a basic skeleton for how you’re going to structure your code. 

This one’s a technique that’s worked for me many times and I hope that works for you as well.

So this is it! This is some of the advice that I’ve come up with after a month and a half of coding HTML and CSS for 8 hours a day 5 days a week. I hope that these little tips work for you and make your journey a bit easier.

Happy coding!