Web Components & Stencil.js – Build Custom HTML Elements

سرفصل های دوره

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

1 - Introduction

1 - Introduction

2 - Web Components A Quick Demo

2 - getting-started-02-finished.zip

2 - index.html

2 - modal.zip

3 - What are Web Components

4 - Join our Online Learning Community.html

5 - Why Do We Use Web Components

6 - Comparing Web Components Frameworks

7 - Course Outline

8 - How To Get The Most Out Of The Course

2 - Refreshing Next Generation JavaScript Optional

9 - Module Introduction

10 - Understanding let and const

11 - Working with Arrow Functions

12 - Exports and Imports

13 - Understanding Classes

14 - Classes Properties and Methods

15 - The Spread Rest Operator

16 - Refreshing Array Functions

17 - More on Promises.txt

17 - Options for handling async code.txt

17 - Understanding Async Code

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

21 - Browser Support

22 - Our Development Setup

23 - Creating our First Custom Element

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

24 - Interacting with the Surrounding DOM

25 - Understanding the Custom Elements Lifecycle

26 - Using connectedcallback for DOM Access

27 - Listening to Events Inside the Component

27 - The this keyword in JavaScript.txt

28 - Using Attributes on Custom Elements

28 - basics-02-using-attributes.zip

29 - Attributes vs Properties.html

29 - attributes-vs-properties.pdf

30 - Styling our Elements

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

31 - Using the Shadow DOM

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

32 - Adding an HTML Template

33 - Using Slots

33 - basics-05-using-slots.zip

34 - Defining the Template in JavaScript

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

35 - Using Style Tags in the Shadow DOM

36 - Extending BuiltIn Elements

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

37 - Debugging.html

38 - Wrap Up

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

41 - Understanding Shadow DOM Projection

42 - Styling slot Content Outside of the Shadow DOM

43 - Styling slot Content Inside the Shadow DOM

44 - Styling the Host Component

45 - Styling Components from Outside.html

46 - Conditional Host Styling

47 - Styling with the Host Content in Mind

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

48 - More about CSS Properties.txt

48 - Smart Dynamic Styling with CSS Variables

48 - advanced-02-css-variables.zip

49 - Cleaning Up Our Overall Styling

50 - Observing Attribute Changes

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

51 - Adjusting the Component Behaviour Upon Attribute Changes

52 - Using disconnectedcallback

53 - Adding a Render Method

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

54 - Wrap Up

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

57 - Creating the Basics Modal Component

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

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

58 - Adding the Modal Container

59 - Dive into CSS Flexbox.txt

59 - Styling the Modal Elements

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

60 - Adding Some General App Logic

61 - Opening the Modal via CSS

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

62 - Public Methods Properties

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

63 - Understanding Named Slots

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

64 - complex-cmp-07-slotchange.zip

64 - slotchange Getting Access to Slot Content

65 - Closing the Modal with Modal Buttons

66 - Dispatching Custom Events

67 - Configuring Custom Events

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

68 - Adding Enhancements Modal Animations

68 - More about CSS Transitions.txt

68 - complex-cmp-09-finished.zip

69 - Wrap Up

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

72 - Using Web Components in Modern Browsers

73 - Browser Support for Web Components

74 - Using Web Components in All Browsers.html

75 - Creating a Stencil Project

75 - component-starter.zip

76 - What is Stencil

77 - Stenciljs behind the Scenes.html

78 - Diving Into a First Stencil Component

79 - Wrap Up

7 - Stencil Diving Into the Basics

80 - Module Introduction

81 - Using the Development Server

82 - MUST READ Ensuring Correct Imports.html

83 - Creating a New Stencil Web Component

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

84 - Styling a Stencil Component

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

85 - Using Props

86 - Important Reflect Props to Attributes.html

87 - Configuring Props

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

88 - Using Slots Styling

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

89 - Rendering Conditional Content

90 - Using Attributes for Styling only

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

91 - Using Props in Combination with Attributes

92 - Understanding Mutable Props

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

93 - Preparing Tabs

94 - Adding More Event Listeners

95 - Using State

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

96 - Adding Methods to Components

97 - Adding a Backdrop

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

98 - Wrap Up

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

101 - Creating a New Component

102 - Component API Preparations

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

103 - Submitting Forms

104 - Styling the Component

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

105 - HTTP Requests in Components

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

106 - Using the API Key

107 - Accessing the Host Element

108 - Using References

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

109 - Two Way Binding Input Validation

110 - Error Handling

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

111 - Using the componentdidload Lifecycle Hook

112 - All Lifecycle Hooks

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

113 - Using Update Lifecycle Hooks

114 - Watching Prop Changes

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

115 - Creating a New Component

116 - Styling the New Component

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

117 - Outputting a List of Elements

118 - Styling the List Items

119 - Emitting Customs Events

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

120 - Important The Listen Decorator.html

121 - Using the Listen Decorator

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

122 - Using Hostdata

123 - Adding a Loading Spinner

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

124 - Embedding Components Into Components

125 - Using CSS Properties

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

126 - Using Stenciljs to Build Entire Apps.html

127 - Wrap Up

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

130 - Using Stencil Config

131 - Building Using the Components

131 - publishing-01-prepared.zip

131 - publishing-example-projects.zip

132 - Using Web Components in a Nodejs Project

133 - Publishing to NPM

134 - Installing NPM Packages

135 - Using Web Components in an Angular App

136 - Using Web Components in a React App

137 - Using Web Components in a Vue App

138 - Polyfills The Internet Explorer

139 - IE Polyfills.html

140 - Wrap Up

141 - Useful Resources Links.html

10 - Roundup

142 - Course Roundup

143 - Useful Resources Links.html

144 - Bonus More Content.html

45,900 تومان

خرید اشتراک افزودن به سبد خرید

خرید دانلودی فوری

در این روش نیاز به افزودن محصول به سبد خرید و تکمیل اطلاعات نیست و شما پس از وارد کردن ایمیل خود و طی کردن مراحل پرداخت لینک های دریافت محصولات را در ایمیل خود دریافت خواهید کرد.

تولید کننده: Udemy