Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3

Summary

This tutorial series guides viewers through transforming a Sigma design into a functional website using HTML, CSS, and JavaScript. The instructor demonstrates setting up the project in VS Code, creating necessary files, and adding CSS variables. The video focuses on writing HTML for the website's header, navigation, hero section, and other elements, while also showing how to export images from Figma. Viewers learn to structure the HTML to match the design, including responsive navigation for mobile views, setting the stage for subsequent CSS development.

Takeaways

• 🌐 The tutorial series is focused on converting a Figma design into a real website using HTML, CSS, and JavaScript.
• 📁 The project setup in VS Code includes HTML, CSS, and JavaScript files along with CSS variables.
• 🖼️ Images are exported from the Figma file and placed in an 'images' folder for the project.
• 📝 HTML structure starts with a header section, containing a logo, navigation menu, and a full-width gradient background.
• 🔗 The navigation menu includes links and a button styled with 'btn' and 'dark' classes for different appearances.
• 🏆 The hero section features a left part with a heading, text, and button, and a right part with an image.
• 🎓 Achievement cards display statistics with headings, numbers, and a background rectangle styled in CSS.
• 💬 The testimonials section includes two parts: left with testimonial cards containing text, name, company, and image; right with a heading, text, and button.
• 📚 The courses section displays course cards with images, info, duration, and a 'View All' button to navigate to more courses.
• 📱 The 'Get Our App' section promotes the app with a heading, paragraph, and buttons leading to the App Store and Google Play.
• 🔗 The footer contains links organized into sections with headings, social media icons, a subscription form, and copyright information.

Q & A

What is the main focus of this tutorial series?

The main focus of this tutorial series is to convert a sigma design into a real website using HTML, CSS, and JavaScript.

What is the first step shown in the video for setting up the project?

The first step shown in the video is creating HTML, CSS, and JavaScript files and adding CSS variables in the project.

How does the instructor demonstrate the export of images from the Figma file to the project?

The instructor shows the export of images by copying and pasting the images that were exported from the Figma file into the project's 'images' folder.

What is the purpose of the 'Live Server' extension in VS Code mentioned in the video?

The 'Live Server' extension in VS Code is used to open the HTML file in a browser, allowing for a live preview of the website as it is being developed.

What is the first section of the website that the instructor starts coding in HTML?

The first section of the website that the instructor starts coding is the header section, which includes the logo and menu items.

How many menu items are initially added to the navigation menu in the video?

Initially, three menu items are added to the navigation menu: 'About', 'Services', and 'Our Work', along with an 'Enroll Now' button.

What is the significance of the 'wrapper' class in the header section?

The 'wrapper' class in the header section is used to contain all the elements within the header and to set a max width for the contents inside the header, different from the full width background.

What are the two types of buttons mentioned in the video, and how are they differentiated in the code?

The two types of buttons mentioned are 'dark' and 'light'. They are differentiated in the code by adding a class of 'btn' for the button and an additional class of 'dark' for the dark button.

How does the instructor handle the creation of the hero section in the HTML?

The instructor creates a 'hero section' class division and within it, adds a 'left' class division for the heading, text, and button, and a 'right' class division for the image.

What is the method used in the video to add line breaks in the HTML for the heading text?

The method used to add line breaks in the HTML for the heading text is by inserting a 'br' tag after the text that should be on a new line.

What is the process for adding the testimonials section in the HTML as shown in the video?

The process involves creating a 'testimonials section' class division, within which two parts are created: a 'left' class division for the testimonial cards, each containing content, info, and an image, and a 'right' class division for additional text and a button.

What are the two types of headings mentioned for the courses section, and how are they applied in the code?

The two types of headings mentioned are 'light' and 'dark'. They are applied in the code by adding a class of 'light' to the 'h2' tag for the light heading.

How does the instructor approach the creation of the 'Get Our App' section in the HTML?

The instructor creates a 'wrapper' division and within it, a 'section' with the class 'app section'. It includes a heading, a paragraph, and two 'app btn' class divisions, each containing an 'img' tag for the icon and a 'span' for the text.

What components are included in the footer section of the website as per the video?

The footer section includes a 'wrapper' division, three 'links' class divisions each with a heading and list of links, social media icons, an input field for email subscription, and copyright information.

How does the instructor plan to handle the mobile version of the website in terms of HTML changes?

For the mobile version, the instructor mentions that no changes are needed in the HTML as the elements are the same, but implies that CSS will be used to adapt the layout for mobile viewing.

What is the final step shown in the video for completing the HTML structure of the website?

The final step shown in the video is adding comments in the HTML code to mark the end of each section, such as 'end of header section', 'end of testimonials section', 'end of courses section', and 'end of app section'.