If you are like me, you have probably been hearing a lot about web components lately. Many of us are looking for ways to integrate web components into our work, while teams are trying to figure out how to use them in their processes. There are a lot of changes happening in the world of web components right now, and keeping up with all the innovations can be challenging, which can lead to a feeling of being overwhelmed.
Web Components Demystified
7h 51m 36s
English
Paid
Why now? Our practices are changing.
Over the past decade, the web community has focused on JavaScript libraries and frameworks, which have led to many innovations but often deteriorated performance and sustainability. Fortunately, we now have a standard component model built into browsers, which reduces complexity and improves performance. Many large companies are already switching to web components, and popular libraries like React are improving compatibility with them.
A comprehensive, accessible curriculum.
The goal of the course is to clarify the use of web components, demonstrate their modern applications, and teach how to create fast modern websites. "Web Components Demystified" is a comprehensive course that considers accessibility, sustainability, and performance.
Who is this course for?
This course is designed for web designers and developers of any level. It covers complex patterns and tasks related to web components and does not require any prior knowledge of them. The course is aimed at frontend developers and UI/UX designers who are proficient in HTML, CSS, and basic JavaScript knowledge. Familiarity with popular frameworks will also be helpful for understanding various approaches and integration strategies.
If you want to learn how web components can improve your workflow, this course is for you!
About the Author: Scott Jehl
Scott Jehl is a US front-end developer (formerly at Filament Group) and one of the most cited voices on web performance, progressive enhancement, and the responsive-design discipline. He has authored multiple practical books on these topics including Responsible Responsive Design and Web Components Demystified.
His CourseFlix listing carries Web Components Demystified — covering the platform-native Web Components specification (Custom Elements, Shadow DOM, slots, ES Modules) as a framework-independent UI primitive that survives every front-end framework change.
Material is paid and aimed at front-end developers picking up Web Components for framework-independent UI work. For broader content, see CourseFlix's Frontend System Design category page.
Watch Online 12 lessons
0:00
/ #1: 1 - Course Introduction & Background
All Course Lessons (12)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | 1 - Course Introduction & Background Demo | 15:24 | |
| 2 | 2 - What Web Components Are... And Aren't | 26:40 | |
| 3 | 3 - Custom Elements | 01:28:09 | |
| 4 | 4 - HTML Templates Video | 21:18 | |
| 5 | 5 - Shadow DOM | 01:18:10 | |
| 6 | 6 - Styling Web Components | 01:06:20 | |
| 7 | 7 - HTML-First Patterns Video | 59:42 | |
| 8 | 8 - Web Components Frameworks Tour Video | 28:16 | |
| 9 | 9 - Web Components Libraries Tour Video | 19:56 | |
| 10 | 10 - Let-s Build An App Video | 47:58 | |
| 11 | 11 - What-s Next Video | 15:15 | |
| 12 | 12 - Wrapping Up Video | 04:28 |
Unlock unlimited learning
Get instant access to all 11 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscriptionBooks
Read Book Web Components Demystified
Related courses
-
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 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 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
Frequently asked questions
What prerequisites do I need before enrolling in this course?
Prospective students should have a basic understanding of HTML, CSS, and JavaScript. Knowledge of modern web development practices will also be beneficial, as the course builds on these concepts when discussing custom elements, HTML templates, and Shadow DOM.
What will I build during the course?
The course includes a practical component where you will build an application. This takes place during the 'Let-s Build An App Video' lesson, where you'll apply the concepts of custom elements, HTML templates, and Shadow DOM to create a functional web component.
Who is the target audience for this course?
This course is designed for web developers who are new to web components or are looking to deepen their understanding. It is also suitable for teams interested in integrating web components into their projects and processes.
How does this course compare in depth and scope to similar courses?
This course offers a focused exploration of web components, diving into the specifics of custom elements, Shadow DOM, and styling. It also provides tours of frameworks and libraries, which may not be covered in as much detail in more general web development courses.
What specific tools or platforms will I learn about?
The course covers various frameworks and libraries related to web components, as detailed in the 'Web Components Frameworks Tour Video' and 'Web Components Libraries Tour Video'. These lessons provide an overview of the tools available for working with web components.
Are there any topics explicitly not covered in the course?
The course does not cover server-side technologies or advanced JavaScript frameworks beyond their relation to web components. The focus is primarily on front-end components, such as custom elements and Shadow DOM.
How much time should I expect to commit to this course?
Although the runtime is not specified, the course consists of 12 lessons, each focusing on a different aspect of web components. Students should allocate time for both watching the video lessons and practicing the skills discussed in the 'Let-s Build An App Video' lesson.