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

Summary

This tutorial series guides viewers through transforming a Sigma design into a functional website using HTML, CSS, and JavaScript. The instructor demonstrates setting up the project in VS Code, creating necessary files, and adding CSS variables. The video focuses on writing HTML for the website's header, navigation, hero section, and other elements, while also showing how to export images from Figma. Viewers learn to structure the HTML to match the design, including responsive navigation for mobile views, setting the stage for subsequent CSS development.

Takeaways

• 🌐 The tutorial series is focused on converting a Figma design into a real website using HTML, CSS, and JavaScript.
• 📁 The project setup in VS Code includes HTML, CSS, and JavaScript files along with CSS variables.
• 🖼️ Images are exported from the Figma file and placed in an 'images' folder for the project.
• 📝 HTML structure starts with a header section, containing a logo, navigation menu, and a full-width gradient background.
• 🔗 The navigation menu includes links and a button styled with 'btn' and 'dark' classes for different appearances.
• 🏆 The hero section features a left part with a heading, text, and button, and a right part with an image.
• 🎓 Achievement cards display statistics with headings, numbers, and a background rectangle styled in CSS.
• 💬 The testimonials section includes two parts: left with testimonial cards containing text, name, company, and image; right with a heading, text, and button.
• 📚 The courses section displays course cards with images, info, duration, and a 'View All' button to navigate to more courses.
• 📱 The 'Get Our App' section promotes the app with a heading, paragraph, and buttons leading to the App Store and Google Play.
• 🔗 The footer contains links organized into sections with headings, social media icons, a subscription form, and copyright information.

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 is the first step shown in the video for setting up the project?

The first step shown in the video is creating HTML, CSS, and JavaScript files and adding CSS variables in the project.

How does the instructor demonstrate the export of images from the Figma file to the project?

The instructor shows the export of images by copying and pasting the images that were exported from the Figma file into the project's 'images' folder.

What is the purpose of the 'Live Server' extension in VS Code mentioned in the video?

The 'Live Server' extension in VS Code is used to open the HTML file in a browser, allowing for a live preview of the website as it is being developed.

What is the first section of the website that the instructor starts coding in HTML?

The first section of the website that the instructor starts coding is the header section, which includes the logo and menu items.

How many menu items are initially added to the navigation menu in the video?

Initially, three menu items are added to the navigation menu: 'About', 'Services', and 'Our Work', along with an 'Enroll Now' button.

What is the significance of the 'wrapper' class in the header section?

The 'wrapper' class in the header section is used to contain all the elements within the header and to set a max width for the contents inside the header, different from the full width background.

What are the two types of buttons mentioned in the video, and how are they differentiated in the code?

The two types of buttons mentioned are 'dark' and 'light'. They are differentiated in the code by adding a class of 'btn' for the button and an additional class of 'dark' for the dark button.

How does the instructor handle the creation of the hero section in the HTML?

The instructor creates a 'hero section' class division and within it, adds a 'left' class division for the heading, text, and button, and a 'right' class division for the image.

What is the method used in the video to add line breaks in the HTML for the heading text?

The method used to add line breaks in the HTML for the heading text is by inserting a 'br' tag after the text that should be on a new line.

What is the process for adding the testimonials section in the HTML as shown in the video?

The process involves creating a 'testimonials section' class division, within which two parts are created: a 'left' class division for the testimonial cards, each containing content, info, and an image, and a 'right' class division for additional text and a button.

What are the two types of headings mentioned for the courses section, and how are they applied in the code?

The two types of headings mentioned are 'light' and 'dark'. They are applied in the code by adding a class of 'light' to the 'h2' tag for the light heading.

How does the instructor approach the creation of the 'Get Our App' section in the HTML?

The instructor creates a 'wrapper' division and within it, a 'section' with the class 'app section'. It includes a heading, a paragraph, and two 'app btn' class divisions, each containing an 'img' tag for the icon and a 'span' for the text.

What components are included in the footer section of the website as per the video?

The footer section includes a 'wrapper' division, three 'links' class divisions each with a heading and list of links, social media icons, an input field for email subscription, and copyright information.

How does the instructor plan to handle the mobile version of the website in terms of HTML changes?

For the mobile version, the instructor mentions that no changes are needed in the HTML as the elements are the same, but implies that CSS will be used to adapt the layout for mobile viewing.

What is the final step shown in the video for completing the HTML structure of the website?

The final step shown in the video is adding comments in the HTML code to mark the end of each section, such as 'end of header section', 'end of testimonials section', 'end of courses section', and 'end of app section'.

Outlines

00:00

📝 HTML Setup and Initial Structure

The tutorial begins with an introduction to converting a design into a functional website using HTML, CSS, and JavaScript. The presenter shows the project setup in Visual Studio Code, including the creation of HTML, CSS, and JavaScript files, and the incorporation of CSS variables. It also covers the export of images from Figma into the project's image folder. The focus then shifts to writing HTML code for the website, starting with the header section, which includes a full-width background with a container for the logo and navigation menu items. The menu items and a button are added, and the presenter demonstrates how to view the website in a browser using the Live Server extension.

05:01

🌐 Building the Header and Hero Sections

This section continues the HTML coding process, focusing on the header and hero sections of the website. The presenter creates a 'wrapper' division to contain the header's contents and adds a logo and navigation items, including an 'enroll now' button with specific styling. The hero section is composed of two parts: a left side with a heading, text, and a button, and a right side featuring an image. The presenter details the process of adding HTML elements for these sections and ensures that the layout is displayed correctly in the browser.

10:02

🏆 Creating Achievements and Testimonial Sections

The tutorial moves on to constructing the achievements and testimonials sections of the website. The presenter adds HTML for displaying cards that highlight student enrollment numbers and overall ratings, complete with headings, text, and background styling. For the testimonials section, the process involves creating content divisions for text, info divisions for names and company names, and image tags for profile pictures. The section also includes a heading, paragraphs, and a 'learn more' button on the right side.

15:02

📚 Developing the Courses Section

The presenter now works on the 'Our Courses' section, starting with a 'wrapper' division and a heading. Course cards are created, each containing an image, course info, duration, and a unique class for styling. The process involves copying and pasting the course card structure while modifying the image sources and course details for each card. A 'light' button is added at the end of the section to navigate to all courses, and the presenter checks the display in the browser to ensure everything is rendered correctly.

20:05

📲 App Section and Footer HTML Structure

The tutorial proceeds with the 'Get Our App' section, which includes a heading, a paragraph, and two app buttons for the App Store and Google Play, each with an image and text. The presenter then moves on to the footer, detailing the creation of a 'wrapper' division, links container, and individual link sections with headings, list items, and anchor tags for navigation. Social media icons are added with their respective anchor and image tags, followed by a subscription form with an input field and a submit button. The footer concludes with a copyright notice in a paragraph.

🔚 Finalizing the Footer and Mobile Navigation

In the final part of the script, the presenter completes the footer by adding the necessary HTML elements and ensuring the layout is correct in the browser. The focus then shifts to preparing the website for mobile viewing, which involves adding a mobile navigation menu, icons for opening and closing the menu, and hiding the desktop menu items for mobile users. The presenter emphasizes that no changes are needed for the iPad version as the elements are the same. The video concludes with a summary of the HTML coding completed and a teaser for the upcoming CSS development in the next tutorial.

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 webpage by using a variety of elements and attributes. In the video's context, HTML is used to write the code for the website's structure, including the header, navigation menu, and other sections, ensuring that the content is organized and displayed correctly in the browser.

💡CSS

CSS stands for Cascading Style Sheets, a stylesheet language used for describing the presentation of a document written in HTML or XML. In the video, CSS is mentioned as the next step after HTML, where it will be used to style the website, giving it the visual appearance shown in the design mockup. CSS variables mentioned in the script are a way to manage and reuse values throughout the stylesheet, contributing to a more maintainable and scalable design.

💡JavaScript

JavaScript is a high-level, interpreted programming language that is commonly used to enhance web pages with interactive elements. Although not extensively discussed in the script, JavaScript files are mentioned as part of the project setup, implying that it will be used to add functionality to the website, such as handling user interactions or dynamic content updates.

💡Figma

Figma is a cloud-based interface design tool and digital design platform used for creating, collaborating, and sharing user interface designs. In the script, Figma is used as the source of the design that the tutorial series aims to convert into a real website. Images are exported from Figma and used in the HTML to match the design.

💡VS Code

VS Code, or Visual Studio Code, is a popular source-code editor made by Microsoft for Windows, Linux, and macOS. It includes support for debugging, embedded Git control, syntax highlighting, intelligent code completion, snippets, and code refactoring. In the video, VS Code is used as the integrated development environment (IDE) for creating and editing the HTML, CSS, and JavaScript files for the project.

💡Live Server

Live Server is an extension for VS Code that launches a local development server and provides live reloading. In the script, the Live Server extension is mentioned as a tool to preview the website in a browser as development progresses, allowing for immediate visual feedback on changes made to the code.

💡Header Section

The header section of a webpage typically contains the logo, navigation menu, and possibly other elements like a sign-in button or search bar. In the video, creating the header section is one of the first tasks, and it includes setting up the full-width background with a linear gradient and a container for the contents, such as the logo and navigation items.

💡Navigation Menu

A navigation menu is an interactive element on a webpage that allows users to access different pages or sections of the site. In the script, the navigation menu is constructed using HTML list items and anchor tags, and it includes menu items like 'About', 'Services', 'Work', and a 'Enroll Now' button, which are essential for directing users through the website.

💡Hero Section

The hero section of a webpage is a prominent area typically at the top of the page, designed to attract attention and make a strong first impression. In the video, the hero section includes a heading, descriptive text, a call-to-action button, and an accompanying image, all of which are coded in HTML to match the design from Figma.

💡Achievements Cards

Achievements cards are a design element often used to display statistics or accomplishments in an engaging way. In the script, these cards are part of the webpage's design, featuring headings, numbers, and text, such as '32k Students Enrolled' and '4.7 Overall Rating', and are coded using HTML div elements with appropriate classes for styling.

💡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. Although not explicitly mentioned in the script, the need to consider the iPad and mobile versions implies the importance of responsive design in the development process.

Highlights

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

Setting up the project in VS Code with HTML, CSS, and JavaScript files, and adding CSS variables.

Exporting images from the Figma file into the project for use in the website design.

Starting the HTML coding for the website by creating the header section with a full-width background.

Creating a container division for the header content and adding a logo and navigation menu items.

Using the Live Server extension in VS Code to preview the website in a browser.

Adding menu items and a button with different styling for desktop view navigation.

Creating the hero section with a left part for heading, text, and button, and a right part for an image.

Copying and pasting the text content from Figma to HTML for accurate representation.

Building the achievements cards section with headings, text, and a unique styling for each card.

Adding a testimonial section with left and right parts including cards, text, and a button.

Creating the courses section with course cards, each containing an image, info, and duration.

Integrating a 'Get Our App' section with a heading, paragraph, and app store buttons.

Designing the footer with a wrapper division, links container, and social media icons.

Adding a subscribe form with an input field and a submit button in the footer.

Finalizing the HTML structure for the desktop version of the website.

Discussing the need for mobile-specific navigation and icons for the mobile version of the website.

Previewing the footer in the browser to ensure all elements are correctly displayed.

Upcoming steps in the series to write CSS and make the design visually match the Figma prototype.

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 set

up the project and

if you go to our

vs code

here we can see we have created these

files over here

html css and javascript files

and we also added some css variables

over here and

this is our html file we have added some

boilerplate html code and also the link

of the font

and i have shown you how to export the

images from the figma file into our

project so here we can see we have

exported these two images now you can

use the same method to export all the

other images

so i'll just go ahead and copy and paste

all the images that i exported into this

images folder alright so here i have

copied all the images that i exported

from the figma file now in this video we

will start writing the html for our

website so let's get started

[Music]

all right let's go back to our figma

file and

let's see how to get started so the

first thing we will do is we'll create

this header section so for that let's go

back to our html and let's create a

header tag

so here i'll just type header

and in the header we need to have

a division to contain everything so here

we can see we have a max width for all

the elements but the header has

full width so here we can see for the

header we have this linear gradient

background but we have a max width for

all the contents inside the header so we

have to create a container division for

that so for that let's create a division

of the class of wrapper

and in this will create a nav element to

hold all these menu items and also this

logo

so let's create a nav element

and in that we will create a division of

the class of logo for this logo

so let's create a division with the

class of logo

and here i'll just type gd dot

so this is our logo

and the next thing we need to do is add

these menu items now for this i'll just

create an unordered list so let's create

an unordered list over here so i'll just

type ul

and for each of the menu items we'll

create a list item so let's type li

and here i'll just create an anchor tag

for the menu items

and for the stuff i'll just tap hash for

now

and here in the anchor tag the first

menu item we need to have is about so

i'll just type about over here

and let's open this in our browser and

let's see how it looks so i have this

extension called live server installed

in vs code so you can go ahead and

search for live server and once you

install it you can simply right click

over here in the html and click on open

with live server

and here we can see our

design is opened in the browser so here

we can see we have the logo and the

first menu item

so let's go back to our vs code

and i'll just copy this list item

and we need to have two more menu items

and we also need to have this button

so let's copy it three more times

so just paste it down here

and for the second menu item we have

services and then we have our work

so i'll just type that over here

services and

our work

and for the last menu item we have a

button and for the button we have a text

of enroll now so here i'll just type

enroll now

and since this is a button we need to

style it differently so i'll just add a

class over here so let's type class

and we will add a class of btn for the

button and we will style it in the css

now if you go back to our design we can

see that we have two types of buttons we

have a dark button and also a light

button

so we'll also add a class called dark

over here for the dark button

or that's it with the menu items of our

desktop version so here after this nav

element i'll just create a comment so

you can just press command forward slash

and you will have this comment and here

i'll just type end of desktop navigation

menu

right now the next thing we need to add

is this hero section

so for that let's create a division with

the class of hero section

so here i'll just type dot heroes

section and press tab

and now in the hero section we need to

have two parts one for the left path

which is

the heading and this text and this

button and then for the right part we

have this image so let's create a

division with the class of left

and in this left division we will have

an h1 for this text

so let's type h1

and you need to have this text so i'll

just copy this double click over here

and copy this from here

and let's paste it over here

and we need to have a line break over

here because we can see we have this

learn the art of in one line and we have

game dev in the next line so here after

off i'll just create a br tag to add a

line break now if you go back to our

browser we can see that we have two

lines over here for the heading

or let's go back to our figma file

and the next thing we need to add is

this text so i'll just copy this from

here

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

create a paragraph so i'll just type p

and here i'll just paste the text

or now the next thing we need to have is

a button so i'll just create an anchor

tag for that

and

in the edge of i'll just type hash and

for the button we will have a class of

btn

and this is a light button so i'll just

type light over here as well and here in

the text we need to type enroll now so

i'll just type it over here

all right that's it with the left part

of our hero section now on the right

part we need to have this image

so let's create a division of the class

of right

and here let's create an img tag

and in the source i'll just type images

slash and i have saved it as hero image

so here we can see heroimage.png

all right so let's go back to our

browser and here we can see we have the

image and everything is displayed

correctly let's go back to our figma

file

and now the next thing we will do is

we'll create the html for these two

elements over here so for these i'll

just create a division of the class of

achievements cards

so let's go back

and let's go outside this

right division and here i'll just create

a division of the class of achievement

cards

and in this will create a division of

the class of achievement card

so i'll just type achievement

card

and we need to have two cards one for

this

students enrolled

so for that i'll just create a class

so just type students enrolled

so that we can style them differently in

the css now here in this division we

need to have the heading

so this is the heading and then we need

to have this text

and then for the second card we have a

heading and we also have an image over

here and then we have this text so let's

go back

and i'll just create a division of the

class of content

and here i'll just create an s3

and here this tab

is 32k so i'll just type 32k

and then we need to have this paragraph

so for that let's create a p tag over

here after the heading

and i'll just type students enrolled

and then we have this background

rectangle over here so we also have a

rectangle behind this main rectangle now

to style that will create a division

with a class of bg

so here after this content i'll just

create a division of the class of bg

and we'll style it using css right now

let's copy this achievement card

and let's paste it down here

and here instead of students enrolled

i'll just type overall rating

and then here we have this number 4.7 so

i'll just type that over here

and after that we need to have this star

image

so what i will do is i'll just create a

division for this heading so i'll just

type div over here

and i'll just add this heading inside

this division

now let's do the same over here as well

so just type div

and i'll just add this heading inside

the division

now after this heading let's create an

img tag

and here in the src i'll just type

images slash and i have named it star

icon.svg

and then here instead of students

enrolled i'll just type overall rating

right that's it with the header section

so if you go back to our figma file we

can see that all the elements have been

covered if you go back to our

google chrome

here we can see all the elements are

displayed over here

right now let's go back to our vs code

and here after the header i'll just

create a comment

and i'll just tap end of the header

section

right now let's go back to figma file

and the next section we need to add is

this testimonial section and it is also

inside this fixed width so let's create

a wrapper division for this so i'll just

type dot wrapper

and we are adding this class called

wrapper

and here also we have added this class

called wrapper

now when we style this using css we will

have the same styles applied to this

division and also

this division right here because they

both have the same class

so both of them will have the same max

width right now for the testimonials

section i'll just create a section and

i'll just give it a class of

testimonials section

and let's go back to our figma file

and here also we have two parts we have

the left part where we have these two

cards

and on the right part we have this text

and this button

so let's go back to our html and here

let's create a division of the class of

left

and we will have a division of the class

of testimonial cards for each of these

testimonial cards so let's create a

division of the class of testimonial

card

and in that the first thing we need to

have is the content of the testimonial

which is this text

so just copy this

and let's create a division of the class

of content

and i'll just paste it over here

and then we have this info where we have

the name and the company name

so for that i'll just create a division

of the class of info

and then for the name i'll just create

an h4

and we have the first name as jane

cooper so i'll just type

jane cooper over here

and then we have the company name so

i'll just copy this from here

and i'll just create a paragraph with

the class of company

and i'll just paste it over here

and now the next thing we need to add is

this image so let's go outside this info

division

and here i'll just create an img tag and

in the src i just type imageslash and i

have saved it as testimonial1.png

right now let's copy this testimonial

card

and i'll just paste it down here

and we'll change the details over here

so let's go back and i'll just copy this

text

and let's go back and paste it over here

let's go to figma file and let's copy

this name

and let's paste it over here instead of

the previous name

and then lastly we have this

company name

so i'll just copy this and paste it over

here

and then we'll change the image to

testimonial two dot png

or that's it with the left part of our

testimonials section right now let's uh

fold this left division over here

so i'll just click on this button

and let's create a division of the class

of right

and in here we need to have a heading so

i'll just create an h2 for that

and let's copy this text

and let's paste it over here and now we

need to have two paragraphs so i'll just

copy this

and let's go back and create a paragraph

and i'll just paste it over here

and let's create one more paragraph

and i'll just copy this text

and i'll just paste it over here

and then lastly we need to have this

button

so for that i'll just go outside

this right division and let's create an

anchor tag and we'll just type hash for

the sref

and let me just give it a class of btn

and it is a light button so i'll just

give it a class of light

and we have a text of learn more

or that's basically it with the

testimonial section so i'll just create

a comment over here

and i'll just type end of

testimonials section

and let's go back to our chrome

and we can see everything looks all

right we have all the elements displayed

over here

right now let's go back to our figma

file and if we scroll down we have the

our courses section

so for that let's create a section so

here i'll just type

section and we'll just give it a class

of

courses section

and in here we need to have a wrapper

class because we need to have fixed

width

so let's type dot wrapper over here

and in this we need to have the heading

first of all

so let's create an edge too

and let's type our courses

and just like the button we also have

two types of headings we have a light

heading and also a dark heading

so for the light heading we will have a

class of light for the h2

so here i'll just type

class and set it to light

all right now the next thing we need to

have are these course cards

so for that let's create a division of

the class of course cards

and in that for each of the cards we'll

create a division of the class of course

card

and in here we need to have an image so

let's create img tag and in the source

i'll just type images slash and i have

named it as course1.png

and then we need to have the info about

the course so i'll just copy this

and let's go back and let's create a

division of the class of info

and for the heading i'll just create an

s3 and i'll just paste it over here

and then we have the duration so for

that let's create a division of the

class of duration

and here i'll just type 8 hours

right now let's copy this course card

and let's paste it down for the next

course

and here i'll just change the details so

for the image i'll just type course2.png

and i'll just copy this heading

and paste it over here

and then we have eight hours i'll just

change this to 15 hours

right now the last thing we need to have

in this course section is this button

so here just after

the end of the course cards section i'll

just create a button so just create an

anchor tag

and i'll just give it a class of btn

and it is a light button so i'll just

type light over here

and for the text we have all courses

all right that's basically with the

course section so i'll just create a

comment over here

i'll just tap end of courses section

right now let's go to our browser and

let's see whether everything is being

displayed correctly so here we can see

we have the images and the details so

everything is working all right

let's go back to our figma file and the

next thing we need to create is the get

our app section

so let's go back to our vs code and

let's create a wrapper division

and in that we'll create a section with

the class of app section

and in this we need to have a heading so

we need to type get our app so just

create an edge too and let's tap get our

app

and then we need to have a paragraph so

i'll just copy this text

and let's go back and create a paragraph

and i'll just paste the text over here

and then we need to have these two

buttons so for the buttons i'll just

create a division of the class of app

buttons

and for each of the button i'll just

create a division of the class of app

btn

now in the button we need to have this

image and we need to have this text so

let's create an img tag

and i'll just type images slash

and it is called app store icon dot svg

and then we need to have a text called

app store so for that let's create a

span

and here i'll just type app store

right now let's copy this and let's

paste it down here

and we'll just change the

image to

google play icon

and for the text we need to have google

play

all right that's it with the app section

so let's create a comment over here and

i'll just tap end of the app section

right now let's go to our browser and

let's see whether everything is being

displayed over here and here we can see

we have the heading the text and also

the icon and the text over here so

everything is working all right let's go

back to our figma file and the last

thing we need to have is this footer so

let's go back to our vs code and here

let's create a footer tag

for the footer

and even for the content of the footer

we need to have a max width so let's

create a wrapper division

now for all these links over here we'll

create a division of the class of links

container

so let's create a division with the

class of links container

and now for each of these links section

i'll just create a division of the class

of links

and the links we need to have a heading

for this text so just create an s3 and

the first heading is quick links

and then for all these links let's

create an unordered list

so let's create a ul

and in that we will have list items

and we'll have anchor tags for the links

and the first one is about us so just

type about us over here

and we need to have three more links so

just copy this list item

and paste it three more times

and let's change the text to contact us

privacy policy and terms and conditions

all right that's it with the first set

of links

now let's copy this links division

and we need to paste it two more times

for these two links section

so i'll just copy this and paste it down

here

and paste it one more time

right now for the second heading we have

course

so just type course over here

and then for the links we have login

download and all courses

and we have just three links over here

so i'll just delete this list item

and then for the third link we have a

heading of contact us

and you need to have this email id

so i'll just remove this anchor tag

and i'll just type the email id over

here

and now we can delete the rest of the

list items so i just delete all of this

from here

and then for these

social media icons let's create a

division of the class of social

so here i'll just type social

and in here we need to have these two

icons so let's create an anchor tag for

that

and let's create an img tag and for the

first image we need to have the facebook

icon so i'll just type images

slash facebook logo.svg

and i'll just copy this anchor tag

and paste it down here

and let's change this to

instagram

and then we need to have this input

field over here and also this button so

let's go outside this division

and let's create a form

and for the action i'll just type hash

for now

and in the form we need to have an input

field and the type will be text and

we'll also add a placeholder and for the

placeholder we will type email address

and then we need to have a button

so let's create a button

and for the button we will give you the

class of submit button

and here let's tab subscribe

right now the last thing we need to do

is add this text so i'll just copy this

and let's go outside this

links container division so i'll just

fold this

and here i'll just create a paragraph

and let's give it a class of copyright

and i'll just paste the text over here

all right that's basically it with the

footer

so with that we have written the html

for the desktop version of our website

so if you go back to our sigma design we

can see that we have added all these

elements in our html

now for the ipad version we don't need

to change anything in the html because

we can see that all the elements are the

same

but for the mobile version we need to

add this

navigation menu for the mobile version

and we also need to add

this icon and this close icon and we

need to hide these menu items from here

all right so let's go to our

browser

and let's see whether the footer is

being displayed correctly

and here we can see all the links are

displayed over here we also have the

input field

the button and the copyright information

so everything looks alright so that's

basically it with this video we have

written the html of our design now from

the next video we will start writing the

css and we'll make it look like this 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