Beginners1:1 mentoring

HTML and CSS

Build clean, responsive web pages from scratch, from your first heading to flexbox and grid layouts, at your pace.

Level:: Beginner
Format:: 1:1 online mentoring

Free, no-obligation chat · Affordable plans that fit your budget · Start this week

1:1 personal attentionOne mentor, one student, at your pace.
Flexible timingsSessions that fit your week and time zone.
Affordable plansPlans that fit your budget.
Practise between sessionsShort problems that build confidence.

About this course

Learn HTML and CSS online

Every website is built on HTML and CSS. They look simple, yet beginners often struggle with the same things: why an element will not centre, how margins collapse, what the box model really does, and why a page looks fine on a laptop but breaks on a phone.

This course follows the standard HTML and CSS curriculum: document structure and semantic elements, text, links, images and forms, the cascade and selectors, the box model, flexbox, grid, responsive design with media queries, and accessibility. Each module lists its topics and what you will be able to do at the end.

Right now our free self-study lessons cover Java and Python, so HTML and CSS is taught through affordable 1:1 online mentoring: a mentor explains each idea, reviews your code and works at your pace. Message us on WhatsApp or email, or fill in the short form, for a free, no-obligation chat. We will suggest a plan that fits your budget and flexible timings in your time zone, and you can start this week.

Who this course is for

Complete beginners who want to build their first web pages
Students taking a web design or computing course
Career changers starting a front-end learning path
Designers who want to turn layouts into working code
Small business owners who want to understand and edit their own site

Outcomes

What you'll learn

Structure a page with semantic HTML elements
Add text, links, images, lists, tables and forms correctly
Style pages with selectors, the cascade and specificity
Explain and use the box model, margins, padding and borders
Lay out pages with flexbox and CSS grid
Make a page responsive with media queries and fluid units
Write accessible pages with good contrast, labels and alt text
Debug layout problems using the browser developer tools

Skills you'll gain

HTML5
CSS3
Semantic markup
Flexbox
CSS grid
Responsive design
Media queries
Accessibility
Forms
Developer tools
Typography
Git basics

Detailed syllabus

HTML and CSS syllabus

Every module lists its topics and what you will be able to do. Your mentor plans sessions around them and your own goals.

Module 1
How the web and a web page work
What a browser does with HTML and CSS, and the tools you need.
- Browsers, servers and URLs
- HTML, CSS and JavaScript roles
- Setting up a code editor
- Creating and opening an index.html file
- The browser developer tools
- Folder structure for a small site
By the end of this module you can
- Create a page and view it in a browser
- Explain what HTML and CSS each do
Covered in 1:1 mentoring sessions
Module 2
HTML document structure and text
The skeleton of every page and the elements for text content.
- DOCTYPE, html, head and body
- Title, meta charset and viewport
- Headings and paragraphs
- Emphasis, strong and line breaks
- Ordered and unordered lists
- Comments
- Character entities
By the end of this module you can
- Write a valid page skeleton from memory
- Mark up an article with headings, paragraphs and lists
Covered in 1:1 mentoring sessions
Module 3
Links, images and media
Connecting pages and adding pictures, audio and video.
- Anchor elements and href
- Relative and absolute paths
- Linking within a page
- Images, alt text and image formats
- Figure and figcaption
- Audio and video elements
- Favicons
By the end of this module you can
- Link pages together with correct paths
- Add images with useful alt text
Covered in 1:1 mentoring sessions
Module 4
Semantic HTML, tables and forms
Choosing meaningful elements and collecting user input.
- header, nav, main, section, article, aside, footer
- Tables with thead, tbody and th
- Form, input types and labels
- Textarea, select and buttons
- Radio buttons and checkboxes
- Built-in validation attributes
- Fieldset and legend
By the end of this module you can
- Build a page with a meaningful structure
- Create an accessible, validated contact form
Covered in 1:1 mentoring sessions
Module 5
CSS basics: selectors and the cascade
Connecting CSS to HTML and understanding which rule wins.
- Inline, internal and external styles
- Element, class and id selectors
- Combinators and attribute selectors
- Pseudo-classes and pseudo-elements
- The cascade, specificity and inheritance
- Colours, units and custom properties
- Reading and fixing conflicting rules
By the end of this module you can
- Select any element you need
- Explain why one rule overrides another
Covered in 1:1 mentoring sessions
Module 6
Text, colour and the box model
How every element is sized and spaced.
- Fonts, web fonts and typography
- Line height, letter spacing and alignment
- Content, padding, border and margin
- box-sizing: border-box
- Margin collapsing
- Display: block, inline and inline-block
- Backgrounds, borders and shadows
- Overflow
By the end of this module you can
- Predict the size of an element from its box model
- Style text and cards that look consistent
Covered in 1:1 mentoring sessions
Module 7
Layout with flexbox
One-dimensional layouts that adapt to their content.
- Flex container and flex items
- Direction, wrap and gap
- justify-content and align-items
- flex-grow, flex-shrink and flex-basis
- Centring content
- Navigation bars with flexbox
- Order and alignment of single items
By the end of this module you can
- Build a navigation bar and a card row with flexbox
- Centre content both ways without guessing
Covered in 1:1 mentoring sessions
Module 8
Layout with CSS grid
Two-dimensional page layouts.
- Grid container, rows and columns
- fr unit and repeat()
- minmax and auto-fit
- Placing items by line and area
- Named grid areas
- Gaps and alignment
- Choosing grid or flexbox
By the end of this module you can
- Lay out a full page with a grid
- Pick between flexbox and grid for a job
Covered in 1:1 mentoring sessions
Module 9
Responsive design
Pages that work from a small phone to a wide desktop.
- Mobile-first thinking
- The viewport meta tag
- Media queries and breakpoints
- Fluid widths, rem, em, vw and clamp()
- Responsive images with srcset and picture
- Container-friendly layouts
- Testing at different screen sizes
By the end of this module you can
- Make a page usable on a 320px wide screen
- Add breakpoints that improve, not break, the layout
Covered in 1:1 mentoring sessions
Module 10
Positioning, transitions and polish
Finishing touches that make pages feel professional.
- Position: relative, absolute, fixed and sticky
- z-index and stacking
- Transitions and hover states
- Transforms
- Simple keyframe animations
- Respecting reduced motion
- Dark mode with prefers-color-scheme
By the end of this module you can
- Add subtle, accessible interaction to a page
- Fix common overlap and stacking problems
Covered in 1:1 mentoring sessions
Module 11
Accessibility and good practice
Pages everyone can use, written cleanly.
- Colour contrast
- Keyboard focus and focus styles
- Labels, alt text and ARIA basics
- Heading order and landmarks
- Validating HTML and CSS
- Naming and organising CSS
- Performance basics for images and fonts
By the end of this module you can
- Check a page for common accessibility problems
- Organise a stylesheet so it is easy to maintain
Covered in 1:1 mentoring sessions
Module 12
Capstone: build and publish a page
Bring everything together in one finished site.
- Planning content and wireframes
- Building a multi-section page
- Making it responsive
- Reviewing with a checklist
- Putting the files in a Git repository
- Publishing with a free static host
By the end of this module you can
- Finish a small responsive site you can show others
- Explain the choices you made in your code
Covered in 1:1 mentoring sessions

Ways to learn

How you can learn HTML and CSS

HTML and CSS mentor, 1:1 online

A mentor who knows this course plans sessions around your goal, explains each idea with fresh examples and checks your understanding. Personal attention, flexible timings in your time zone and affordable plans that fit your budget.

Talk to our team

How it works

Your learning journey

Four simple steps to start HTML and CSS with a mentor. A real person replies to you; there is no booking system.

Step 1: Talk to us
Message us on WhatsApp or email, or fill in the short form. The first chat is free, with no obligation.
Step 2: Get your plan
We listen to your goal, level and deadlines, then suggest a plan that fits your budget and timings.
Step 3: Learn with your mentor
Online 1:1 sessions with a mentor who knows your course, explains clearly and checks your understanding.
Step 4: Practise & track progress
Keep going between sessions with practice, and watch your confidence grow week by week.

Learn by doing

Projects and practice

Personal profile page
A one-page site with a header, about section, skills list and contact links, written in semantic HTML and styled with CSS.
Responsive restaurant-style landing page
A landing page with a hero, menu cards in a grid, an opening-hours table and a booking form that adapts from phone to desktop.
Photo gallery with CSS grid
A responsive gallery with captions, hover effects and accessible alt text.
Multi-page portfolio
Three linked pages sharing one stylesheet, with a flexbox navigation bar and a published version online.

Your progress

What you'll be able to do

Milestones from the start, middle and end of the syllabus.

Create a page and view it in a browser
Early on
Build a navigation bar and a card row with flexbox
Halfway
Finish a small responsive site you can show others
By the end

FAQs

HTML and CSS: frequently asked questions

Is there a self-study option, or is it 1:1 mentoring?

Our free self-study lessons exist only for Java and Python today. HTML and CSS is learned through 1:1 online mentoring, where a mentor teaches live, answers questions as they come up and shapes each session around what you need next.

How much does mentoring cost?

1:1 mentoring is personal online tutoring and is affordable, with plans that fit your budget. Tell us your goals and how often you would like sessions, and our team will suggest an option that works for you.

How do I get started?

Message us on WhatsApp or email, or fill in the short form on this page. Our team replies, talks through your goals and helps you choose a mentor and a schedule. It starts with a free, no-obligation chat, and you can start this week.

Are the sessions 1:1 and can they fit my schedule?

Yes. Every session is one-to-one and online: one mentor, one learner. Timings are flexible in your time zone, so sessions can sit around school, work and family plans.

Do I need any coding experience?

No. This course starts from zero. If you can use a computer and a browser, you can begin. The mentor sets up a code editor with you in the first session.

Should I learn HTML and CSS before JavaScript?

Yes. HTML and CSS give you the page that JavaScript later makes interactive. Many learners continue with our web development course once they are comfortable with layout.

What will I need for sessions?

A laptop or desktop with an internet connection and a modern browser. A free code editor is enough, and the mentor will help you install it.

Free, no-obligation chat

Talk to our team about HTML and CSS

Tell us what you need. Our support team replies within one working day, by email or WhatsApp, whichever you prefer, and arranges your mentor.

Prefer to talk first?

Message the support team directly. We usually reply the same day.

Chat on WhatsApp Email us

Our mentors teach and explain. They never complete graded work, tests or assessments for students.

Keep going

Syllabus references

Last reviewed9 November 2026

Ready to start HTML and CSS?

Message us on WhatsApp or email, or fill in the short form. Our team replies with a plan that fits your goal and budget, and you can start this week.

Fill in the short form

WhatsApp Email us

Talk to us about a mentor

WhatsApp Email us

Learn HTML and CSS online

Who this course is for

What you'll learn

Skills you'll gain

HTML and CSS syllabus

How the web and a web page work

HTML document structure and text

Links, images and media

Semantic HTML, tables and forms

CSS basics: selectors and the cascade

Text, colour and the box model

Layout with flexbox

Layout with CSS grid

Responsive design

Positioning, transitions and polish

Accessibility and good practice

Capstone: build and publish a page

How you can learn HTML and CSS

HTML and CSS mentor, 1:1 online

Your learning journey

Step 1: Talk to us

Step 2: Get your plan

Step 3: Learn with your mentor

Step 4: Practise & track progress

Projects and practice

Personal profile page

Responsive restaurant-style landing page

Photo gallery with CSS grid

Multi-page portfolio

What you'll be able to do

HTML and CSS: frequently asked questions

Talk to our team about HTML and CSS

Related courses

Web Development for Beginners

Web Development

JavaScript Programming

Programming for Beginners

Git & GitHub

Syllabus references

Ready to start HTML and CSS?

Learn HTML and CSS online

Who this course is for

What you'll learn

Skills you'll gain

HTML and CSS syllabus

How the web and a web page work

HTML document structure and text

Links, images and media

Semantic HTML, tables and forms

CSS basics: selectors and the cascade

Text, colour and the box model

Layout with flexbox

Layout with CSS grid

Responsive design

Positioning, transitions and polish

Accessibility and good practice

Capstone: build and publish a page

How you can learn HTML and CSS

HTML and CSS mentor, 1:1 online

Your learning journey

Step 1: Talk to us

Step 2: Get your plan

Step 3: Learn with your mentor

Step 4: Practise & track progress

Projects and practice

Personal profile page

Responsive restaurant-style landing page

Photo gallery with CSS grid

Multi-page portfolio

What you'll be able to do

HTML and CSS: frequently asked questions

Talk to our team about HTML and CSS

Related courses

Web Development for Beginners

Web Development

JavaScript Programming

Programming for Beginners

Git & GitHub

Syllabus references

Ready to start HTML and CSS?