CF

UI UX Design Hybrid from Figma to HTML CSS and JavaScript

31h 51m 43s
English
Paid

UI UX Design Hybrid from Figma to HTML CSS and JavaScript is a 287-lesson 31 hours 51 minutes self-paced course by Udemy. Learn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap

Course facts

Lessons
287
Duration
31 hours 51 minutes
Level
All levels
Language
English
Updated
Instructor
Udemy
Price
Premium
Learn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap

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

Who teaches UI UX Design Hybrid from Figma to HTML CSS and JavaScript? Udemy

Udemy thumbnail

Udemy is the largest open marketplace for online courses on the internet. Founded in 2010 by Eren Bali, Oktay Caglar, and Gagan Biyani and headquartered in San Francisco, the company went public on the Nasdaq in 2021 under the ticker UDMY. The platform hosts well over two hundred thousand courses across software development, IT and cloud, data science, design, business, marketing, and creative skills, taught by tens of thousands of independent instructors. Roughly seventy million learners use it worldwide, and the corporate arm — Udemy Business — supplies a curated subset of that catalog to enterprise customers.

Because Udemy is a marketplace rather than a single editorial publisher, the catalog is uneven by design. The strongest material lives in the long-form, project-based courses authored by working engineers — full-stack JavaScript, React, Node.js, Python data science, AWS, Docker and Kubernetes, mobile development with Flutter and React Native, and cloud certification preparation. The CourseFlix listing under this source is the slice of that catalog that has been mirrored here for offline-friendly viewing, organized by topic and updated as new releases land. Pricing on Udemy itself swings dramatically with the site's near-permanent sales, which is why the platform is best treated as a deep reference catalog: pick instructors with strong reviews and a track record of updating their material rather than buying on the headline price alone.

What lessons are included in UI UX Design Hybrid from Figma to HTML CSS and JavaScript?

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

Recommended next

What courses are similar to UI UX Design Hybrid from Figma to HTML CSS and JavaScript?

More courses by Udemy

Frequently asked questions

What prerequisites are needed before enrolling in this course?
Prospective students should have a basic understanding of graphic design concepts and some familiarity with digital design tools. Prior experience with Figma or web development is helpful but not required, as the course begins with foundational lessons such as 'Figma Basics' and 'HTML Anatomy'.
What projects will I work on during the course?
The course includes several practical projects that help solidify learning. Notably, students will work on the 'Airbnb Project', which involves interface design principles, and the 'Medignition Project', which is split into two parts for a comprehensive design and development experience. Additionally, the '3000 Component Project' offers extensive practice with component design.
Who is the target audience for this course?
The course is designed for individuals aiming to become Full-Stack Designers. It suits graphic designers who want to expand into UI/UX design and web development, as well as beginners interested in a comprehensive learning path from design theory to practical web development skills.
How does this course compare in depth and scope to other UI/UX courses?
This course covers both design and development aspects, making it broader than typical UI/UX courses that focus solely on design. It includes lessons on Figma, HTML, CSS, JavaScript, and Bootstrap, offering a holistic view of the design-to-development workflow that sets it apart from courses focused on specific stages.
Which specific tools and platforms are taught in the course?
The course focuses heavily on Figma for UI/UX design, covering topics like 'Figma Plugin and Community' and 'Figma Core Engine Concepts'. It also includes web development tools and frameworks such as HTML, CSS, JavaScript, and Bootstrap, providing a complete toolkit for building web interfaces.
What is not covered in this course?
The course does not cover advanced programming concepts or back-end development. While it provides a strong foundation in front-end technologies and design principles, students looking for in-depth coding or server-side skills may need additional resources beyond this course.
How much time should a student expect to commit to this course?
With 287 lessons, the course is extensive and requires a significant time commitment. Students should be prepared to dedicate several hours per week to fully engage with the material, complete projects, and practice skills to achieve the best learning outcome.