OpenCourser brand icon
Sign in
We may earn an affiliate commission when you visit our partners.
Pluralsight logo

A Practical Guide to Vanilla Web Components

Leon Revill

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.

Read more

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.

Enroll now

Here's a deal for you

We found an offer that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off

What's inside

Syllabus

Course Overview
Web Component Fundamentals
The Basic Anatomy of a Web Component
Creating a Star Rating Component
Read more
Creating a Configurable Slide out Menu Component
Styling Web Components
Production Ready Web Components

Good to know

Know what's good
, what to watch for
, 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

Save A Practical Guide to Vanilla Web Components to your list so you can find it easily later:
Save

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
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
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
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:
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
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
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
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
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
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 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
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.
Cover image
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
LIGHTNING WEB COMPONENTS (LWC) DEVELOPMENT ON THE...
Kindle Edition
Check
Cover image
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
$$
Cover image
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
$$
Cover image
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
$$
Cover image
Responsive web design
Save
Provides a gentle introduction to web components, which new way to build reusable web components.
Responsive Web Design: Second Edition
Paperback
$$
(Français) Responsive web design: N° 4
Paperback
$$
Responsive Web Design: Second Edition
Kindle Edition
$
Cover image
Primary Computing and Digital Technologies:...
Save
Provides a practical guide to building web components using the latest web standards.
Primary Computing and Digital Technologies:...
Kindle Edition
$$

Share

Help others find this course page by sharing it with your friends and followers:
Facebook
LinkedIn
Reddit
X
Link
Email

Similar courses

Here are nine courses similar to A Practical Guide to Vanilla Web Components.
Developing Front End Apps with React
Most relevant
Developing Front-End Apps with React
Most relevant
Kendo UI 2022 Fundamentals
Most relevant
Angular Fundamentals
Most relevant
Android Architecture Masterclass
Most relevant
Android Fundamentals: Activities
Working with React and Go (Golang)
Create a Web Link Preview with VueJS Components
Creating Animations with Vue 2
Course image
Time
130 hours
Level
Intermediate
Via
Pluralsight
Instructor
Leon Revill
Language
English
Good to know
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
Share and help others discover this course.
Facebook LinkedIn X Reddit Link Email
Don't miss out
Enroll today to gain access to this course
Enroll in this course
Our mission

OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.

Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.

Find this site helpful? Tell a friend about us.

Affiliate disclosure

We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.

Your purchases help us maintain our catalog and keep our servers humming without ads.

Thank you for supporting OpenCourser.

© 2016 - 2024 OpenCourser