Udemy
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
Development
Web Development Data Science Mobile Development Programming Languages Game Development Database Design & Development Software Testing Software Engineering Software Development Tools No-Code Development
Business
Entrepreneurship Communication Management Sales Business Strategy Operations Project Management Business Law Business Analytics & Intelligence Human Resources Industry E-Commerce Media Real Estate Other Business
Finance & Accounting
Accounting & Bookkeeping Compliance Cryptocurrency & Blockchain Economics Finance Finance Cert & Exam Prep Financial Modeling & Analysis Investing & Trading Money Management Tools Taxes Other Finance & Accounting
IT & Software
IT Certifications Network & Security Hardware Operating Systems & Servers Other IT & Software
Office Productivity
Microsoft Apple Google SAP Oracle Other Office Productivity
Personal Development
Personal Transformation Personal Productivity Leadership Career Development Parenting & Relationships Happiness Esoteric Practices Religion & Spirituality Personal Brand Building Creativity Influence Self Esteem & Confidence Stress Management Memory & Study Skills Motivation Other Personal Development
Design
Web Design Graphic Design & Illustration Design Tools User Experience Design Game Design 3D & Animation Fashion Design Architectural Design Interior Design Other Design
Marketing
Digital Marketing Search Engine Optimization Social Media Marketing Branding Marketing Fundamentals Marketing Analytics & Automation Public Relations Paid Advertising Video & Mobile Marketing Content Marketing Growth Hacking Affiliate Marketing Product Marketing Other Marketing
Lifestyle
Arts & Crafts Beauty & Makeup Esoteric Practices Food & Beverage Gaming Home Improvement & Gardening Pet Care & Training Travel Other Lifestyle
Photography & Video
Digital Photography Photography Portrait Photography Photography Tools Commercial Photography Video Design Other Photography & Video
Health & Fitness
Fitness General Health Sports Nutrition & Diet Yoga Mental Health Martial Arts & Self Defense Safety & First Aid Dance Meditation Other Health & Fitness
Music
Instruments Music Production Music Fundamentals Vocal Music Techniques Music Software Other Music
Teaching & Academics
Engineering Humanities Math Science Online Education Social Science Language Learning Teacher Training Test Prep Other Teaching & Academics
Web Development JavaScript React Angular CSS Node.Js PHP HTML5 Vue JS
AWS Certification Microsoft Certification AWS Certified Solutions Architect - Associate AWS Certified Cloud Practitioner CompTIA A+ Amazon AWS Cisco CCNA Microsoft AZ-900 CompTIA Security+
Microsoft Power BI SQL Tableau Data Modeling Business Analysis Business Intelligence MySQL Qlik Sense Data Analysis
Unity Unreal Engine Game Development Fundamentals C# 3D Game Development C++ Unreal Engine Blueprints 2D Game Development Mobile Game Development
Google Flutter iOS Development Android Development Swift React Native Dart (programming language) Kotlin Mobile App Development SwiftUI
Graphic Design Photoshop Adobe Illustrator Drawing Digital Painting Canva InDesign Character Design Procreate Digital Illustration App
Life Coach Training Neuro-Linguistic Programming Personal Development Personal Transformation Life Purpose Mindfulness Sound Therapy Meditation CBT Cognitive Behavioral Therapy
Business Fundamentals Entrepreneurship Fundamentals Freelancing Business Strategy Startup Business Plan Online Business Blogging Leadership
Digital Marketing Social Media Marketing Marketing Strategy Internet Marketing Google Analytics Email Marketing Copywriting YouTube Marketing Startup

DevelopmentWeb Development

UI UX Design Hybrid from Figma to HTML CSS and JavaScript

Learn how to become a Full-Stack Designer with User Interface Design, User Experience Design, Web Development, Bootstrap
Rating: 4.5 out of 54.5 (561 ratings)
4,879 students
Created by Hossein Boroji
Last updated 4/2022
English
English [Auto]

What you'll learn

  • Design 3000 Figma interactive components variants and FigJam UX theories
  • Transform Figma components into live HTML CSS components
  • Become a unicorn UI UX Designer who knows design and code
  • Build scalable design systems with Figma and automate manual processes
  • Seamlessly inspect and build your Figma Components for development handoff
  • Responsive UI Development with HTML CSS JavaScript Bootstrap 5 grid system

Requirements

  • No prior HTML, CSS, JavaScript Bootstrap knowledge needed
  • No prior UI UX and graphic knowledge needed
  • Free trial software of Affinity Designer
  • Use free version of Figma

Description

From UX Theories to UX Engineering in 1 place

  • Build everything with me from UI Design to Web Development

  • Join me and become a Figma plugin frenzy power user

  • Master industry standard Design and Development processes


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


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

Who this course is for:

  • Web Developer who want develop Figma components seamlessly
  • UI UX Designers who want to learn how to code using HTML CSS JavaScript

Instructor

Hossein Boroji
UX Developer
Hossein Boroji
  • 4.6 Instructor Rating
  • 608 Reviews
  • 6,102 Students
  • 3 Courses

I am a UX UI Design Lead working at TD Bank. I have a Bachelor's in Graphic Design, and 2 Graduate Certificates in both Interactive Media Design, and User Experience Design. I also have a Diploma in Mathematics which taught me how to Design with precision.


Bad UX is everywhere, and I am here to fix them with my multidisciplinary design background. In my design tool kit, aesthetics plays a big role because I love to make boring information visually pretty. I love solving problem by creating UX flows and UI prototypes.


Enhancing user experience is my main area of expertise. Everything has to be pixel perfect otherwise I go crazy.

Top companies choose Udemy Business to build in-demand career skills.
NasdaqVolkswagenBoxNetAppEventbrite
  • Udemy Business
  • Teach on Udemy
  • Get the app
  • About us
  • Contact us
  • Careers
  • Blog
  • Help and Support
  • Affiliate
  • Investors
  • Impressum Kontakt
  • Terms
  • Privacy policy
  • Cookie settings
  • Sitemap
  • Accessibility statement
Udemy
© 2022 Udemy, Inc.