Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 5
Summary
TLDRThis 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
📝 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.
🖌️ 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.
🔄 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.
🖼️ 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.
Mindmap
Keywords
💡HTML
💡CSS
💡JavaScript
💡Figma
💡Hero Section
💡Testimonial Section
💡Margin
💡Display Property
💡Media Queries
💡Responsive Design
💡Comment
💡Variable
💡Pseudo-element
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
Ver Más Videos Relacionados
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 6
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 9
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
5.0 / 5 (0 votes)