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

Summary

This tutorial series guides viewers through transforming a sigma design into a functional website using HTML, CSS, and JavaScript. The focus of this video is on designing the testimonial section, starting with setting margins and styling headings and paragraphs to match the design in Figma. The instructor demonstrates how to position elements side by side, hide mobile-specific buttons, and add stylistic touches like shadows and border radii. The video concludes with the addition of background rectangles and final adjustments to achieve a polished look for the testimonial section.

Takeaways

• 🌐 The tutorial series focuses on converting a sigma design into a functional website using HTML, CSS, and JavaScript.
• 🎨 The previous video covered the design of the hero section, which is visually demonstrated in a browser.
• 📝 The current video's objective is to design the testimonial section as per the Figma file layout.
• 🔍 The designer measures and replicates the gap between sections, which is consistently 100 pixels, using CSS margin properties.
• 🖌️ Headings across different sections are styled uniformly with CSS, including custom properties for color and font-family.
• 📑 The testimonial section consists of two parts side by side, styled with Flexbox to ensure proper alignment.
• 🖼️ The testimonial cards are styled with properties like border-radius, box-shadow, and background color, taken from the Figma design.
• 📝 Paragraphs within the testimonial section are given specific styles, including custom color variables and text alignment.
• 🔄 The video demonstrates responsive design by adjusting the button's position for desktop and mobile views using CSS classes and display properties.
• 📍 The position of images and buttons within the testimonial cards is fine-tuned using absolute positioning relative to the card.
• 🎨 Background rectangles are added behind the testimonial cards using the ::before pseudo-element with specific dimensions and border-radius to match the design.
• 🔄 The second testimonial card is adjusted to align with the first by translating it to the right and adjusting the ::before pseudo-element's styles accordingly.

Q & A

What is the main topic of the tutorial series?

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

What section of the website is designed in the previous video?

In the previous video, the hero section of the website was designed.

What is the first step in designing the testimonial section in the video?

The first step is to create a comment in the code to denote the start of the testimonials section.

How much gap is there between the testimonial section and the hero section according to the Figma file?

There is a gap of 100 pixels between the testimonial section and the hero section.

What CSS property is used to add a margin top of 100 pixels to all sections?

The 'margin-top' CSS property is used to add a margin of 100 pixels to all sections.

How are the headings styled in the video?

The headings are styled by copying the CSS from the Figma file, pasting it into the style.css file, and applying the same styling to all h2 elements.

What class is added to the h2 elements to style them as 'light'?

A class called 'light' is added to the h2 elements to style them with a white color.

How are the paragraphs inside the sections styled in the video?

The paragraphs are styled by copying the CSS from the Figma file and applying it to all p elements inside the sections using the 'section p' selector.

What CSS property is used to position the divisions side by side in the testimonial section?

The 'display: flex' property is used to position the divisions side by side in the testimonial section.

How are the testimonial cards styled in the video?

The testimonial cards are styled by copying the CSS properties such as border-radius, box-shadow, background-color, and width from the Figma file and applying them to the appropriate CSS selector.

What is the purpose of the 'before' selector used in the testimonial section?

The 'before' selector is used to add a background rectangle behind the testimonial cards, which is not part of the original HTML content.

How is the second testimonial card moved to the right in the video?

The second testimonial card is moved to the right by using the 'transform: translateX(20px)' CSS property on the ':last-child' pseudo-class.

What is the final step in styling the testimonial section in the video?

The final step is to add a border-radius to the 'info' division and set its background color to white for better visual appearance.