Build path · Beginner to intermediate

HTML and CSS for Elementor

Stop getting stuck in Elementor: learn the HTML and CSS it writes for you, so you can open dev tools, see exactly what is wrong and fix it properly instead of pasting forum CSS and hoping.

Who this course is for

This course is for people who already build pages in Elementor and keep hitting the same wall. A section lines up on desktop but falls apart on a phone. A gap appears from nowhere. A client asks for a small tweak the controls cannot do. If you have ever copied a snippet of CSS into the Custom CSS box without knowing why it worked (or why it stopped working), this course is for you. It suits freelancers, small business owners who look after their own site, and anyone who wants to move from "it looks right in the editor" to "I know why it looks right".

What you should know first

You do not need to have written any code before. Module 1 starts from a blank file and explains every tag, every term and every click. You should be comfortable using a computer, creating folders and installing a program. For modules 5 to 8 it helps to have built at least one basic page in Elementor, with containers, headings, images and buttons. If you have not, take the Begin2Code Elementor Beginner course first, or alongside the first four modules of this one.

By the end of the course you will be able to

Read and write clean, semantic HTML for a full page section and explain what each tag is for.
Write CSS using classes, combinators and states, and work out why one rule beats another using the cascade and specificity.
Control spacing and sizing with the box model and fix the most common "why is there a gap?" problems.
Build layouts with flexbox and CSS grid, and recognise how Elementor containers use them behind the scenes.
Make layouts responsive with media queries, relative units and CSS custom properties (variables).
Use browser dev tools to inspect any live Elementor page, test a fix in seconds and find the real cause of a layout problem.
Build forms and page structures that work for keyboard and screen reader users, and run quick accessibility checks before handover.
Apply your own classes, variables, custom CSS, HTML and a little JavaScript inside Elementor, including Editor V4, in a tidy way you can maintain.

Your course project

Across the whole course you build a one-page landing page section set for Wagtail Dog Grooming, a small one-groomer salon run by Jo Hartley at 31 Burton Road, West Didsbury, Manchester M20 3GB. Jo offers a full groom from £45, a bath and tidy from £30, a puppy introduction for £25 and nail trims for £10, and she needs a page that looks good on every phone her customers use.

You build it twice. First by hand, in a project folder called wagtail with index.html, privacy.html, css/style.css and a few starter images. Lesson by lesson you add a header with a navigation bar, a hero section, a responsive services card grid, an about strip featuring Jo, an accessible contact form (name, email, phone, dog's name and message) and a footer. You then give it a fluid type scale, CSS variables for colours and spacing, a responsive layout and a small JavaScript toggle for the mobile menu.

In the final module you rebuild the same page in Elementor Editor V4 using classes and variables, then check it with browser dev tools. The finished result is a fast, accessible Wagtail landing page in both plain code and Elementor, and a clear understanding of how one becomes the other. It also makes a strong portfolio piece.

Curriculum

Module 1: How a web page really works · 11 lessons
- 1.0 Course trailer
- 1.1 What you will build and how this course works
- 1.2 What happens when you open a web page
- 1.3 Setting up your toolkit: VS Code and a project folder
- 1.4 Anatomy of an HTML element
- 1.5 The HTML document skeleton
- 1.6 Text, links and images
- 1.7 What Elementor outputs
- 1.8 Project 1: your first hand-coded page, with a worked example
- 1.9 Module 1 recap
- Module 1 worksheet
- Module 1 check (quiz)
Module 2: Semantic HTML and accessibility basics · 9 lessons
- 2.1 Why semantic HTML matters
- 2.2 Page landmarks
- 2.3 Heading structure
- 2.4 Buttons versus links
- 2.5 Forms that everyone can use
- 2.6 Accessibility quick checks and WCAG 2.2
- 2.7 Project 2: a page structure and form everyone can use, with a worked example
- 2.8 Module 2 recap
- Module 2 worksheet
- Module 2 check (quiz)
Module 3: CSS fundamentals: selectors and the cascade · 10 lessons
- 3.1 How CSS is written
- 3.2 Type, class and ID selectors
- 3.3 Combinators and grouping
- 3.4 Pseudo-classes and pseudo-elements
- 3.5 The cascade, specificity and inheritance
- 3.6 Winning against Elementor's selectors
- 3.7 Colour, fonts and units
- 3.8 Project 3: your first stylesheet, with a worked example
- 3.9 Module 3 recap
- Module 3 worksheet
- Module 3 check (quiz)
Module 4: The box model, spacing and typography · 9 lessons
- 4.1 The box model explained
- 4.2 box-sizing and widths
- 4.3 Margin collapse and mystery gaps
- 4.4 Display and positioning
- 4.5 Readable typography
- 4.6 Overflow, z-index and stacking
- 4.7 Project 4: cards, spacing and type, with a worked example
- 4.8 Module 4 recap
- Module 4 worksheet
- Module 4 check (quiz)
Module 5: Layout with flexbox and grid · 9 lessons
- 5.1 Flexbox basics
- 5.2 Flexbox sizing and wrapping
- 5.3 CSS grid basics
- 5.4 Responsive grids without media queries
- 5.5 Grid areas, overlap and subgrid
- 5.6 Flexbox and grid inside Elementor
- 5.7 Project 5: the page layout, by hand and in Elementor, with a worked example
- 5.8 Module 5 recap
- Module 5 worksheet
- Module 5 check (quiz)
Module 6: Responsive design and custom properties · 9 lessons
- 6.1 Mobile-first thinking, and why Elementor works the other way
- 6.2 Media queries
- 6.3 Responsive images and media
- 6.4 CSS custom properties (variables)
- 6.5 Container queries and modern CSS you can use now
- 6.6 Dark mode, reduced motion and user preferences
- 6.7 Project 6: a responsive page driven by variables, with a worked example
- 6.8 Module 6 recap
- Module 6 worksheet
- Module 6 check (quiz)
Module 7: Browser dev tools: your debugging superpower · 9 lessons
- 7.1 A tour of the Elements and Styles panels
- 7.2 Editing live to test fixes, and the Changes panel
- 7.3 Flexbox and grid inspectors
- 7.4 Device mode and responsive testing
- 7.5 The Console and Network panels
- 7.6 Lighthouse and accessibility audits
- 7.7 Project 7: debugging the Copperwhistle site, with a worked example
- 7.8 Module 7 recap
- Module 7 worksheet
- Module 7 check (quiz)
Module 8: Bringing your code into Elementor · 10 lessons
- 8.0 Module intro and version check
- 8.1 Where CSS can go in Elementor and WordPress
- 8.2 Classes in the Atomic Editor
- 8.3 Variables in the Atomic Editor
- 8.4 Classes, IDs and custom CSS on V3 widgets
- 8.5 The HTML widget and embeds
- 8.6 A small JavaScript taster
- 8.7 Project 8: the Copperwhistle design system in Elementor, with a worked example
- 8.8 Module 8 recap
- Module 8 worksheet
- Module 8 check (quiz)
Module 9: Capstone, final exam and next steps · 7 lessons
- 9.0 Module intro
- 9.1 The capstone brief: what to submit and how it is marked
- 9.2 Planning your capstone: a four-week plan
- 9.3 A worked example: the Copperwhistle capstone, marked out loud
- 9.4 Why capstones get sent back, and how to avoid it
- 9.5 The final exam, your tutoring and what comes next
- Module 9 worksheet
- Module 9 check (quiz)
Final exam · 0 lessons
- Final exam (quiz)