Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 11
Summary
TLDRThis 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
📱 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.
🎨 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.
🔧 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.
👋 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.
Mindmap
Keywords
💡HTML
💡CSS
💡JavaScript
💡Media Query
💡Mobile Version
💡Figma
💡Padding
💡Flexbox
💡Grid
💡Responsive Design
💡Inspect Element
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
Weitere ähnliche Videos ansehen
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 9
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 3
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 8
Figma To Real Website | Responsive Homepage | HTML, CSS & JavaScript | Part 5
5.0 / 5 (0 votes)