Programming and IT

How to learn HTML and CSS from scratch

HTML describes what a page is made of, CSS describes how it looks. They are not programming languages in the strict sense, but no website does without them, and they are a convenient first step into frontend work. You can learn the basics of layout in two or three months if you build real pages from the first week instead of only reading the reference.

Updated
In this article

Tools: a browser and an editor#

You need nothing but a browser and a code editor. VS Code with a live preview extension works well. Your main debugging tool is the browser's developer tools (F12): they show the element tree, the styles applied to each element and the size of every box. Get used to opening them whenever something on the screen looks odd.

A minimal document looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>My first page</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello</h1>
  <p>This is a paragraph with a <a href="https://developer.mozilla.org/">link</a>.</p>
</body>
</html>

Step 1: semantic HTML (2–3 weeks)#

Headings h1–h6, paragraphs, lists, links, images with an alt attribute, tables, forms with a label for every field. Then the meaningful containers: header, nav, main, article, section, footer. The rule: you choose a tag by what the content means, not by how the tag looks by default. A button is a button, not a div with a click handler: it can be pressed from the keyboard, and screen readers understand it.

Check your markup with the W3C validator — it points out unclosed tags and nesting errors.

Step 2: CSS basics (3–4 weeks)#

Selectors (by tag, class, id, attribute, pseudo-classes like :hover), the cascade and specificity, inheritance. The box model: content, padding, border, margin, and the box-sizing property. Units: px, rem, %, vw. Colours, fonts, backgrounds. Most "why did this box end up over there" questions are answered by the box model, so learn it thoroughly.

Step 3: layout with Flexbox and Grid (3–4 weeks)#

Flexbox lines elements up in a row or a column: menus, cards in a row, centring. Grid handles two-dimensional layouts: the page structure, a gallery. Practise by rebuilding interfaces of sites you know: a header with a menu, a grid of product cards, a footer with several columns.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

Step 4: responsive design and accessibility#

Media queries with @media, the mobile-first approach, flexible images. Check your page at 320 pixels wide: nothing should stick out past the edge. Accessibility means text contrast, a visible focus outline, a sensible heading order and labels on form fields. The audit built into the browser (Lighthouse in Chrome, for example) points out the main problems.

A layout portfolio#

Three or four pages built from designs: a one-page landing, an online shop page with a product grid, a sign-up form, a responsive blog. Free practice designs are easy to find — Frontend Mentor publishes them together with briefs. Put each piece in its own repository and publish it on a free static hosting such as GitHub Pages.

How to tell your layout is right#

  • Compare the page with the design by laying a screenshot over it: differences in spacing show up immediately.
  • Go through the page with the keyboard only — press Tab to reach every link and button.
  • Run the HTML through the validator and the CSS through a linter.
  • Open the page in two different browsers and on a phone.

Step-by-step plan

  1. Weeks 1–3 — HTMLDocument structure, text, links, images, tables, forms, semantic tags.
  2. Weeks 4–7 — CSS basicsSelectors, specificity, the box model, units, fonts and colours.
  3. Weeks 8–11 — Flexbox and GridRebuild layouts you know: a menu, cards, a footer.
  4. Weeks 12–13 — responsive design and accessibilityMedia queries, mobile version, contrast, focus, a page audit.
  5. PortfolioThree or four pages built from designs, each in a repository with a published version.

Start learning this in your own space

The plan goes into your repository: tick off stages, keep notes — the change history shows how far you have come.

Start the plan

Check yourself

1.Which HTML tag creates a link?

2.A box has width: 100px, padding: 10px and border: 2px on all sides, with the default box-sizing (content-box). What is its full width on screen in pixels, not counting margin?

3.Which of these selectors has the highest specificity?

Sources

Was this helpful?

More articles

Programming and IT How to learn Python from scratch Python is a good first programming language: code reads almost like text, and the standard library covers most everyday tasks. This plan takes you from installing the interpreter to your own scripts covered by tests in about four months, at roughly an hour a day. Programming and IT How to learn SQL from scratch SQL is the query language of relational databases. Developers, analysts, testers and managers who want to pull numbers themselves all need it. Basic queries take a few weeks to learn; working confidently with complex reports takes two or three months of practice. Below is the order of topics and ways to train on a real database. Programming and IT How to learn Linux from scratch Linux runs most servers, containers and countless devices, so developers, testers, analysts and system administrators all need the command line. The easiest way to learn it is not by reading lists of commands but by working in the terminal every day and solving small practical tasks. Below is a sequence of topics for two to three months. Programming and IT How to learn JavaScript from scratch JavaScript runs in every browser and, through Node.js, on the server too. It is easy to start — you can run code right in the browser console — but it has plenty of surprising corners, from type coercion to asynchronous code. The plan below takes three to four months and assumes you already know basic HTML and CSS or are learning them alongside. Programming and IT How to learn Java from scratch Java is a strictly typed language behind banking systems, the servers of large services and Android apps. The strictness slows you down at first, but the compiler catches many mistakes before the program ever runs. This plan takes about six months at an hour a day and leads from your first program to a small backend application. Programming and IT How to learn machine learning from scratch Machine learning means building models that find patterns in data and make predictions from them. Starting with neural networks is tempting, but it is safer to go from the bottom up — from Python and math to classic algorithms, honest evaluation and only then deep learning. Without a technical background, expect six months to a year of regular study.

More solutions

Programmer portfolio An employer looks at a portfolio for a couple of minutes. In that time they need to see what you can do, how you write code and whether you finish what you start. A few finished projects with clear READMEs and an honest history of the work show that best. Company knowledge base A company knowledge base rarely dies for lack of tools. It dies because nobody owns the pages and they quietly go out of date. Here is how to set up a base that has owners, a history and a clear way to change it. Confluence alternative Confluence keeps documentation as pages inside spaces. In Skillok documentation is a set of markdown files in a repository, and you work with it the way you work with code — edit, history, review. That is stricter and more transparent, but there is no visual page builder and no real-time co-editing.