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

Summary

This tutorial video guides viewers through converting a sigma design into a responsive mobile website using HTML, CSS, and JavaScript. Starting with a media query for screens under 700 pixels, the instructor demonstrates adjusting padding, widths, and layout for mobile devices. Key elements like buttons, nav bars, and images are repositioned and resized to fit the mobile view, ensuring a user-friendly and visually appealing design on smaller screens. The video concludes with a fully styled mobile version, showcasing the hero section, menu, testimonials, courses, and footer.

Takeaways

• 🌐 The tutorial series focuses on converting a sigma design into a functional website using HTML, CSS, and JavaScript.
• 📱 The video specifically addresses the design adjustments required for the mobile version of the website, targeting screens with a max width of 700 pixels.
• 🔧 The presenter demonstrates how to create and apply a media query for the mobile version to ensure responsive design.
• 📏 Adjustments are made to padding and widths of elements to fit the mobile layout, such as setting the wrapper padding to 32 pixels and changing paragraph width to 100%.
• 🔄 The orientation of buttons is changed from horizontal to vertical by setting the flex direction to column within the 'app buttons' container.
• 📉 Padding adjustments are made to the 'mobile nav' and its scrolled state to better fit the mobile screen dimensions.
• 📍 The positioning of the close button within the mobile menu is corrected to align to the right side of the screen.
• 🎨 The styling of headings and other elements like achievement cards is adjusted according to the Figma design specifications.
• 🖼️ Image dimensions are modified to fit the mobile layout, including resizing and repositioning within their containers.
• 📝 Text sizes and margins within various sections such as testimonials and courses are fine-tuned to match the design mockup.
• 🔚 The footer is restructured from a multi-column layout to a single column with centered content and adjusted button positioning for mobile readability.

Q & A

What is the main focus of the tutorial series?

The tutorial series focuses on converting a sigma design into a real website using HTML, CSS, and JavaScript.

What was the first step taken in the mobile version design process?

The first step was to create a media query for the mobile version with a max-width of 700 pixels.

How does the speaker select a mobile device for testing in the browser?

The speaker selects a mobile device from the browser's device selection menu, specifically choosing the Pixel 2 XL.

What is the initial padding set for the wrapper in the mobile version design?

Initially, the padding for the wrapper is set to 32 pixels on the left and right, as per the Figma file.

How is the width of the paragraph adjusted for the mobile version?

The width of the paragraph is adjusted to 100% to take up the full width of the screen on mobile devices.

What CSS property is used to stack the buttons vertically in the mobile version?

The 'flex-direction' property is set to 'column' to stack the buttons vertically.

How is the mobile navigation padding adjusted for different scroll states?

The padding is set to 32 pixels initially, and when scrolled, it changes to 8 pixels on top and bottom with 32 pixels on the left and right.

What changes are made to the position of the close button in the mobile menu?

The close button's position is set to 32 pixels from the right side of the screen.

How is the hero section's image height adjusted in the mobile version?

The image height is reduced from 580 pixels to 400 pixels to better fit the mobile screen size.

What is the process for styling the headings in the other sections of the mobile version?

The process involves going back to the Figma file to determine the font size, and then applying the same size to the corresponding headings in the CSS file.

How does the speaker ensure that the footer is styled correctly for the mobile version?

The speaker adjusts the grid layout to a single column, centers the text, and removes padding from the list items to ensure proper styling on mobile devices.

Outlines

00:00

📱 Mobile Version Design Overview

This paragraph introduces the tutorial's focus on converting a sigma design into a responsive mobile version using HTML, CSS, and JavaScript. The speaker begins by creating a media query for screens with a maximum width of 700 pixels, adjusting the padding of the wrapper to match the Figma design specifications. The tutorial proceeds with resizing elements, repositioning buttons, and ensuring the mobile navigation bar and close button are correctly styled and positioned. The speaker also discusses adjusting the heading font size and image dimensions to fit the mobile layout.

05:03

🎨 Styling Mobile UI Elements

The second paragraph delves into the detailed styling of various UI elements for the mobile version. It covers adjusting the padding and margins of achievement cards, positioning images, and modifying the layout of the hero section. The speaker also discusses changes to the testimonial section, including font size adjustments and image sizing. The paragraph concludes with the styling of the 'Our Courses' section, emphasizing the removal of padding from course cards and the correct positioning of buttons.

10:05

🔧 Final Touches for Mobile Layout

In this paragraph, the speaker focuses on the final adjustments for the mobile layout, including the 'Get Our App' and footer sections. The speaker describes how to modify the grid layout of the footer to a single column, center-align the content, and adjust the button positioning to be below the input field. Additionally, the paragraph covers styling the copyright section with appropriate margins and text alignment, ensuring a cohesive mobile user experience.

15:06

👋 Wrapping Up the Mobile Design Tutorial

The final paragraph summarizes the completion of the mobile version design, showcasing the hero section, menu button functionality, testimonials, courses, 'Get Our App' section, and footer. The speaker invites viewers to ask questions in the comments, encourages liking and subscribing for updates, and thanks the audience for watching, concluding the tutorial with a sign-off and background music.

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 using a variety of tags and attributes. In the video's context, HTML is used to convert the sigma design into a real website, providing the basic building blocks for the mobile version of the site.

💡CSS

CSS stands for Cascading Style Sheets, a language used for describing the presentation of a document written in HTML or XML. In the video, CSS is essential for designing the mobile version of the website, controlling layout, colors, and fonts to ensure the site is visually appealing and functional on smaller screens.

💡JavaScript

JavaScript is a high-level, often just-in-time compiled programming language that is commonly used for client-side web development. Although not explicitly mentioned in the script, JavaScript would typically be used alongside HTML and CSS to add interactivity to the website, such as handling events and manipulating the DOM.

💡Media Query

A media query is a CSS technique used to apply different style rules for different devices based on characteristics such as width, height, and orientation. In the script, a media query is created for a max-width of 700 pixels to ensure the website's design adapts to mobile screens.

💡Mobile Version

The mobile version of a website refers to the layout and design specifically optimized for viewing on mobile devices. The video's tutorial focuses on creating this version, adjusting elements like padding, width, and button layout to fit smaller screens as illustrated by the changes made for the 'wrapper' and 'paragraph' elements.

💡Figma

Figma is a cloud-based interface design tool and design collaboration platform. In the script, Figma is used to reference the original design of the website, with the presenter checking dimensions and padding for elements like the 'wrapper' and 'achievement cards' to ensure accuracy in the mobile design.

💡Padding

Padding in web design refers to the space between the content of an element and its border. The script describes adjusting padding for the 'wrapper' and 'mobile nav' to better fit the mobile layout, such as setting padding to 32 pixels on the left and right for the 'wrapper'.

💡Flexbox

Flexbox is a CSS layout module that makes it easier to design flexible responsive layout structures without using float or positioning. In the video, 'display: flex;' and 'flex-direction: column;' properties are used to stack buttons vertically for the mobile version, ensuring they fit the screen properly.

💡Grid

CSS Grid Layout is a two-dimensional layout system in CSS that handles both rows and columns. The script mentions changing 'grid-template-columns' from '1fr 1fr' to '1fr' for the footer to create a single column layout on mobile devices, which simplifies the layout for smaller screens.

💡Responsive Design

Responsive design is an approach to web design that makes web pages render well on different devices and screen sizes, usually by using fluid layouts, flexible images, and CSS media queries. The entire video is about creating a responsive design for a mobile version of a website, as seen with the adjustments to the layout, images, and navigation.

💡Inspect Element

Inspect Element is a feature in web browsers that allows users to view and edit the HTML, CSS, and JavaScript of a webpage live. The script describes using 'Inspect Element' to identify CSS selectors and properties like 'font-size' and 'margin-bottom' for various elements to modify them for the mobile design.

Highlights

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

Completion of the tablet version design in the previous video.

Starting the design for the mobile version with a max-width media query set at 700 pixels.

Browser testing using a mobile device selection to visualize the initial mobile layout.

Adjusting the wrapper padding to 32 pixels for the mobile version based on Figma design.

Modifying the paragraph width to 100% to fit the mobile screen.

Rearranging buttons to stack vertically for mobile screen compatibility.

Reducing the mobile navigation padding to match the Figma design specifications.

Styling the mobile menu's close button and positioning it correctly on the screen.

Adjusting the heading font size to 36 pixels as per the design mockup.

Changing the image height to 400 pixels and adjusting its position within the layout.

Styling achievement cards with appropriate font sizes and spacing.

Aligning elements in the hero section to match the mobile design mockup.

Styling section headings with a font size of 30 pixels for consistency.

Customizing testimonial card elements to fit the mobile layout.

Adjusting the courses section to remove padding and ensure full-width course cards.

Styling the footer to have a single column layout with centered content.

Final touches on button positioning and copyright text alignment in the footer.

Completion of the mobile version design with a review of all sections.

Invitation for viewers to ask doubts 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 now in the

previous video we completed the design

of the tablet version now in this video

we will design the mobile version so

let's get started

[Music]

all right here's the source code so the

first thing i'll do is i'll just create

a media query

so i'll just type at media and for the

mobile version we will have a max width

of 700 pixels so let's type 700 pixels

now whenever the screen width is less

than 700 pixels all the css that we have

over here will be added to the web page

right now let's go to our browser and uh

let's select a mobile device from here

so i'll just select pixel to excel

all right this is how the mobile version

looks right now

so the first thing we will do is we will

set a padding for the wrapper

so right now we have a padding of 100

pixels so if you scroll up and if you go

to the media query for the ipad version

here we can see for the wrapper we have

set a padding of 100 pixels for left and

right so let's scroll down and here we

will add

some padding to the wrapper so let's tap

wrapper

and let's go to our figma file

and let's see what is the padding so

if we just double click over here

and if you press alt or option you can

see that we have a padding of 32 pixels

on the left and the right so let's go

back to our

css and here let's type padding of zero

for top and bottom and 32 pixels left

and right

and now we can see we have a padding of

32 pixels now the next thing we will do

is we will reduce the width of this

paragraph

so if i click over here and click on

inspect

here we can see for the paragraph we

have set a width of 457 pixels so i'll

just remove this from here and we will

set a width of 100 percent so let's copy

this selector

and let's go back and paste it over here

and here i'll just type width of 100

and now we can see we have 100 width for

the paragraph

and now here we can see that the width

of these elements are not 100 percent of

the width of the screen

so if we scroll down we can see that we

have these two buttons over here so

these two buttons are taking up a lot of

width

so let's go back to our figma file and

if we scroll down we can see that both

the buttons are one below the other

so let's go back to our css and let's do

that so let's select these buttons so

i'll just right click over here and

click on inspect

and let's select the container division

which is app buttons so just copy the

selector

and here we can see we have added a

display of flex

so we have to set the flex direction to

column so i'll just paste it over here

and here i'll just have flex direction

column and now we can see we have the

correct width for all the elements in

our mobile version

all right now the next thing we will do

is we will reduce the padding of this

mobile nav

so for that we have a nav

with a class of mobile nav

so here we can see we have this mobile

now so let's select that

so here just type

nav dot mobile nav and i'll just set the

padding to 32 pixels

and now when we scroll down we have a

padding of 100 pixels for left and right

so let's add a padding of 32 pixels when

we scroll down as well so when we scroll

down we are adding a class called

scrolled so i'll just type nav

dot mobile nav dot scroll

and when we scroll down we will have a

padding of 8 pixels top and bottom and

32 pixels left and right

so now we can see it looks alright

now if i click on this menu icon we can

see that the menu items are displayed

over here

and we also need to have the close

button positioned over here to the right

so for the close button we have

a division of the class of close icon

and it is inside mobile menu container

so let's select this

here i'll just type

mobile menu container

close icon

and let's set the right position to 32

pixels

right now we have the close button in

the correct position

all right now the next thing we will do

is style this heading

so let's go back to our figma file

and let's go to the heading

and let's double click on this heading

and if you go to inspect

and scroll down we can see we have a

font size of 36 pixels so let's copy

this

and let's go back to our css

and i'll just select the heading so if

you go back to our browser and if you

right click over here and click on

inspect

here we can see for the heading we have

the selector hero section left h1 so

just copy this

and i'll just paste it over here

and

let's copy this

font size

and let's paste it over here

all right now the next thing we will do

is we will reduce the height of this

image

so let's right click over here on the

image and click on inspect

and for the image we have this selector

so i'll just copy this and right now the

height is set to 580 pixels

so just paste it over here

and let's try a height of 400 pixels

and i think that looks alright we'll

also move this image to the right a

little bit so the image is inside this

right division so let's select this

right division

so let's type hero section

right

and we'll type transform

translate

x

and we will set it to 40 pixels

now let's style these achievement cards

so let's go back to our figma file and

let's select this heading

and here we can see for the heading we

have a font size of 30 pixels

so let's go back

and

let's select the heading so just right

click over here and click on inspect

and let's copy this selector

and let's paste it over here

and i'll just type font size

30 pixels

and we'll also reduce the margin between

these two elements

so let's go back to our figma file

and here we can see we have a spacing of

48 pixels

so let's go back and if you right click

over here and click on inspect

and let's select this achievement card

and here we can see we have a margin

bottom of 80 pixels

so let's copy this selector and we have

to set it to 48 pixels

so i'll just paste it over here

and i'll just tap margin bottom

48 pixels

now let's go back to our figma file and

here we can see

these two achievement cards are

positioned to the left so from the left

we have a padding of 32 pixels

so let's go back and if you right click

over here on the achievement card and

click on inspect

and if we select the container division

we can see we have added a margin of 40

pixels

so let's remove that

so i'll just copy this selector

and paste it over here

and i'll just set the margin to zero

and i think we can position the image to

the right a little bit

so here in the right division i'll just

change this to let's say 80 pixels

and now we can see that the image has

moved to the right but uh here we can

see we also have this space on the right

because of the image

so what we will do is i'll just cut this

from here

and i'll just paste it over here inside

the img tag and here in the right

division i'll just type overflow hidden

and let's decrease

this a little bit let's set it to

let's say 50 pixels

and now we can move this right division

to the right

so i'll just type transform translate x

and let's start with 30 pixels

and i think that looks alright

or that's it with the hero section of

our mobile device

now let's scroll down and let's start

styling the other sections and the first

thing we will do is style these headings

so let's go back to our figma file and

let's double click on this heading and

let's go to inspect and if we scroll

down we can see for the heading we have

a font size of 30 pixels

so let's copy this

and let's go back to our css and here

i'll just type h2

because

if we go back to our html file

we can see we have h2 for all the

headings inside

the sections

so here we can see we have the h2 so

let's go back and let's set the font

size to 30 pixels

right now let's style the elements of

this testimonial card so let's go back

to our figma file and let's double click

over here and

let's see what is the font size of this

text

so if you go to inspect we can see that

we have a font size of 18 pixels

let's go back to our browser and let's

see what the font size

and we already have a font size of 18

pixels right now let's select this

heading

and for the heading we have a font size

of 18 pixels so let's go back to our

browser and let's select the heading

and for the heading we have a font size

of 24 pixels so we have to change this

to 18 pixels so let's copy this selector

and let's go back to our

css

and here i'll just paste the selector

and i'll just type font size 18 pixels

right now let's go back to our sigma

file and let's select this text

and for that we have a font size of 14

pixels let's go back to our browser and

let's copy the selector so i'll just

right click over here and click on

inspect

and let's copy this selector

and let's paste it over here

and let's set a font size of 14 pixels

right now let's go back and let's see

what's the size of this image so let's

double click over here and for the image

we have a height and a width of 100

pixels

so let's go back

and let's right click over here and

click on inspect

and here we can see we have set a height

of 120 pixels so let's copy this

selector

and let's paste it over here

and here let's type height of

100 pixels and width of 100 pixels

or that's it with the testimonial

section now let's move on to the next

section which is the our courses section

now let's go back to our figma file

and if we scroll down we can see that

for the courses section we don't have

any padding at the sides for these

course cards so let's go back to our

html and here we can see if we scroll

down we can see for the courses section

we have this section over here called

courses section and in that we have the

wrapper so what we will do is we will

remove the padding from the wrapper

inside the courses section

so let's go to style.css file and let's

select the wrapper inside the courses

section so i'll just type courses

section wrapper and i'll just set the

padding to zero

and now we can see we don't have any

padding for

the course cards now let's see what is

the height of this image so let's go

back to our figma file and let's double

click on this image and we can see we

have a height of 240 pixels so let's go

back and let's add that over here so

let's right click over here and click on

inspect

and let's copy this selector for the

image

and let's paste it over here

and here i'll just have height of 240

pixels

and the last thing we will do is we will

position this button to the right so we

will have a spacing of 32 pixels from

the right

so here we can see

from the button we have a space of 32

pixels so let's go back

and let's select this button so i'll

just right click over here and click on

inspect

and here we have the selector for the

button so i'll just copy this selector

and i'll just paste it over here

and let's set the right position to 32

pixels

and that looks alright so that's

basically with the courses section of

our mobile version

now scroll down and we already styled

the get our app section so let's scroll

down and let's style the footer now if

you go back to our figma file we can see

that for the footer we have just one

column

and everything is aligned to the center

so let's go back to our

browser and let's right click over here

and click on inspect

and if you go inside the footer we can

see we have a division with the class of

links container and for that we have set

a display of grid and

if we scroll down we can see that we are

adding grid template columns of 1fr 1fr

which means that there will be two

columns so let's change this to one fr

so it will just have one column so i'll

just copy this selector

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

just paste it over here and here i'll

just type grid template columns

and set it to one fr

and now we can see we still have two

columns over here that's because uh for

the third column we have spanned it for

two columns so if you right click over

here and click on inspect and select

this third links

and here we can see we have set grid

columns to one forward slash three which

means that it will span for two columns

so we have to change this to one forward

slash two

so let's copy this selector

and let's paste it over here

and here let's type grid column

and one forward slash two

and now we can see we just have one

column

right now let's also center align

everything so here in the links

container i'll just type text align and

set it to center

we'll also remove the padding that we

have for the ul so if i click over here

and click on inspect

and

if we select the ul and if we scroll

down we can see that we have some

padding over here on the left

so let's remove the padding so here i'll

just have footer ul and let's set the

padding to zero and we'll also add some

gap between these links so here i'll

just type gap and set it to 40 pixels

and that looks all right

right now let's style this button so

let's go back to our figma file and here

we can see we have the button at the

bottom of the input field

so let's go back to our browser and

let's right click over here on the

button and

click on inspect

and if we scroll up we can see that

these are the styles for the button

and we have set the right position to

five and top position to 50 so that's

why the button is over here on the right

so let's copy this selector

and let's go back over here to css and i

just pasted it over here

and let's set the top position to 130

percent

so it will be below the input field and

we'll also bring it to the center so

let's type left and i'll just set it to

50

and now we can see it starts from the 50

mark so we have to type transform

translate x and negative 50

and now we can see that the button is

positioned correctly right now the last

thing we will do is we'll style this

copyright division so if we go back to

our index.html file here we can see we

have this paragraph with the class of

copyright so let's select this so here

i'll just type

footer copyright

and we will have some margin top so

let's type margin top

and we'll set the margin top to

80 pixels and we'll also text align it

to the center

and that looks alright so with that we

have completed the design of the mobile

version here we can see we have the hero

section and we also have this menu

button over here and if i click on that

we can see that the menu items are

displayed over here and if i click on

this close button it goes back and let's

scroll down and here we have the

testimonials section and let's scroll

down we have the courses section

and then we have the get our app section

and then we have the footer so

everything is looking all right all

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

you