Figma HTML CSS JavaScript in Web Design and UI UX Design
Figma HTML CSS JavaScript in Web Design and UI UX Design, available at $84.99, has an average rating of 4.43, with 396 lectures, based on 1006 reviews, and has 9173 subscribers.
You will learn about 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 This course is ideal for individuals who are Web Developer who want develop Figma components seamlessly or UI UX Designers who want to learn how to code using HTML CSS JavaScript It is particularly useful for Web Developer who want develop Figma components seamlessly or UI UX Designers who want to learn how to code using HTML CSS JavaScript.
Enroll now: Figma HTML CSS JavaScript in Web Design and UI UX Design
Summary
Title: Figma HTML CSS JavaScript in Web Design and UI UX Design
Price: $84.99
Average Rating: 4.43
Number of Lectures: 396
Number of Published Lectures: 396
Number of Curriculum Items: 396
Number of Published Curriculum Objects: 396
Original Price: $19.99
Quality Status: approved
Status: Live
What You Will Learn
- 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
Who Should Attend
- Web Developer who want develop Figma components seamlessly
- UI UX Designers who want to learn how to code using HTML CSS JavaScript
Target Audiences
- Web Developer who want develop Figma components seamlessly
- UI UX Designers who want to learn how to code using HTML CSS JavaScript
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 noteswhich 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 🙂
Course Curriculum
Chapter 1: Figma Fundamentals
Lecture 1: Download Figma Fundamentals File
Lecture 2: Figma dashboard view
Lecture 3: Figma project overview
Lecture 4: Figma thumbnail & community file
Lecture 5: How to download Figma resources
Lecture 6: Figma design file overview
Lecture 7: Figma essential shortcuts
Lecture 8: Figma basic shape tool
Lecture 9: Figma basic text tool
Lecture 10: Figma shapes part 2
Lecture 11: Figma layer hierarchy
Lecture 12: Figma align & group
Lecture 13: Figma group layer navigation
Lecture 14: Figma layer selection
Lecture 15: Run Figma plugins
Lecture 16: Figma rename function
Lecture 17: Figma regular expression renaming
Lecture 18: Figma text plugins part 1
Lecture 19: Figma text plugins part 2
Lecture 20: Frame vs groups in Figma
Lecture 21: Frame and constraints in Figma
Lecture 22: Images and constraints in Figma
Lecture 23: Video and images in Figma
Lecture 24: Videos and prototype overview in Figma
Lecture 25: Image properties in Figma
Lecture 26: Stroke properties in Figma
Lecture 27: Gradient properties in Figma
Lecture 28: Effect properties in Figma
Lecture 29: Mask property in Figma
Lecture 30: Figma layout grid part 1
Lecture 31: Figma layout grid part 2
Lecture 32: Figma prototype part 1
Lecture 33: Figma prototype part 2
Lecture 34: Figma prototype interactions
Lecture 35: Figma smart animate
Lecture 36: Find and replace in Figma
Chapter 2: Figma Auto Layout
Lecture 1: Download Figma Auto Layout File
Lecture 2: Figma auto layout hug property
Lecture 3: Figma auto layout fixed property
Lecture 4: Figma auto layout fill property
Lecture 5: Figma padding & spacing part 1
Lecture 6: Figma padding & spacing part 2
Lecture 7: Figma auto layout directions
Lecture 8: Figma auto layout wrap
Lecture 9: Figma canvas stacking & negative spacing
Lecture 10: Figma smart animate & negative spacing
Lecture 11: Figma absolute position
Lecture 12: Figma smart animate & truncate text
Lecture 13: Figma auto layout alignment
Lecture 14: Figma auto layout min max behaviour
Lecture 15: Figma constraints vs auto layout
Chapter 3: Figma Web Design Projects
Lecture 1: Download Figma Web Design Projects File
Lecture 2: Airbnb project part 1
Lecture 3: Airbnb project part 2
Lecture 4: Airbnb project part 3
Lecture 5: Medignition project part 1
Lecture 6: Medignition project part 2
Lecture 7: Medignition project part 3
Lecture 8: Biography project part 1
Lecture 9: Biography project part 2
Lecture 10: Commerce project part 1
Lecture 11: Commerce project part 2
Chapter 4: Color Theory in Figma
Lecture 1: Download Figma Color Theory File
Lecture 2: Primary RGB colors
Lecture 3: RGB values in Figma
Lecture 4: RGB alpha channel in Figma
Lecture 5: Secondary RGB colors in Figma
Lecture 6: Hexadecimal colors in Figma
Lecture 7: Pure white & black color in Figma
Lecture 8: Hue in Figma
Lecture 9: Saturation in Figma
Lecture 10: Lightness in Figma
Chapter 5: Color Wheel in Figma
Lecture 1: Download Figma Color Wheel File
Lecture 2: HSL color wheel in Figma
Lecture 3: Color wheel divided by 6 in Figma
Lecture 4: Color wheel divided by 12 in Figma
Lecture 5: Color wheel side by side
Lecture 6: Color modes explained
Lecture 7: Generate color palette in Figma
Lecture 8: Color plugins in Figma part 1
Lecture 9: Color plugins in Figma part 2
Chapter 6: Figma Components
Lecture 1: Download Figma Components Project File
Lecture 2: Figma components fundamentals
Lecture 3: Figma instances fundamentals
Lecture 4: Detach instance in Figma
Lecture 5: Instagram story component
Lecture 6: Instance swap in Figma
Lecture 7: Component naming convention in Figma
Lecture 8: Nested component behaviour in Figma
Chapter 7: Figma Variants
Lecture 1: Download Figma Variant Project File
Lecture 2: Figma variants fundamentals
Lecture 3: Figma variant values
Lecture 4: Figma variant property
Instructors
-
Boroji Design Inc.
Where design & code meets
Rating Distribution
- 1 stars: 16 votes
- 2 stars: 10 votes
- 3 stars: 94 votes
- 4 stars: 277 votes
- 5 stars: 609 votes
Frequently Asked Questions
How long do I have access to the course materials?
You can view and review the lecture materials indefinitely, like an on-demand channel.
Can I take my courses with me wherever I go?
Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!
You may also like
- Top 10 Mobile App Development Courses to Learn in December 2024
- Top 10 Graphic Design Courses to Learn in December 2024
- Top 10 Videography Courses to Learn in December 2024
- Top 10 Photography Courses to Learn in December 2024
- Top 10 Language Learning Courses to Learn in December 2024
- Top 10 Product Management Courses to Learn in December 2024
- Top 10 Investing Courses to Learn in December 2024
- Top 10 Personal Finance Courses to Learn in December 2024
- Top 10 Health And Wellness Courses to Learn in December 2024
- Top 10 Chatgpt And Ai Tools Courses to Learn in December 2024
- Top 10 Virtual Reality Courses to Learn in December 2024
- Top 10 Augmented Reality Courses to Learn in December 2024
- Top 10 Blockchain Development Courses to Learn in December 2024
- Top 10 Unity Game Development Courses to Learn in December 2024
- Top 10 Artificial Intelligence Courses to Learn in December 2024
- Top 10 Flutter Development Courses to Learn in December 2024
- Top 10 Docker Kubernetes Courses to Learn in December 2024
- Top 10 Business Analytics Courses to Learn in December 2024
- Top 10 Excel Vba Courses to Learn in December 2024
- Top 10 Devops Courses to Learn in December 2024