Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 6
Summary
TLDRThis tutorial video guides viewers through the process of transforming a design into a functional website, focusing on the 'courses section'. The instructor demonstrates how to use HTML, CSS, and JavaScript to style the section, including adding a background color, padding, and centering the heading. Viewers learn to align course cards side by side with a specified gap, apply flexbox for layout, and style individual elements like images, course cards, headings, and duration with appropriate margins, padding, and colors. The tutorial concludes with positioning a button and adjusting the overall padding for a polished look.
Takeaways
- đš The tutorial series focuses on converting a design into a functional website using HTML, CSS, and JavaScript.
- đ The previous video covered the design of the testimonial section, while the current video discusses the design of the courses section.
- đ The courses section is styled with a specific class in the HTML file, and the styling is applied in the style.css file.
- đ A background color is applied to the courses section by copying the CSS from the Figma design file.
- đ Padding is added to the top and bottom of the courses section to create space, with 70 pixels specified for both.
- đ The heading within the courses section is centered using CSS text alignment properties.
- đ Course cards are arranged side by side using flex display and a gap of 70 pixels between them.
- đŒïž Images within the course cards are set to 100% width of their container for proper scaling.
- đ Rounded corners and a drop shadow are applied to the images by copying the border-radius and box-shadow CSS properties from Figma.
- đ·ïž Each course card is styled with a white background, padding, and a margin to ensure visual separation and alignment.
- đ The course card's heading and duration are styled and positioned using flex properties to align them appropriately within the card.
- â° A clock icon is added to the duration element using a CSS pseudo-element and positioned with absolute properties relative to the duration container.
- đČ A rectangle is added at the bottom of the course card using an after pseudo-element with specific dimensions and color.
- đ The button is positioned to the right of the wrapper within the courses section using absolute positioning.
Q & A
What is the main focus of this tutorial series?
-The main focus of this tutorial series is to convert a sigma design into a real website using HTML, CSS, and JavaScript.
What sections of the website have been designed in the previous video?
-In the previous video, the hero section and the testimonials section of the website were designed.
What section of the website is the focus of the current video?
-The focus of the current video is the design of the courses section of the website.
How is the courses section styled in the video?
-The courses section is styled with a background color, padding, and text alignment for the heading to the center.
What CSS property is used to align the course cards side by side?
-The CSS property 'display: flex' is used to align the course cards side by side.
What is the purpose of setting the image width to 100% of the container?
-Setting the image width to 100% of the container ensures that the image takes up the full width of its container, maintaining the design's aspect ratio.
How are the course cards styled to have rounded corners and a drop shadow?
-The course cards are styled with a 'border-radius' of 24 pixels and a 'box-shadow' to achieve rounded corners and a drop shadow effect.
What is the significance of using the 'flex' display for the 'info' class in the course card?
-Using 'display: flex' for the 'info' class allows the heading and duration to be positioned next to each other, with space between and centered vertically.
How is the clock symbol added to the duration in the course card?
-The clock symbol is added using a ':before' pseudo-element with the 'content' property set to the URL of the clock image.
What CSS property is used to position the button to the right of the courses section?
-The 'position: absolute' property is used, with the 'right' value set to 0, to position the button to the right of the courses section.
What is the final step in styling the courses section in the video?
-The final step is to add padding to the bottom of the courses section, with a padding of 120 pixels applied to ensure there is enough space at the bottom.
Outlines
đ Designing the Courses Section
The speaker introduces the tutorial series focused on transforming a sigma design into a functional website using HTML, CSS, and JavaScript. They recap the progress made on the hero and testimonials sections and announce the focus of the current video: designing the courses section. The speaker navigates to the HTML file, identifies the relevant section, and begins styling it by adding a comment in the CSS file. They proceed to set the background color, padding, and text alignment for the heading. The speaker also discusses arranging course cards side by side with a specified gap, setting the image width to 100% of the container, and applying rounded corners and a drop shadow to the images. Styling for individual course cards includes setting border radius, background color, and padding, as well as adding margins. The video also covers styling the course card headings with specific CSS properties copied from the Figma design file.
đš Styling Course Card Headings and Durations
This paragraph delves into the detailed styling of the course card headings and durations. The speaker modifies the heading's color, font style, and adds 'sans-serif' to the CSS. They demonstrate how to align the heading and duration side by side using flex display and adjust the gap between them. The speaker then positions the heading on the left and the duration on the extreme right within the info division, using 'justify-content' and 'space-between' properties. The duration's styling is addressed next, with the speaker copying the necessary CSS from the Figma file and adjusting the color to a variable dark blue. To achieve a two-line duration display within a single line, the speaker adds 'white-space: nowrap;'. A clock symbol is added to the duration using a 'before' pseudo-element with the image URL. Positioning and padding adjustments are made to ensure the symbol is correctly placed. The speaker also discusses adding a rectangle at the bottom of the course card using an 'after' pseudo-element and describes the styling process for this element.
đ Final Touches to the Courses Section
The final paragraph covers the finishing touches for the courses section. The speaker discusses positioning a button to the right side of the wrapper within the courses section by setting the position to 'absolute' and adjusting the right property. Padding adjustments at the bottom of the courses section are made to ensure the layout looks balanced. The speaker concludes by stating the completion of the courses section design and encourages viewers to find the complete playlist in the video description, ask questions in the comments, and subscribe for updates. They end with a thank you and sign off.
Mindmap
Keywords
đĄHTML
đĄCSS
đĄJavaScript
đĄFigma
đĄSection
đĄPadding
đĄFlexbox
đĄBorder-radius
đĄDrop Shadow
đĄMedia Query
đĄResponsive Design
Highlights
Introduction to a tutorial series on converting a sigma design into a real website using HTML, CSS, and JavaScript.
Progress update on the design of the hero and testimonial sections.
Starting the design of the courses section in the tutorial.
HTML file navigation and identification of the courses section.
CSS styling of the courses section background color.
Adding padding to the courses section for aesthetic spacing.
Centering the heading of the courses section for visual balance.
Arranging course cards side by side using flex display.
Setting image width to 100% of the container for consistency.
Applying rounded corners and drop shadow to images for a modern look.
Styling individual course cards with border radius and background color.
Adding margins to course cards for spacing.
Styling the course card headings with text alignment and color.
Using flex display to align the heading and duration side by side.
Styling the duration with specific font properties and color.
Adjusting the positioning of the duration text within the card.
Adding a clock symbol to the duration indicator for clarity.
Styling a rectangle at the bottom of the course card for emphasis.
Positioning a button to the right side of the courses section.
Adding padding at the bottom of the courses section for layout balance.
Completion of the courses section design with a review in the browser.
Invitation to follow the complete playlist and engage with the content.
Encouragement to like, subscribe, and comment for further interaction.
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 the
previous video i showed you how to
design this testimonial section
and if you go to the browser
here you can see this is our progress as
of now we have designed the hero section
and also the testimonials section now in
this video i'll show you how to design
this
courses section over here so let's get
started
[Music]
right here i'm in the code so let's go
to the html file
and let's scroll down and here we can
see for the courses section
we have this section with the class of
courses section and in that we have this
rapid division to have a max width for
all the content inside the courses
section and in that we have all this
content over here so first of all let's
tile this courses section so let's go
back to our style.css file
and here we'll just create a comment
i'll just type courses section
and here let's type dot courses section
and let's go back to our figma file and
let's get the css
so let's double click over here and
here let's go to inspect and let's
scroll down and here we can see we have
this background color so let's copy this
and let's paste it over here
all right now the next thing we will do
is we will add a padding so here we can
see on top of this we have a padding of
70 pixels so let's add a padding over
here so i'll just start padding
70 pixels for top and bottom and i'll
just type 0 for left and right
right now let's go back to our browser
and here we can see we have this courses
section now we have to text align this
heading to the center so let's go back
and if you go to the html here we can
see we have this h2 inside this courses
section
so here i'll just type
courses section
h2 and here let's tap text align center
and now we can see the heading is in the
center all right now the next thing we
need to do is we need to bring both
these course cards one next to the other
so if you go back to the figma file here
we can see we have this course card over
here on the left and then we have the
next course card here on the right so
let's go back and
let's go to the html and here we can see
we have a division with the class of
course cards and that we have these two
course cards over here
so let's add a display of flex to this
course cards
so here let's type
courses section course cards
and i'll set the display to flex
and we will have a gap of let's go back
to our figma file and let's see what is
the gap
so if i click over here and if i press
alt
we can see we have a gap of 73 pixels
i'll just round it to 70 pixels so let's
go back
and here you start 70 pixels
right now let's go back to our browser
and here we can see now we have these
course cards one next to the other now
let's set the width of the image to 100
of the container so here i'll just type
courses section
course cards
img and here i'll just set the width to
100
and now we can see we have the correct
width for the image
right now let's go back to our figma
file and here we can see for the image
we also have rounded corners so let's
double click over here on this image
and here we can see we have a border
radius of 24 pixels and we also have
this drop shadow so let's copy about
these lines of code
now let's go back and here i'll just
paste
it inside the image
and let's go back to our chrome
and now we can see we have the drop
shadow and the rounded corners all right
now the next thing we will do is we will
style the course card so let's go back
to our
html
and here we can see for each of the
course cards we have this division of
the class of course card so let's style
this
let's go back to our style.css file
and here let's tap courses section
and course card
and let's go back to our figma file and
here we can see we have this border
radius of 24 pixels and a background
color of white
and we also have a padding of zero top
and bottom and 32 pixels left and right
so let's copy these two lines of code
and let's go back
and i'll just paste it over here
and let's go back and i'll also copy
this padding
and paste it over here
right now let's go back to our browser
and here we can see we have this white
background color
and we'll also have some margin at the
top so let's set a margin
of 40 pixels for top and bottom and zero
for left and right and now we can see we
have this margin at the top
all right now the next thing we will do
is style this heading so let's go back
to our figma file
and let's double click over here
and let's go to the inspect and let's
scroll down and here we can see the css
of this heading so let's copy all of
this
and let's go back to our code and for
the heading we have this s3 over here
so let's style that
so here i'll just type courses section
course card
s3 and i'll just copy the styles
and let's remove this color and let's
add our variable over here so i'll just
have var
dark blue color and i'll just remove
this comment and font style and also add
sans serif over here
right now let's go back to our browser
and here we can see we have the styling
for the heading now the next thing we
will do is we want this heading and this
duration to be one next to the other so
for that we have to add a display of
flex to the parent division so if you go
back to our html
here we can see we have this division of
the class of info
and in that we have this s3 and the
duration so we will set a display of
flex to this info division so let's go
back
and here i'll just type
courses section course card
info
and here let's tap display of flex
and let's go back to our figma file and
let's see what is the gap that we have
over here
so if i press option or alt we can see
we have a gap of 16 pixels
so let's add that gap over here so i'll
just type gap of 16 pixels
and the next thing we will do is we'll
position them to the left and to the
extreme right so i'll just type justify
content and space between
and i will also
bring it to the center vertically so
i'll just type align items to the center
all right now let's go back to our
browser
and now we can see we have the heading
on the left and the duration on the
right all right now let's add the
styling for the duration so let's go
back to the figma file
and let's double click over here
and here we can see the styles for the
duration so i'll just copy these
and let's go back to our code
and for the duration we have this
division of the class of duration
so i'll just add that over here
i'll just type courses section
course card
duration
and here i'll just paste the code
and let's change this color to the dark
variable so i'll just type dark blue
color
and i'll just delete this comment and
this style and i'll just add sensative
over here
all right now let's go back to our
browser and here we can see we have the
styling for the duration but here in the
duration we have this uh 15 written over
here at the top and ours written over
here at the bottom so we have this in
two different lines now we want to have
both of these in the same line so let's
go back
and here we need to add a line of code
which is white space
no wrap
right now if we go back to our browser
here we can see we have 15 hours written
in the same line right now the next
thing we will do is we will add the
clock symbol over here on the left of
the duration so if you go back to our
figma file here we can see we have this
symbol over here so here i'll just type
courses section
course card duration
and we will use a before selector so
i'll just type before
and for the content i'll just type the
url of the image
so let's type url so here i'll just type
images slash and the image is called
clock.svg now let's go back to our
browser and now we can see we have this
clock image over here now we will add
some more styles over here to position
it correctly so we'll position this
relative to this duration over here so
here i'll just type position of relative
and here we'll just type position
absolute
and we'll set the top position to
2 pixels
and we'll set the left position to
negative 6 pixels
let's see how it looks
and now we can see it is in the correct
position vertically but we need to have
some padding over here on the left for
this duration so let's go back
and here for the duration i'll just have
padding left
and i'll just set a padding left of 20
pixels
let's go back
and now we can see it looks alright so
let's go back to our figma file
and the next thing we will do is we will
add this rectangle over here at the
bottom of this course card so let's
select this and here we can see the
styling for this rectangle and i'll just
select all of these lines of code from
here and let's go back to our code
and for this we will use an after
selector
so here just after the course card i
just have courses section course card
column column after
and i'll set the content
to blank
and we'll just paste the css over here
and we don't need to have this top over
here so i'll just delete this line of
code
and i'll just set the right to 32 pixels
so from the right we will have a spacing
of 32 pixels and from the left also we
will have a spacing of 32 pixels and
from the bottom we will have a spacing
of 0
and we have a height of 8 pixels and
we'll set the color to the dark color so
i'll just tap var
dark blue color now we need to set the
position of this after selector relative
to this course card so here i'll just
type position
relative and here i'll just type
position absolute
right now let's go back to our browser
and now you can see we have this
rectangle over here and it looks all
right now the last thing we need to
style is this button so we need to bring
this button over here to the right so
for that let's go back to our code and
we will position the button relative to
this rapid division so let's go back and
we will select the wrapper inside the
courses section so here we can see in
the courses section we have this wrapper
so here i'll just type courses section
wrapper and i'll just set the position
to relative
and now let's select the button so for
the button we have a class of btn
so let's select that
here let's tap courses section
wrapper
btn
and here i'll just have position
absolute and set the right position to
zero
and now we can see the button is on the
right now the last thing we need to do
is we need to add some padding over here
at the bottom so let's right click over
here and click on inspect and let's
select the wrapper or let's select the
courses section
and let's add some padding bottom
so just have padding
bottom
and let's try some padding so let's
start with 100 pixels
i think we can increase the padding a
little bit
so i think
120 pixels looks alright so let's add a
padding bottom of 120 pixels for the
courses section so let's go back
and
let's go to the courses section
and here we will add a padding bottom
of 120 pixels
and let's go back to our browser and now
we can see everything looks all right
so with that we have completed the
design of the hour courses section
all right so that's it for this video
you can find the link of the complete
playlist in the description of this
video and 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
Voir Plus de Vidéos Connexes
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 5
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 8
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 7
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Styling in React Native: Understanding the App.js Structure + Direct and Dynamic Styles
5.0 / 5 (0 votes)