Danh mục
Duocmmo Tedu Tin học văn phòng Laravel Cyberlearn Khoá học miễn phí Tất cả khoá học
Get link khoá học
Trang chủ
Development
Web Development
UI UX Design Hybrid from Figma to HTML CSS and JavaScript

UI UX Design Hybrid from Figma to HTML CSS and JavaScript

Loại khoá học: Development

Learn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap

image
50.000 VND
125 VND
Đầy Đủ Bài Giảng
Học Online Tiện Lợi
Kích Hoạt Nhanh 2-5 Phút
Thanh toán tự động
Được phép tải xuống

Tổng quan

Nội dung khoá học

Đánh giá

Mô tả

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 :)

Bạn sẽ học được gì

Yêu cầu

Nội dung khoá học

23 sections

Figma Fundamentals

36 lectures
Download Figma Fundamentals File
00:07
Figma dashboard view
01:33
Figma project overview
05:54
Figma thumbnail & community file
04:57
How to download Figma resources
02:36
Figma design file overview
05:18
Figma essential shortcuts
02:08
Figma basic shape tool
06:46
Figma basic text tool
07:33
Figma shapes part 2
06:22
Figma layer hierarchy
02:05
Figma align & group
08:40
Figma group layer navigation
08:40
Figma layer selection
03:49
Run Figma plugins
07:42
Figma rename function
04:34
Figma regular expression renaming
11:09
Figma text plugins part 1
09:41
Figma text plugins part 2
07:01
Frame vs groups in Figma
06:06
Frame and constraints in Figma
08:41
Images and constraints in Figma
05:09
Video and images in Figma
07:27
Videos and prototype overview in Figma
04:20
Image properties in Figma
07:16
Stroke properties in Figma
10:58
Gradient properties in Figma
12:10
Effect properties in Figma
12:01
Mask property in Figma
06:28
Figma layout grid part 1
07:45
Figma layout grid part 2
08:16
Figma prototype part 1
11:15
Figma prototype part 2
09:22
Figma prototype interactions
11:32
Figma smart animate
09:39
Find and replace in Figma
13:24

Figma Auto Layout

15 lectures
Download Figma Auto Layout File
00:07
Figma auto layout hug property
12:38
Figma auto layout fixed property
08:13
Figma auto layout fill property
09:38
Figma padding & spacing part 1
10:39
Figma padding & spacing part 2
09:15
Figma auto layout directions
09:54
Figma auto layout wrap
08:29
Figma canvas stacking & negative spacing
03:32
Figma smart animate & negative spacing
04:28
Figma absolute position
09:51
Figma smart animate & truncate text
08:19
Figma auto layout alignment
07:35
Figma auto layout min max behaviour
06:46
Figma constraints vs auto layout
12:47

Figma Web Design Projects

11 lectures
Download Figma Web Design Projects File
00:07
Airbnb project part 1
07:31
Airbnb project part 2
10:33
Airbnb project part 3
08:11
Medignition project part 1
09:16
Medignition project part 2
07:58
Medignition project part 3
09:36
Biography project part 1
08:21
Biography project part 2
08:22
Commerce project part 1
08:26
Commerce project part 2
08:39

Color Theory in Figma

10 lectures
Download Figma Color Theory File
00:07
Primary RGB colors
02:03
RGB values in Figma
02:37
RGB alpha channel in Figma
03:01
Secondary RGB colors in Figma
02:32
Hexadecimal colors in Figma
03:26
Pure white & black color in Figma
02:39
Hue in Figma
02:53
Saturation in Figma
05:35
Lightness in Figma
04:57

Color Wheel in Figma

9 lectures
Download Figma Color Wheel File
00:07
HSL color wheel in Figma
02:57
Color wheel divided by 6 in Figma
02:04
Color wheel divided by 12 in Figma
02:45
Color wheel side by side
03:29
Color modes explained
04:13
Generate color palette in Figma
09:02
Color plugins in Figma part 1
01:58
Color plugins in Figma part 2
09:20

Figma Components

8 lectures
Download Figma Components Project File
00:06
Figma components fundamentals
07:19
Figma instances fundamentals
08:01
Detach instance in Figma
04:20
Instagram story component
08:37
Instance swap in Figma
05:51
Component naming convention in Figma
09:52
Nested component behaviour in Figma
06:54

Figma Variants

16 lectures
Download Figma Variant Project File
00:06
Figma variants fundamentals
12:00
Figma variant values
04:54
Figma variant property
10:26
Figma boolean variant
10:07
Figma text variant
07:50
Figma boolean property
08:32
Figma boolean comparison
02:42
Figma instance swap variant
09:59
Figma icon component proportion
08:26
Expose nested properties part 1
08:21
Expose nested properties part 2
07:06
Variant project part 1
08:02
Variant project part 2
08:08
Variant project part 3
09:04
Interactive variants
08:35

Figma Styles & Automation

18 lectures
Download Figma Style Project File
00:07
Figma text styles
09:49
Manage Figma styles
05:37
Figma text style automation part 1
07:24
Figma text style automation part 2
07:01
Figma text style automation part 3
08:44
Figma text style automation part 4
08:28
Search & re-order text styles in Figma
08:34
Find and replace text in Figma
02:38
Figma color styles
08:07
Figma color style automation part 1
09:23
Figma color style automation part 2
11:54
Figma brand style guide automation
11:14
Manage color & text styles in Figma
09:15
Figma shadow styles
08:28
Figma bootstrap grid style part 1
09:38
Figma bootstrap grid style part 2
06:52
Figma accessibility colors
07:37

Design Principles & Theories

23 lectures
Download Course Material Bundled
00:01
Unity and Similarity
03:44
Dominance and Working Memory
04:32
Negative Space and Complexity
04:09
Contrast and Emphasis
04:22
Proximity and Common Region
03:39
Alignment and Uncompleted Task
03:31
Psychological Barrier and Proportion
03:39
Repetition and Common Behavior
04:58
Rhythm and Line Connection
03:22
UI Design Components
04:22
UI Design Analysis
03:00
Typography
01:20
Serif and Sans Serif Typeface
03:14
Font Weight
02:15
Font Size
03:09
Kerning
02:50
Word Spacing
01:45
Leading
01:46
Line Width
02:55
Orphan and Widow
01:35
Type Alignment
01:47
Type Hierarchy
01:52

HTML

21 lectures
Set Up
07:39
HTML Anatomy
08:33
HTML List
02:18
HTML Attribute
03:13
HTML Images
05:56
HTML Videos
04:00
HTML iFrame
02:37
HTML Checkbox and Radio Button
02:04
HTML Input Field
04:12
HTML Dropdown
04:31
HTML Button
02:59
Linking CSS and JavaScript Files
05:02
HTML Semantics
03:41
HTML Meta Tags
04:46
HTML External Style
02:27
HTML Style Tag
01:44
HTML Inline Style
02:47
Linking Fonts inside HTML
03:23
HTML Block Elements
06:39
HTML Inline Elements
04:51
HTML Box Anatomy
04:12

CSS 101

27 lectures
CSS Anatomy
04:48
CSS Classes
04:04
CSS ID
03:45
CSS Multiple Selector
02:07
CSS Variable
04:27
CSS Specificity
07:36
CSS Width and Height
05:20
CSS Margin and Padding
07:02
CSS Border Radius
05:15
CSS Box Model
04:08
CSS Universal Selector
01:49
CSS Descendant
01:26
CSS Direct Child
01:21
CSS General Sibling
01:39
CSS Adjacent
02:18
CSS Attribute Selector
01:37
CSS Focus Pseudo Class
02:47
CSS First Child
01:45
CSS Last Child
01:14
CSS Nth Child
03:05
CSS Odd Selector
02:22
CSS Even Selector
02:32
CSS Nth of Type
00:57
CSS Not Selector
01:29
CSS Link Pseudo Classes
05:22
CSS Pseudo Elements
01:42
CSS Comments
02:01

CSS 201

17 lectures
CSS Background Color
03:15
CSS Background Image
02:19
CSS Background Repeat
01:59
CSS Background Position
02:41
CSS Background Size
03:53
CSS Background Shorthand
04:51
CSS Gradient
02:49
CSS Multiple Background
04:41
CSS Filters
04:41
CSS Opacity
01:43
CSS Clip Path Circle
02:49
CSS Clip Path Polygon
07:06
CSS Display and Visibility
03:28
CSS Overflow
01:31
CSS Text Shadow
01:38
CSS Box Shadow
02:17
CSS Blend Mode
02:33

CSS 301

20 lectures
CSS Scale
04:48
CSS Skew
04:28
CSS Translate
04:23
CSS Matrix
05:20
CSS Rotate
03:31
CSS Transform Origin
03:36
CSS Multiple Transform
03:43
CSS Easing Functions
05:04
CSS Cubic Bezier
03:56
CSS Transitions
04:29
CSS Multiple Transitions
06:09
CSS Transitions Shorthand
05:22
CSS Animations
09:55
CSS Animations Shorthand
04:13
CSS Multiple Animations
04:18
CSS Position Relative
03:51
CSS Position Absolute
05:22
CSS Position Fixed and Sticky
05:12
CSS Z-Index
03:13
CSS Responsive Design
16:19

CSS Grid and Flexbox

25 lectures
CSS Flexbox
04:58
CSS Justify Content
02:15
CSS Flex Start
03:29
CSS Flex End
01:26
CSS Space Evenly
02:10
CSS Space Around
01:41
CSS Space Between
01:29
CSS Align Items
02:55
CSS Align Baseline
01:42
CSS Align Self
03:06
CSS Flex Order
04:18
CSS Flex Grow and Shrink
08:37
CSS Flex Shorthand
05:38
CSS Flex Direction
02:44
CSS Flex Column
03:37
CSS Flex Wrap
03:29
CSS Align Content
02:23
CSS Grid Template Row
06:35
CSS Grid Template Column
03:24
CSS Grid Shorthand
03:37
CSS Grid Row
05:53
CSS Grid Column
04:12
CSS Grid Area
07:44
CSS Grid Gap
01:51
CSS Justify Self
08:29

Photoshop to CSS Project

11 lectures
Download Coding and Photoshop Files
00:05
Download Affinity Designer File
00:02
Photoshop Project Overview
05:50
Photoshop HTML Markup
11:30
Photoshop CSS Root Declaration
12:04
Photoshop CSS Grid Layout
13:07
Photoshop CSS Card Design Part 1
12:57
Photoshop CSS Card Design Part 2
12:23
Photoshop CSS Card Design Part 3
11:31
Photoshop CSS Interactions
14:58
Photoshop CSS Responsive Behavior
30:52

Bootstrap 5 Grid System

14 lectures
Download All Coding Files— Bootstrap PDF
00:02
Bootstrap Breakpoints
08:37
Bootstrap Naming Convention
06:22
Bootstrap Hierarchy
06:17
Bootstrap Container
03:29
Bootstrap Rows
03:39
Bootstrap Columns
06:34
Bootstrap Gutter and Spacing
11:55
Bootstrap Order
04:14
Bootstrap Offset
03:52
Bootstrap Display
06:30
Bootstrap Alignment
04:37
Bootstrap Nested Columns
04:25
Responsive Design Project
57:27

Figma to HTML CSS

9 lectures
Download All Files
00:01
Boilerplate file
01:47
Reusable Figma Styles
02:41
Brand Styleguide
01:09
CSS Automation
06:59
CSS DRY Classes
02:15
Airbnb Hero Section
02:55
Airbnb Navigation Section
09:32
Airbnb Card Section
09:30

SVG

18 lectures
SVG Anatomy
03:40
SVG Rectangle
03:42
SVG Transparency
06:30
SVG Coordinates
03:51
SVG Round Corners
03:04
SVG Text
01:55
SVG Circle
02:47
SVG Ellipse
01:54
SVG Line
07:29
SVG Stroke
04:37
SVG Multiple Objects
03:04
Adobe Illustrator SVG Polygon
04:38
Figma SVG Path
03:09
SVG Viewbox
10:47
SVG Animation and Transform Group
13:51
Adobe Illustrator SVG Clip Path
06:32
Figma SVG Gradient
03:42
Figma SVG Filter
03:17

JavaScript

23 lectures
JavaScript Variables
08:34
JavaScript String
02:56
JavaScript Boolean
01:48
JavaScript Number
01:38
JavaScript Concatenation
03:34
JavaScript Template Literal
02:34
JavaScript Index Number and Length
03:13
JavaScript Array
02:29
JavaScript Array Manipulation
04:02
JavaScript Object
03:03
JavaScript Object Manipulation
03:50
JavaScript Comparison Operators
06:30
JavaScript Logical Operators
05:10
JavaScript Conditional Statements
04:13
JavaScript Logic
05:21
JavaScript For Loop
04:22
JavaScript For Of Loop
01:51
JavaScript For Each Loop
03:05
JavaScript Functions
03:55
JavaScript Function Parameters
02:29
JavaScript Anonymous Functions
02:42
JavaScript Callback Functions
03:33
JavaScript Arrow Functions
02:59

JavaScript DOM

15 lectures
JavaScript Query Selector
07:02
JavaScript Query Selector All
03:53
JavaScript Other Selectors
04:37
JavaScript Text Content
03:11
JavaScript Inner HTML
03:25
JavaScript Attribute
05:21
JavaScript Class List
08:42
JavaScript Styling
06:22
JavaScript Parent Child
07:08
JavaScript Siblings
05:13
JavaScript Create Element
04:31
JavaScript Remove Child
03:35
JavaScript Append and Prepend
04:24
JavaScript Insert Before
07:57
JavaScript Event Listener
09:40

10 Coding Projects

10 lectures
Split Shadow Project
14:32
Responsive Landing Page Project
28:11
Masonry Grid Project
24:15
Typography Poster Project
36:29
Morphing Stroke Project
17:07
Primary Art Brush Project
29:53
Dynamic Card Design Project
36:33
Full Screen Menu Project
39:10
Morphing Background Project
32:14
DeStijl Art Grid Project
29:39

Version 1 - Legacy Content

23 lectures
Download resource files
00:04
Business SWOT Analysis
04:20
User Persona
08:42
UX Journey Map
03:28
Business Growth Metrics
04:33
Business Competitor Analysis
01:46
Target Audience
02:24
UX Ice Berg Model
03:54
UX Eco-System Mapping
02:57
User Flows
09:47
UX Feasibility Diagram
02:06
UX Double Diamond
02:05
6 Famous Business Model
04:18
Download FigJam files
00:01
Customer Journey Mapping
04:05
Design Strategy
05:37
Sprint Planning
10:39
Affinity and Mind Mapping
04:33
Download Figma design system files
00:02
Wireframe component
09:34
Visual design components
11:50
Rapid design part 1
12:42
Rapid design part 2
09:00

Bonus Lecture

1 lectures
Bonus
00:13

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

Khoá học liên quan

Master Network Automation with Python for Network Engineers

Master Network Automation with Python for Network Engineers

1.699.000 VND
50.000 VND
Unity Mobile Game Development - Exterminator

Unity Mobile Game Development - Exterminator

1.499.000 VND
50.000 VND
Mastering CSS Grid 2023 - With 3 cool projects

Mastering CSS Grid 2023 - With 3 cool projects

99 VND
50.000 VND
Django 3 - Full Stack Websites with Python Web Development

Django 3 - Full Stack Websites with Python Web Development

1.699.000 VND
50.000 VND
Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

Appium -Mobile Testing (Android/IOS) from Scratch+Frameworks

95 VND
50.000 VND
Appium - Mobile Testing with Latest 2.0 and Live Projects

Appium - Mobile Testing with Latest 2.0 and Live Projects

70 VND
50.000 VND
Deep Learning for Object Detection with Python and PyTorch

Deep Learning for Object Detection with Python and PyTorch

899.000 VND
50.000 VND
Full Android Development Masterclass | 14 Real Apps-46 Hours

Full Android Development Masterclass | 14 Real Apps-46 Hours

1.699.000 VND
50.000 VND
Go Java Full Stack with Spring Boot and Angular

Go Java Full Stack with Spring Boot and Angular

90 VND
50.000 VND
Machine Learning Practical Workout | 8 Real-World Projects

Machine Learning Practical Workout | 8 Real-World Projects

79 VND
50.000 VND
WordPress 2024: The Complete WordPress Website Course

WordPress 2024: The Complete WordPress Website Course

90 VND
50.000 VND
Android App Development Master Course with Java | Android

Android App Development Master Course with Java | Android

99 VND
50.000 VND
Unreal Engine 5: Soulslike Melee Combat System

Unreal Engine 5: Soulslike Melee Combat System

1.399.000 VND
50.000 VND
ASP.NET Core Web Application Using Razor Pages

ASP.NET Core Web Application Using Razor Pages

1.699.000 VND
50.000 VND
Build Undetectable Malware Using C Language: Ethical Hacking

Build Undetectable Malware Using C Language: Ethical Hacking

75 VND
50.000 VND
Angular - The Complete Guide (2024 Edition)

Angular - The Complete Guide (2024 Edition)

120 VND
50.000 VND
image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.

Get khoá học cho tôi