A 30-day study plan for HTML and CSS
AdvertisementCan you learn the basics of web pages in a month? You can learn enough HTML and CSS to build and style a real page, if you work steadily. The free HTML course has 31 lessons and the CSS course has 29, 60 in total. At about 10 minutes of reading per lesson plus time to type and experiment, two lessons a day for 30 days covers everything with room for projects and revision. This plan lays out the schedule day by day. Adjust it to your own time, but keep the order.
Before you start
- A computer with a modern browser and a code editor (any plain-text editor works; one that highlights HTML and CSS is nicer).
- A folder for the plan, with a subfolder for each day. Save every example you type.
- A free account on this site, if you want your progress saved across devices and to take the exams.
- Time: about 60 to 90 minutes a day. Less is fine; it just stretches the plan.
The rule for the whole plan: type everything, never paste. Reading code teaches recognition; typing it teaches writing.
Week 1: HTML foundations (days 1 to 7)
| Day | Lessons | Practice |
|---|---|---|
| 1 | What HTML is and how a browser reads it; Build your first web page | Make index.html with a heading and a paragraph; open it in the browser |
| 2 | Elements, tags and nesting; Attributes | Add a few elements and attributes; break the nesting on purpose and see what happens |
| 3 | Comments and whitespace; Headings and paragraphs | Write a short page about yourself with three headings |
| 4 | Text meaning (bold, italic and others); Links | Link three pages together |
| 5 | Lists; Quotes and code | Add a list of hobbies and a quote |
| 6 | Images; Image sizes and formats | Add two images with alt text |
| 7 | Review day | Redo the quizzes of the week; rebuild the page from a blank file |
Checkpoint: you can write a page with headings, paragraphs, links, lists and images without looking anything up.
Week 2: HTML structure, tables and forms (days 8 to 14)
| Day | Lessons | Practice |
|---|---|---|
| 8 | Figures and captions; Audio and video | Add a captioned figure |
| 9 | Embedding maps and videos; Header, nav, main and footer | Rebuild your page with proper page structure |
| 10 | div and span; Semantic HTML; Block and inline elements |
Replace generic divs with semantic elements |
| 11 | Tables; Table headers and captions | Make a timetable |
| 12 | Your first form; Input types | Build a contact form |
| 13 | Labels and accessible forms; Dropdowns, text areas and buttons; Built-in validation | Add labels, a dropdown and required fields |
| 14 | Review day | Redo the week's quizzes; check your form with the keyboard only |
Checkpoint: you can build a structured page with a table and a form that works with a keyboard and a screen reader in mind.
Week 3: finish HTML, start CSS (days 15 to 21)
| Day | Lessons | Practice |
|---|---|---|
| 15 | The head and meta tags; HTML for search engines | Add a title, description and viewport tag |
| 16 | Accessibility basics; Special characters and entities | Check headings order and alt text |
| 17 | HTML project: your profile page | Build it from a blank file; take your time |
| 18 | HTML review; optional HTML exam | If all 31 lessons are done, try the exam |
| 19 | What CSS is; Three ways to add CSS; Selectors | Style your profile page with an external stylesheet |
| 20 | The cascade and specificity; Inheritance | Write three rules for one element and predict which wins |
| 21 | Colours; Units; Fonts and text | Choose a palette and a font pairing |
Checkpoint: a finished HTML profile page, now with its first coloured, styled text.
Week 4: CSS layout (days 22 to 28)
| Day | Lessons | Practice |
|---|---|---|
| 22 | The box model; Margin and padding | Draw the box model for three elements |
| 23 | Borders and rounded corners; box-sizing; Width, height and overflow |
Make a card component |
| 24 | The display property; Flexbox basics |
Put your navigation in a Flexbox row |
| 25 | Aligning with Flexbox; Grid basics | Build a three-column card layout in Grid |
| 26 | Grid areas; Positioning | Lay out a header, sidebar, main and footer with named areas |
| 27 | Responsive design; Media queries; Responsive images | Make the layout work at phone width |
| 28 | Review day | Redo the quizzes of weeks 3 and 4 |
Checkpoint: a page that looks right on both a phone and a desktop.
Final days: polish and the project (days 29 and 30)
| Day | Lessons | Practice |
|---|---|---|
| 29 | Backgrounds and gradients; Shadows; Transitions; Transforms; Animations; CSS variables (split over a long day, or move some lessons to a bonus day) | Add one hover transition and one custom property |
| 30 | CSS project: style a landing page | Build it, test it on a phone and publish it somewhere |
The CSS course's last section has six lessons on polish, which is a lot for one day. If you need more time, run into days 31 and 32; the plan is a guide, not a deadline. Better to understand than to rush.
A daily routine
- Read the lesson (10 minutes). Read the explanation once, then the code.
- Type the examples (15 minutes). Open the live editor on the page, or your own file, and change values.
- Do the quiz and the exercise (10 to 15 minutes). Try before you open the answer.
- Write one line in a notes file about what you learned and what confused you.
- Stop. A fresh mind next day beats an exhausted one tonight.
How to measure progress
At the end of each week, ask yourself and check:
- Can I explain each lesson's main idea in two sentences?
- Can I build the week's checkpoint without opening the lessons?
- Which topic would I least like to explain? Spend the review day on it.
The exams
Both courses end with an exam: 15 questions, 30 minutes and a 70% pass mark, with three attempts per 24 hours. Take the HTML exam after day 18 and the CSS exam after day 30. Read about them in HTML certificate: how the final exam works and CSS certificate: how the final exam works. Do not rush into an exam on the day you finish; leave a day or two for revision. If you pass, show the result properly: How to add your certificate to LinkedIn and your CV.
If you fall behind
You will, probably. Life happens. Do not try to catch up by doubling the next day. Instead:
- Cut the optional practice, not the lessons or the projects.
- Move the whole plan by the days you missed.
- Keep a minimum: even one lesson a day keeps the habit.
- Restart a topic if you lose the thread after a long gap.
What comes next
After HTML and CSS, choose by goal. To make pages interactive, learn jQuery or JavaScript. To build dynamic sites with a database, continue with PHP and MySQL; the 60-day MySQL and SQL plan continues from here. The roadmap shows the best order for all the courses. And the CSS Flexbox cheat sheet and HTML tags cheat sheet are handy references while you work.
Quick answers
Can I really learn HTML and CSS in 30 days? You can learn the fundamentals and build real pages. Mastery takes longer and comes from building more projects.
What if I only have 30 minutes a day? Do one lesson a day and the plan takes about two months.
Do I need to take the exams? No, but they are a good checkpoint.
Should I learn JavaScript at the same time? Wait until the CSS layout lessons are done, so you do not mix too many new ideas.