Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
by
FREELessons:12Length:1.9 hours

Next lesson playing in 5 seconds

Cancel
  • Overview
  • Transcript

5.2 Wrapping Up

Let’s wrap up “Figma to HTML” with a quick recap of everything we’ve learned.

Resources

5.2 Wrapping Up

Hey, welcome to the final video in Figma HTML. So you've just gone through and converted this Figma design into this fully coded up website. So you saw how you can use Figma to export your photos, how you can use it to export SVG graphics, how you can get in and copy out little bits of CSS code. And interact with the design to find what measurements you should be using throughout your site. We also covered some of the things that you might wanna do to modify a Figma design to get it ready to actually be coded up. And in the process of actually doing the coding, you'll learn how to work with CSS variables via colors. How to use Flexbox to control alignment issues that previously were a lot more difficult to solve, how to take advantage of CSS Grid. And how to put together some CSS classes that you could reuse and reapply to help make your code more efficient. Now, we actually have another course coming up that branches off this course. But we're gonna take a portion of this design, The Discover Around the World section. And we're going to use it as an example of how you can work with WordPress Gutenberg to create custom layouts. That can be controlled by the user of a theme that you're making. We're gonna be doing this one a little bit differently to the way that you would normally work with Gutenberg to create custom layouts. Because we're not gonna be using any JavaScript, not a single line of JavaScript. Now, usually creating custom layouts with Gutenberg requires some pretty full-on JavaScript and it's a fairly in-depth development process. But if that type of deep JS development process doesn't suit what you're trying to do with your particular project you might want to use a different approach. And that's what we're gonna go through when we take this section of this site that we've just coded up. And reproduce it in WordPress using a combination of a preset template of Gutenberg Blocks, a custom post type, and a custom post filter. So there'll be a link to that course in the Notes below this video, definitely check it out if you're interested in WordPress theme development. So I hope that you learned a few new tricks working with Figma and also working with CSS, in particular, Flexbox and CSS Grid. Thank you so much for taking this course and I will see you in the next one.

Back to the top