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

Summary

In this tutorial, the instructor guides viewers through converting a Figma design into a responsive website using HTML, CSS, and JavaScript. They start by enhancing the navigation bar's appearance upon scrolling and then proceed to adapt the design for tablet views, specifically for an iPad Pro. The process includes adjusting media queries, button styles, padding, and layout adjustments for various sections like the hero section and achievement cards, ensuring a seamless user experience across devices.

Takeaways

• 🌐 The tutorial series focuses on converting a Figma design into a functional website using HTML, CSS, and JavaScript.
• 🖥️ The desktop version of the website has been completed, featuring sections like the hero section, testimonials, courses, get our app, and footer.
• 📱 The video specifically addresses the design adjustments for the tablet version, starting with the navigation bar styles when scrolling.
• 🔧 A 'scrolled' class is added to the navigation bar to change its appearance upon scrolling down, including background color, box shadow, and border radius adjustments.
• 🎨 JavaScript is used to add or remove the 'scrolled' class based on the scroll position, enhancing the interactive user experience.
• 📚 Media queries are employed to apply tablet-specific styles when the screen width is less than 1100 pixels, targeting the iPad Pro view.
• 🛠️ The styling for buttons, padding adjustments for the wrapper, and navigation bar width are modified to suit the tablet view.
• 📊 The hero section layout is altered for the tablet version, changing from a side-by-side display to a columnar flex direction.
• 🖼️ The position of the 'right' division in the hero section is set to absolute and aligned to the bottom to accommodate the image properly.
• 📝 The achievement cards' positions are adjusted from absolute to relative, and margins are added for better spacing within the hero section.
• 🔄 The video concludes with the final touches on the hero section's styling, including font size adjustments and increasing the image height for better visual appeal.

Q & A

What is the main focus of the tutorial series?

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

What sections of the website have been designed so far?

The sections that have been designed include the hero section, testimonials section, our courses section, get our app section, and the footer.

What is the first task mentioned for the tablet version design?

The first task for the tablet version design is to add different styles to the navigation bar when the page is scrolled up.

How is the navigation bar styled when the page is scrolled down?

When the page is scrolled down, a class called 'scrolled' is added to the navigation bar, changing its background color, adding a box shadow, and adjusting the border radius.

What JavaScript function is used to detect when the page is scrolled down?

An event listener for the 'scroll' event on the window object is used to detect when the page is scrolled down.

What is the purpose of the 'scrolled' class in the navigation bar?

The 'scrolled' class is used to apply a different set of styles to the navigation bar when the user scrolls down the page.

How is the transition effect applied to the navigation bar changes?

A smooth transition effect is applied by setting the CSS 'transition' property to 'all' with a duration of 500 milliseconds.

What is the method to apply tablet-specific styles in the website?

A media query with a max-width of 1100 pixels is used to apply tablet-specific styles when the screen width is less than 1100 pixels.

How is the content width adjusted for the tablet version in the script?

The content width is adjusted by setting the width of the navigation bar, header, hero section, and wrapper to 100% and adding padding to these elements.

What changes are made to the hero section for the tablet version?

The hero section changes include setting the flex direction to column, adjusting the position of the right division to absolute with a bottom position of zero, and styling the achievement cards to be positioned relative to their container.

How are the achievement cards positioned in the tablet version?

The achievement cards are positioned by setting their position to relative, unsetting the left and top values, and applying margin to create spacing between them.

What is the final step mentioned for styling the hero section in the tablet version?

The final step is to set the font size and line height of the heading in the hero section's left division, and to increase the height of the image in the right division.