Web Components & Stencil.js - Build Custom HTML Elements from Udemy

What's inside

Learning objectives

Build your own re-usable html elements that you can use in your own projects or share with other developers

Overcome the limitations of the built-in html elements with the power of html, css and javascript only

Build your own re-usable html elements that you can use in your own projects or share with other developers
Overcome the limitations of the built-in html elements with the power of html, css and javascript only

Syllabus

Introduction

Welcome to the course! Let me introduce myself and give you a rough overview of this course, in this lecture.

What are "Web Components"? You understand them best, if you see them in action - so time for a quick web components + custom HTML elements demo.

We saw web components in action - what exactly are web components then? How did that demo work? Let's dive into the important theory in this lecture.

Learning alone is absolutely fine but finding learning partners might be a nice thing, too. Our learning community is a great place to learn and grow together - of course it's 100% free and optional!

We know what Web Components and Custom HTML Elements are - why would we use them? In this lecture, I'll give you some ideas!

Do web components replace Angular, React.js or Vue.js? Are custom HTML elements better than JavaScript frameworks? Let's explore that question in this lecture!

We got the theory out of the way - time to now understand what's in this course. Here's an overview of the course content and the order in which it is presented.

It's important to me to ensure that you're getting the most out of this course! So here are some tipps & tricks regarding how you should use the course content.

Refreshing Next Generation JavaScript (Optional)

Module Introduction

Understanding "let" and "const"

Working with Arrow Functions

Exports and Imports

Understanding Classes

Classes, Properties and Methods

The Spread & Rest Operator

Refreshing Array Functions

Understanding Async Code

Have a look at this lecture to get a good overview over the various next-gen JS features you'll encounter in this course.

Here's something we'll also use quite a bit in this course: Some JavaScript array functions.

Understanding the Basics

Module Introduction - What are Web Components?

Browser Support

Our Development Setup

Creating our First Custom Element

Interacting with the Surrounding DOM

Understanding the Custom Elements Lifecycle

Using "connectedcallback" for DOM Access

Listening to Events Inside the Component

Using Attributes on Custom Elements

"Attributes" vs "Properties"

Styling our Elements

Using the Shadow DOM

Adding an HTML Template

Using Slots

Defining the Template in JavaScript

Using Style Tags in the Shadow DOM

Extending Built-In Elements

Time to Practice - The Basics

Debugging

Wrap Up

Useful Resources & Links

Diving Deeper Into Web Components

Understanding Shadow DOM Projection

Styling "slot" Content Outside of the Shadow DOM

Styling "slot" Content Inside the Shadow DOM

Styling the Host Component

Styling Components from Outside

Conditional Host Styling

Styling with the Host Content in Mind

Smart Dynamic Styling with CSS Variables

Cleaning Up Our Overall Styling

Observing Attribute Changes

Adjusting the Component Behaviour Upon Attribute Changes

Using "disconnectedcallback"

Adding a Render Method

Building More Complex Components

Creating the Basics Modal Component

Adding the Modal Container

Styling the Modal Elements

Adding Some General App Logic

Opening the Modal via CSS

Public Methods & Properties

Understanding Named Slots

"slotchange" & Getting Access to Slot Content

Closing the Modal with Modal Buttons

Dispatching Custom Events

Configuring Custom Events

Adding Enhancements & Modal Animations

Stencil - An Introduction

Using Web Components in Modern Browsers

Browser Support for Web Components

Using Web Components in All Browsers

Creating a Stencil Project

What is Stencil?

Stencil.js behind the Scenes

Diving Into a First Stencil Component

Stencil - Diving Into the Basics

Using the Development Server

MUST READ: Ensuring Correct Imports

Creating a New Stencil Web Component

Styling a Stencil Component

Using Props

Important: Reflect Props to Attributes

Configuring Props

Using Slots & Styling

Rendering Conditional Content

Using Attributes for Styling only

Using Props in Combination with Attributes

Understanding Mutable Props

Good to know

Know what's good

, what to watch for

, and possible dealbreakers

Explores advanced web components, a modern feature that enhances custom HTML element creation

Introduces Stencil.js, a powerful tool that simplifies web component development

In-depth coverage of web component fundamentals, including custom elements, shadow DOM, and event handling

Taught by Maximilian Schwarzmüller, an experienced web developer known for clear and engaging instruction

Suitable for JavaScript developers familiar with next-generation JavaScript features

Provides hands-on labs and exercises to reinforce learning

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 Web Components & Stencil.js - Build Custom HTML Elements with these activities:

Organize and categorize course materials

Show steps

Keeping your course materials organized will make it easier to locate and review important information throughout the course.

Browse courses on Organization

Show steps

Create a system for organizing notes, assignments, and quizzes
Categorize materials based on topic or module
Review your organized materials regularly

Review the basics of JavaScript

Show steps

A solid understanding of JavaScript is crucial for working with web components. This activity will help you refresh your knowledge of JavaScript's core concepts.

Browse courses on JavaScript

Show steps

Review variables, data types, and operators
Practice writing functions and control flow statements
Test your understanding with JavaScript exercises

Join a study group or discussion forum

Show steps

Engaging with peers through study groups or discussion forums can enhance your understanding of course material and provide different perspectives.

Browse courses on Collaboration

Show steps

Find a study group or discussion forum related to the course
Participate in discussions and ask questions
Share your insights and help others

Five other activities

Expand to see all activities and additional details

Show all eight activities

Build a web component that uses the Shadow DOM

Show steps

Building a web component that utilizes the Shadow DOM will provide you with practical experience in working with these foundational Web Component concepts.

Browse courses on Web Components

Show steps

Create a basic web component using the built-in Custom Elements API
Add a Shadow DOM to your web component
Move your HTML and CSS into the Shadow DOM
Test your web component in a simple HTML page

Learn about Stencil.js and how to create a component

Show steps

Stencil.js can greatly simplify the creation of native web components. This activity will introduce you to the library and its benefits.

Show steps

Explore the Stencil.js website and documentation
Follow a tutorial on creating a basic Stencil.js component
Experiment with different features of Stencil.js

Attend a workshop on web components or Stencil.js

Show steps

Attending a workshop can provide you with hands-on experience and in-depth knowledge from experts in the field.

Browse courses on Web Components

Show steps

Research and identify relevant workshops
Register and attend the workshop
Participate actively and ask questions
Implement what you learn in your own projects

Develop a custom web component for a specific use case

Show steps

Creating a custom web component for a specific use case will allow you to apply your knowledge of web components to a practical scenario and create a reusable and maintainable component.

Browse courses on Web Components

Show steps

Identify a specific use case for a custom web component
Design the API and functionality of the web component
Implement the web component using HTML, CSS, and JavaScript
Test and debug your web component
Publish your web component to a public repository

Write a blog post or article about web components

Show steps

Writing about web components will help you solidify your understanding and share your knowledge with others.

Browse courses on Web Components

Show steps

Choose a specific topic related to web components
Research and gather information
Write and edit your blog post or article
Publish and promote your content

Career center

Learners who complete Web Components & Stencil.js - Build Custom HTML Elements will develop knowledge and skills that may be useful to these careers:

Web Developer

As a Web Developer, you will be responsible for developing and maintaining websites and web applications. This course will help you build a strong foundation in the fundamentals of web development, including HTML, CSS, and JavaScript. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create complex and interactive web applications that are both efficient and visually appealing.

See salaries and explore the career path for Web Developer

Full-Stack Developer

As a Full-Stack Developer, you will be responsible for developing both the front-end and back-end of websites and web applications. This course will help you build a strong foundation in the fundamentals of web development, including HTML, CSS, JavaScript, and server-side programming. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create complex and interactive web applications that are both efficient and visually appealing.

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

UI Developer

As a UI Developer, you will be responsible for developing the user interface of websites and web applications. This course will help you build a strong foundation in the fundamentals of web development, including HTML, CSS, and JavaScript. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create complex and interactive user interfaces that are both efficient and visually appealing.

See salaries and explore the career path for UI Developer

Front-End Engineer

As a Front-End Engineer, you will be responsible for designing and developing the user interface of websites and web applications. This course will help you build a strong foundation in the fundamentals of web development, including HTML, CSS, and JavaScript. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create complex and interactive user interfaces that are both efficient and visually appealing.

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

Web Designer

As a Web Designer, you will be responsible for designing the visual appearance of websites and web applications. This course will help you build a strong foundation in the fundamentals of web design, including typography, color theory, and layout. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create visually appealing and user-friendly websites and web applications.

See salaries and explore the career path for Web Designer

Information Architect

As an Information Architect, you will be responsible for designing the structure and organization of websites and web applications. This course will help you build a strong foundation in the fundamentals of information architecture, including sitemaps, navigation, and metadata. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create websites and web applications that are both organized and easy to use.

See salaries and explore the career path for Information Architect

Software Engineer

As a Software Engineer, you will be responsible for designing, developing, and maintaining software applications. This course will help you build a strong foundation in the fundamentals of software development, including object-oriented programming, data structures, and algorithms. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create complex and scalable software applications.

See salaries and explore the career path for Software Engineer

Product Designer

As a Product Designer, you will be responsible for designing the user experience and visual appearance of products. This course will help you build a strong foundation in the fundamentals of product design, including user research, prototyping, and usability testing. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create products that are both useful and visually appealing.

See salaries and explore the career path for Product Designer

E-commerce Manager

As an E-commerce Manager, you will be responsible for planning and managing the online sales of products and services. This course will help you build a strong foundation in the fundamentals of e-commerce, including website design, product management, and order fulfillment. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create and manage an e-commerce website that is both efficient and profitable.

See salaries and explore the career path for E-commerce Manager

Instructional Designer

As an Instructional Designer, you will be responsible for designing and developing educational materials. This course will help you build a strong foundation in the fundamentals of instructional design, including learning theory, assessment, and technology integration. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create engaging and effective educational materials.

See salaries and explore the career path for Instructional Designer

UX Designer

As a UX Designer, you will be responsible for designing the user experience of websites and web applications. This course will help you build a strong foundation in the fundamentals of user experience design, including usability, accessibility, and information architecture. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create user interfaces that are both visually appealing and easy to use.

See salaries and explore the career path for UX Designer

Content Strategist

As a Content Strategist, you will be responsible for planning and managing the content of websites and other digital media. This course will help you build a strong foundation in the fundamentals of content strategy, including content planning, development, and distribution. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create and manage content that is both engaging and effective.

See salaries and explore the career path for Content Strategist

User Experience Researcher

As a User Experience Researcher, you will be responsible for conducting research on user experience. This course will help you build a strong foundation in the fundamentals of user experience research, including research methods, data analysis, and reporting. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to conduct research and create reports that are both insightful and actionable.

See salaries and explore the career path for User Experience Researcher

Technical Writer

As a Technical Writer, you will be responsible for writing documentation for software and other technical products. This course will help you build a strong foundation in the fundamentals of technical writing, including style, grammar, and organization. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create clear and concise documentation that is easy to understand.

See salaries and explore the career path for Technical Writer

Digital Marketing Specialist

As a Digital Marketing Specialist, you will be responsible for planning and executing digital marketing campaigns. This course will help you build a strong foundation in the fundamentals of digital marketing, including search engine optimization, social media marketing, and email marketing. You will also learn how to use Stencil.js, a tool that makes it easy to create custom HTML elements. This will give you the skills you need to create and execute digital marketing campaigns that are both effective and efficient.

See salaries and explore the career path for Digital Marketing Specialist