Ui Ux Design Hybrid From Figma To Html Css And Javascript (updated 4/2022)

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

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 placeBuild everything with me from UI Design to Web DevelopmentJoin me and become a Figma plugin frenzy power userMaster industry standard Design and Development processesCreative ProjectsCreate complex web design layouts with Figma Auto Layout and use pure CSS Grid and FlexboxTransform Photoshop into HTML mark up and style it with CSSMorph SVG with pure vanilla JavaScriptTrigger JavaScript DOM events and control CSS animations with JavaScript
Learn interaction design with CSS Transitions and AnimationDevelop production ready responsive design with Bootstrap 5 Grid systemAutomate your brand style guide as a visual designer with FigmaUse Design Principles to create Logo and YouTube thumbnail videos with Affinity DesignerSummary 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 :) ⭐️⭐️⭐️⭐️⭐️

Overview

Section 1: Download Materials

Lecture 1 Course Overview

Lecture 2 Download Course Material Bundled

Section 2: Figma & Web Design

Lecture 3 Download Figma files

Lecture 4 Figma Basics

Lecture 5 Figma Plugin and Community

Lecture 6 Figma Essential Behaviors

Lecture 7 Figma Core Engine Concepts

Lecture 8 Airbnb Project

Lecture 9 Medignition Project Part 1

Lecture 10 Medignition Project Part 2

Lecture 11 Nested Component Behavior

Lecture 12 Sandrina Prototyping Project

Lecture 13 Overlay Prototyping Project

Section 3: Figma & Design System

Lecture 14 Download Figma files

Lecture 15 Reusable Styles

Lecture 16 Automate Reusable Styles

Lecture 17 Automate Brand Styleguide

Lecture 18 Accessibility Testing

Lecture 19 Component Skeleton

Lecture 20 3000 Component Project

Lecture 21 Interactive Components Nested

Lecture 22 Automate color palette

Lecture 23 Automate typography styles

Lecture 24 Wireframe component

Lecture 25 Visual design components

Lecture 26 Rapid design part 1

Lecture 27 Rapid design part 2

Section 4: Design Principles & Theories

Lecture 28 Unity and Similarity

Lecture 29 Dominance and Working Memory

Lecture 30 Negative Space and Complexity

Lecture 31 Contrast and Emphasis

Lecture 32 Proximity and Common Region

Lecture 33 Alignment and Uncompleted Task

Lecture 34 Psychological Barrier and Proportion

Lecture 35 Repetition and Common Behavior

Lecture 36 Rhythm and Line Connection

Lecture 37 Primary, Secondary, and CMYK Colors

Lecture 38 HSLA Colors

Lecture 39 RGB Colors

Lecture 40 Secondary RGB Colors

Lecture 41 Color Wheel

Lecture 42 Complementary Colors

Lecture 43 Split Complementary Colors

Lecture 44 Monochromatic Colors

Lecture 45 Analogous Colors

Lecture 46 Triad Colors

Lecture 47 Tertiary Colors

Lecture 48 UI Design Components

Lecture 49 UI Design Analysis

Lecture 50 Typography

Lecture 51 Serif and Sans Serif Typeface

Lecture 52 Font Weight

Lecture 53 Font Size

Lecture 54 Kerning

Lecture 55 Word Spacing

Lecture 56 Leading

Lecture 57 Line Width

Lecture 58 Orphan and Widow

Lecture 59 Type Alignment

Lecture 60 Type Hierarchy

Section 5: HTML

Lecture 61 Set Up

Lecture 62 HTML Anatomy

Lecture 63 HTML List

Lecture 64 HTML Attribute

Lecture 65 HTML Images

Lecture 66 HTML Videos

Lecture 67 HTML iFrame

Lecture 68 HTML Checkbox and Radio Button

Lecture 69 HTML Input Field

Lecture 70 HTML Dropdown

Lecture 71 HTML Button

Lecture 72 Linking CSS and JavaScript Files

Lecture 73 HTML Semantics

Lecture 74 HTML Meta Tags

Lecture 75 HTML External Style

Lecture 76 HTML Style Tag

Lecture 77 HTML Inline Style

Lecture 78 Linking Fonts inside HTML

Lecture 79 HTML Block Elements

Lecture 80 HTML Inline Elements

Lecture 81 HTML Box Anatomy

Section 6: CSS 101

Lecture 82 CSS Anatomy

Lecture 83 CSS Classes

Lecture 84 CSS ID

Lecture 85 CSS Multiple Selector

Lecture 86 CSS Variable

Lecture 87 CSS Specificity

Lecture 88 CSS Width and Height

Lecture 89 CSS Margin and Padding

Lecture 90 CSS Border Radius

Lecture 91 CSS Box Model

Lecture 92 CSS Universal Selector

Lecture 93 CSS Descendant

Lecture 94 CSS Direct Child

Lecture 95 CSS General Sibling

Lecture 96 CSS Adjacent

Lecture 97 CSS Attribute Selector

Lecture 98 CSS Focus Pseudo Class

Lecture 99 CSS First Child

Lecture 100 CSS Last Child

Lecture 101 CSS Nth Child

Lecture 102 CSS Odd Selector

Lecture 103 CSS Even Selector

Lecture 104 CSS Nth of Type

Lecture 105 CSS Not Selector

Lecture 106 CSS Link Pseudo Classes

Lecture 107 CSS Pseudo Elements

Lecture 108 CSS Comments

Section 7: CSS 201

Lecture 109 CSS Background Color

Lecture 110 CSS Background Image

Lecture 111 CSS Background Repeat

Lecture 112 CSS Background Position

Lecture 113 CSS Background Size

Lecture 114 CSS Background Shorthand

Lecture 115 CSS Gradient

Lecture 116 CSS Multiple Background

Lecture 117 CSS Filters

Lecture 118 CSS Opacity

Lecture 119 CSS Clip Path Circle

Lecture 120 CSS Clip Path Polygon

Lecture 121 CSS Display and Visibility

Lecture 122 CSS Overflow

Lecture 123 CSS Text Shadow

Lecture 124 CSS Box Shadow

Lecture 125 CSS Blend Mode

Section 8: CSS 301

Lecture 126 CSS Scale

Lecture 127 CSS Skew

Lecture 128 CSS Translate

Lecture 129 CSS Matrix

Lecture 130 CSS Rotate

Lecture 131 CSS Transform Origin

Lecture 132 CSS Multiple Transform

Lecture 133 CSS Easing Functions

Lecture 134 CSS Cubic Bezier

Lecture 135 CSS Transitions

Lecture 136 CSS Multiple Transitions

Lecture 137 CSS Transitions Shorthand

Lecture 138 CSS Animations

Lecture 139 CSS Animations Shorthand

Lecture 140 CSS Multiple Animations

Lecture 141 CSS Position Relative

Lecture 142 CSS Position Absolute

Lecture 143 CSS Position Fixed and Sticky

Lecture 144 CSS Z-Index

Lecture 145 CSS Responsive Design

Section 9: CSS Grid and Flexbox

Lecture 146 CSS Flexbox

Lecture 147 CSS Justify Content

Lecture 148 CSS Flex Start

Lecture 149 CSS Flex End

Lecture 150 CSS Space Evenly

Lecture 151 CSS Space Around

Lecture 152 CSS Space Between

Lecture 153 CSS Align Items

Lecture 154 CSS Align Baseline

Lecture 155 CSS Align Self

Lecture 156 CSS Flex Order

Lecture 157 CSS Flex Grow and Shrink

Lecture 158 CSS Flex Shorthand

Lecture 159 CSS Flex Direction

Lecture 160 CSS Flex Column

Lecture 161 CSS Flex Wrap

Lecture 162 CSS Align Content

Lecture 163 CSS Grid Template Row

Lecture 164 CSS Grid Template Column

Lecture 165 CSS Grid Shorthand

Lecture 166 CSS Grid Row

Lecture 167 CSS Grid Column

Lecture 168 CSS Grid Area

Lecture 169 CSS Grid Gap

Lecture 170 CSS Justify Self

Section 10: Photoshop to CSS Project

Lecture 171 Download Coding and Photoshop Files

Lecture 172 Download Affinity Designer File

Lecture 173 Photoshop Project Overview

Lecture 174 Photoshop HTML Markup

Lecture 175 Photoshop CSS Root Declaration

Lecture 176 Photoshop CSS Grid Layout

Lecture 177 Photoshop CSS Card Design Part 1

Lecture 178 Photoshop CSS Card Design Part 2

Lecture 179 Photoshop CSS Card Design Part 3

Lecture 180 Photoshop CSS Interactions

Lecture 181 Photoshop CSS Responsive Behavior

Section 11: Bootstrap 5 Grid System

Lecture 182 Download All Coding Files— Bootstrap PDF

Lecture 183 Bootstrap Breakpoints

Lecture 184 Bootstrap Naming Convention

Lecture 185 Bootstrap Hierarchy

Lecture 186 Bootstrap Container

Lecture 187 Bootstrap Rows

Lecture 188 Bootstrap Columns

Lecture 189 Bootstrap Gutter and Spacing

Lecture 190 Bootstrap Order

Lecture 191 Bootstrap Offset

Lecture 192 Bootstrap Display

Lecture 193 Bootstrap Alignment

Lecture 194 Bootstrap Nested Columns

Lecture 195 Responsive Design Project

Section 12: Figma to HTML CSS

Lecture 196 Download All Files

Lecture 197 Boilerplate file

Lecture 198 Reusable Figma Styles

Lecture 199 Brand Styleguide

Lecture 200 CSS Automation

Lecture 201 CSS DRY Classes

Lecture 202 Airbnb Hero Section

Lecture 203 Airbnb Navigation Section

Lecture 204 Airbnb Card Section

Section 13: SVG

Lecture 205 SVG Anatomy

Lecture 206 SVG Rectangle

Lecture 207 SVG Transparency

Lecture 208 SVG Coordinates

Lecture 209 SVG Round Corners

Lecture 210 SVG Text

Lecture 211 SVG Circle

Lecture 212 SVG Ellipse

Lecture 213 SVG Line

Lecture 214 SVG Stroke

Lecture 215 SVG Multiple Objects

Lecture 216 Adobe Illustrator SVG Polygon

Lecture 217 Figma SVG Path

Lecture 218 SVG Viewbox

Lecture 219 SVG Animation and Transform Group

Lecture 220 Adobe Illustrator SVG Clip Path

Lecture 221 Figma SVG Gradient

Lecture 222 Figma SVG Filter

Section 14: JavaScript

Lecture 223 JavaScript Variables

Lecture 224 JavaScript String

Lecture 225 JavaScript Boolean

Lecture 226 JavaScript Number

Lecture 227 JavaScript Concatenation

Lecture 228 JavaScript Template Literal

Lecture 229 JavaScript Index Number and Length

Lecture 230 JavaScript Array

Lecture 231 JavaScript Array Manipulation

Lecture 232 JavaScript Object

Lecture 233 JavaScript Object Manipulation

Lecture 234 JavaScript Comparison Operators

Lecture 235 JavaScript Logical Operators

Lecture 236 JavaScript Conditional Statements

Lecture 237 JavaScript Logic

Lecture 238 JavaScript For Loop

Lecture 239 JavaScript For Of Loop

Lecture 240 JavaScript For Each Loop

Lecture 241 JavaScript Functions

Lecture 242 JavaScript Function Parameters

Lecture 243 JavaScript Anonymous Functions

Lecture 244 JavaScript Callback Functions

Lecture 245 JavaScript Arrow Functions

Section 15: JavaScript DOM

Lecture 246 JavaScript Query Selector

Lecture 247 JavaScript Query Selector All

Lecture 248 JavaScript Other Selectors

Lecture 249 JavaScript Text Content

Lecture 250 JavaScript Inner HTML

Lecture 251 JavaScript Attribute

Lecture 252 JavaScript Class List

Lecture 253 JavaScript Styling

Lecture 254 JavaScript Parent Child

Lecture 255 JavaScript Siblings

Lecture 256 JavaScript Create Element

Lecture 257 JavaScript Remove Child

Lecture 258 JavaScript Append and Prepend

Lecture 259 JavaScript Insert Before

Lecture 260 JavaScript Event Listener

Section 16: 10 Coding Projects

Lecture 261 Split Shadow Project

Lecture 262 Responsive Landing Page Project

Lecture 263 Masonry Grid Project

Lecture 264 Typography Poster Project

Lecture 265 Morphing Stroke Project

Lecture 266 Primary Art Brush Project

Lecture 267 Dynamic Card Design Project

Lecture 268 Full Screen Menu Project

Lecture 269 Morphing Background Project

Lecture 270 DeStijl Art Grid Project

Section 17: Graphic Design Fundamental

Lecture 271 Download resource files

Lecture 272 Affinity Designer Overview

Lecture 273 Essential Design Tools

Lecture 274 Gradient and Swatches

Lecture 275 Layer Effects and Strokes

Lecture 276 Grids and 3D Isometric

Lecture 277 Logo Thumbnail Project

Lecture 278 Brand Styleguide Project

Section 18: UX & Business Fundamental Theories

Lecture 279 UX Ice Berg Model

Lecture 280 UX Double Diamond

Lecture 281 UX Feasibility Diagram

Lecture 282 Target Audience

Lecture 283 UX Eco-System Mapping

Lecture 284 UX Journey Map

Lecture 285 Business SWOT Analysis

Lecture 286 Business Competitor Analysis

Lecture 287 Business Growth Metrics

Lecture 288 6 Famous Business Model

Lecture 289 Download FigJam files

Lecture 290 Affinity and Mind Mapping

Lecture 291 User Persona

Lecture 292 Customer Journey Mapping

Lecture 293 User Flows

Lecture 294 Design Strategy

Lecture 295 Sprint Planning

Section 19: Bonus Lecture

Lecture 296 Bonus

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