Course Overview
From Figma to Coding in 1 place
Design everything in Figma & code it using HTML CSS JavaScript
Become a Figma power user by learning how to leverage plugins
Master industry standard UI UX Design standards
Seamlessly inspect and build your Figma Components for development handoff
Become a unicorn UI UX Designer who knows design and code
Automate your brand style guide as a visual designer with Figma
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
Transform SVG with 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
Summary of Udemy Students Review:
Zoe Chin — "Hossein's teaching is so cohesive. I'm a total beginner at coding and have always been intimidated by code, but these lessons helped me understand new concepts in UX development so easily that I dare say I thoroughly enjoyed learning. Thank you! :)"
Ebru Aksoy — "Awesome course! I have already had some knowledge on the coding side of web development but I felt that I needed some UX/UI point of view, so I ended up at Hossein's course and I couldn't be more happier! He expanded my imagination with especially the SVG section and the 10 great projects at the end. I also got to brush up on my skills of CSS & JavaScript with his elaborately structured teaching style. I will definitely keep the notes I received from this course by my side while working on further projects. I definitely recommend. Thanks a lot, Hossein"
Omar A — "I wish I took this course instead of wasting so many countless hours on others. As someone trying to learn UX/UI/Front-End, this is brilliant. Super logical course structure and flow. Would give ten stars if I could. Thanks Mr. Hossein."
Maria Beatriz — "I've been really enjoying this course. It's one of the best I've done on web dev and UX/UI. The content is simple, original, and super useful. You have to try it!"
Darian Brandt — "I loved the simple, graphical and memorable UI and UX design notes which taught me things I didn't even know I needed to know. The entire course is very easy to understand but surprisingly in-depth. I'm learning a lot more than I expected, thanks"
Prem Sager — "This is awesome and a must-do course for all the frontend developers. The UX part was very well researched and presented. HTML was a really good refresher. Completed CSS and JS sections, this content is amazing and really boosts my skill set."
Jayed Mahmud — "I wanted to learn coding which is related to Website design which is implemented quite nicely in this course. This course starts with visualization which is absolutely brilliant. I am still continuing but so far this is a great one. Thanks."
Ebe David Temiloluwa —"In this course, I got the kind of frontend development designs I have never come across before in the projects. If you're looking for new type of designs produced with good css and javascript, this is the course for you."
Jeisson Zambrano — "This course targets exactly what I came here looking for. The explanations are clear and focused on the business perspective of UX/UI development."
Pratham Bhatter — This has to be one of the best course on Udemy for UI UX. Not only you learn the fundamentals of UI UX, but also build a good foundation about Web Design and Frontend Development. As an instructor, Hossein did an amazing job explaining the concepts and the beautiful notes he provided were very handy too. I would definitely recommend this course to someone who is interested in UI UX Design and Development and also wants to build a solid foundation in this field. Thank you Hossein :)
FAQ
FAQ area empty
Course curriculum
-
Download Figma Fundamentals File
Xem trước -
Important Figma UI 3 Update
Xem trước -
Figma dashboard view
93 Xem trước -
Figma project overview
354 Xem trước -
Figma thumbnail & community file
297 -
Figma design file overview
318 -
Figma essential shortcuts
128 -
Figma basic shape tool
406 Xem trước -
Figma basic text tool
453 Xem trước -
Figma shapes part 2
382 -
Figma layer hierarchy
125 Xem trước -
Figma align & group
520 -
Figma group layer navigation
520 -
Figma layer selection
229 -
Run Figma plugins
462 -
Figma rename function
274 -
Figma regular expression renaming
669 -
Figma text plugins part 1
581 -
Figma text plugins part 2
421 -
Frame vs groups in Figma
366 -
Frame and constraints in Figma
521 -
Images and constraints in Figma
309 -
Video and images in Figma
447 -
Videos and prototype overview in Figma
260 -
Image properties in Figma
436 -
Stroke properties in Figma
658 -
Gradient properties in Figma
730 -
Effect properties in Figma
721 -
Mask property in Figma
388 -
Figma layout grid part 1
465 -
Figma layout grid part 2
496 -
Figma prototype part 1
675 -
Figma prototype part 2
562 -
Figma prototype interactions
692 -
Figma smart animate
579 -
Find and replace in Figma
804
-
Download Figma Auto Layout File
-
Important Figma UI 3 Update
-
Figma auto layout hug property
758 -
Figma auto layout fixed property
493 -
Figma auto layout fill property
578 -
Figma padding & spacing part 1
639 -
Figma padding & spacing part 2
555 -
Figma auto layout directions
594 -
Figma auto layout wrap
509 -
Figma canvas stacking & negative spacing
212 -
Figma smart animate & negative spacing
268 -
Figma absolute position
591 -
Figma smart animate & truncate text
499 -
Figma auto layout alignment
455 -
Figma auto layout min max behaviour
406 -
Figma constraints vs auto layout
767
-
Download Figma Web Design Projects File
-
Important Figma UI 3 Update
-
Airbnb project part 1
451 -
Airbnb project part 2
633 -
Airbnb project part 3
491 -
Medignition project part 1
556 -
Medignition project part 2
478 -
Medignition project part 3
576 -
Biography project part 1
501 -
Biography project part 2
502 -
Commerce project part 1
506 -
Commerce project part 2
519
-
Download Figma Color Theory File
-
Important Figma UI 3 Update
-
Primary RGB colors
123 -
RGB values in Figma
157 -
RGB alpha channel in Figma
181 -
Secondary RGB colors in Figma
152 -
Hexadecimal colors in Figma
206 -
Pure white & black color in Figma
159 -
Hue in Figma
173 -
Saturation in Figma
335 -
Lightness in Figma
297
-
Download Figma Color Wheel File
-
Important Figma UI 3 Update
-
HSL color wheel in Figma
177 -
Color wheel divided by 6 in Figma
124 -
Color wheel divided by 12 in Figma
165 -
Color wheel side by side
209 -
Color modes explained
253 -
Generate color palette in Figma
542 -
Color plugins in Figma part 1
118 -
Color plugins in Figma part 2
560
-
Download Figma Components Project File
-
Important Figma UI 3 Update
-
Figma components fundamentals
439 -
Figma instances fundamentals
481 -
Detach instance in Figma
260 -
Instagram story component
517 -
Instance swap in Figma
351 -
Component naming convention in Figma
592 -
Nested component behaviour in Figma
414
-
Download Figma Variant Project File
-
Important Figma UI 3 Update
-
Figma variants fundamentals
720 -
Figma variant values
294 -
Figma variant property
626 -
Figma boolean variant
607 -
Figma text variant
470 -
Figma boolean property
512 -
Figma boolean comparison
162 -
Figma instance swap variant
599 -
Figma icon component proportion
506 -
Expose nested properties part 1
501 -
Expose nested properties part 2
426 -
Variant project part 1
482 -
Variant project part 2
488 -
Variant project part 3
544 -
Interactive variants
515
-
Download Figma Style Project File
-
Important Figma UI 3 Update
-
Figma text styles
589 -
Manage Figma styles
337 -
Figma text style automation part 1
444 -
Figma text style automation part 2
421 -
Figma text style automation part 3
524 -
Figma text style automation part 4
508 -
Search & re-order text styles in Figma
514 -
Find and replace text in Figma
158 -
Figma color styles
487 -
Figma color style automation part 1
563 -
Figma color style automation part 2
714 -
Figma brand style guide automation
674 -
Manage color & text styles in Figma
555 -
Figma shadow styles
508 -
Figma bootstrap grid style part 1
578 -
Figma bootstrap grid style part 2
412 -
Figma accessibility colors
457
-
Before you start
109 -
Important Figma UI 3 Update
-
Minor Figma updates
82 -
Figma library overview
459 -
Publish changes using Figma library
419 -
Manage Figma library
557 -
Figma version history
389 -
Scoping Figma library
318 -
Swapping Figma library
557 -
Removing Figma library
369 -
Live Figma library example
122 -
Enable Figma library by default
119 -
Download Annotation Project File
-
Figma annotation project part 1
562 -
Figma annotation project part 2
437 -
Figma annotation project part 3
511 -
Figma annotation project part 4
658
-
Download Course Material Bundled
-
Unity and Similarity
224 -
Dominance and Working Memory
272 -
Negative Space and Complexity
249 -
Contrast and Emphasis
262 -
Proximity and Common Region
219 -
Alignment and Uncompleted Task
211 -
Psychological Barrier and Proportion
219 -
Repetition and Common Behavior
298 -
Rhythm and Line Connection
202 -
UI Design Components
262 -
UI Design Analysis
180 -
Typography
80 -
Serif and Sans Serif Typeface
194 -
Font Weight
135 -
Font Size
189 -
Kerning
170 -
Word Spacing
105 -
Leading
106 -
Line Width
175 -
Orphan and Widow
95 -
Type Alignment
107 -
Type Hierarchy
112
-
Set Up
459 -
VS Code Theme & Shortcut Set Up
-
HTML Anatomy
513 -
HTML List
138 -
HTML Attribute
193 -
HTML Images
356 -
HTML Videos
240 -
HTML iFrame
157 -
HTML Checkbox and Radio Button
124 -
HTML Input Field
252 -
HTML Dropdown
271 -
HTML Button
179 -
Linking CSS and JavaScript Files
302 -
HTML Semantics
221 -
HTML Meta Tags
286 -
HTML External Style
147 -
HTML Style Tag
104 -
HTML Inline Style
167 -
Linking Fonts inside HTML
203 -
HTML Block Elements
399 -
HTML Inline Elements
291 -
HTML Box Anatomy
252
-
CSS Anatomy
288 -
CSS Classes
244 -
CSS ID
225 -
CSS Multiple Selector
127 -
CSS Variable
267 -
CSS Specificity
456 -
CSS Width and Height
320 -
CSS Margin and Padding
422 -
CSS Border Radius
315 -
CSS Box Model
248 -
CSS Universal Selector
109 -
CSS Descendant
86 -
CSS Direct Child
81 -
CSS General Sibling
99 -
CSS Adjacent
138 -
CSS Attribute Selector
97 -
CSS Focus Pseudo Class
167 -
CSS First Child
105 -
CSS Last Child
74 -
CSS Nth Child
185 -
CSS Odd Selector
142 -
CSS Even Selector
152 -
CSS Nth of Type
57 -
CSS Not Selector
89 -
CSS Link Pseudo Classes
322 -
CSS Pseudo Elements
102 -
CSS Comments
121
-
CSS Background Color
195 -
CSS Background Image
139 -
CSS Background Repeat
119 -
CSS Background Position
161 -
CSS Background Size
233 -
CSS Background Shorthand
291 -
CSS Gradient
169 -
CSS Multiple Background
281 -
CSS Filters
281 -
CSS Opacity
103 -
CSS Clip Path Circle
169 -
CSS Clip Path Polygon
426 -
CSS Display and Visibility
208 -
CSS Overflow
91 -
CSS Text Shadow
98 -
CSS Box Shadow
137 -
CSS Blend Mode
153
-
CSS Scale
288 -
CSS Skew
268 -
CSS Translate
263 -
CSS Matrix
320 -
CSS Rotate
211 -
CSS Transform Origin
216 -
CSS Multiple Transform
223 -
CSS Easing Functions
304 -
CSS Cubic Bezier
236 -
CSS Transitions
269 -
CSS Multiple Transitions
369 -
CSS Transitions Shorthand
322 -
CSS Animations
595 -
CSS Animations Shorthand
253 -
CSS Multiple Animations
258 -
CSS Position Relative
231 -
CSS Position Absolute
322 -
CSS Position Fixed and Sticky
312 -
CSS Z-Index
193 -
CSS Responsive Design
979
-
CSS Flexbox
298 -
CSS Justify Content
135 -
CSS Flex Start
209 -
CSS Flex End
86 -
CSS Space Evenly
130 -
CSS Space Around
101 -
CSS Space Between
89 -
CSS Align Items
175 -
CSS Align Baseline
102 -
CSS Align Self
186 -
CSS Flex Order
258 -
CSS Flex Grow and Shrink
517 -
CSS Flex Shorthand
338 -
CSS Flex Direction
164 -
CSS Flex Column
217 -
CSS Flex Wrap
209 -
CSS Align Content
143 -
CSS Grid Template Row
395 -
CSS Grid Template Column
204 -
CSS Grid Shorthand
217 -
CSS Grid Row
353 -
CSS Grid Column
252 -
CSS Grid Area
464 -
CSS Grid Gap
111 -
CSS Justify Self
509
-
Download Coding and Photoshop Files
-
Download Affinity Designer File
-
Photoshop Project Overview
350 -
Photoshop HTML Markup
690 -
Photoshop CSS Root Declaration
724 -
Photoshop CSS Grid Layout
787 -
Photoshop CSS Card Design Part 1
777 -
Photoshop CSS Card Design Part 2
743 -
Photoshop CSS Card Design Part 3
691 -
Photoshop CSS Interactions
898 -
Photoshop CSS Responsive Behavior
1852
-
Download All Coding Files— Bootstrap PDF
-
Bootstrap Breakpoints
517 -
Bootstrap Naming Convention
382 -
Bootstrap Hierarchy
377 -
Bootstrap Container
209 -
Bootstrap Rows
219 -
Bootstrap Columns
394 -
Bootstrap Gutter and Spacing
715 -
Bootstrap Order
254 -
Bootstrap Offset
232 -
Bootstrap Display
390 -
Bootstrap Alignment
277 -
Bootstrap Nested Columns
265 -
Responsive Design Project
3447
-
SVG Anatomy
220 -
SVG Rectangle
222 -
SVG Transparency
390 -
SVG Coordinates
231 -
SVG Round Corners
184 -
SVG Text
115 -
SVG Circle
167 -
SVG Ellipse
114 -
SVG Line
449 -
SVG Stroke
277 -
SVG Multiple Objects
184 -
Adobe Illustrator SVG Polygon
278 -
Figma SVG Path
189 -
SVG Viewbox
647 -
SVG Animation and Transform Group
831 -
Adobe Illustrator SVG Clip Path
392 -
Figma SVG Gradient
222 -
Figma SVG Filter
197
-
JavaScript Variables
514 -
JavaScript String
176 -
JavaScript Boolean
108 -
JavaScript Number
98 -
JavaScript Concatenation
214 -
JavaScript Template Literal
154 -
JavaScript Index Number and Length
193 -
JavaScript Array
149 -
JavaScript Array Manipulation
242 -
JavaScript Object
183 -
JavaScript Object Manipulation
230 -
JavaScript Comparison Operators
390 -
JavaScript Logical Operators
310 -
JavaScript Conditional Statements
253 -
JavaScript Logic
321 -
JavaScript For Loop
262 -
JavaScript For Of Loop
111 -
JavaScript For Each Loop
185 -
JavaScript Functions
235 -
JavaScript Function Parameters
149 -
JavaScript Anonymous Functions
162 -
JavaScript Callback Functions
213 -
JavaScript Arrow Functions
179
-
JavaScript Query Selector
422 -
JavaScript Query Selector All
233 -
JavaScript Other Selectors
277 -
JavaScript Text Content
191 -
JavaScript Inner HTML
205 -
JavaScript Attribute
321 -
JavaScript Class List
522 -
JavaScript Styling
382 -
JavaScript Parent Child
428 -
JavaScript Siblings
313 -
JavaScript Create Element
271 -
JavaScript Remove Child
215 -
JavaScript Append and Prepend
264 -
JavaScript Insert Before
477 -
JavaScript Event Listener
580
-
Split Shadow Project
872 -
Responsive Landing Page Project
1691 -
Masonry Grid Project
1455 -
Typography Poster Project
2189 -
Morphing Stroke Project
1027 -
Primary Art Brush Project
1793 -
Dynamic Card Design Project
2193 -
Full Screen Menu Project
2350 -
Morphing Background Project
1934 -
DeStijl Art Grid Project
1779
-
Download resource files
-
Business SWOT Analysis
260 -
User Persona
522 -
UX Journey Map
208 -
Business Growth Metrics
273 -
Business Competitor Analysis
106 -
Target Audience
144 -
UX Ice Berg Model
234 -
UX Eco-System Mapping
177 -
User Flows
587 -
UX Feasibility Diagram
126 -
UX Double Diamond
125 -
6 Famous Business Model
258 -
Download FigJam files
-
Customer Journey Mapping
245 -
Design Strategy
337 -
Sprint Planning
639 -
Affinity and Mind Mapping
273 -
Download Figma design system files
-
Wireframe component
574 -
Visual design components
710 -
Rapid design part 1
762 -
Rapid design part 2
540
Requirment
-
No prior HTML, CSS, JavaScript Bootstrap knowledge needed
-
Free version of Figma is enough. However there are tiny parts of Figma that requires Figma Pro license
Outcomes
-
Learn UI UX design and front-end coding in 1 course
-
Transform Figma components into live HTML & CSS components
-
Master Figma Auto Layout combined with CSS Flexbox & CSS Grid
-
Design multi-dimensional variants in Figma
-
Automate design systems with Figma plugins
-
Develop responsive layouts using Bootstrap 5 grid system
0 Student
1 Course
0 review