Web Components & Stencil.js - Build Custom HTML Elements

Focused View

Academind by Maximilian Schwarzmüller,Maximilian Schwarzmüller

8:15:00

10 View

1 - Introduction

1 - Introduction.mp4

01:38

2 - Web Components A Quick Demo.mp4

06:30

2 - getting-started-02-finished.zip

2 - index.html

2 - modal.zip

3 - What are Web Components.mp4

03:22

4 - Join our Online Learning Community.html

5 - Why Do We Use Web Components.mp4

03:05

6 - Comparing Web Components Frameworks.mp4

06:15

7 - Course Outline.mp4

02:46

8 - How To Get The Most Out Of The Course.mp4

03:04

2 - Refreshing Next Generation JavaScript Optional

9 - Module Introduction.mp4

01:12

10 - Understanding let and const.mp4

03:05

11 - Working with Arrow Functions.mp4

05:27

12 - Exports and Imports.mp4

04:43

13 - Understanding Classes.mp4

04:30

14 - Classes Properties and Methods.mp4

03:03

15 - The Spread Rest Operator.mp4

06:27

16 - Refreshing Array Functions.mp4

02:32

17 - More on Promises.txt

17 - Options for handling async code.txt

17 - Understanding Async Code.mp4

01:04

18 - NextGen JavaScript Summary.html

18 - next-gen-js-summary.pdf

19 - JS Array Functions.html

3 - Understanding the Basics

20 - Module Introduction What are Web Components.mp4

05:07

21 - Browser Support.mp4

03:05

22 - Our Development Setup.mp4

04:38

23 - Creating our First Custom Element.mp4

08:29

23 - basics-01-first-custom-element.zip

24 - Interacting with the Surrounding DOM.mp4

05:04

25 - Understanding the Custom Elements Lifecycle.mp4

02:51

26 - Using connectedcallback for DOM Access.mp4

02:05

27 - Listening to Events Inside the Component.mp4

08:52

27 - The this keyword in JavaScript.txt

28 - Using Attributes on Custom Elements.mp4

04:45

28 - basics-02-using-attributes.zip

29 - Attributes vs Properties.html

29 - attributes-vs-properties.pdf

30 - Styling our Elements.mp4

04:08

30 - basics-03-styling-our-elements.zip

31 - Using the Shadow DOM.mp4

05:00

31 - basics-04-using-the-shadow-dom.zip

32 - Adding an HTML Template.mp4

05:41

33 - Using Slots.mp4

01:50

33 - basics-05-using-slots.zip

34 - Defining the Template in JavaScript.mp4

03:29

34 - basics-06-defining-the-template-in-js.zip

35 - Using Style Tags in the Shadow DOM.mp4

02:40

36 - Extending BuiltIn Elements.mp4

07:33

36 - basics-07-extending-built-in-elements.zip

37 - Debugging.html

38 - Wrap Up.mp4

02:30

39 - Useful Resources Links.html

39 - basics-01-first-custom-element.zip

39 - basics-02-using-attributes.zip

39 - basics-03-styling-our-elements.zip

39 - basics-04-using-the-shadow-dom.zip

39 - basics-05-using-slots.zip

39 - basics-06-defining-the-template-in-js.zip

39 - basics-07-extending-built-in-elements.zip

4 - Diving Deeper Into Web Components

40 - Module Introduction.mp4

00:51

41 - Understanding Shadow DOM Projection.mp4

02:26

42 - Styling slot Content Outside of the Shadow DOM.mp4

03:45

43 - Styling slot Content Inside the Shadow DOM.mp4

03:10

44 - Styling the Host Component.mp4

04:42

45 - Styling Components from Outside.html

46 - Conditional Host Styling.mp4

02:49

47 - Styling with the Host Content in Mind.mp4

02:28

47 - advanced-01-styling-and-shadow-dom.zip

48 - More about CSS Properties.txt

48 - Smart Dynamic Styling with CSS Variables.mp4

06:20

48 - advanced-02-css-variables.zip

49 - Cleaning Up Our Overall Styling.mp4

03:22

50 - Observing Attribute Changes.mp4

06:17

50 - advanced-03-observing-attribute-changes.zip

51 - Adjusting the Component Behaviour Upon Attribute Changes.mp4

02:34

52 - Using disconnectedcallback.mp4

04:40

53 - Adding a Render Method.mp4

06:13

53 - advanced-04-adding-a-render-method.zip

54 - Wrap Up.mp4

02:33

54 - advanced-05-finished.zip

55 - Useful Resources Links.html

55 - advanced-01-styling-and-shadow-dom.zip

55 - advanced-02-css-variables.zip

55 - advanced-03-observing-attribute-changes.zip

55 - advanced-04-adding-a-render-method.zip

55 - advanced-05-finished.zip

5 - Building More Complex Components

56 - Module Introduction.mp4

00:52

57 - Creating the Basics Modal Component.mp4

06:33

57 - complex-cmp-01-starting-setup.zip

57 - complex-cmp-02-creating-the-basic-modal.zip

58 - Adding the Modal Container.mp4

02:30

59 - Dive into CSS Flexbox.txt

59 - Styling the Modal Elements.mp4

05:35

59 - complex-cmp-03-styling-the-modal.zip

60 - Adding Some General App Logic.mp4

03:49

61 - Opening the Modal via CSS.mp4

05:23

61 - complex-cmp-04-opening-via-css.zip

62 - Public Methods Properties.mp4

06:37

62 - complex-cmp-05-public-methods-and-properties.zip

63 - Understanding Named Slots.mp4

05:45

63 - complex-cmp-06-understanding-named-slots.zip

64 - complex-cmp-07-slotchange.zip

64 - slotchange Getting Access to Slot Content.mp4

05:10

65 - Closing the Modal with Modal Buttons.mp4

07:01

66 - Dispatching Custom Events.mp4

03:40

67 - Configuring Custom Events.mp4

04:53

67 - complex-cmp-08-configuring-custom-events.zip

68 - Adding Enhancements Modal Animations.mp4

04:51

68 - More about CSS Transitions.txt

68 - complex-cmp-09-finished.zip

69 - Wrap Up.mp4

01:48

70 - Useful Resources Links.html

70 - complex-cmp-01-starting-setup.zip

70 - complex-cmp-02-creating-the-basic-modal.zip

70 - complex-cmp-03-styling-the-modal.zip

70 - complex-cmp-04-opening-via-css.zip

70 - complex-cmp-05-public-methods-and-properties.zip

70 - complex-cmp-06-understanding-named-slots.zip

70 - complex-cmp-07-slotchange.zip

70 - complex-cmp-08-configuring-custom-events.zip

70 - complex-cmp-09-finished.zip

6 - Stencil An Introduction

71 - Module Introduction.mp4

01:21

72 - Using Web Components in Modern Browsers.mp4

02:35

73 - Browser Support for Web Components.mp4

02:27

74 - Using Web Components in All Browsers.html

75 - Creating a Stencil Project.mp4

02:59

75 - component-starter.zip

76 - What is Stencil.mp4

03:09

77 - Stenciljs behind the Scenes.html

78 - Diving Into a First Stencil Component.mp4

06:56

79 - Wrap Up.mp4

01:41

7 - Stencil Diving Into the Basics

80 - Module Introduction.mp4

00:35

81 - Using the Development Server.mp4

03:20

82 - MUST READ Ensuring Correct Imports.html

83 - Creating a New Stencil Web Component.mp4

08:55

83 - stencil-basics-01-creating-new-stencil-component.zip

84 - Styling a Stencil Component.mp4

05:40

84 - stencil-basics-02-styling-stencil-component.zip

85 - Using Props.mp4

07:02

86 - Important Reflect Props to Attributes.html

87 - Configuring Props.mp4

01:27

87 - stencil-basics-03-configuring-props.zip

88 - Using Slots Styling.mp4

04:55

88 - stencil-basics-04-slots-and-styling.zip

89 - Rendering Conditional Content.mp4

02:08

90 - Using Attributes for Styling only.mp4

03:27

90 - stencil-basics-05-using-attributes-for-styling.zip

91 - Using Props in Combination with Attributes.mp4

04:17

92 - Understanding Mutable Props.mp4

05:34

92 - stencil-basics-06-mutable-props.zip

93 - Preparing Tabs.mp4

03:33

94 - Adding More Event Listeners.mp4

04:23

95 - Using State.mp4

04:33

95 - stencil-basics-07-using-state.zip

96 - Adding Methods to Components.mp4

03:40

97 - Adding a Backdrop.mp4

05:20

97 - stencil-basics-08-adding-a-backdrop.zip

98 - Wrap Up.mp4

01:52

99 - Useful Resources Links.html

99 - stencil-basics-01-creating-new-stencil-component.zip

99 - stencil-basics-02-styling-stencil-component.zip

99 - stencil-basics-03-configuring-props.zip

99 - stencil-basics-04-slots-and-styling.zip

99 - stencil-basics-05-using-attributes-for-styling.zip

99 - stencil-basics-06-mutable-props.zip

99 - stencil-basics-07-using-state.zip

99 - stencil-basics-08-adding-a-backdrop.zip

8 - Advanced Stencil

100 - Module Introdution.mp4

00:38

101 - Creating a New Component.mp4

02:48

102 - Component API Preparations.mp4

03:57

102 - adv-stencil-01-basic-new-component.zip

103 - Submitting Forms.mp4

02:09

104 - Styling the Component.mp4

05:49

104 - adv-stencil-02-styling-the-component.zip

105 - HTTP Requests in Components.mp4

07:43

105 - adv-stencil-03-http-requests-in-components.zip

106 - Using the API Key.mp4

02:23

107 - Accessing the Host Element.mp4

05:15

108 - Using References.mp4

02:52

108 - adv-stencil-04-using-references.zip

109 - Two Way Binding Input Validation.mp4

06:32

110 - Error Handling.mp4

06:07

110 - adv-stencil-05-error-handling.zip

111 - Using the componentdidload Lifecycle Hook.mp4

05:35

112 - All Lifecycle Hooks.mp4

05:16

112 - adv-stencil-06-all-lifecycle-hooks.zip

113 - Using Update Lifecycle Hooks.mp4

04:41

114 - Watching Prop Changes.mp4

04:47

114 - adv-stencil-07-watching-prop-changes.zip

115 - Creating a New Component.mp4

05:56

116 - Styling the New Component.mp4

01:11

116 - adv-stencil-08-styling-the-new-component.zip

117 - Outputting a List of Elements.mp4

06:20

118 - Styling the List Items.mp4

02:11

119 - Emitting Customs Events.mp4

04:47

119 - adv-stencil-09-emitting-custom-events.zip

120 - Important The Listen Decorator.html

121 - Using the Listen Decorator.mp4

06:05

121 - adv-stencil-10-using-the-listen-decorator.zip

122 - Using Hostdata.mp4

04:37

123 - Adding a Loading Spinner.mp4

03:53

123 - adv-stencil-11-adding-a-loading-spinner.zip

124 - Embedding Components Into Components.mp4

04:54

125 - Using CSS Properties.mp4

04:32

125 - adv-stencil-12-using-css-properties.zip

126 - Using Stenciljs to Build Entire Apps.html

127 - Wrap Up.mp4

01:25

128 - Useful Resources Links.html

128 - adv-stencil-01-basic-new-component.zip

128 - adv-stencil-02-styling-the-component.zip

128 - adv-stencil-03-http-requests-in-components.zip

128 - adv-stencil-04-using-references.zip

128 - adv-stencil-05-error-handling.zip

128 - adv-stencil-06-all-lifecycle-hooks.zip

128 - adv-stencil-07-watching-prop-changes.zip

128 - adv-stencil-08-styling-the-new-component.zip

128 - adv-stencil-09-emitting-custom-events.zip

128 - adv-stencil-10-using-the-listen-decorator.zip

128 - adv-stencil-11-adding-a-loading-spinner.zip

128 - adv-stencil-12-using-css-properties.zip

9 - Deployment Publishing

129 - Module Introduction.mp4

00:54

130 - Using Stencil Config.mp4

04:59

131 - Building Using the Components.mp4

04:15

131 - publishing-01-prepared.zip

131 - publishing-example-projects.zip

132 - Using Web Components in a Nodejs Project.mp4

02:10

133 - Publishing to NPM.mp4

03:25

134 - Installing NPM Packages.mp4

01:27

135 - Using Web Components in an Angular App.mp4

05:32

136 - Using Web Components in a React App.mp4

05:18

137 - Using Web Components in a Vue App.mp4

04:31

138 - Polyfills The Internet Explorer.mp4

02:49

139 - IE Polyfills.html

140 - Wrap Up.mp4

01:26

141 - Useful Resources Links.html

10 - Roundup

142 - Course Roundup.mp4

00:55

143 - Useful Resources Links.html

144 - Bonus More Content.html

Description

A Complete Introduction to building Custom HTML Elements/ Web Components with and without StencilJS

What You'll Learn?

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

Who is this for?

Everyone who's interested in building custom HTML tags!

Students who want to dive into a future-proof web technology that can be used in any web app

What You Need to Know?

Basic JavaScript knowledge is required (base syntax, DOM basics, objects basics)

ES6+ JavaScript knowledge (classes etc) is a plus but not a must-have

More details

Description
Let's face it:Â You got hundreds of HTMLÂ tags to choose from but some really helpful ones (, , , ...)Â are missing.
What if you could build your own HTMLÂ tags?Â
Without frameworks like Angular, libraries like React or expert JavaScript knowledge in general. Just with a magic, native-JavaScript feature called "Web Components" (or "custom HTML elements").
Web Components are a combination of various specifications that are baked into the browser. Getting started with these features is a breeze and you'll quickly be able to build your own powerful and re-usable (even across projects!)Â custom HTMLÂ elements.
Such custom elements don't replace Angular, React or Vue though - instead you can easily use them in ANYÂ web project, including projects using such frameworks and libraries.
In this course, you'll learn this from scratch.
But we won't stop there. Whilst getting started is fairly easy, more complex components will be more difficult to create.Â Stencil.js is a tool that makes the creation of such native web components much easier by using modern features like TypeScript and JSXÂ (don't know that?Â No worries, you'll learn it in the course!).
In detail, in this course you will learn:
how to build re-usable, lightweight custom HTMLÂ elements with native browser features
how to build web components of all complexities - from a simple tooltip to modals or side drawers
how to pass data into your own web components and use it there
how to emit your own custom events which you can listen to in JavaScript
how to use the Shadow DOMÂ to scope your CSSÂ styles to your custom elements
how to use Stencil.js to get a much easier development workflow
how to use the many features Stencil.js provides to build native web components way more efficiently
how to deploy/Â re-use your own web components in ANYÂ project using ANYÂ JavaScript framework like Angular, React or Vue (or none at all!)
Prerequisites:
Basic JavaScriptÂ knowledge is a must-have
ES6 JavaScript knowledge (const, let, classes, ...)Â is strongly recommended but not strictly required - a brief refresher is provided as part of the course
NO JavaScript framework knowledge (e.g. Angular, React, Vue)Â is required
NOÂ TypeScript or JSXÂ knowledge is required
Let's dive into this exciting technology together!
Who this course is for:
Everyone who's interested in building custom HTML tags!
Students who want to dive into a future-proof web technology that can be used in any web app

User Reviews

Rating

average 0

Total votes0

Focused display

Bundling the courses and know how of successful instructors, Academind strives to deliver high quality online education. Online Education, Real-Life Success - that's what Academind stands for. Learn topics like web development, data analyses and more in a fun and engaging way.We've taught more than 2,000,000 students on a broad variety of topics. We'd love to teach you as well! :)Keep learning!

Maximilian Schwarzmüller

Instructor's Courses

Experience as (Web) DeveloperStarting out at the age of 12 I never stopped learning new programming skills and languages. Early I started creating websites for friends and just for fun as well. Besides web development I also explored Python and other non-web-only languages. This passion has since lasted and lead to my decision of working as a freelance web developer and consultant. The success and fun I have in this job is immense and really keeps that passion burningly alive.Starting web development on the backend (PHP with Laravel, NodeJS, Python) I also became more and more of a frontend developer using modern frameworks like React, Angular or VueJS in a lot of projects. I love both worlds nowadays!I also build full-stack applications and acquired expert DevOps and cloud computing knowledge - proven by the many AWS certifications I hold (incl. the top-level Solutions Architect Professional certification).As a self-taught developer I had the chance to broaden my horizon by studying Business Administration where I hold a Master's degree. That enabled me to work in a major strategy consultancy as well as a bank. While learning, that I enjoy development more than these fields, the time in this sector greatly improved my overall experience and skills.Experience as InstructorAs a self-taught professional I really know the hard parts and the difficult topics when learning new or improving on already-known languages. This background and experience enables me to focus on the most relevant key concepts and topics. My track record of many 5-star rated courses and more than 2,000,000 students on Udemy is the best proof for that.Whether working as development instructor or teaching Business Administration I always received great feedback. The most rewarding experience is to see how people find new, better jobs, build awesome web applications, acquire amazing projects or simply enjoy their hobby with the help of my content.Together with Manuel Lorenz, I founded Academind to offer the best possible learning experience to our more than 2,000,000 students.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.