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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 287 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Course Overview

All Course Lessons (287)

#Lesson TitleDurationAccess
1
Course Overview Demo
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

Unlock unlimited learning

Get instant access to all 286 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

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
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
Kickstart your UI/UX Design Career / DesignCourse UI/UX

Kickstart your UI/UX Design Career / DesignCourse UI/UX

Sources: Gary Simon
Join the most interactive course for learning UI/UX Design with Gary Simon. The DesignCourse UI/UX Curriculum is taught entirely with Figma. You will go from ab
16 hours 33 minutes 33 seconds
Motion Design with Figma: Animations, Motion Graphics, UX/UI

Motion Design with Figma: Animations, Motion Graphics, UX/UI

Sources: zerotomastery.io
Learn motion design using Figma from a design industry pro. You'll learn way more than just motion design principles and theory. This projects-based course will
10 hours 11 minutes 31 seconds
Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind

Sources: protailwind.com (Simon Vrachliotis), Simon Vrachliotis
This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout...
2 hours 40 minutes 16 seconds