Sorry, this page is no longer available

We may earn an affiliate commission when you visit our partners.

A Practical Guide to Vanilla Web Components

Web Components are set to change how you build front-end web applications. This course teaches you how to use the Web Components specifications to create encapsulated and reusable UI components which can be used with almost any framework or library.

Web Components represent a new way to develop reusable UI components that solve fundamental problems web developers face every day. In this course, A Practical Guide to Vanilla Web Components, you'll learn all about the Web Component specifications. First, you'll get an overview of the fundamentals of web components. Next, you'll explore the basic anatomy of a web component. Finally, you'll be shown how to use what you've learned so far by building two high quality vanilla Web Components. By the end of the course, you'll be able to write top quality encapsulated UI components which can be used in almost any front-end technology stack.

This course is no longer available. Find a similar course by searching these:

reusable ui components web components vanilla web components building web components web component anatomy web component specifications

What's inside

Syllabus

Course Overview

Web Component Fundamentals

The Basic Anatomy of a Web Component

Creating a Star Rating Component

Traffic lights

Read about what's good

what should give you pause

and possible dealbreakers

Teaches fundamentals of web app development that are highly relevant in the industry

Builds a strong foundation for understanding web components for beginner programmers

Develops skills in encapsulation and reusability, which are key to modern web development

Coursework closely resembles that of a training program with real-world projects and hands-on components

Taught by Leon Revill, an expert in web component development

Provides opportunities to build two high-quality vanilla web components

Save this course

Create your own learning path. Save this course to your list so you can find it easily later.

Save

Reviews summary

Practical guide to vanilla web components

According to learners, 'A Practical Guide to Vanilla Web Components' is a largely positive experience, particularly praised for its incredibly clear explanations of complex topics like Shadow DOM and Custom Elements. Students appreciate the practical, hands-on approach, with many finding the relevant examples and production-ready components immediately applicable. While it provides a robust foundation in vanilla Web Components, some learners with less advanced JavaScript and DOM knowledge noted the pacing can be fast and may assume prior experience, suggesting it's best for those with some existing front-end background. The course is considered a must-take for serious web developers looking to elevate their skills.

Some desire more advanced topics or framework integration examples.

"I would have liked to see a bit more on integrating these components with popular frameworks."

"I wish there were more diverse projects or a final, larger component to build, but it certainly provides a strong foundation."

Specific sections like styling and component projects are highly valued.

"I found the styling section particularly helpful."

"The 'Configurable Slide out Menu' project was particularly insightful."

"The 'Star Rating Component' was a perfect example to start with."

Provides a strong, framework-agnostic foundation in Web Components.

"It's a great foundation for anyone serious about modern web development."

"It still provides a robust understanding of the vanilla approach."

"It provides a clean, vanilla JS perspective, which is valuable for understanding the core tech."

Focus on hands-on building of reusable, production-ready components.

"I appreciated the practical, hands-on approach and the focus on creating reusable, production-ready components."

"Truly practical! The examples are relevant and immediately applicable. The instructor builds things from scratch."

"The course dives deep without being overwhelming. The examples are real-world applicable, and the instructor's delivery is excellent."

Instructor excels at clarifying complex Web Component concepts.

"The instructor's explanations are incredibly clear, especially when diving into Shadow DOM and Custom Elements."

"It demystifies the whole topic. The examples are relevant and immediately applicable."

"The way the instructor broke down complex topics like Shadow DOM and slots was phenomenal. I now feel confident using web components."

Pacing may be fast, requiring prior JavaScript/DOM knowledge.

"The course is okay. I felt it moved a bit too fast in certain areas, especially for someone new to the deeper DOM concepts."

"Disappointed with the pacing. It assumes a lot of prior knowledge about advanced JavaScript and DOM manipulation. Not for beginners."

"Barely finished. Needed more fundamental explanations of the underlying browser APIs. Felt like it was targeting someone who already knows Web Components basics."

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in A Practical Guide to Vanilla Web Components with these activities:

Brush up on HTML and CSS

Show steps

Review the fundamentals of HTML and CSS to strengthen your foundation for building web components.

Browse courses on HTML

Show steps

Review online tutorials on HTML and CSS
Complete practice exercises to reinforce concepts

Create a custom star rating component

Show steps

Follow guided tutorials to develop a basic star rating web component, applying the principles of encapsulation and reusability.

Show steps

Find tutorials on creating star rating web components
Follow the instructions to build the component
Test and refine the component's functionality

Build and test various web components

Show steps

Immerse yourself in practice by building and thoroughly testing a variety of custom web components, solidifying your understanding of their principles and applications.

Browse courses on Component Testing

Show steps

Design and create multiple web components
Develop unit tests to validate their functionality

Show all three activities

Career center

Learners who complete A Practical Guide to Vanilla Web Components will develop knowledge and skills that may be useful to these careers:

Vue.js Developer

Vue.js Developers specialize in developing web applications using the Vue.js framework. As this course teaches how to write high quality encapsulated UI components which can be used in almost any front-end technology stack, it will be useful to Vue.js Developers as they can use the components built in the course in their own work.

See salaries and explore the career path for Vue.js Developer

JavaScript Developer

JavaScript Developers specialize in developing web applications using JavaScript. As this course teaches how to write high quality encapsulated UI components which can be used in almost any front-end technology stack, it will be useful to JavaScript Developers as they can use the components built in the course in their own work.

See salaries and explore the career path for JavaScript Developer

CSS Developer

CSS Developers specialize in developing web applications using CSS. As this course teaches how to write high quality encapsulated UI components which can be used in almost any front-end technology stack, it will be useful to CSS Developers as they can use the components built in the course in their own work.

See salaries and explore the career path for CSS Developer

Front-End Engineer

Front-End Engineers design, develop, and test the front-end of websites and web applications. As this course teaches how to write high quality encapsulated UI components which can be used in almost any front-end technology stack, it will be useful to Front-End Engineers as they can use the components built in the course in their own work.

See salaries and explore the career path for Front-End Engineer

React Developer

React Developers specialize in developing web applications using the React framework. As this course teaches how to write high quality encapsulated UI components which can be used in almost any front-end technology stack, it will be useful to React Developers as they can use the components built in the course in their own work.

See salaries and explore the career path for React Developer

Angular Developer

Angular Developers specialize in developing web applications using the Angular framework. As this course teaches how to write high quality encapsulated UI components which can be used in almost any front-end technology stack, it will be useful to Angular Developers as they can use the components built in the course in their own work.

See salaries and explore the career path for Angular Developer

Web Designer

Web Designers create the visual appearance and layout of websites. This course focuses on the design and implementation of UI components, which overlaps with the work done by web designers. By taking this course, web designers can learn how to build encapsulated and reusable UI components that can be used across their designs.

See salaries and explore the career path for Web Designer

User Experience (UX) Designer

User Experience (UX) Designers focus on the user experience of websites and applications. Building reusable UI components is a key part of creating a consistent and positive user experience. By taking this course, UX designers can learn how to build encapsulated and reusable UI components that can be used across their designs.

See salaries and explore the career path for User Experience (UX) Designer

Web Application Developer

Web Application Developers design, develop, and test web applications. Like Web Developers, this course will be of most use to Web Application Developers who focus on front-end development. By learning how to create encapsulated and reusable UI components, Web Application Developers can increase their efficiency and build better web applications.

See salaries and explore the career path for Web Application Developer

Computer Programmer

Computer Programmers write and test code that fulfills defined requirements. Though some computer programmers specialize in front-end development, others develop foundational components or build back-end systems. This course will help programmers who work on front-end development build more robust, efficient, and above all, reusable components.

See salaries and explore the career path for Computer Programmer

Web Developer

Web Developers design and develop websites. They may also maintain websites and develop new features. While this course focuses on Vanilla Web Components, the skills learned can be applied to nearly any web development domain. Whether working with Vanilla JavaScript, React, or another library or framework, the skills learned in this course can help any web developer build with reusability and efficiency in mind.

See salaries and explore the career path for Web Developer

Front-End Developer

A Front-End Developer is responsible for the visual and interactive elements of websites and web pages. They may specialize in certain tools and frameworks, or they may be generalists who work across the stack - whether vanilla or otherwise. The course teaches how to develop components that can be used with nearly any framework or tool. While the course does not dive deeply into front-end development, it does teach learners about vanilla Web Components - a vital part of any front-end web developer's tool belt.

See salaries and explore the career path for Front-End Developer

Full-Stack Developer

Full-Stack Developers are responsible for both the front-end and back-end of websites and web applications. Because this course focuses on building reusable front-end components, it will be of some use to full-stack developers. However, because the course does not cover back-end development, it may not be as useful as other courses for those who wish to work as full-stack developers.

See salaries and explore the career path for Full-Stack Developer

HTML Developer

HTML Developers specialize in developing web applications using HTML. While this course does not focus specifically on HTML, the skills taught in the course may be useful to HTML developers who want to build reusable UI components.

See salaries and explore the career path for HTML Developer

Software Engineer

Software Engineers design, develop, and test software applications. Many software engineers specialize in web application development. Because the course does not cover topics such as advanced algorithms and theory of computation, it may only be marginally useful to some software engineers. However, the components produced by the course can be integrated into software applications, making it a valuable learning experience for software engineers who wish to expand their toolkit.

See salaries and explore the career path for Software Engineer

Reading list

We've selected seven books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in A Practical Guide to Vanilla Web Components.

Web Components in Action

Save

Provides a comprehensive guide to building reusable web components using the latest web standards. It covers everything from the basics of web components to advanced topics such as styling, performance, and testing.

Web Components in Action

Paperback

LIGHTNING WEB COMPONENTS (LWC) DEVELOPMENT ON THE...

Save

Provides a collection of recipes for solving common problems when building web components with a focus on the vanilla JavaScript approach. It covers a wide range of topics, from creating simple components to advanced topics such as data binding, templating, and animations.

LIGHTNING WEB COMPONENTS (LWC) DEVELOPMENT ON THE...

Paperback

Check price

LIGHTNING WEB COMPONENTS (LWC) DEVELOPMENT ON THE...

Kindle Edition

Check price

HTML5 for Web Designers

Save

Provides a comprehensive overview of HTML5 and CSS3, which are the foundation technologies for building web components.

HTML5 FOR WEB DESIGNERS, Second Edition

Paperback

(Français) HTML5 pour les web designers, 2e édition

Paperback

JavaScript A Beginner's Guide Fifth Edition

Save

Provides a comprehensive overview of JavaScript, which is the programming language used to create web components.

JavaScript: A Beginner's Guide, Fifth Edition

Kindle Edition

Lonely Planet New England's Best Trips

Save

Comprehensive guide to building web components using the latest web standards. It covers everything from the basics of web components to advanced topics such as styling, performance, and testing.

Lonely Planet New England's Best Trips (Road Trips...

Paperback

Lonely Planet New England's Best Trips (Travel...

Kindle Edition