UI UX Design Hybrid from Figma to HTML CSS and JavaScript

Name: UI UX Design Hybrid from Figma to HTML CSS and JavaScript
Price: 9 USD
Availability: InStock

31h 51m 43s

English

Paid

October 30, 2023

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

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

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