How much HTML and CSS do I need to know?

Just a disclaimer. This is mostly AI generated and here for me to see what posts look like on my blog. The advice is derivative and uninspired.

It’s All About Fundamentals

So you want to be a web developer? That’s great! When starting out it’s easy to get excited about the latest and greatest frameworks like React and Next JS and you’ll feel hurried to learn them as soon as possible.

In modern web development, you probably won’t be writing HTML and CSS from scratch. You will probably be using frameworks and libraries which abstract the HTML and CSS away from you so why not just skip a few steps and learn those?

Well let’s see if we can explain why you might not want to do this. Take a look at the code below:

const WebsiteSection = ({ title, color }) => {
  return (
    <section class="flex flex-col items-center justify-center gap-2">
      <h3 class="font-bold sm:text-lg">{title}</h3>
      <p class="text-gray-900">Welcome to my blog</p>
    </section>
  );
};

This is a super simple React component and uses a popular CSS-in-JS library called Tailwind CSS.

It’s not perfect but it’s a reasonable example of how you might write a component in a modern web application.

Now let’s take a look at roughly the HTML and CSS equivalent:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Document</title>
  </head>
  <body>
    <section>
      <h3>Welcome to my blog</h3>
      <p>Welcome to my blog</p>
    </section>
  </body>
</html>

section {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

h3 {
  font-weight: bold;
  font-size: 1.125rem;
}

p {
  color: #111827;
}

So which one would you prefer to write?

I know the React component is shorter but it’s also a lot more complex when you realise what React is doing for you.

React allows you to write HTML, CSS and JavaScript all in one file and it makes you a more efficient developer.

But it can only make you more efficient once you understand how websites work at a more fundamental level.

How the Web Works

Before you consider diving in to HTML and CSS, it’s important to understand how the web works at a high level.

Brush up on your basic computing knowledge and gain an understanding of how the internet works. You don’t need to be an expert but you should know what a server is, what a client is and how they communicate.

YouTube should have you covered for this. There are a bunch of great videos which explain how the internet works in a way that is easy to understand.

How much HTML and CSS is enough?

If fundamentals are so important, how much time and energy should you spend learning HTML and CSS when starting out?

Well, it’s complicated…

All the websites and roadmaps would have you believe that your learning path will be:

Master HTML
Master CSS
Master JavaScript
Master A JavaScript Framework

But this isn’t a good use of your time and it’s naive to think that you will ever “master” any of these things as they are deeply complicated and ever-changing.

Instead, you should learn enough HTML and CSS to be able to build a few basic websites from scratch. The same websites which you know you could build way faster using a framework.

Actually do build the websites!

By knowing the pain of writing HTML and CSS from scratch you will later understand what the modern tools and frameworks are doing for you while also gaining an understanding of how websites work at a more basic level.

There is a whole bunch of stuff to learn but focus on building things knowing you will continue to learn as you go. The reason project work is so valuable is because the process looks like this:

Flow diagram illustrating how solving coding problems leads to growth

No matter how closely you follow a tutorial and think you have understood it, you will always run into problems when you try to actually implement it yourself.

Solve Problems and Build Projects

Solving problems is when learning happens. Our brains learn better when we apply them to solving problems rather than passively consuming information by reading or watching a video.

It’s also better when someone else is challenging you. You might be tempted to build things which you definitely know how to build like the project a tutorial just walked you through step by step.

Frontend Mentor is a great resource for this. You can get by on the free tier quite easily especially when you’re just starting out.

Frontendmentor give you a design and you try to build it as close to the mockup as possible. You can then compare your solution to the solution of others and see how other people tackled the same problem.

Screenshot of the Frontendmentor website

The link above filters the challenges to only show the free ones and only the ones which require HTML and CSS. They have a bunch of other challenges which require JavaScript which you can tackle later on too.

Taking a HTML and CSS Course

Building projects is all well and good but you aren’t going to be building anything if you don’t actually know how to write HTML and CSS in the first place!

Taking a course can give you a guided experience when learning and the core concepts of HTML and CSS haven’t changed all that much in the last 10 years so you don’t have to be too picky about which one you take.

FreeCodeCamp is a great resource for learning web development and they have a (obviously from the name) FREE course on HTML and CSS and pretty much everything else you need to get started.

That said, try to find a course that won’t waste your time. It’s better to find one which runs through HTML and CSS quickly and then gets you building things as soon as possible.

You can find out anything else you need by looking at documentation such as MDN once you have the basics down. Start looking at documentation as early as possible as developers spend a lot of time reading documentation.

Some Tips for your HTML and CSS Learning

Semantic HTML

While learning, pay attention to semantic HTML which is modern HTML that is written in a way that is easy to understand. This is important for accessibility and search engine optimisation (SEO).

<div>
  <div>
    <p>Some text</p>
  </div>
</div>

<article>
  <section>
    <p>Some text</p>
  </section>
</article>

Assistive technologies, such as screen readers, rely on semantic tags to interpret and convey the meaning of the content to users with disabilities. By using appropriate semantic elements like nav, article, header, etc, developers can create websites that are more inclusive and accessible to a wider audience.

It’s not just about tags either, you should be sure to use ‘alt’ attributes on images and ‘label’ elements for form inputs to bring more context to your content.

Search engines like Google also use semantic HTML and accessibility practices in your markup to understand the content of a page and will rank sites higher if they are more accessible and easier to understand.

Implementing semantic HTML and building with accessibility in mind is a no-brainer since your site can appeal to more users, your markup will be more readable to you and other developers and your site will rank higher in search engines.

I would say not to fret too much about this when you’re just starting out but when you start building more real world projects which you want to be out in the world and consumed by people, it’s something you should definitely start considering.

Responsive Design

Learn about responsive design and how to make your websites look good on all devices. This is a fundamental skill for web developers since people consume the web on computers, phones, tablets, watches and even fridges!

Media queries could be a good place to start. They allow you to use different styles based on different conditions such as screen size by using “breakpoints”.

// Sets the background of the body to light green by default

body {
  background-color: lightgreen;
}

// Make the background color light blue on screens smaller than 600px

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

In addition to media queries, Flexbox and CSS Grid are also indispensible tools for responsive design and laying out your site in general. When you first try to center a div on a page you will understand why Flexbox is so important.

Browser Developer Tools

Use the browser when you’re making your projects to see how your website looks on different devices at different sizes and be mindful when building your sites that they should look good on all devices.

It’s often easier to build for smaller mobile devices first and then add styles for larger screens as you go.

Most browsers have developer tools which allow you to simulate different devices and screen sizes like device mode in Chrome.

Do Not Rush

This is the most important tip, I can give you on learning not just HTML and CSS but anything. Rushing through tutorials and courses will not help you to learn. You won’t retain your knowledge and you won’t be able to solve real world problems.

If you feel like you know enough, move on but don’t be afraid to go back and revisit things you don’t have the best understanding of. Don’t be naive and think you have mastered something, no-one knows everything and even the most experienced developers have to look things up (a lot!).

Conclusion

Try to build 3 - 4 projects using just HTML and CSS before moving on to learning JavaScript which is arguably the most important part of web development.

The previously mentioned Frontend Mentor site is a good place to find projects but try to choose varied projects to make sure you’re using all of the skills you have learned. Try to incorporate multiple pages, forms (even if they don’t work yet), images and other media and make sure your sites are responsive.

You should spend way more time on CSS than HTML. CSS has a lot more depth and have evolved a lot more over time as the web has changed and grown.

The real meat and potatoes of modern web development though is JavaScript which is a programming language rather than a markup language like HTML and CSS.

Happy learning! 🚀