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

Summary

This 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

00:00

🛠️ 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.

05:01

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

10:02

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

Keywords

💡media query

A media query is a CSS technique used to apply styles based on the characteristics of the device, such as screen width. In the video, media queries are used to adjust the design for different screen sizes, like hiding the navigation menu when the width is less than 800 pixels.

💡navigation menu

The navigation menu is a set of links typically displayed on a website to help users navigate to different sections. The video discusses how to hide the navigation menu on smaller screens and replace it with an icon to save space.

💡mobile navigation

Mobile navigation refers to the navigation system optimized for mobile devices. In the video, this involves creating a mobile-friendly menu that appears when the screen width is below a certain threshold, including an icon for toggling the menu visibility.

💡CSS

CSS (Cascading Style Sheets) is a language used to describe the presentation of a web page, including layout, colors, and fonts. The video demonstrates how to use CSS to style elements and apply different styles based on screen size using media queries.

💡HTML

HTML (HyperText Markup Language) is the standard language for creating web pages. The video shows how to structure the HTML for different elements, like the navigation menu and icons, to ensure they display correctly on various devices.

💡JavaScript

JavaScript is a programming language used to create interactive effects within web browsers. In the video, JavaScript is used to add and remove classes dynamically based on user actions, such as scrolling or clicking icons, to enhance the website's functionality.

💡responsive design

Responsive design is an approach to web design that makes web pages render well on a variety of devices and screen sizes. The video focuses on converting a design into a responsive website that looks good on desktop, tablet, and mobile devices.

💡menu icon

A menu icon is a graphical representation (usually a 'hamburger' icon) that, when clicked, displays the navigation menu on smaller screens. The video shows how to implement this icon in HTML and style it with CSS to replace the traditional navigation menu on mobile devices.

💡box shadow

Box shadow is a CSS property used to add shadow effects around an element's frame. In the video, the box shadow is used to give the navigation menu a subtle shadow when it is scrolled, enhancing the visual appeal.

💡class

A class in HTML and CSS is a way to define styles that can be applied to multiple elements. The video demonstrates how to use classes to style elements differently based on user interactions, such as adding the 'scrolled' class to change the appearance of the navigation menu when the page is scrolled.

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