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

Summary

This tutorial video guides viewers through converting a sigma design into a responsive mobile website using HTML, CSS, and JavaScript. Starting with a media query for screens under 700 pixels, the instructor demonstrates adjusting padding, widths, and layout for mobile devices. Key elements like buttons, nav bars, and images are repositioned and resized to fit the mobile view, ensuring a user-friendly and visually appealing design on smaller screens. The video concludes with a fully styled mobile version, showcasing the hero section, menu, testimonials, courses, and footer.

Takeaways

• 🌐 The tutorial series focuses on converting a sigma design into a functional website using HTML, CSS, and JavaScript.
• 📱 The video specifically addresses the design adjustments required for the mobile version of the website, targeting screens with a max width of 700 pixels.
• 🔧 The presenter demonstrates how to create and apply a media query for the mobile version to ensure responsive design.
• 📏 Adjustments are made to padding and widths of elements to fit the mobile layout, such as setting the wrapper padding to 32 pixels and changing paragraph width to 100%.
• 🔄 The orientation of buttons is changed from horizontal to vertical by setting the flex direction to column within the 'app buttons' container.
• 📉 Padding adjustments are made to the 'mobile nav' and its scrolled state to better fit the mobile screen dimensions.
• 📍 The positioning of the close button within the mobile menu is corrected to align to the right side of the screen.
• 🎨 The styling of headings and other elements like achievement cards is adjusted according to the Figma design specifications.
• 🖼️ Image dimensions are modified to fit the mobile layout, including resizing and repositioning within their containers.
• 📝 Text sizes and margins within various sections such as testimonials and courses are fine-tuned to match the design mockup.
• 🔚 The footer is restructured from a multi-column layout to a single column with centered content and adjusted button positioning for mobile readability.

Q & A

What is the main focus of the tutorial series?

The tutorial series focuses on converting a sigma design into a real website using HTML, CSS, and JavaScript.

What was the first step taken in the mobile version design process?

The first step was to create a media query for the mobile version with a max-width of 700 pixels.

How does the speaker select a mobile device for testing in the browser?

The speaker selects a mobile device from the browser's device selection menu, specifically choosing the Pixel 2 XL.

What is the initial padding set for the wrapper in the mobile version design?

Initially, the padding for the wrapper is set to 32 pixels on the left and right, as per the Figma file.

How is the width of the paragraph adjusted for the mobile version?

The width of the paragraph is adjusted to 100% to take up the full width of the screen on mobile devices.

What CSS property is used to stack the buttons vertically in the mobile version?

The 'flex-direction' property is set to 'column' to stack the buttons vertically.

How is the mobile navigation padding adjusted for different scroll states?

The padding is set to 32 pixels initially, and when scrolled, it changes to 8 pixels on top and bottom with 32 pixels on the left and right.

What changes are made to the position of the close button in the mobile menu?

The close button's position is set to 32 pixels from the right side of the screen.

How is the hero section's image height adjusted in the mobile version?

The image height is reduced from 580 pixels to 400 pixels to better fit the mobile screen size.

What is the process for styling the headings in the other sections of the mobile version?

The process involves going back to the Figma file to determine the font size, and then applying the same size to the corresponding headings in the CSS file.

How does the speaker ensure that the footer is styled correctly for the mobile version?

The speaker adjusts the grid layout to a single column, centers the text, and removes padding from the list items to ensure proper styling on mobile devices.