How do I get better at HTML and CSS?

Is learning HTML and CSS “easy” or “hard”?

HTML and CSS are easy-to-comprehend languages. They are declarative and straightforward.

However, they are not...

  • easy-to-implement
  • easy-to-write-from-memory
  • easy-to-always-find-the-simplest-and-most-scalable-solution

In fact, these things are quite difficult and take time and experience to go from to novice to mastery.

In other words, HTML and CSS can take a relatively short time to “learn”, but can take a long time to “master”.

Most beginners are after a sense of confidence. They want to write “good code.”

Theory vs Practice

Musicians get better not just by reading about theory, but by practicing with scales, songs, and improvisation and eventually being able to perform in real time.

If you just got done reading introductory HTML and CSS theory, you want to know how to practice so you can perform in real time, in order to feel confident enough to take on a freelance project or land that first coding job.

Also, it's vital that you get quality instruction and go beyond just surfing Stack Overflow and W3Schools code snippets.

Comprehensive front-end development courses can go a really long way to increaing your confidence.

But before I offer any more advice on how to get better, let me make a few points regarding why I believe you may feel stuck.

1. You don’t have any content or designs to work with.

HTML is a method of marking up information comprised of words and images. Those words and images are part of a message which is trying to reach someone for a specific purpose, such as to sell something, or share information.

It’s a designers job to arrange those words and images in order to best convey the message through design principles.

Finally, once a design is in place, it’s your job to write the HTML and CSS in order to bring the design to life on the screen.

It’s no wonder you feel stuck! There is a lot of work to be done before you even touch any code.

So if you just sit down with a code editor and browser open and can’t figure out what to do next, don’t worry. I wouldn’t know what to do either. It’s not your fault. HTML and CSS are pieces of a larger puzzle and you are missing a bunch of those pieces.

2. You are too worried about what tools you should implement into your workflow.

Preprocessors, task runners, browsers, code editors. It can all feel overwhelming when you are just starting out. Should I use Gulp or Grunt? Should I use Sublime Text or Notepad++ or Atom. Should I go with Sass or LESS? The longer you dwell on these questions, the less time you will actually be spending writing HTML and CSS.

My advice? Stick with a code editor and browser to start. Don’t even worry about anything else. Why?

Your work will inform what tools you need to use.

There is no right or wrong tool. The problems you face as you begin practicing will inform you of the extra tools you may want to use. That’s why these tools were developed in the first place.

For example, maybe you built a small site and want to document the progress or share with others. That would be a great time to learn some basic of Git and Github.

Or, maybe you are becoming frustrated with how large your CSS file is getting. That would be a great time to learn some Sass and begin separating your CSS into smaller Sass files.

3. You are thinking of too large a project to build.

Forget about making the next Facebook. Forget about any type of database driven dynamic website. You need to be focusing on honing your layout skills.

How to take action

I suggest practicing HTML and CSS by referencing a screenshot of an existing website. Preferably a site which is responsive so you can take a screenshot of the layout on small screens, and another at a noticeable change in breakpoint for slightly larger screens.

Mac - Command-Shift-4
PC - PrintScreen

You don’t have to try and build the entire site. Just work on a small section, or perhaps just the navigation. The important thing is to get used to referencing a design.

Get used to running into problems and trying to solve them.

Try applying the Pomodoro Technique while you are writing your HTML and CSS. This will help you from becoming overwhelmed and get you out of mental ruts while you work.

The best part about this simple practice technique is you get to take a peak at the code from the website to reference when you are done or when you get stuck. But just keep in mind there are different ways to write HTML and CSS, so don’t feel discouraged if you come up with solutions different than the site’s source code.

Also, bear in mind there will custom fonts you might not be able to replicate - that's ok. 

The simple steps of analyzing the design, writing the HTML and CSS, and seeing it come to life in your own browser goes a REALLY long way toward increasing your confidence and muscle memory. At the same time, it will help you get used to the tools you are using, namely the browsers inspector tools and the code editor.

And most importantly - it will help you get unstuck.