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

Watch Online UI UX Design Hybrid from Figma to HTML CSS and JavaScript

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

The Beginner's Guide to Figma

The Beginner's Guide to Figma

Sources: egghead
Figma is a collaborative prototyping tool that allows you to responsively design your applications, with resolution presets for all of the most popular devices.
24 minutes 19 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
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
Figma Academy 2.0

Figma Academy 2.0

Sources: Michael Riddering
The most advanced online design course. See for yourself why over 5,000 designers and leading tech teams are trained in Figma...
11 hours 19 minutes 17 seconds