In this course, we’ll take a one-page design for a travel website in Figma and go through the process of converting it into HTML.
In the process, we’ll learn some tricks about working with Figma and using CSS Grid and Flexbox to make layout control a breeze.
This course is perfect for anyone who’s found a landing-page design on Envato Elements and wants to code it up themselves. Let’s begin!
Learn Figma
We've built a complete guide to help you learn figma design, whether you're brand new to Figma's design tools, or you want to take your skills to the next level. You may also want to check out our free Figma tutorial for a comprehensive beginner's guide to the software.
1.Introduction
1.1Figma to HTML00:43
1.1
Figma to HTML
00:43
2.Preparing the Groundwork
2.1Preparing to Begin10:37
2.1
Preparing to Begin
10:37
2.2Preparing Images11:37
2.2
Preparing Images
11:37
2.3Create the Basic Shell13:44
2.3
Create the Basic Shell
13:44
3.Coding Up the Headers
3.1Create the Top Header09:45
3.1
Create the Top Header
09:45
3.2Create the Main Header16:45
3.2
Create the Main Header
16:45
3.3Create the Hero Header08:34
3.3
Create the Hero Header
08:34
4.Coding Up the Main Content
4.1Create the Tours Section Grid18:43
4.1
Create the Tours Section Grid
18:43
4.2Create the Best Offers Section13:23
4.2
Create the Best Offers Section
13:23
4.3Create the Blog Section07:50
4.3
Create the Blog Section
07:50
5.Conclusion
5.1Add the Footer02:18
5.1
Add the Footer
02:18
5.2Wrapping Up02:04
5.2
Wrapping Up
02:04
