Learning track

Web design

Web design is two different jobs sharing one name: building something that works, and building something that looks right. This path starts with the working part, because a look sitting on a broken structure cannot be rescued later.

  • 12 lessons
  • Free, no signup

From nothing to a real site, one rung at a time

  1. 1

    Understanding how a website works

    Domain, server, browser and the round trip that happens between them.

  2. 2

    Building a page with HTML

    The semantic skeleton, and what each tag tells the browser and the screen reader.

  3. 3

    Look and behaviour: CSS and JavaScript

    Layout, responsiveness, and the amount of JavaScript that is genuinely needed.

  4. 4

    Design decisions: interface, experience, accessibility

    Where taste ends and rules begin.

  5. 5

    A real, published site

    WordPress or a builder, plus the checklist to clear before launch.

No rung takes a fixed week. How fast you climb depends on how often you build something and break it, not on how many videos you watch.

The path, step by step

Lessons are ordered so each stands on the previous one. You can also jump in anywhere.

  1. 1How a website actually worksWhen you type a site address, your browser first translates the domain name into a numeric address, connects to the computer sitting behind it, receives a block of HTML text and builds the page from that text. A website is that short round trip, and every problem you see has happened in one link of that chain.Beginner
  2. 2Learn HTML from scratchHTML is the language of page structure, not a programming language: with it you say this is a heading, this a paragraph, this a list, this a link. To start you need only a text file with an html extension and a browser, and your first page gets built in the first ten minutes.Beginner
  3. 3Learn CSS from scratchCSS decides how the thing HTML built should look: colour, spacing, size and where each element sits. Every rule has three parts, a selector that says which element, a property that says what, and a value.Beginner
  4. 4JavaScript for beginnersJavaScript gives a page behaviour: reacting to what the visitor does, changing content without a reload, and fetching data from a server. The skeleton of a page is HTML and its look is CSS; JavaScript is only needed where the page has to do something.Beginner
  5. 5What is responsive designResponsive design means one page, one URL and one set of content whose layout changes with the width of the viewport, instead of separate versions for mobile and desktop. The widths where the layout changes do not come from a list of devices; they come from the places where your own layout breaks.Beginner
  6. 6Principles of user interface designA good user interface is one where the user understands the next step without thinking about it, and four things build that: hierarchy, contrast, spacing and consistency. The first three can be measured, and the fourth is the one that does more work than creativity on a page meant to sell.Beginner
  7. 7What is user experienceUser experience is the whole path a person travels to reach their goal, from the moment they hear your name to the moment they finish or give up. The user interface is only the surface of that path; the experience is the path itself, including every step in it that is unnecessary, unclear or tiring.Beginner
  8. 8WordPress for beginnersWordPress is a content management system: instead of coding every page, you write the content in a dashboard and WordPress turns it into a page. To start you need three things, a domain, hosting and about half an hour; the rest of the road is a set of choices, and this lesson puts them in order.Beginner
  9. 9Site builder or custom buildA site builder and a custom build are two correct answers to two different questions: one buys speed to a first version, the other buys control and ownership. If you are not yet sure what exactly the site has to do, a builder is the better choice; if your requirement is clear and falls outside the ready made feature list, go custom.Beginner
  10. 10What web accessibility isWeb accessibility means building a page that also works with a keyboard, with a screen reader, and for an eye that sees colour differently. Most of it is not hard: correct HTML, enough contrast, a focus state you can see, and images that carry alt text.Intermediate
  11. 11The website launch checklistA launch checklist is not a list of good practice; it is a list of the things that get more expensive after launch or never come back at all. It has four columns, technical, content, legal and measurement, and its most important item is a four letter tag left over from the staging version.Intermediate
  12. 12AI in web designAI today drafts a page in minutes and stops there: what it hands you looks like a thousand other pages, because it learned from them. Our position is simple, draft with a model and ship with human judgment, and the hard part of the work is exactly that judgment.Intermediate
A building model split in half, one side a bare white frame, the other clad in red, green and blue glass

The order of these lessons comes from a simple observation: someone who learns HTML first and reaches for a site builder afterwards understands what they are doing, while someone who starts the other way round has no tools for the first real problem they hit. So we begin with what happens when a site opens, then the language of page structure, then look and behaviour, and finally WordPress and launching.

This path will not turn you into a programmer, and it is not meant to. Its goal is that you can build one real page, read and understand someone else code, and know where to look when something breaks. For most people who want their own site, those three are enough.

One thing rarely said out loud: for plenty of businesses a site builder is the right answer and nobody needs a custom build. The lesson on that question says where the builder is the correct choice and where it is not, instead of knowing the answer in advance.

Real follow-up questions

Do I have to know how to code to build a site?

To build one, no. To understand it, yes. WordPress or a builder gets a site running without a line of code. The difference between someone who has read HTML and CSS and someone who has not shows up the day a theme misbehaves or the page gets slow.

Should I start with a site builder or write code?

If your goal is getting your own site up, start with a builder or WordPress and read HTML alongside; you see something that works sooner. If your goal is working as a designer, start from code, because a client needs you exactly where the builder runs out.

How long does learning web design take?

The first page you build yourself gets built on day one. What fills the gap between that page and a site that really works for a paying client is the number of projects you broke, not the hours of video you watched. Anyone quoting you a firm number is selling a course.

This path is written for someone who wants to build it themselves, or to understand it. If you do not have the time and would rather hand the work over, see the web design service page