Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
Summary
TLDRThis 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
📝 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.
🌐 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.
🏆 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.
📚 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.
📲 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.
Mindmap
Keywords
💡HTML
💡CSS
💡JavaScript
💡Figma
💡VS Code
💡Live Server
💡Header Section
💡Navigation Menu
💡Hero Section
💡Achievements Cards
💡Responsive Design
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
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
浏览更多相关视频
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 2
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 5
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 10
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 12
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
5.0 / 5 (0 votes)