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
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.
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. HTML and CSS are pieces of a larger puzzle and you are missing a bunch of those pieces.
2. You are 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 VS Code or Atom? Should I be writing with Sass, or vanilla CSS? What the heck is Gulp or Grunt? The longer you dwell on these questions, the less time you will actually be spending writing vanilla 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 both in learning and on the job 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 basics 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. Focus on honing your markup and layout skills.
You can earn a very good living by simply mastering the fundamentals of HTML, CSS and Javascript.
Basic web development is a skillset that is in high demand and there is a big time shortage in the workforce.
A simple method for practicing HTML and CSS
I suggest practicing HTML and CSS by referencing a screenshot of an existing website.
Keyboard shortcuts for taking screenshots:
- 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 and translating it into HTML and CSS.
Why this is an effective method:
- Immediate access to a design
- You get to reference the code as you go
- Get used to using your browser’s dev tools
There are many nuances to writing 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 may be custom fonts you might not be able to replicate.
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.
Diving further into HTML and CSS topics.
If you want to expand your knowledge beyond markup and basic layout techniques – here are a few core topics and resources I recommend.