UI UX Design Hybrid from Figma to HTML CSS and JavaScript

31h 51m 43s
English
Paid

Course description

Learn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap

Read more about the course

Creative Projects

  • Create complex web design layouts with Figma Auto Layout and use pure CSS Grid and Flexbox

  • Transform Photoshop into HTML mark up and style it with CSS

  • Morph SVG with pure vanilla JavaScript

  • Trigger JavaScript DOM events and control CSS animations with JavaScript

  • 
Learn interaction design with CSS Transitions and Animation

  • Develop production ready responsive design with Bootstrap 5 Grid system

  • Automate your brand style guide as a visual designer with Figma

  • Use Design Principles to create Logo and YouTube thumbnail videos with Affinity Designer

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Course Overview 01:52
2 Figma Basics 14:19
3 Figma Plugin and Community 09:22
4 Figma Essential Behaviors 22:48
5 Figma Core Engine Concepts 20:42
6 Airbnb Project 15:50
7 Medignition Project Part 1 16:03
8 Medignition Project Part 2 09:49
9 Nested Component Behavior 03:55
10 Sandrina Prototyping Project 17:12
11 Overlay Prototyping Project 23:35
12 Reusable Styles 10:07
13 Automate Reusable Styles 11:14
14 Automate Brand Styleguide 16:19
15 Accessibility Testing 13:45
16 Component Skeleton 09:02
17 3000 Component Project 26:48
18 Interactive Components Nested 27:30
19 Automate color palette 12:34
20 Automate typography styles 08:58
21 Wireframe component 09:36
22 Visual design components 11:51
23 Rapid design part 1 12:43
24 Rapid design part 2 09:01
25 Unity and Similarity 03:45
26 Dominance and Working Memory 04:33
27 Negative Space and Complexity 04:10
28 Contrast and Emphasis 04:23
29 Proximity and Common Region 03:40
30 Alignment and Uncompleted Task 03:32
31 Psychological Barrier and Proportion 03:40
32 Repetition and Common Behavior 04:59
33 Rhythm and Line Connection 03:23
34 Primary, Secondary, and CMYK Colors 01:43
35 HSLA Colors 03:05
36 RGB Colors 02:53
37 Secondary RGB Colors 03:22
38 Color Wheel 04:14
39 Complementary Colors 01:29
40 Split Complementary Colors 01:57
41 Monochromatic Colors 01:54
42 Analogous Colors 01:25
43 Triad Colors 01:34
44 Tertiary Colors 01:24
45 UI Design Components 04:23
46 UI Design Analysis 03:01
47 Typography 01:21
48 Serif and Sans Serif Typeface 03:15
49 Font Weight 02:16
50 Font Size 03:10
51 Kerning 02:51
52 Word Spacing 01:46
53 Leading 01:47
54 Line Width 02:56
55 Orphan and Widow 01:36
56 Type Alignment 01:48
57 Type Hierarchy 01:53
58 Set Up 07:40
59 HTML Anatomy 08:34
60 HTML List 02:19
61 HTML Attribute 03:14
62 HTML Images 05:57
63 HTML Videos 04:01
64 HTML iFrame 02:38
65 HTML Checkbox and Radio Button 02:05
66 HTML Input Field 04:13
67 HTML Dropdown 04:32
68 HTML Button 03:00
69 Linking CSS and JavaScript Files 05:03
70 HTML Semantics 03:42
71 HTML Meta Tags 04:47
72 HTML External Style 02:28
73 HTML Style Tag 01:45
74 HTML Inline Style 02:48
75 Linking Fonts inside HTML 03:24
76 HTML Block Elements 06:40
77 HTML Inline Elements 04:52
78 HTML Box Anatomy 04:13
79 CSS Anatomy 04:49
80 CSS Classes 04:05
81 CSS ID 03:46
82 CSS Multiple Selector 02:08
83 CSS Variable 04:28
84 CSS Specificity 07:38
85 CSS Width and Height 05:21
86 CSS Margin and Padding 07:03
87 CSS Border Radius 05:16
88 CSS Box Model 04:09
89 CSS Universal Selector 01:50
90 CSS Descendant 01:27
91 CSS Direct Child 01:22
92 CSS General Sibling 01:40
93 CSS Adjacent 02:20
94 CSS Attribute Selector 01:38
95 CSS Focus Pseudo Class 02:48
96 CSS First Child 01:46
97 CSS Last Child 01:15
98 CSS Nth Child 03:06
99 CSS Odd Selector 02:23
100 CSS Even Selector 02:33
101 CSS Nth of Type 00:58
102 CSS Not Selector 01:31
103 CSS Link Pseudo Classes 05:23
104 CSS Pseudo Elements 01:43
105 CSS Comments 02:02
106 CSS Background Color 03:17
107 CSS Background Image 02:20
108 CSS Background Repeat 02:00
109 CSS Background Position 02:43
110 CSS Background Size 03:54
111 CSS Background Shorthand 04:52
112 CSS Gradient 02:50
113 CSS Multiple Background 04:42
114 CSS Filters 04:42
115 CSS Opacity 01:44
116 CSS Clip Path Circle 02:50
117 CSS Clip Path Polygon 07:07
118 CSS Display and Visibility 03:29
119 CSS Overflow 01:32
120 CSS Text Shadow 01:39
121 CSS Box Shadow 02:18
122 CSS Blend Mode 02:34
123 CSS Scale 04:49
124 CSS Skew 04:29
125 CSS Translate 04:24
126 CSS Matrix 05:21
127 CSS Rotate 03:32
128 CSS Transform Origin 03:37
129 CSS Multiple Transform 03:44
130 CSS Easing Functions 05:05
131 CSS Cubic Bezier 03:57
132 CSS Transitions 04:30
133 CSS Multiple Transitions 06:10
134 CSS Transitions Shorthand 05:23
135 CSS Animations 09:56
136 CSS Animations Shorthand 04:14
137 CSS Multiple Animations 04:19
138 CSS Position Relative 03:53
139 CSS Position Absolute 05:23
140 CSS Position Fixed and Sticky 05:13
141 CSS Z-Index 03:14
142 CSS Responsive Design 16:20
143 CSS Flexbox 04:59
144 CSS Justify Content 02:16
145 CSS Flex Start 03:30
146 CSS Flex End 01:28
147 CSS Space Evenly 02:11
148 CSS Space Around 01:42
149 CSS Space Between 01:30
150 CSS Align Items 02:56
151 CSS Align Baseline 01:43
152 CSS Align Self 03:07
153 CSS Flex Order 04:19
154 CSS Flex Grow and Shrink 08:38
155 CSS Flex Shorthand 05:39
156 CSS Flex Direction 02:45
157 CSS Flex Column 03:38
158 CSS Flex Wrap 03:30
159 CSS Align Content 02:24
160 CSS Multiple Flex Properties 05:22
161 CSS Grid Template Row 06:36
162 CSS Grid Template Column 03:25
163 CSS Grid Shorthand 03:38
164 CSS Grid Row 05:54
165 CSS Grid Column 04:13
166 CSS Grid Area 07:45
167 CSS Grid Gap 01:52
168 CSS Justify Self 08:30
169 Photoshop Project Overview 05:51
170 Photoshop HTML Markup 11:31
171 Photoshop CSS Root Declaration 12:05
172 Photoshop CSS Grid Layout 13:08
173 Photoshop CSS Card Design Part 1 12:58
174 Photoshop CSS Card Design Part 2 12:24
175 Photoshop CSS Card Design Part 3 11:32
176 Photoshop CSS Interactions 14:59
177 Photoshop CSS Responsive Behavior 30:53
178 Bootstrap Breakpoints 08:38
179 Bootstrap Naming Convention 06:23
180 Bootstrap Hierarchy 06:18
181 Bootstrap Container 03:30
182 Bootstrap Rows 03:40
183 Bootstrap Columns 06:35
184 Bootstrap Gutter and Spacing 11:56
185 Bootstrap Order 04:16
186 Bootstrap Offset 03:53
187 Bootstrap Display 06:31
188 Bootstrap Alignment 04:38
189 Bootstrap Nested Columns 04:26
190 Responsive Design Project 57:28
191 Boilerplate file 01:48
192 Reusable Figma Styles 02:42
193 Brand Styleguide 01:10
194 CSS Automation 07:00
195 CSS DRY Classes 02:16
196 Airbnb Hero Section 02:56
197 Airbnb Navigation Section 09:33
198 Airbnb Card Section 09:31
199 SVG Anatomy 03:41
200 SVG Rectangle 03:43
201 SVG Transparency 06:31
202 SVG Coordinates 03:52
203 SVG Round Corners 03:05
204 SVG Text 01:56
205 SVG Circle 02:48
206 SVG Ellipse 01:55
207 SVG Line 07:30
208 SVG Stroke 04:38
209 SVG Multiple Objects 03:05
210 Adobe Illustrator SVG Polygon 04:39
211 Figma SVG Path 03:10
212 SVG Viewbox 10:48
213 SVG Animation and Transform Group 13:52
214 Adobe Illustrator SVG Clip Path 06:33
215 Figma SVG Gradient 03:43
216 Figma SVG Filter 03:18
217 JavaScript Variables 08:35
218 JavaScript String 02:57
219 JavaScript Boolean 01:49
220 JavaScript Number 01:39
221 JavaScript Concatenation 03:35
222 JavaScript Template Literal 02:35
223 JavaScript Index Number and Length 03:14
224 JavaScript Array 02:30
225 JavaScript Array Manipulation 04:03
226 JavaScript Object 03:04
227 JavaScript Object Manipulation 03:51
228 JavaScript Comparison Operators 06:31
229 JavaScript Logical Operators 05:11
230 JavaScript Conditional Statements 04:14
231 JavaScript Logic 05:22
232 JavaScript For Loop 04:23
233 JavaScript For Of Loop 01:52
234 JavaScript For Each Loop 03:06
235 JavaScript Functions 03:56
236 JavaScript Function Parameters 02:30
237 JavaScript Anonymous Functions 02:43
238 JavaScript Callback Functions 03:34
239 JavaScript Arrow Functions 03:00
240 JavaScript Query Selector 07:03
241 JavaScript Query Selector All 03:54
242 JavaScript Other Selectors 04:38
243 JavaScript Text Content 03:12
244 JavaScript Inner HTML 03:26
245 JavaScript Attribute 05:22
246 JavaScript Class List 08:43
247 JavaScript Styling 06:23
248 JavaScript Parent Child 07:09
249 JavaScript Siblings 05:14
250 JavaScript Create Element 04:32
251 JavaScript Remove Child 03:36
252 JavaScript Append and Prepend 04:25
253 JavaScript Insert Before 07:58
254 JavaScript Event Listener 09:42
255 Split Shadow Project 14:33
256 Responsive Landing Page Project 28:12
257 Masonry Grid Project 24:16
258 Typography Poster Project 36:30
259 Morphing Stroke Project 17:08
260 Primary Art Brush Project 29:54
261 Dynamic Card Design Project 36:34
262 Full Screen Menu Project 39:11
263 Morphing Background Project 32:15
264 DeStijl Art Grid Project 29:40
265 Affinity Designer Overview 12:06
266 Essential Design Tools 19:29
267 Gradient and Swatches 25:02
268 Layer Effects and Strokes 25:16
269 Grids and 3D Isometric 13:59
270 Logo Thumbnail Project 22:57
271 Brand Styleguide Project 14:20
272 UX Ice Berg Model 03:55
273 UX Double Diamond 02:06
274 UX Feasibility Diagram 02:07
275 Target Audience 02:25
276 UX Eco-System Mapping 02:58
277 UX Journey Map 03:29
278 Business SWOT Analysis 04:21
279 Business Competitor Analysis 01:47
280 Business Growth Metrics 04:34
281 6 Famous Business Model 04:19
282 Affinity and Mind Mapping 04:34
283 User Persona 08:44
284 Customer Journey Mapping 04:06
285 User Flows 09:48
286 Design Strategy 05:39
287 Sprint Planning 10:40

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Design a Responsive Airbnb Website with Figma

Design a Responsive Airbnb Website with Figma

Sources: zerotomastery.io
Join this course to explore advanced Figma features by designing a responsive website for a fictional rental service. Learn the full design process from initial
11 hours 17 minutes 58 seconds
Complete Web Design: from Figma to Webflow to Freelancing

Complete Web Design: from Figma to Webflow to Freelancing

Sources: udemy
It gives you a huge self-satisfaction when you look at your work and say, "I made this!". I love that feeling after I'm done working on something. When I lean back in my chair, ...
19 hours 10 minutes 59 seconds
Advanced Figma Video Course + Let's Design Together Add-on

Advanced Figma Video Course + Let's Design Together Add-on

Sources: Andrija Prelec
Become a master of Figma and soar up the career ladder in design. The course is filled with real tips and tricks from a senior product designer with...
20 hours 58 minutes 42 seconds
Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Complete Web & Mobile Designer in 2023: UI/UX, Figma, +more

Sources: udemy, zerotomastery.io
Using the latest best practices in Web Design and Mobile Design as well as User Interface and User Experience Design (UI/UX), this course focuses on efficiently
20 hours 31 minutes 41 seconds
Beginner Figma Video Course

Beginner Figma Video Course

Sources: Andrija Prelec
There is no better place to start learning design than the most popular design application! Learn by doing and begin or enhance your knowledge in Figma.
3 hours 22 minutes 35 seconds