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.

Outlines

00:00

📝 Designing the Testimonial Section

This paragraph outlines the process of converting a design from a Figma file into a functional website using HTML, CSS, and JavaScript. The focus is on the testimonial section, following the completion of the hero section in a previous tutorial. The speaker discusses the importance of maintaining consistent spacing between sections and demonstrates how to apply a 100-pixel margin to achieve this. They also show how to style the testimonial section's heading using CSS, including copying styles from Figma and applying them to the HTML document.

05:00

🖌️ Styling Elements and Positioning

The speaker continues with the design process, detailing the steps to style the testimonial section's paragraphs and positioning elements side by side using Flexbox in CSS. They address the need for a mobile button and a desktop button, explaining how to adjust the HTML structure to accommodate both. The paragraph also covers adding gaps between sections and aligning content vertically, as well as styling individual testimonial cards with specific CSS properties like border-radius, box-shadow, and background color.

10:01

🔄 Adjusting Testimonial Card Styles

This section delves into the finer details of styling the testimonial cards, including setting margins, copying CSS properties from the design tool, and applying them to the HTML elements. The speaker discusses how to create a gap between testimonial cards and style the content within them, such as text and images. They also explain how to position an image within a testimonial card using absolute positioning and how to adjust the position of the second testimonial card to align with the design mockup.

15:04

🖼️ Final Touches with Background and Z-Index

The final paragraph covers the addition of a background rectangle behind the testimonial cards using the ::before CSS pseudo-element. The speaker describes how to set the dimensions, position, and background color for this element, as well as how to apply border-radius to create a curved effect. They also address the need to adjust the z-index to ensure the background does not overlay other elements. The paragraph concludes with a review of the completed testimonial section and a call to action for viewers to like, subscribe, and comment for further questions.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard language used for creating and designing web pages. In the video, HTML is used to structure the website, with elements like 'section' and 'h2' tags defining different parts of the webpage such as the hero section and headings, respectively.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used to describe the presentation of a document written in HTML. The video script discusses adding CSS properties like 'margin-top', 'color', and 'font-style' to style various sections of the website, such as the hero section and testimonial section.

💡JavaScript

JavaScript is a programming language that allows interactive web pages and is often used in conjunction with HTML and CSS. Although not explicitly mentioned in the script, JavaScript would typically be used alongside HTML and CSS to create dynamic and interactive elements on a website.

💡Figma

Figma is a design tool used for creating user interfaces in a collaborative environment. In the script, the Figma file is referred to as the source of design for the website's sections, with measurements and styles being taken from it to implement in the HTML and CSS code.

💡Hero Section

The hero section is a term used in web design to describe the introductory section of a website, typically the first thing a visitor sees. In the video, the hero section is mentioned as having been previously designed, and the focus shifts to the testimonial section.

💡Testimonial Section

A testimonial section on a website features positive reviews or endorsements from customers or clients. The script details the process of designing this section, including adding gaps, headings, paragraphs, and styling elements to present the testimonials attractively.

💡Margin

In CSS, 'margin' is a property that sets the space around an element, outside of any defined borders. The script mentions setting 'margin-top' to 100 pixels for all sections to create consistent spacing between different parts of the webpage.

💡Display Property

The 'display' property in CSS defines how an element should be displayed on a page. The script refers to setting the display property to 'flex' for the testimonial section to arrange the left and right divisions side by side.

💡Media Queries

Media queries are CSS techniques used for applying different styles for different devices based on characteristics such as screen size. Although not explicitly mentioned, the concept is implied when discussing the mobile and desktop versions of the button placement.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes. The script touches on this concept when adjusting the button's position for mobile and desktop views to ensure the website looks good on all devices.

💡Comment

In programming, a 'comment' is a piece of code that is not executed but is used to explain the purpose or functionality of the code. The script describes adding comments in the code, such as 'testimonials section', to make the code more readable and maintainable.

💡Variable

In CSS, a variable is a way to store a value that can be reused throughout the stylesheet. The script mentions using color variables like 'var dark blue color' for consistency in applying colors across different elements of the website.

💡Pseudo-element

A pseudo-element in CSS is used to style specified parts of an element. The script refers to using the ':before' pseudo-element to add a background rectangle to the testimonial cards, demonstrating how pseudo-elements can be used for creative design effects.

Highlights

Introduction to the tutorial series on converting a sigma design into a real website using HTML, CSS, and JavaScript.

Explanation of how to design the hero section of the website as shown in the browser.

Demonstration of the gap measurement between sections in the Figma file and its replication in CSS with a margin-top of 100 pixels.

Styling the testimonial section heading by copying CSS from the Figma file and applying it to all h2 elements.

Adjusting the heading color to white for the testimonial section using a class called 'light'.

Styling the paragraph text with CSS, including color, font style, and margin adjustments.

Positioning the left and right divisions side by side within the testimonial section using flex display.

Adding a class for the mobile button and positioning the desktop button within the right division.

Hiding the mobile button on desktop views with CSS display property set to none.

Adding a gap between the left and right divisions and aligning content vertically with CSS properties.

Styling the testimonial card with properties such as border-radius, box-shadow, background-color, and width.

Creating a margin-bottom for testimonial cards to add spacing between them.

Styling the content inside the testimonial with padding, background color, and text properties.

Applying different background colors to alternate testimonial contents for visual distinction.

Styling the testimonial heading with specific CSS properties copied from the Figma design.

Adding padding to the 'info' division and setting the border-radius for a rounded look.

Styling the company paragraph with specific text properties to match the design.

Positioning the testimonial image with absolute positioning relative to the testimonial card.

Adjusting the position of the second testimonial card to the right to match the Figma design.

Adding a gap between the button and paragraph by creating a 'features' division and applying margin.

Using the 'before' selector to add a background rectangle behind the testimonial cards with specific dimensions and styling.

Adjusting the height and z-index of the 'before' selector to ensure it is positioned correctly behind the content.

Final adjustments to the border-radius and background color of the 'info' section for a polished look.

Conclusion of the tutorial with an invitation for questions, likes, and subscriptions for more video updates.

Transcripts

hi everybody welcome to gt coding in

this tutorial series we are converting

this sigma design into a real website

using html css and javascript now in my

previous video i showed you how to

design this hero section so if you go to

our browser this is how it looks right

now we can see that we have designed the

hero section now in this video we will

see how to design this testimonial

section

so if you go back to our figma file this

is how we want our testimonials section

to look

so let's get started

[Music]

all right here's our code so first of

all let's go ahead and create a comment

so i'll just type testimonials section

and let's go back to our figma file and

the first thing we will do is we will

see what is the gap between the

testimonials section and this hero

section

so if i click over here and if i press

alt or option you can see that we have

a gap of 100 pixels and if we scroll

down and take a look at this gap over

here we can see that even for this we

have a gap of 100 pixels let's scroll

down and take a look at the gap of this

and we can see that we have a gap of 100

pixels for every section over here so

let's go back to our css and we will add

a margin top of 100 pixels for all the

sections

so if you go back to our html file we

can see that for each of the sections we

have this

section over here so here we can see we

have this section

and even for the courses we have this

section

so let's go ahead and

let's type section

and here i'll just type margin top and

i'll just set it to 100 pixels

right now let's go back to our figma

file

and the next thing we will style is this

heading so if i double click over here

and let's go over here to inspect and if

you scroll down we can see that the css

of the heading is displayed over here so

let's go ahead and copy all of this

and let's go back to our code and if you

go back to the index.html file here we

can see for all the headings we have an

h2

so here we can see for the testimonial

section we have this h2 over here for

the heading and if you scroll down we

can see that we have the h2 for the

courses section as well

and if we scroll down we also have the

h2 for the get our app section so we can

go ahead and add the same styling to all

the headings so let's select all the h2

in general so let's go back to style.css

file and here i'll just type h2

and i just pasted all the css over here

and let's delete this comment and also

font style and i'll just add sans serif

over here

and i'll also change the color to the

variable so i'll just type var

dark blue color

and we'll also remove all the default

margins so i'll just type margin zero

right now let's go to our browser and

let's scroll down and

here we can see we have the heading and

the styles are applied over here now for

this heading we have a color of white so

if we go back to our figma file here we

can see for this heading we have a white

color

and for that if you go back to our html

file

we have added a class called light so

if i just scroll down over here

here we can see we also have a class

called light for the h2

so let's go back to our style.css file

and here we will type h2 dot light

and we'll set the color to white

now if we go back to our browser we can

see that for this heading we have a

white color

right now let's style this paragraph so

let's go back to our figma file and

let's double click over here

and here if you go to the inspect tab we

can see the css over here so i just copy

all of the css

and let's go back and here i'll just

type section

p

so this will select all the paragraphs

inside all the sections so i'll just

paste the css over here

and let's change the color to our

variable so i'll just type var

dark blue color

and i'll just remove this comment and

this font style

and we'll also add sans serif over here

and let's go back to our browser and

we'll also add some margin so let's go

ahead and type margin

of let's add a margin of 12 pixels top

and bottom and zero for left and right

right now let's add some specific styles

for this testimonial section so let's go

back and if you go to the figma file

we can see that we have these sections

one next to the other so this is the

left part

and this is the right part so if you go

back to our html

here we can see we have two divisions

over here

we have a division with the class of

left

and here we have a division with the

class of right now we have to position

these divisions one next to the other so

for that you have to select the parent

division so if you scroll up

here we can see we have a section with

the class of testimonials section so

let's select this let's go back to our

css and here i'll just type testimonials

section

and we'll set the display to flex so

that both the divisions will be one next

to the other so if we go back to our

browser here we can see we have this

left section over here on the left and

then we have this right section

but here we can see we have this button

over here on the right

so let's go back to our html and

here we can see we have this left

section

and then we have this right section and

then we have this button over here so

what we will do is we'll copy this

button inside the right section now we

need to have a button over here for the

mobile version but for the desktop

version we need to have a button inside

the right division

so here i will just add a class of

mobile button

and let's copy this line of code and

let's go inside the right division and

here after the paragraphs i just add the

button

and for this button we will have a class

of desktop button

right now let's go to our style.css file

and we need to hide this mobile button

so here i'll just type testimonials

section

mobile button

and i'll just set the display to none

and now if you go back to our browser we

can see that everything looks all right

we have the button in the correct

position now the next thing we will do

is we will add a gap between the left

and the right divisions so let's go back

to our css

and here i just type gap and we'll add a

gap of 100 pixels

and we also want all the elements to be

aligned to the center vertically so if

you go back to our figma file here we

can see both the content are aligned to

the center vertically so let's go back

to our css and here let's type align

items center

and now we can see everything is

centered correctly

right now let's style this testimonial

card

so let's go back to our figma file and

let's double click over here

and let's go to inspect and let's scroll

down

and here we can see the styles for the

testimonial card so we need to have a

border radius of 24 pixels and we need

to have this box shadow and background

color and we also need to have this

width so let's copy all of this and

let's go back to our css and let's see

what is the class for the testimonial

card

so here we can see we have a division

with the class of testimonial card

so let's target that here let's type

testimonials section testimonial card

and i just pasted all the css over here

and we need to remove this height left

and top

from here

right now let's go back to our browser

and here we can see all the styles are

added we'll also add some gap between

these two testimonial cards

so let's go back to our figma file and

if we hover over this we can see we have

a gap of 50 pixels

so here i'll just type margin bottom

and i'll just set it to 50 pixels

right now the next thing we will do is

we will style this content inside the

testimonial so let's go back to our

figma file and i'll just double click

over here and here we can see the styles

for this text so i'll just copy all of

this

and let's go back to our

code and if you go to our index.html

file

here we can see we have a division with

a class of content so let's target this

division so i'll just go back to css and

here i'll just type

testimonials section and in that we have

the testimonial card

and in that we have the content

so here i'll just paste the css

and let's remove this comment and also

this font style and we'll also add sans

serif over here

right now let's go back to our figma

file and here we can see we have a

padding of 24 pixels for top and bottom

and 32 pixels for left and right and if

i click on this rectangle and here we

can see

we have a border radius of 24 pixels and

we have a light blue color so let's go

back and let's add those styles so let's

type border radius

24 pixels and we also had a padding of

24 pixels top and bottom and 32 pixels

left and right

and we'll also set the background color

to

the light blue color variable that we

have so if you scroll up

we can see that we have created this

variable called light blue color so

let's add this

so here let's type var light blue color

all right let's go back to our browser

and we can see that the content is being

styled correctly now for the second

content we need to have an orange color

so if we go back to our figma file here

we can see for the second content

we have the orange background color so

let's go back to our css and here i'll

just type testimonials section

and testimonial card

and we need to select the last instance

of the testimonial card so here i'll

just type colon last child

and then here let's type content so what

we are doing over here is that we are

selecting the last testimonial card and

we are adding the styles to the content

inside that

so here let's type background

and i'll just set the color to var and

orange color

and let's go back to our browser and now

we can see we have this orange

background color for the second

testimonial content

right now let's style this heading so

let's go back and

let's go to our html and here we can see

for the heading we have this h4 and it

is inside this info division so let's

target that so here let's type

testimonials section

testimonial card

info

h4 and let's go back to our figma file

and let's copy the styles so let's

double click over here

and here we have the css of the h4 so

let's copy all of this

and let's go back to our code and i'll

just paste it over here

and i'll just change this color to our

variable so i'll just type var dark blue

color and we'll just remove this comment

and also the font style and we'll also

add sans serif over here

let's go back to our browser and we'll

also remove the margin so i'll just type

margin 0

and we also need to have a padding for

this info division so let's go back

and let's target the info division so

i'll just type testimonials card or

testimonials section testimonials card

and

dot info

and we will add a padding of

24 pixels top and bottom and 32 pixels

left and right

right now if we go back to our browser

we can see that we have the padding

applied we'll also add the styles to

this paragraph so if we go back to our

html we can see inside the info division

we have a paragraph with the class of

company

so let's target that over here so i'll

just type testimonials section

testimonial card info

and i'll just type

p dot company

and let's go back to our figma file and

let's copy the styling so i'll just

double click over here

and let's copy the styles so let's copy

all of this from here

and let's go back to our css and paste

it over here

and we'll just remove all the

unnecessary code and i just add the

variable over here dark blue color

and also delete this line of code and

also add sensative over here

all right now let's go back to our

browser and we can see that the styling

is applied

now the next thing we will do is style

this image so let's go back to our

html file and here we can see we have

this image inside the testimonial card

division

so let's target that

here the stop testimonials section

testimonial card

and here let's type img and let's go

back to our figma file

and let's double click over here

and here we can see the css of the image

so i'll just copy this height and width

and let's go back and paste it over here

i will position this image relative to

this testimonial card division so let's

go over here to the top and for the

testimonial card i will just type

position

relative

now let's go over here to the image and

let's type position absolute now this

image will be positioned relative to

this testimonial card so let's add some

position values over here so i'll just

type right and i'll just set the right

position to 32 pixels and we'll set the

bottom position to

20 pixels let's see how it looks let's

go back to our browser and we can see

that the image looks alright we don't

have any problems

now the next thing we have to do is we

have to move the second testimonial card

to the right a little bit so if we go

back to our figma file here we can see

the second testimonial card is moved to

the right so let's do that let's go back

to our css

and let's select the second testimonial

card so i'll just have testimonials

section

testimonial card and here let's type

colon last child so this will select the

second testimonial card

and here we'll just type transform

translate x

and i'll just set it to 20 pixels

and now we can see the second

testimonial card is moved to the right

all right now the next thing we will do

is we will add some gap between this

button and this paragraph

so

let's go over here to the html

and i'll just add a division for both

these paragraphs so here i'll just

create a division with the class of

features

and we'll add these paragraphs inside

the features

right now let's add some margin to these

features so here i'll just type

testimonials section features and here

i'll just type margin bottom and i'll

just set it to 30 pixels

all right now the last thing we need to

do is add this background rectangle over

here

so we have this rectangle behind both

these testimonial cards now for that

we're going to use a before selector so

let's go back and

let's select

the testimonial card so here

just before this css i'll just type

testimonials section testimonial card

colon column before

and before selectors are basically used

to add extra information to the elements

of your website so if i just type

content and here if i just type hello

now you can see that hello is displayed

over here before all these testimonial

cards so let's remove hello from here

and i'll just keep it blank

and let's add the background rectangle

over here so let's go back to our figma

file and let's select this rectangle and

let's see what is the width

so here we can see we have a width of 28

pixels

so let's go back

and here let's type width 28 pixels

and we will set the position to absolute

and we'll set a height of

let's try 40 pixels

and let's set the top position to

negative

40 pixels so that it is at the top and

we'll set the left position to

let's try 60 pixels and we also need to

have the background color set to the

dark color so i'll just type var dark

blue color

and we'll also need to add a border

radius so just a border radius and we

need to add border readers for top right

and top left so i just tap 24 pixels 24

pixels for top left and top right so

here we can see we have this border

radius of 24 pixels and for bottom left

and bottom right i'll just type 0 0

right now let's go back to our browser

and now we can see we have this

background rectangle over here at the

top

and now for the second testimonial card

we will add a different styling for the

before selector so let's go back

and uh here i'll just type testimonials

section

testimonial card

colon last child for selecting the

second testimonial card and here you

stop column column before

now since we have moved this second

testimonial card 20 pixels to the right

so if you go back over here

here we can see we have moved it 20

pixels to the right

so we have to set the left position of

this before selector to 20 pixels to the

left so here i'll just tap left and here

we have set a value of 60 pixels so here

we have to type 40 pixels

and we'll set the top position to

negative 50 pixels and now we can see

both these rectangles are in the same

line now we don't want to have this

border radius at the top so here i'll

just type border radius and i'll just

type 0 0 for top left and top right and

we want the border radius at the bottom

so here we can see

at the bottom we have this border radius

so let's add 24 pixels of border edges

to the bottom left and bottom right

right now let's go back to our browser

and here we can see we have this

rectangle now we need to set the height

of this before selector so let's go back

and let's set a height of

calc we will use a calc function and i

will set the height to hundred percent

of the element

plus

90 pixels

and let's see how it looks

and now we can see we have the correct

height for this element but it is above

all the other elements so we have to set

a z index of negative one for this so

i'll just type z index

and i'll just type negative one

and now we can see it looks like it is

above the info section so let's go back

to the

info section over here

let's scroll down

and here we will add a background color

so just type background and i'll just

set it to white now the last issue we

need to fix is the border radius over

here so

we need to set the border radius of the

info to 24

pixels so let's go back and here in the

info i'll just type border radius

and i'll just set it to 24 pixels

and now we can see everything looks

alright so that's basically it with the

testimonial section of our website

alright so that's it for this video if

you have any doubts you can ask in the

comments below and if you like this

video please click on the like button

and subscribe to this channel to get the

latest video updates thanks a lot for

watching have a nice day

[Music]

you