The order, and why
These three technologies do different jobs, and they build on each other in a clear sequence:
- HTML describes what is on a page: the headings, text, links, images and forms.
- CSS describes how it looks and how it adapts to different screens. It only makes sense once you know the elements it targets.
- MySQL stores the data a site or app works with, such as customers, products and orders. It is separate from the page itself.
HTML and CSS together are the front end: what a visitor sees. MySQL is part of the back end: where information lives. To connect the two, a real website uses a server-side language such as PHP, Python or Node.js. That is a separate step, and it is covered at the end of this page. You can learn MySQL on its own, so if you care more about data than design, it is fine to start there, but most beginners are happiest going in the order above.
How long will it take?
The table is a suggestion, not a promise. It adds up the reading time of the lessons on this site and assumes 5 lessons a week, which is a gentle pace of a few short sessions. Practising, which is where the learning happens, takes longer than reading. Go faster if it feels easy and slower if it does not.
| Stage | Lessons | Reading time | At 5 a week |
|---|---|---|---|
| HTML | 31 | about 6 hours | about 7 weeks |
| CSS | 29 | about 6 hours | about 6 weeks |
| MySQL | 50 | about 12 hours | about 10 weeks |
| All three | 110 | about 24.5 hours | about 23 weeks |
HTML: your own profile page, built from an empty file
- 31 lessons
- about 6 hours of reading
- about 7 weeks
- Beginner
HTML is the structure of every web page: headings, paragraphs, links, images, tables and forms. Everything else on the web is built on top of it, so it comes first.
Getting started
You canWrite and open your first page, and explain what an element, a tag and an attribute are.
PractiseMake a page about a hobby using only a text editor. Break it on purpose (delete a closing tag) and see what the browser does.
Text and links
You canStructure an article with headings, paragraphs, lists, links and emphasis that carries meaning.
PractiseTurn a recipe or a short essay into a properly structured page with a link to another page you wrote.
Images and media
You canAdd images, audio, video and embeds with sensible sizes and text alternatives.
PractiseAdd three images with alt text to your page, then check what a screen reader would announce.
Page structure
You canLay a page out with header, nav, main and footer and choose semantic elements over generic ones.
PractiseRewrite a page made only of div elements using semantic elements.
Tables
You canPresent real data in tables that are readable to everyone.
PractiseBuild a timetable or price list with a caption and proper header cells.
Forms
You canBuild forms with labels, the right input types and built-in validation.
PractiseMake a contact form with five fields and try to submit it with bad data.
Going further
You canPrepare pages for search engines and accessibility, then finish with the profile page project.
PractiseComplete the project, then run the page through your browser's accessibility tools.
You are ready to move on when
You can build a complete, valid page by hand without copying one, and your page works with only a keyboard. Then take the HTML course final exam if you want a certificate to show for it.
CSS: a styled, responsive landing page
- 29 lessons
- about 6 hours of reading
- about 6 weeks
- Beginner
CSS controls how HTML looks and how it adapts to a phone or a desktop. Learn it after HTML, because every rule you write targets elements you already understand.
Getting started
You canConnect a stylesheet, write selectors and explain the cascade, specificity and inheritance.
PractiseStyle your HTML profile page with an external stylesheet. When a rule does not apply, work out why before changing it.
Colour and text
You canChoose colours and units and set readable text.
PractiseGive your page a palette of three colours and check the text contrast.
The box model
You canControl spacing and size with margin, padding, borders and box-sizing.
PractiseUse your browser's inspector to look at the box of five elements, then change their spacing.
Layout
You canBuild layouts with display, Flexbox, Grid and positioning.
PractiseBuild a navigation bar with Flexbox and a three-card section with Grid, without copying code.
Responsive design
You canMake a layout adapt with media queries and flexible images.
PractiseOpen your page at phone width and fix everything that breaks.
Polish
You canAdd backgrounds, shadows, transitions, transforms, animations and CSS variables.
PractiseAdd one hover effect and one small animation, then respect users who prefer reduced motion.
Project
You canCombine everything in one landing page.
PractiseBuild the landing page project, then show it to someone and ask what is unclear.
You are ready to move on when
You can style a page from scratch, explain why a rule wins or loses, and make a layout that works from a phone to a wide screen. Then take the CSS course final exam if you want a certificate to show for it.
MySQL: ten business reports for an online store
- 50 lessons
- about 12 hours of reading
- about 10 weeks
- Beginner to intermediate
Websites and apps need to store and find data. MySQL is a database server that does exactly that, and SQL, the language you use with it, carries over to many other databases.
Getting started
You canInstall MySQL, connect, and load the sample shop database.
PractiseInstall it, load the sample database, and run SHOW TABLES and DESCRIBE on every table.
Reading data
You canRead, filter, sort and search data with SELECT.
PractiseAnswer ten questions about the shop (for example, which products cost over 50?) before reading the answers.
Changing data
You canInsert, update and delete rows without damaging the rest of the table.
PractiseBefore every UPDATE or DELETE, write the same WHERE as a SELECT and look at the rows first.
Functions
You canUse string, number, date and conditional functions.
PractiseWrite a report that shows each customer's full name in capitals, their sign-up month and a status label.
Summarising data
You canCount, total and average with GROUP BY and HAVING.
PractiseFind revenue per category and the customers with more than one order.
Combining tables
You canJoin tables, combine results and use subqueries.
PractiseDraw the shop's tables on paper, then write each join by following the arrows.
Building databases
You canCreate tables with the right types, keys and constraints, and design them sensibly.
PractiseDesign a small library database on paper first, then create it with foreign keys.
Faster and safer
You canUse indexes, EXPLAIN, views and transactions.
PractiseCreate a table with many rows, time a query before and after adding an index, and read the EXPLAIN output.
Advanced and practical
You canUse window functions, CTEs, JSON, routines, triggers, backups and safe application code, then finish the project.
PractiseFinish the store project, then take a backup and restore it into a second database to prove it works.
You are ready to move on when
You can design tables, write queries across several of them, explain a query plan and run a database safely. Then take the MySQL course final exam if you want a certificate to show for it.
Habits that make it stick
- Type the code, do not paste it. Typing makes you notice details, and every typo teaches you to read error messages.
- Break things on purpose. Remove a bracket, rename a column, and see what happens. You learn what a feature does by seeing what stops working.
- Build small things you care about. A page about your hobby teaches more than a perfect tutorial copy.
- Little and often. Thirty minutes four days a week beats one long weekend session.
- Look things up. Professionals check the documentation all the time. The MDN Web Docs cover HTML and CSS, and the MySQL reference manual covers the database.
- Explain it out loud. If you cannot explain a concept simply, read the lesson again.
One project that uses all three
When you finish the three courses, build a tiny catalogue site for something you know well, such as books you own, recipes or a football team. Use MySQL to design the tables and write the queries you would need, HTML to write the pages that show the results, and CSS to make them look good on a phone. At first the page can use fixed example data pasted in from your query results. Connecting it to a live database is the next step.
What comes after
To make pages react to what a visitor does you need JavaScript, and to connect pages to a database you need a server-side language such as PHP, Python or Node.js. A JavaScript course is on the list of planned courses on the Learn page but is not published yet, so this roadmap stops where the available courses stop. The last MySQL lesson, Using MySQL from code and avoiding SQL injection, shows what connecting looks like in PHP, Python and Node.js.
Curious how we got here? Read the history of HTML, CSS and MySQL to see why the web works the way it does.
Ready to start? Begin with the HTML course.