From Figma to Code

-- Today, my brand new course at Scrimba has released! I've been working on it for months now, and it's going to help you all take high fidelity mockups that I've designed from within Figma, and show you how to make them a working reality in the browser!

There's over 3 hours worth of content, and 5 unique projects. You're challenged in each one of them to write the HTML markup, CSS and any necessary JavaScript to properly translate the design from Figma to the browser.

Scrimba offers a unique, interactive interface with a live code editor that makes learning frontend development fun! And it's perfect for this type of course.

Some of what you'll learn:
- Using Figma
- Using ems and rems
- Structuring HTML
- Flexbox
- CSS Grid
- Responsive development
- Animated navigations
- Mobile-first development
- Using SVGs
- Media queries
- Forms
- Advanced backgrounds
- Burger menus
- Logos
- Icons
- Dropdowns
- Like functionality
- Complex grid layouts

- - - - - - - - - - - - - - - - - - - - - -

Subscribe for NEW VIDEOS!

^-Chat with me and others

- - - - - - - - - - - - - - - - - - - - - -

Come to my discord server or add me on social media and say Hi!

[DesignCourse]

Just a note: It'll be free for the first week! Check it out in the youtube description!

[djaalabahmed]

guys the Scrimba site not working I can't access to the courses ????

[gabgab]

thank you man, im taking this course right now. it amazes me how much content you produce every month. cant wait for your 'design course' to launch. its a day-1 insta buy for me.

[lamphrangmilamin]

THANK YOU SO MUCH I WAS SEARCHING FOR THIS ALL OF THIS MORNING.

[XbattlepopeX]

Ok i have one question, the first project we put the card in the middle of a screen, however in figma design its not centered, its slightly shifted up and right, am i missing something.

[lexerquine]

i didn't wanted a course ad i wanted to know if its possible automatically to do what your title said.

[eleah]

So much teasing without the punch line. Looks great but what will this cost after the first week?

[xstrafez_c]

I've always wanted a course like this. Thank you so much!

[codeityt]

Please give suggestions to improve my newly created YouTube channel 🙏

[Troevo]

Gary, I would love to buy your course, but I don't speak English. Can I watch videos with subtitles on scrimba?

[nirajparte]

Awesome dude it's a very awesome course and for free very appreciated 😉❤️

[Rattlecat]

I ideally want to be a UI designer first and foremost, but most of the time I see UI designers dual-skilled in either front end development or UX. I thought I wanted to do front end development but Java is extremely difficult for me to learn. HTML & CSS are the easy parts. Your videos and classes help so much, but the second you push into java my brain just freezes up despite trying to pay as much attention as I can.

Do you feel there are jobs out there that hire exclusively for UI anymore in the event I can't get it together with UX or Front End Development that doesn't require Java training (I imagine this latter is non-existent as all 3 are generally required)

[Crowely]

Thank you SO much! I just finished your HTML and CSS Crash Course where you worked off of Adobe XD and was genuinely hoping you'd have a Figma one. Here it is!

[Dev_Everything]

Waste of time, this is just a plug for a course. On to the next vid

[jewelthompson]

Is this course for people who have zero knowledge in coding?

[felixgeorgeault]

I don't get it, how am I suppose to get the figma files ?

[charlesajiboye]

Great job Gary..This course is loaded with content

[RohitSaini-gocr]

I have completed this course. It is just amazing. Thank you Gary sir for the amazing work. ❤️

[saurabhshiradkar]

You are amazing sir

Love from India, ❤

[nattikgur-arie]

The very specific line-height: 119.7%; in the first course that does nothing at all was very funny.
Jokes aside Scrimba is really cool thank you for that and a huge thank you for all your other videos.