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?
-
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 -
Updated 1y agoUI Architecture Academy. Q&A Calls
By: Logic RoomA series of group coaching sessions, guidance from a coach, answers to questions, and support throughout the course "Academy of UI Architecture."20h 50m -
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
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.