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

Summary

This tutorial series guides viewers through the process of transforming a design into a functional website. The focus of the video is on developing the 'Get Our App' section and the footer using HTML, CSS, and JavaScript. The instructor demonstrates how to center align content, style buttons, and adjust spacing based on the Figma design. They also cover the customization of individual elements, such as text and input fields, and the layout of the footer with a dark background, grid layout for links, and social media icons. The video concludes with styling the submit button and copyright text, ensuring a cohesive design that matches the initial Figma blueprint.

Takeaways

• 🌐 The tutorial series focuses on converting a Figma design into a functional website using HTML, CSS, and JavaScript.
• 🎨 Progress has been made on designing the hero section, testimonial section, and hour courses section of the website.
• 📲 The current video's goal is to design the 'Get Our App' section and the footer of the website.
• 🔨 HTML and CSS are the primary tools used for coding the website, with Figma serving as the design reference.
• 📝 CSS is used to style elements such as text alignment, button layout, and individual button properties like padding and background color.
• 🔍 Figma's design details, including spacing and colors, are meticulously copied into the CSS for accurate styling.
• 🖌️ The 'Get Our App' section buttons are styled to be visually appealing with center alignment, padding, and a minimum width.
• 🔲 The footer is styled with a dark background color and white text, creating a contrast with the rest of the website.
• 🔗 Anchor tags within the footer are styled to remove underlines and change the text color to white for consistency.
• 📚 The footer's layout is organized into columns using CSS grid, with varying column widths to accommodate different content areas.
• 📝 The footer also includes styled social media icons, an input field, and a submit button, all positioned and styled according to the Figma design.

Q & A

What is the main focus of the tutorial series mentioned in the transcript?

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

Which sections of the website have been designed in the progress mentioned in the script?

The hero section, testimonial section, and the hour courses section have been designed in the progress mentioned.

What sections are planned to be designed in the video covered by the transcript?

The 'Get Our App' section and the footer of the website are planned to be designed in the video.

How is the 'App Section' in the HTML document identified for styling purposes?

The 'App Section' is identified with a class named 'app-section' in the HTML document for styling purposes.

What CSS property is used to center align the content in the 'App Section'?

The 'text-align' property is used to center align the content in the 'App Section'.

What CSS layout model is used to place the buttons side by side in the 'App Section'?

The 'flex' layout model is used to place the buttons side by side in the 'App Section' by setting 'display: flex'.

What is the gap between the buttons in the 'App Section' as per the Figma design?

The gap between the buttons in the 'App Section' is 30 pixels as per the Figma design.

How is the text and image aligned vertically in the buttons?

The text and image are aligned vertically in the buttons by setting 'display: flex' and 'align-items: center' on the button's CSS.

What is the minimum width set for the buttons in the 'App Section'?

The minimum width set for the buttons in the 'App Section' is 310 pixels.

What color is used for the background of the footer as per the Figma design?

A dark color, specified by the 'var(--dark-color)' variable, is used for the background of the footer as per the Figma design.

How are the list items in the footer styled to remove the bullet points and add spacing?

The list items in the footer are styled by setting 'list-style: none' to remove bullet points, and 'margin: 16px top and bottom' for spacing.

What is the layout structure used for the footer links in the Figma design?

The layout structure used for the footer links is a grid layout with three columns, using 'grid-template-columns: 2fr 2fr 3fr'.

How is the submit button positioned in relation to the input field in the footer?

The submit button is positioned absolutely with 'right: 5px' and 'top: 50%', and then translated up by 50% of its height to center it vertically in relation to the input field.

What is the final touch added to the footer's copyright paragraph for styling?

The final touch added to the footer's copyright paragraph is a 'margin-top: 36px' to create spacing from the content above.

Outlines

00:00

🛠️ Designing the App Section and Footer

In this tutorial, the instructor demonstrates the process of converting a sigma design into a functional website using HTML, CSS, and JavaScript. The focus is on developing the 'Get Our App' section and the footer of the website. The hero section, testimonial section, and hour courses section have already been designed. The app section is styled with centered alignment and buttons are arranged side by side with a 30-pixel gap. Individual buttons are styled with padding, a black background, and white text, with text and image alignment in the center. The footer is styled with a dark background color, padding, and margin adjustments. Anchor tags within the footer are modified to remove underlines and change the text color to white.

05:02

✨ Styling Footer Components and Social Icons

This section continues the tutorial with detailed styling of the footer. The instructor sets the background color using a predefined variable and adjusts padding and margin for the footer element. The anchor tags' text color is set to white, and underlines are removed. Headings within the footer are styled with an orange color using a color variable. Bullets are removed from the unordered list, and list items are given a margin for better spacing. The footer is divided into three columns using CSS grid layout, with varying column widths to accommodate different sections. Social media icons are aligned with a margin and spacing between them, completing the footer's design.

10:04

✍️ Finalizing Footer with Input Field and Button Styling

The final part of the tutorial focuses on styling the input field and button within the footer. The form is aligned and given margins to match the design from the Figma file. The input field is styled with padding, border-radius, and set to full width, with borders removed. A submit button is positioned absolutely relative to the form, with adjustments made to center it vertically. The button is styled with a dark background, border-radius, padding, and border removal. Text styling for the button is also copied from the Figma design. Lastly, the copyright information is given a top margin for proper spacing, concluding the footer's styling.

Keywords

💡HTML

HTML, or HyperText Markup Language, is the standard markup language used for creating web pages. It defines the structure and layout of a webpage using a system of tags and attributes. In the video, HTML is used to create the structural elements of the 'Get Our App' section and the footer of the website, with classes and IDs that are targeted by CSS for styling purposes.

💡CSS

CSS, or Cascading Style Sheets, is a stylesheet language used for describing the presentation of a document written in HTML. It enables the separation of presentation and content, allowing for greater control over the look and formatting of web pages. In the video, CSS is used to style the 'App Section' and 'Footer' by setting properties such as 'text-align', 'display', 'padding', and 'margin' to achieve the desired visual layout and appearance.

💡JavaScript

JavaScript is a high-level, interpreted programming language commonly used for enhancing web pages with interactive elements. Although not explicitly mentioned in the script, it is often used alongside HTML and CSS to create dynamic and responsive web applications. The video focuses on the design aspect, but JavaScript could be used to add functionality to the sections being designed.

💡Figma

Figma is a cloud-based interface design tool and design collaboration platform. It allows designers to create, collaborate, and share designs easily. In the video, the Figma design serves as the blueprint for the website's sections, with the instructor referring to it to replicate the design in HTML and CSS.

💡Hero Section

The 'Hero Section' is a common term in web design referring to the introductory part of a webpage that makes a strong first impression. It typically includes a prominent image, headline, and call-to-action. In the script, the hero section has already been designed, indicating that it is part of the overall website layout.

💡Testimonial Section

A 'Testimonial Section' on a website is an area where customer reviews or endorsements are displayed. It helps build trust and credibility with potential customers. The script mentions that this section has been designed, suggesting that it is visually appealing and contains user feedback.

💡Hour Courses Section

The 'Hour Courses Section' likely refers to a part of the website showcasing courses or educational content that can be completed within an hour. It is mentioned in the script as another section that has been designed, indicating that the website may offer quick learning opportunities.

💡App Section

The 'App Section' is a specific area of the website being designed in the video. It is intended to promote the use of an application, possibly related to the website's services. The script details the styling of this section, including center alignment and button design.

💡Footer

A 'Footer' is the section at the bottom of a webpage that typically contains information such as copyright notices, contact information, and links to other pages. In the video, the footer is being styled with a dark background color, padding, and other design elements to enhance its appearance and functionality.

💡Styling

Styling in web design refers to the process of applying visual elements to the structure defined by HTML, using CSS. It includes setting properties like color, font, spacing, and layout. The script describes the styling process for various elements such as buttons, text, and the footer, to match the design from the Figma file.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes, from desktop computer monitors to mobile phones. Although not explicitly mentioned in the script, the process of designing with HTML and CSS inherently involves creating a responsive layout, especially when considering elements like the 'App Section' and 'Footer'.

Highlights

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

Progress update on the website design, including completion of the hero, testimonial, and hour courses sections.

Upcoming tasks to design the app section and the footer of the website.

Starting the design process by opening the source code and targeting the 'app section' class in CSS.

Center alignment of content within the app section for a balanced layout.

Styling the buttons side by side using flexbox properties in CSS.

Adding a 30-pixel gap between buttons as per the Figma design.

Individual button styling, including padding, background color, and text color.

Aligning text and image vertically within buttons using flexbox.

Setting a minimum width for buttons to match the design specifications.

Customizing text styles within buttons, adjusting font size and padding for better fit.

Styling the footer with a dark background color using a predefined CSS variable.

Adding padding and margin to the footer for spacing and separation from the app section.

Styling anchor tags within the footer to remove underlines and set text color to white.

Applying orange color to footer headings using a CSS variable.

Removing list bullets and adjusting padding and margins for list items in the footer.

Organizing footer links into three columns using CSS grid layout.

Styling social media icons with appropriate margins for alignment.

Designing the input field and submit button in the footer with specific styles and positioning.

Adding final touches to the footer, including margin adjustments for copyright information.

Completion of the 'Get Our App' section and footer design, wrapping up the tutorial.

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 and let me

open chrome and this is our progress as

of now we have designed the hero section

and the testimonial section and also the

hour courses section

now in this video we will design the app

section and also the footer so if you go

back to our figma design

this is how it looks we have this get

our app section and then we have the

footer over here so let's get started

[Music]

all right here i'm in the source code so

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

for the app section we have this section

with the class of app section

so let's target that in our css so here

in the css i'll just create a comment

i'll just type app section

and let's select the class over here so

we have a class called app section

and the first thing we will do is we

will center align everything

so here i'll just type text align and

set it to center now let's go to our

chrome and here we can see everything is

center aligned all right the heading and

the paragraph look alright so we need to

style these buttons so let's go back to

our figma file and here we can see both

these buttons are one next to the other

so let's go back to our

html and here we can see for the buttons

we have this division with the class of

app buttons so let's target that

so here i'll just type app section

app buttons and we need to set the

display to flex so that the items will

be one next to the other and we'll also

align items to the center and justify

content to the center all right now

let's go back to our figma file and

let's see what is the gap between these

buttons so if we double click over here

and if you press option or alt we can

see that we have a gap of 30 pixels

so let's go back to our css and here we

will type gap 30 pixels right now let's

go back to our

browser and here we can see we have both

the buttons we'll also add some margin

top for these buttons so i just add a

margin top of

24 pixels and i think that looks all

right now let's style these individual

buttons so if you go back to our html

for each of the buttons we have a

division of the class of app btn so

let's target that

so here i'll just tap app section

app btn

and let's go back to our figma file and

let's see what are the styles so let's

select one of these buttons let's go to

inspect and here we can see we have a

padding of 20 pixels and 31 pixels i'll

just round it down to 30 pixels so i'll

just copy this padding

and let's go back and paste it over here

and we have a background color of black

so let's copy this

and let's paste it over here

right now let's go back to our browser

and here we can see we have the buttons

we'll also set the text color to white

so just type color and set it to white

now we want the image and the text to be

center aligned vertically so let's go

back and we will set the display to flex

and we will align items to the center

and let's go back and now we can see

that

the text and the image are aligned to

the center vertically now let's add some

gap between these two elements so let's

go back to our figma file and let's

double click over here let's see what's

the gap we can see we have a gap of 14

pixels

so let's go back and here we will just

type gap and set it to 14 pixels

and let's go back to our figma file and

here we can see we have a fixed width

for these buttons

so we have a width of 309 pixels i'll

just round it to 310 pixels

so let's go back and we will set a

minimum width for this button so just

type min width and set it to 310 pixels

but now let's go back to our browser and

now we can see we have these buttons

displayed over here all right now let's

style this text so let's go back to our

figma file and let's double click on

this text and let's go to inspect and

let's scroll down

and here we can see the css of the text

so i'll just copy all of this and let's

go back and go to our html and for the

text we have a span so let's select the

span so let's go back

and here let's type app section app btn

span

and let's paste the css and i'll just

remove this

text align from here

and also this comment

and we also don't need to have this line

height

and let's remove the font style and

we'll also add sans serif over here

right now let's go back to our browser

and now we can see we have the styles

applied to the text i think the font

size is a little bit too large for

this button so let's go back

and i'll just change the font size to 20

pixels

and i think we'll also decrease the

padding a little bit

so here i'll just add a padding of 16

pixels top and bottom

and now the button looks alright now you

can go ahead and keep the same styling

that you have over here in the figma

file but i just felt like this looks

better

right now the next thing we will do is

we will style this footer so let's go

back to our figma file

and here we can see for the footer we

have the dark background color that we

created so here we can see we have this

color code

and we have this color over here in the

variables so this is the color right

here so we're going to use this color

for the background of the footer so

let's go back to our html

and here we can see we have this footer

element so let's add a background color

for this let's go back to our styloid

css file

and i'll just add a comment

i'll just tap footer and here i'll just

type

footer

and let's add a background color of the

dark variable so if we scroll up

we can see that we have already created

this dark color variable so let's use

this variable

so here let's type var dark color

and we'll also set the default text

color to white

right now let's go back to our browser

and now the next thing we will do is we

will add a padding top and padding

bottom and we also need to have some

margin between this app section and this

footer

so let's go back and

we will have a margin top

set to 100 pixels just like all the

other sections

and now let's go back to our figma file

and let's see what is the padding so

here we can see we have a padding top of

70 pixels

so let's go back and let's add the

padding so i'll just have padding

of 70 pixels top and bottom and 0 for

left and right right now let's go back

to our browser

and now the next thing we will do is we

will style this anchor tags

so we need to change the color of the

anchor tags and also remove the

underlines so let's go back and

let's target the anchor tags so i'll

just have footer a

and text decoration to none

to get rid of the underlines and we'll

set the color of the text to white

all right now the next thing we will do

is we will style these headings so for

the headings we want to have a color of

orange so let's go back to our html

and here we can see for the headings we

have an s3

and we have already created a variable

for the orange color so i'll just type

footer s3

and set the color to

var

orange color

or that's it with the heading all right

now the next thing we will do is we'll

remove these bullets

so for that let's target the

ul so if you go back to our html

we can see we have this ul over here so

let's target that so here let's type

footer ul and we will set the list style

to none so this will remove the bullets

and we'll also set a padding left of 20

pixels

right now let's go back to our browser

and the next thing we will do is we will

add some margin between each of these

list items

so let's go back and let's target the

list items so i just have footer ulli

and let's type margin 16 pixels top and

bottom and zero for left and right right

now the next thing we need to do is we

need to set all these links one next to

the other so if we go back to our figma

file we can see there are three sections

over here so let's go back

and

in our html we can see that we have

a division of the class of

links container so in the links

container we have all these links so we

have three divisions with the class of

links

so let's target this container division

and we will set it as a display of grid

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

footer

links container

and let's set the display to grid and

now we can specify how many columns we

need to have so let's type grid

template columns

now here we can set the width of the

column by fractions so let's type 2fr

for the first column

2fr for the second column so both these

columns will have the same width and for

the last column we will have a little

higher width so i'll just type 3fr over

here

right now let's go to our browser and

now you can see we have these three

columns over here

now the next thing we will do is style

these icons

so we need to have some left margin for

this icons it should be aligned with

this

email id over here so let's go back

and for the social media icons we have a

division with the class of social so

let's target this here i'll just have

footer

social

and let's set a margin left

of

20 pixels right now let's go back and we

have the correct margin now we'll also

have some gap between these two images

so let's go back and let's

select the images over here so we have

anchor tags over here and in that we

have the images so let's add some margin

right so i'll just have footer

social a

and let's set a margin right of

and let's go back to our figma file and

let's see what is the margin

so let's double click over here

and we have a spacing of 28 pixels

so let's go back to our css and here

we'll just type 28

or that looks all right

right now the next thing we will do is

style this input field and also this

button so if you go back to our figma

file this is how the input field and the

button looks so the first thing we will

do is we will set a margin left to this

form to align itself with both these

elements so let's go back and if you go

to the html we can see that we have a

form

so let's target this form so

here i'll just type footer form

and we'll have a margin left of 20

pixels

and we'll also have some margin top

so we'll have a margin top of

16 pixels

right now let's tile this input field so

let's go back

and

let's tap footer

form input

and let's go back to our figma file and

let's double click over here

and let's go to the inspect and here we

can see we have the styling for

the text inside the input field so let's

copy all of this

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

just paste it over here

and let's remove this

comment and the font style

and we'll also add sensitive over here

now we also need to have a border radius

for this input field so let's select

this

and here we can see we have a border

radius of 8 pixels so let's go back and

let's add that here i'll just have

border radius

of 8 pixels

now let's go back to our browser

and we'll also add some padding

so

we will add a padding of 8 pixels top

and bottom and 32 pixels left and right

and we'll also remove the border so

let's go back and let's type border

of none

right now let's set the width of the

input field to 100 percent

so you start with

100 percent and now we need to position

this button over here on the right

so for that let's set the position of

this button to absolute and we'll

position this button relative to this

form so let's go back

we will set the position of the form to

relative so the star position

relative

and let's target the button so for the

button we have this class of submit

button so here i'll just type footer

form

submit

button

and let's set the position to absolute

and we'll set the right position to 5

pixels and we'll also set the top

position to 50

and now we can see that the button

starts from the 50 mark so here we have

to type transform translate y and set it

to negative 50

and now you can see that the button is

exactly in the center now let's go back

to our figma file and let's copy the

styles for the button

so let's double click on this button

and here we can see we have the styles

we have the dark color

and we have a border radius of 8 pixels

so let's go back and let's type

background

and we'll set it to var dark blue color

and border radius of 8 pixels

and we'll also add a padding of

8 pixels top and bottom and 32 pixels

left and right

and we'll also remove the border

right now let's style the text so let's

go back to our figma file and let's

double click on this text

and here we can see we have the styles

for the text

so let's copy all of this

and let's go back

and i'll just paste it over here

and let's remove the font

style

and we'll also add

sensor if over here

and we'll also remove this

comment and this line height right now

let's go back to our browser and now we

can see we have the button correctly

styled we'll also set the cursor to

pointer so here let's type cursor

pointer and now when you hover over this

we have the cursor set to pointer

all right now the last thing we will do

is we will add some margin top for this

copyright information so let's go back

to our html and we can see we have a

paragraph with the class of copyright so

let's target that

here i'll just type footer copyright and

let's set a margin top of

36 pixels and let's see how it looks and

that looks all right

so that's basically it with the footer

of our website so in this video we have

designed the get our app section and the

footer 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]

bye