info@begin2code.com Join waitlist

Home/Courses/HTML and CSS for Elementor

Beginner to intermediate, Blue run Build

Stop getting stuck in Elementor. Learn the HTML and CSS behind it

A practical course for Elementor users who want to fix layouts, write clean custom CSS and use Editor V4 classes and variables with confidence. You will build better websites because you understand exactly how they work. Includes 6 hours of live classes and 2 hours of 1:1 tutoring with a working UK developer.

Recording now. Join the waitlist and you will hear first, with an early-bird price.

Join the waitlist See the curriculum
8Modules
48Lessons
7.5 hoursVideo
2Hours of 1:1 included
Beginner to intermediateLevel
Full courseCapstone, exam and certificate

Sound familiar?

Elementor gets you most of the way. Then something will not line up on mobile, a gap appears from nowhere or a client asks for a tweak the controls cannot do. You search, paste some CSS from a forum, and hope. This course replaces hoping with understanding, so you can open dev tools, see exactly what is wrong and fix it properly.

What you'll build

A complete landing page section set, built twice: once by hand in HTML and CSS, and once in Elementor using V4 classes and variables. Along the way you will build a navigation bar, a responsive card grid, an accessible contact form, a fluid type scale and a small JavaScript toggle.

By the end you'll 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 (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, test and debug any Elementor page live.
  • Apply your own CSS in Elementor properly: Editor V4 classes and variables, element-level custom CSS, site-wide CSS and the HTML widget, without bloating the site.
  • Apply basic accessibility checks (headings, alt text, contrast, focus, labels) and add a small piece of JavaScript safely.

Capstone project

Finish with something real

Build it on your own site, or a practice brief if you do not have one, and present it to your tutor live on a call. Pass the capstone, the online quiz and the live practical test to earn your certificate.

Who it's for

  • Small business owner. built her own site in Elementor but keeps hitting a wall when something "just will not line up" on mobile. She wants to understand what is going on rather than pay someone every time.
  • Career changer / aspiring freelancer. can drag and drop but knows clients and agencies expect him to read and write some code. This course gives him the foundations employers and clients assume.
  • Marketer with an inherited site. inherited a site full of custom CSS someone else wrote. She needs to read it, tweak it safely and stop breaking things.
  • Hobbyist. curious about what is "under the bonnet" and wants to build small things by hand for the satisfaction of it.

Who it's not for

  • Complete beginners who have never used Elementor (start with Elementor Beginner).
  • Developers already comfortable with flexbox, grid and the cascade.
  • Anyone looking for a full JavaScript or PHP course; JavaScript is a taster only.

Curriculum

8 modules and 48 short lessons, about 7.5 hours of video. Every module ends with a quick quiz and an exercise on your own site.

01How a web page really works6 lessons, 57 mins

Understand what Elementor produces under the hood and write your first HTML page by hand.

  1. What happens when you open a web page8 min
  2. Setting up your toolkit10 min
  3. Anatomy of an HTML element9 min
  4. The HTML document skeleton8 min
  5. Text, links and images12 min
  6. What Elementor outputs10 min
02Semantic HTML and accessibility basics6 lessons, 54 mins

Choose the right tag for the job so pages are clearer for search engines, screen readers and you.

  1. Why semantic HTML matters8 min
  2. Page landmarks10 min
  3. Heading structure8 min
  4. Buttons versus links7 min
  5. Forms that everyone can use11 min
  6. Accessibility quick checks10 min
03CSS fundamentals: selectors and the cascade6 lessons, 58 mins

Write CSS rules that target exactly what you mean and understand why a rule wins or loses.

  1. How CSS is written8 min
  2. Type, class and ID selectors9 min
  3. Combinators and grouping9 min
  4. Pseudo-classes and pseudo-elements10 min
  5. The cascade and specificity12 min
  6. Colour, fonts and units10 min
04The box model, spacing and typography6 lessons, 56 mins

Control size and spacing confidently and fix the classic layout gremlins.

  1. The box model explained9 min
  2. box-sizing and widths8 min
  3. Margin collapse and mystery gaps9 min
  4. Display and positioning12 min
  5. Readable typography10 min
  6. Overflow, z-index and stacking8 min
05Layout with flexbox and grid6 lessons, 62 mins

Build modern layouts by hand and understand exactly what Elementor's container settings are doing.

  1. Flexbox basics11 min
  2. Flexbox sizing and wrapping10 min
  3. CSS grid basics11 min
  4. Responsive grids without media queries9 min
  5. Grid areas and overlap9 min
  6. Flexbox and grid inside Elementor12 min
06Responsive design and custom properties6 lessons, 56 mins

Make any section work on phones, tablets and desktops, and keep design values consistent with variables.

  1. Mobile-first thinking8 min
  2. Media queries11 min
  3. Responsive images and media10 min
  4. CSS custom properties (variables)11 min
  5. Container queries and modern extras9 min
  6. Dark mode and user preferences7 min
07Browser dev tools: your debugging superpower6 lessons, 52 mins

Find and fix layout and styling problems on any live Elementor page in minutes.

  1. A tour of the Elements and Styles panels10 min
  2. Editing live to test fixes9 min
  3. Flexbox and grid inspectors8 min
  4. Device mode and responsive testing8 min
  5. The Console and Network panels9 min
  6. Lighthouse and accessibility audits8 min
08Bringing your code into Elementor6 lessons, 62 mins

Apply custom CSS, classes, variables, HTML and a little JavaScript inside Elementor in a tidy, maintainable way.

  1. Where CSS can go in Elementor and WordPress10 min
  2. Classes in Editor V412 min
  3. Variables in Editor V410 min
  4. Custom classes and CSS on V3 widgets9 min
  5. The HTML widget and embeds9 min
  6. A small JavaScript taster12 min

Lesson lengths are estimates and may change slightly when the course is recorded. Every lesson is re-recorded or annotated when the tools change, free for everyone with an active course.

Live classes, not just videos

Alongside the video lessons you join 3 weekly online classes of 2 hours, with a maximum of 5 students in each class. You build along with your tutor, ask questions as you go and see how others solve the same problem. You also get 2 hours of one-to-one tutoring to use whenever you need it.

  • 6 hourslive online classes
  • 3weekly classes of 2 hours
  • 5 maxstudents per class
  • 2 hoursone-to-one tutoring

Projects you'll build

Every step is a real piece of work you can keep and reuse.

  1. Set up

    Your coding toolkit

    Install a code editor, learn your browser's dev tools and set up a practice WordPress site.

    Module 1

  2. Project 1

    An accessible page skeleton

    Write an "About us" page in pure, semantic HTML: headings, lists, images and links done properly.

    Module 2

  3. Project 2

    Style a café menu

    Use classes, selectors and the cascade to style a real menu page, and see why one rule beats another.

    Module 3

  4. Project 3

    A readable article page

    Spacing, the box model and a fluid type scale that looks right on every screen.

    Module 4

  5. Project 4

    Navigation bar and card grid

    A header nav and a responsive card grid with flexbox and CSS grid.

    Module 5

  6. Project 5

    A responsive landing page

    Media queries, relative units and CSS variables for colours and spacing.

    Module 6

  7. Project 6

    The debugging challenge

    We hand you a broken Elementor page. Find and fix every problem with dev tools.

    Module 7

  8. Project 7

    Rebuild it in Elementor

    Recreate your landing page in Elementor with V4 classes and variables, plus clean custom CSS.

    Module 8

Then the capstone: a complete landing page section set, built by hand and again in Elementor, which you present to your tutor on a live call.

How you're assessed

Two parts, both online. Pass both and you get your Begin2Code certificate. One free re-sit of each part is included.

  1. Part 1

    Online quiz

    20 multiple-choice questions in 25 minutes, based on real situations you'll meet when building sites. Marked instantly. Pass mark 70%.

    25 minutes

  2. Part 2

    Live practical test

    On a video call with your tutor, screen shared, you build a responsive section in Elementor from a design using classes and variables, then find and fix three planted bugs with dev tools. It's marked against a clear 12-point checklist.

    75 minutes, live

Everything included

  • 8 modules, 48 video lessons, about 7.5 hours
  • 2 hours of 1:1 live tutoring with Shaz (use within 12 months)
  • Starter files and cheat sheets
  • Capstone project with personal written feedback
  • Certificate of completion
  • 12 months' access, including updates as Elementor changes
  • 30-day money-back guarantee

Before you start

Comfortable building a basic page in Elementor (Elementor Beginner course or equivalent). No coding experience needed.

Your tutor: Shaz

I'm Shaz, a UK web designer with over 20 years of experience. Through my agency, E-web UK, I build and look after WordPress sites for businesses every week. I'll answer your questions, review your work, and your included one-to-one tutoring is with me directly.

More about Shaz

Be first in when it opens

This course is being recorded now. Waitlist members hear first and get an early-bird price.

HTML and CSS for Elementor

£499£999launch sale price

Leave your email and you will hear first when it opens, with an early-bird price for the waitlist.

Build path bundle

£949£1,427 separately

Elementor Beginner, HTML and CSS for Elementor, Elementor + GSAP Animation, together. Save £478 on buying them one at a time.

See the bundle

Guarantee

30days money back

Try the course for 30 days. If it is not right for you, email us for a full refund. No forms, no fuss.

Refund policy

Questions about this course

Anything else? Send me a message or book a 30-minute taster lesson.

I have never written code. Is this too advanced?

No. It starts from a blank file and assumes no coding knowledge. You only need to be comfortable building a basic page in Elementor.

Do I need Elementor Pro?

No. Everything core works with the free version of Elementor. A few options, such as some custom CSS locations and Components, need Pro, and we point those out clearly with free alternatives where possible.

Does it cover Elementor Editor V4?

Yes. Module 8 covers V4 classes, variables and states, and also shows how to work with V3 widgets you will still meet on older sites.

How long will it take?

About 7.5 hours of video. Most students finish in 3 to 5 weeks at a few hours a week, including exercises.

How does the 1:1 tutoring work?

You You get 2 hours of live video sessions with Shaz, booked in 30 or 60-minute slots, at a time that suits you, within 12 months of purchase. Bring your own site, your capstone or any problem you are stuck on.

Will this help me get freelance work?

It gives you the code skills clients and agencies commonly expect from an Elementor builder. It will not guarantee work, but it removes a common gap. The Freelance business course covers finding clients.

Free guides on this topic

Start with these, then take the course when you want it in order, with help.

All guides

Next in the Build path

Each course builds on the one before. Take the next one when you are ready, or save with the path bundle.

See the whole Build path
BuildIntermediate Animate Your Elementor Site with GSAP Animate your Elementor site with GSAP. £858 £429 · 6 hours BuildIntermediate Professional Websites with Elementor Pro Theme Builder, dynamic content, forms that convert and a clean client handover. £1,399 £699 · 17-20 hours

Get on the list. Start first.

This course is being recorded now. Join the waitlist and you will be first to hear when it opens, at the £499 sale price (usually £999).

Join the waitlist See the Build path