CF

Web Components For Beginners

3h 1m 52s
English
Paid
Updated September 2026

Web Components For Beginners is a 22-lesson 3 hours 1 minute self-paced course by Level Up Tutorials (Scott Tolinski). Web Components let you build your own custom, reusable HTML elements that encapsulate their own markup, styling and behavior — features baked into the browser itself rather than bolted on by a framework.

Course facts

Lessons
22
Duration
3 hours 1 minute
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Level Up Tutorials (Scott Tolinski)
Price
Premium

Web Components let you build your own custom, reusable HTML elements that encapsulate their own markup, styling and behavior — features baked into the browser itself rather than bolted on by a framework.

This 22-lesson course from Scott Tolinski introduces the standards behind that model, focused on what a beginner actually needs to start building and reusing components that work anywhere HTML does.

Additional

https://github.com/leveluptuts/web-components-for-beginners

Who teaches Web Components For Beginners? Level Up Tutorials (Scott Tolinski)

Level Up Tutorials (Scott Tolinski) thumbnail

Level Up Tutorials is the online course platform of Scott Tolinski, a US developer best known as the co-host (with Wes Bos) of the long-running Syntax podcast. Level Up Tutorials has been publishing modern web-development course material continuously since 2012 — one of the longer-running independent course platforms in the JavaScript ecosystem.

The course catalog covers the modern full-stack JavaScript landscape: React (including Next.js), Svelte / SvelteKit (Scott has been a long-running advocate for Svelte), Vue, GraphQL, Node.js, MongoDB, the testing tracks, Tailwind CSS, animation patterns, and the surrounding tooling. Material is structured around long-form project-based tutorial series rather than disconnected feature videos.

The CourseFlix listing under this source carries over 10 Level Up Tutorials courses spanning that range. Material is paid; Level Up Tutorials runs on a monthly / annual subscription on the original platform. Courses are aimed at intermediate-and-up web developers.

What lessons are included in Web Components For Beginners?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 22 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: What Are Web Components?
All Course Lessons (22)
#Lesson TitleDurationAccess
1
What Are Web Components? Demo
04:35
2
Getting Started
05:21
3
Template 101
05:49
4
Template Document Fragments and Cloning
05:17
5
Custom Elements 101
08:48
6
Templates In Elements With Slots
07:04
7
Open Vs Closed Shadow Root
06:13
8
CSS and Scoping In Web Components
08:49
9
More On Scoping and Host
09:31
10
Attributes 101
08:28
11
Lifecyle Methods
07:14
12
Event Listeners
11:53
13
Listening For Attribute Changes
10:30
14
More On Attributes
13:57
15
Tabs Project
10:22
16
Functional Tabs
13:45
17
Tab Index and Accessibility
10:29
18
Keyboard Events
10:35
19
CSS and Bugs
10:45
20
Extending Existing Elements
04:33
21
CSS Vars To Style Scoped CSS
04:02
22
Where To Go From Here
03:52
Unlock unlimited learning

Get instant access to all 21 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Web Components For Beginners?

More courses by Level Up Tutorials (Scott Tolinski)

  • Mastering Figma thumbnailUpdated

    Mastering Figma

    A step-by-step Figma course covering the interface, design principles, and team collaboration features through hands-on projects.
    3h 37m
  • CSS Animations & Transitions thumbnailUpdated

    CSS Animations & Transitions

    Learn CSS animations and transitions from the fundamentals through advanced techniques, with practical projects to apply what you learn.
    2h 9m5/5
  • Adobe XD Crash Course thumbnailFreeUpdated

    Adobe XD Crash Course

    A free, 25-lesson tour of Adobe XD covering the design workspace, prototyping, sharing feedback, and more advanced techniques.
    3h 11m
  • The Sketch Guide thumbnailUpdated 3y ago

    The Sketch Guide

    Learn the new industry standard for web design. Become an expert in Sketch, the app that is changing how designers work in the modern web and app design world.
    3h 23m
  • GitLab CE Tutorials thumbnailUpdated

    GitLab CE Tutorials

    Set up and use GitLab CE for version control, continuous integration, merge requests, and issue tracking, from install to first repo.
    1h 27m5/5
  • Deno 101 For Web Developers thumbnailUpdated

    Deno 101 For Web Developers

    An introduction to Deno, the secure Rust-based JavaScript and TypeScript runtime, covering setup, built-in tooling, and your first script.
    2h 46m

Frequently asked questions

What prerequisites are needed for this course?
Basic knowledge of HTML, CSS, and JavaScript is recommended before taking this course. Understanding these core web technologies will help you grasp the concepts of Web Components more effectively, such as templates, custom elements, and shadow DOM.
What kind of project will I build in this course?
The course includes a Tabs Project, where you will create a functional tab interface using Web Components. This project will cover topics like template slots, shadow DOM, and event handling, providing practical experience in building reusable and encapsulated UI components.
Who is the target audience for this course?
This course is designed for web developers who want to learn about modern web component-based architecture. It is suitable for those looking to enhance their skills in building modular and reusable web elements without relying on JavaScript frameworks.
How does the depth of this course compare to other courses on web components?
The course provides a foundational understanding of Web Components, covering essential topics like custom elements, shadow DOM, and scoped CSS. It is ideal for beginners looking to get started, but may not cover advanced use cases or integration with specific frameworks in depth.
What tools or platforms are specifically covered in the course?
The course focuses on native Web Components without the use of external libraries or frameworks. You will learn about essential browser features like templates, shadow DOM, and custom elements directly within HTML and JavaScript.
What topics are not covered in this course?
The course does not cover advanced topics such as polyfills for older browsers or integration with frameworks like React or Angular. It focuses on the fundamental concepts of Web Components using native browser APIs.
How can the knowledge from this course be applied to other areas in web development?
Learning Web Components can enhance your ability to create modular and interoperable UI elements, which is valuable in any web development context. The skills gained will carry over to developing custom components for modern web applications, regardless of the framework or library used.