Web Components are a set of features that provide a standard component model for the Web[1] allowing for encapsulation and interoperability of individual HTML elements.
Web Components For Beginners
3h 1m 52s
English
Paid
Web Components For Beginners is a 22-lesson 3 hours 1 minute self-paced course by Level Up Tutorials (Scott Tolinski). Web Components are a set of features that provide a standard component model for the Web[1] allowing for encapsulation and interoperability of individual HTML elements.
Course facts
- Lessons
- 22
- Duration
- 3 hours 1 minute
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Level Up Tutorials (Scott Tolinski)
- Price
- Premium
Additional
Who teaches Web Components For Beginners? Level Up Tutorials (Scott Tolinski)
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?
0:00
/ #1: What Are Web Components?
All Course Lessons (22)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 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 subscriptionWhat courses are similar to Web Components For Beginners?
-
ClassicWeb Components Demystified
By: Scott JehlIf you are like me, you have probably been hearing a lot about web components lately.7h 51m5/5 -
Updated 1y agoUI Architecture Academy
By: Logic RoomWelcome to the "Academy of UI Architecture" , a comprehensive 12-module program designed to empower you with the skills to develop, test.21h 37m5/5 -
Updated 10mo agoFrontend System Design
By: Prashant Yadav (LearnersBucket)Become the Alpha frontend engineer by designing 30+ distinct web applications and all the fundamentals. Learn the advanced concepts, strategies, techniques, and5/5 -
Updated 2y agoFrontend architecture and patterns bootcamp
By: UdemyThis comprehensive course covers a wide range of software architecture topics, including component-oriented patterns, Single Page Application.4h 21m
More courses by Level Up Tutorials (Scott Tolinski)
-
Updated 2y agoMastering Figma
This video is about Mastering Figma Introduction. Figma has similar uses to adobe XD and I'll be bringing you more videos to go more in-depth on how to use.3h 37m -
Updated 2y agoCSS Animations & Transitions
Welcome to the CSS Transitions course. In this course, you will not only learn the basic techniques, but also dive deeply into creating animations and transitio2h 9m5/5 -
FreeUpdated 2y agoAdobe XD Crash Course
In this series, we are going to dive into the user interface design tool, Adobe XD. In this series, we are going to dive into the user interface design tool, Ad3h 11m -
Updated 3y agoThe 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 -
Updated 3y agoGitLab CE Tutorials
GItLab is a Git repository management system. It is written in Ruby and allows you to easily and efficiently deploy full version control to your code. It was fi1h 27m5/5 -
Updated 3y agoDeno 101 For Web Developers
Welcome to Deno 101! In this series, we will learn about Deno, a new safe runtime language that is built on top of Rust.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.