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

Summary

This tutorial video guides viewers through the process of converting a sigma design into a responsive website using HTML, CSS, and JavaScript. The instructor demonstrates how to adjust the design for different devices, including creating a media query for screens less than 800 pixels wide, hiding the navigation menu, and adding a mobile-friendly menu icon. The video also covers styling the mobile navigation, implementing a 'scrolled' class for navigation changes on scroll, and using JavaScript to toggle the mobile menu's visibility. The tutorial concludes with testing the mobile menu's functionality across devices.

Takeaways

• 📱 We are converting a Figma design into a real website using HTML, CSS, and JavaScript.
• 💻 The design for the desktop and iPad Pro versions is complete.
• 📏 Next step: creating a media query for screen sizes less than 800 pixels.
• 🔄 For widths less than 800 pixels, the navigation menu will be replaced with an icon.
• 🔧 A new mobile navigation menu will be created with a logo and menu icon.
• 🖼️ In the HTML, the existing nav element is hidden and a new nav element for mobile is created.
• ⚙️ The mobile nav is styled in CSS to be responsive and match the design.
• 🖱️ JavaScript is used to add and remove a 'scrolled' class for different styles based on scroll position.
• 📂 Mobile menu items are created in HTML and styled in CSS.
• 🚀 The active class is toggled via JavaScript to show and hide the mobile menu on click.

Q & A

What is the main focus of the tutorial series mentioned in the script?

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

What versions of the website design have been completed before this video?

The desktop version and the iPad Pro version of the website design have been completed before this video.

What is the purpose of creating a media query for size less than 800 pixels?

The purpose of creating a media query for size less than 800 pixels is to adapt the website design for smaller screens, such as mobile devices, by hiding the menu bar and adding a menu icon.

How does the tutorial handle the navigation menu for smaller screen sizes?

For smaller screen sizes, the tutorial suggests hiding the traditional navigation menu and replacing it with a menu icon that, when clicked, displays a mobile navigation menu.

What is the 'scrolled' class used for in the context of the navigation menu?

The 'scrolled' class is used to apply different styling to the navigation menu when the user scrolls down on the page, such as adding padding and a background color.

How is the 'scrolled' class added or removed in the mobile navigation menu?

The 'scrolled' class is added or removed in the mobile navigation menu using JavaScript, specifically by checking if the window has been scrolled more than 60 pixels.

What is the structure of the mobile navigation menu in the HTML file?

The mobile navigation menu in the HTML file consists of a 'nav' element with a class of 'mobile', containing a 'div' for the logo, a 'div' for the menu icon, and a 'div' for the mobile menu container with a class for the close icon and an unordered list for the menu items.

How is the mobile menu container initially positioned off-screen?

The mobile menu container is initially positioned off-screen by setting its left position to 100% in the CSS file.

What happens when the 'active' class is added to the mobile menu container?

When the 'active' class is added to the mobile menu container, the left position is reset to 0, bringing the menu into view, and the close icon becomes visible and clickable.

How are the menu icon and close icon referenced in the JavaScript file?

The menu icon and close icon are referenced in the JavaScript file using 'document.querySelector' with the appropriate class selectors, such as 'menu-icon' and 'mobile-menu-container close-icon'.

What event listeners are added to the menu icon and close icon, and what actions do they perform?

Click event listeners are added to both the menu icon and close icon. The menu icon's event listener adds the 'active' class to the mobile menu container, while the close icon's event listener removes the 'active' class, showing and hiding the mobile navigation menu respectively.