Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 10
Summary
TLDRThis tutorial video guides viewers through the process of converting a sigma design into a responsive website using HTML, CSS, and JavaScript. The instructor demonstrates how to adjust the design for different devices, including creating a media query for screens less than 800 pixels wide, hiding the navigation menu, and adding a mobile-friendly menu icon. The video also covers styling the mobile navigation, implementing a 'scrolled' class for navigation changes on scroll, and using JavaScript to toggle the mobile menu's visibility. The tutorial concludes with testing the mobile menu's functionality across devices.
Takeaways
- 📱 We are converting a Figma design into a real website using HTML, CSS, and JavaScript.
- 💻 The design for the desktop and iPad Pro versions is complete.
- 📏 Next step: creating a media query for screen sizes less than 800 pixels.
- 🔄 For widths less than 800 pixels, the navigation menu will be replaced with an icon.
- 🔧 A new mobile navigation menu will be created with a logo and menu icon.
- 🖼️ In the HTML, the existing nav element is hidden and a new nav element for mobile is created.
- ⚙️ The mobile nav is styled in CSS to be responsive and match the design.
- 🖱️ JavaScript is used to add and remove a 'scrolled' class for different styles based on scroll position.
- 📂 Mobile menu items are created in HTML and styled in CSS.
- 🚀 The active class is toggled via JavaScript to show and hide the mobile menu on click.
Q & A
What is the main focus of the tutorial series mentioned in the script?
-The main focus of the tutorial series is to convert a sigma design into a real website using HTML, CSS, and JavaScript.
What versions of the website design have been completed before this video?
-The desktop version and the iPad Pro version of the website design have been completed before this video.
What is the purpose of creating a media query for size less than 800 pixels?
-The purpose of creating a media query for size less than 800 pixels is to adapt the website design for smaller screens, such as mobile devices, by hiding the menu bar and adding a menu icon.
How does the tutorial handle the navigation menu for smaller screen sizes?
-For smaller screen sizes, the tutorial suggests hiding the traditional navigation menu and replacing it with a menu icon that, when clicked, displays a mobile navigation menu.
What is the 'scrolled' class used for in the context of the navigation menu?
-The 'scrolled' class is used to apply different styling to the navigation menu when the user scrolls down on the page, such as adding padding and a background color.
How is the 'scrolled' class added or removed in the mobile navigation menu?
-The 'scrolled' class is added or removed in the mobile navigation menu using JavaScript, specifically by checking if the window has been scrolled more than 60 pixels.
What is the structure of the mobile navigation menu in the HTML file?
-The mobile navigation menu in the HTML file consists of a 'nav' element with a class of 'mobile', containing a 'div' for the logo, a 'div' for the menu icon, and a 'div' for the mobile menu container with a class for the close icon and an unordered list for the menu items.
How is the mobile menu container initially positioned off-screen?
-The mobile menu container is initially positioned off-screen by setting its left position to 100% in the CSS file.
What happens when the 'active' class is added to the mobile menu container?
-When the 'active' class is added to the mobile menu container, the left position is reset to 0, bringing the menu into view, and the close icon becomes visible and clickable.
How are the menu icon and close icon referenced in the JavaScript file?
-The menu icon and close icon are referenced in the JavaScript file using 'document.querySelector' with the appropriate class selectors, such as 'menu-icon' and 'mobile-menu-container close-icon'.
What event listeners are added to the menu icon and close icon, and what actions do they perform?
-Click event listeners are added to both the menu icon and close icon. The menu icon's event listener adds the 'active' class to the mobile menu container, while the close icon's event listener removes the 'active' class, showing and hiding the mobile navigation menu respectively.
Outlines
🛠️ Website Design Adaptation for Smaller Screens
In this tutorial, the focus is on adapting a website design for screens smaller than 800 pixels using HTML, CSS, and JavaScript. The speaker has already completed the desktop and iPad Pro versions and now aims to create a media query for mobile devices. The tutorial begins with hiding the navigation menu and replacing it with an icon for smaller screens, similar to the mobile version. The speaker guides through adding a mobile navigation menu in the HTML file and styling it in the CSS file, including adding a scrolled class for different styling upon scrolling.
📱 Creating Mobile Navigation Menu
The speaker proceeds to create a mobile navigation menu by adding a 'mobile menu container' in the HTML file, including a close icon and the same menu items as in the desktop version. The CSS styling is detailed, with the mobile menu container set to be fixed, full-screen, and initially off-screen. The close icon and list items are styled, and the unordered list is formatted without bullets and padding. The speaker also explains how to toggle the visibility of the mobile menu using JavaScript, adding and removing an 'active' class to show and hide the menu.
🔄 Final Touches and Testing on Different Devices
The final part of the tutorial involves adding event listeners in JavaScript for the menu and close icons to control the display of the mobile navigation menu. The speaker tests the functionality, ensuring that the menu appears and disappears as expected. Adjustments are made to ensure compatibility with the iPad Pro version, hiding the mobile menu container when not needed. The tutorial concludes with a reminder to style the mobile version in the next video and an invitation for viewers to ask questions and subscribe for updates.
Mindmap
Keywords
💡media query
💡navigation menu
💡mobile navigation
💡CSS
💡HTML
💡JavaScript
💡responsive design
💡menu icon
💡box shadow
💡class
Highlights
Introduction to the tutorial series on converting a sigma design into a responsive website using HTML, CSS, and JavaScript.
Completion of the desktop and iPad Pro version designs in previous videos.
Creating a media query for screen sizes less than 800 pixels to adapt the design for smaller devices.
Hiding the navigation menu bar and adding a menu icon for devices with a width less than 800 pixels.
Styling the mobile navigation menu with CSS, including display properties and flex settings.
Adding a scrolled class for navigation menu styling when scrolling on the iPad Pro version.
Using JavaScript to add or remove the 'scrolled' class based on window scroll position.
Creating a mobile menu container with a close icon and menu items copied from the desktop version.
Styling the mobile menu container with fixed positioning, background color, and centering content.
Hiding the mobile menu container by default and using the 'active' class to reveal it.
Adding smooth transitions for the mobile menu container and close icon with CSS.
Using JavaScript to toggle the 'active' class on the mobile menu container in response to menu icon and close icon clicks.
Ensuring the mobile menu container is hidden on the iPad Pro version for larger screens.
Final testing of the mobile navigation menu functionality on the website.
Upcoming tutorial on styling the mobile version of the website.
Invitation for viewers to ask questions in the comments and to subscribe for updates.
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 we
have already completed the design of the
desktop version and we also completed
the design of the ipad pro version in
the previous video so if you go to our
browser now here we can see this is how
it will look on an ipad and
we have a different design on the ipad
now the next thing i will do is i'll
just create one more media query for
size less than 800 pixels so right now
we can see that the width is 1024 pixels
for the ipad pro now if you open this in
an ipad so if i just select the ipad
device from here
and this is how it looks we can see that
all the design over here looks alright
but we don't have enough space for the
navigation menu so what we will do is
when we have the width of the browser
less than 800 pixels we will just hide
this menu bar and we will add an icon
over here just like the mobile version
over here
so we need to add this icon instead of
this navigation menu and then we also
have to create this
mobile navigation menu so these are the
things we're gonna do in this video
let's get started
[Music]
right here i'm in the css and the first
thing i will do is i'll just create a
media query so just tap at media
and we'll just have the max width to
800 pixels so whenever the screen width
is less than 800 pixels all the css that
we have over here will be added to our
website
now let's go to our html file and
let's scroll up
and here we can see for this navigation
menu we have this nav element
so we'll just hide this so
here i'll just type
nav
and i'll set the display to none
right now let's create a navigation menu
for the mobile devices so let's go to
our html file and just after this
comment i'll just create a nav element
and i'll just give it a class of mobile
now
now in this we need to have this logo
and this icon so let's create a division
with a class of logo
and i'll just type gd dot over here and
the next thing we need to have is the
menu icon so let's create a division of
the class of menu icon
and here just create an img tag
and i'll just type images slash
and i have saved it as menu icon dot svg
all right now let's go to our css file
and we will style this mobile nav
so here i'll just type
nav dot mobile nav
and i'll just set the display to
flex right now we also need to add a
scrolled class so if you go back to the
ipad pro version
now for this navigation menu when you
scroll down we can see that we have a
different class
and we also need to hide the other
navigation menu over here so let's
scroll up
and
here in the desktop version here i'll
just type nav dot mobile nav
and i'll just set it to display
none
right now here we can see when we scroll
down we have a different styling and
when we scroll up
we have a different styling
so for that we are adding a class called
scrolled
so
here we can see for the nav element we
are adding a class called scrolled and
when we are adding that class we are
adding these styles to the nav element
so we will do the same for the mobile
navigation menu as well
so let's go back to the ipad version
and here let's type nav
dot mobile nav
dot scrolled
and when we have the scrolled class we
will add a padding of 8 pixels top and
bottom and 100 pixels left and right and
we'll also add a background color and
we'll set it to var light blue color
and we'll also add a box shadow suggest
a box shadow
and we'll set the values to 0 9 pixels
21 pixels negative 5 pixels rgb a
0
0 0 and 0.3 right now if you go back to
our html file and here if we add the
scrolled class
we can see we have a different styling
now in the desktop version we are adding
the scrolled class using javascript so
let's do the same for this mobile now so
let's go to our main.js file and let's
select
the mobile nav so i'll just type const
mobile nav
equals document.queryselector
nav dot mobile nav
and here when the window has scrolled
more than 60 pixels i'll just add the
scrolled class to mobile now so just
type mobile now dot class list dot add
and here i'll just type scrolled
and else we need to remove the class so
i'll just type mobile now
dot class list dot remove
and i'll just tap scrolled
and now if we scroll down we can see
that the class is added and when we
scroll up
the class is removed
all right now let's create the menu
items that will be displayed when we
click on this menu icon
so for that let's go back to our html
file
and here we'll just create a division
with the class of mobile menu container
and if you go back to our figma file we
can see that we also need to have this
close icon
so let's add that first of all so i'll
just create a division with the class of
close
icon and i just add an img tag and here
let's type images slash and i have saved
it as close icon.svg
right now the next things we need to add
are the menu items so if we scroll up
over here to this nav element
we can see these menu items over here so
we need to have the same menu items so
just copy this ul from here
and let's scroll down and paste it over
here inside this mobile menu
container and here i'll just create a
comment and just type
end of mobile navigation
right now let's style this so let's go
back to our style.css file
and here i'll just type mobile menu
container
and i just set the position to fixed
and i will set the height to 100 report
height and the width to 100
and we'll set the positions to
top zero
and
left zero
let's also add a background color so
i'll just type background
and we will add the dark color so i'll
just have var and we have a variable
called dark color
let's also bring everything to the
center so i'll just type display flex
and align items to the center
and justify content to the center and
we'll also add some z index so that it
is above all the other elements so just
type z index
and i'll just set the z index to 200
right now let's style this close button
for the close button we have a division
of the class of close icon
so here i'll just type mobile
menu container close icon and we'll set
the position to fixed
and we'll set the top position to 32
pixels and the right position to 100
pixels
right now let's style this unordered
list because here you can see we have
this ul inside the mobile menu container
so let's style this
here i'll just type mobile menu
container ul
and let's remove the bullets so i'll
just type list style and set it to none
and we'll also remove the padding so
let's type padding and set it to zero
right now let's tile the list items
inside the ul
so here let's type mobile menu container
ulli
and we will have a margin
of 30 pixels top and bottom and 0 for
left and right
and we'll also text align it to the
center
right now let's tile the anchor tags
inside the li so here we can see we have
the anchor tags for
the menu items
so here i'll just type mobile menu
container ullia
and let's set the color of the text to
white
and let's remove the underline so i'll
just type text decoration and set it to
none and we'll also increase the font
size a little bit so i'll just type font
size 18 pixels all right now the next
thing we need to do is we need to hide
this
mobile menu container by default so
let's scroll up and go to the mobile
menu container
and here by default i'll just set the
left position to 100 percent
so right now the mobile menu container
is outside the screen on the right side
now what we will do is we will add a
class called active to this mobile menu
container and when we have the class
active we will reset the left value so
i'll just type mobile
menu container dot active
and i'll just set the left value to 0
and we'll also add a smooth transition
so let's tap transition
and set it to all 400 milliseconds is
and we also need to remove this close
icon from here by default
so here for the close icon i'll just set
the opacity to 0
and i will also set the pointer events
to none
so that it cannot be clicked
and let's also add transition so that
will have smooth animation now let's set
it to all 400 milliseconds is
now when we have the active class for
the mobile menu container we will
display the close icon so here i'll just
type mobile menu container
dot active and here let's type close
icon
and i'll set the opacity to 1
and the pointer events to auto
right now let's add and remove this
active class using javascript so let's
go to our main.js file and we need to
reference the menu icon the close icon
and the mobile menu container
so let's go back to our index.html file
and here we can see for the menu icon we
have this class of menu icon
and for the close icon we have a class
of close icon and then for this division
we have a class of mobile menu container
so let's reference all of this in our
javascript so here let's type const
menu icon equals document.queryselector
menu icon
and let's type const close icon equals
document.queryselector
and here just have mobile menu container
close icon
and i'll just have const mobile menu
container
equals document.query selector
mobile menu
container right now let's add event
listeners to the menu icon and the close
icon
so here let's type menu icon dot
add event listener
and we'll listen for the click event and
let's create an arrow function over here
and here just type mobile menu container
dot class list dot add
and we'll add the active class and we
need to remove the active class when we
click on the close button so here's the
tab close icon
dot add event listener and click
and here i'll just type
mobile menu container dot class list dot
remove active
right now let's see whether it works so
let's click on this menu icon and we can
see that the mobile navigation menu is
displayed over here and let's click on
this close icon and we can see it goes
back
so everything is working all right
all right now let's go back to the ipad
pro version and let's see whether we
have any problems in that and here we
can see we need to hide this mobile menu
container over here so let's go back to
our style.css file
and here in the desktop version
here you can see we are hiding this
mobile nav so here i'll just add one
more selector so i just type comma
mobile menu container
and now we don't have any problems so
let's go back to the ipad version
and
everything is working all right
all right so that's it for this video in
the next video we will style the mobile
version so if you have any doubts you
can ask in the comments below and if you
like this video please click on the like
button and subscribe to this channel to
get the latest video updates thanks a
lot for watching have a nice day
[Music]
you
浏览更多相关视频
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 3
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 12
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 9
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 8
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 4
5.0 / 5 (0 votes)