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

Summary

This 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

00:00

📚 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.

05:01

🎨 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.

10:02

🔚 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.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used to create web pages. It defines the structure and layout of a web document by using a variety of tags and attributes. In the video's context, HTML is essential for setting up the basic structure of the website, such as the 'courses section' with its specific class, which is then styled using CSS.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML. It allows for the control of layout, colors, fonts, and other visual aspects of web pages. In the video, CSS is used extensively to style various elements of the 'courses section', including background color, padding, and text alignment.

💡JavaScript

JavaScript is a programming language that enables interactive web pages. It is used to create dynamic content that can update and manipulate HTML document objects. Although not explicitly mentioned in the script, JavaScript is commonly used alongside HTML and CSS to create fully functional websites, which could be part of the tutorial series' broader scope.

💡Figma

Figma is a cloud-based design tool primarily used for user interface and user experience design. It allows designers to create, collaborate, and share designs easily. In the script, Figma is used to design the layout and elements of the 'courses section', and the CSS properties are extracted from Figma to apply to the HTML elements.

💡Section

In web design, a 'section' refers to a distinct part of a web page that encloses a specific type of content. In the video, the 'courses section' is a designated area for displaying course information, and the script describes how to style this section with CSS properties such as background color and padding.

💡Padding

Padding in CSS is the space between the content of an element and its border. It is used to create visual separation and improve the layout's aesthetics. The script mentions adding padding to the 'courses section' to create spacing around the content, enhancing the design's appeal.

💡Flexbox

Flexbox is a CSS layout mode that provides an efficient way to distribute space among items in a container, even when their size is unknown or dynamic. The script describes using 'display: flex' on the 'course cards' to align them horizontally with a specified gap, showcasing Flexbox's utility in aligning elements.

💡Border-radius

The 'border-radius' property in CSS is used to create rounded corners on elements. In the video, this property is applied to images and course cards to give them a smooth, rounded appearance, which is a common design practice for modern web interfaces.

💡Drop Shadow

A 'drop shadow' is a visual effect that simulates the shadow of an element as if it were raised above the page, creating depth. In the script, a drop shadow is added to images to enhance their visual appeal and make them stand out against the background.

💡Media Query

Media queries are CSS techniques used for applying different styles for different devices based on characteristics such as screen size, resolution, or orientation. Although not explicitly mentioned in the script, media queries are a fundamental part of responsive web design, which is likely covered in the tutorial series.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes, from desktops to mobile phones. The use of padding, flexbox, and other CSS properties mentioned in the script contributes to creating a responsive design, ensuring the 'courses section' looks good on all devices.

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