Mobile First Web Design Tutorial

Mobile First Web Design Tutorial.

In this example, we develop a website using mobile first strategy and take a look and creating this cool UI design by Hachibur Rahman. We used HTML and CSS to create the mobile website design by creating a baseline phone outline, and using flexbox to create and import all the elements over from Figma.

Website designs are often done for the desktop first, but these days more people use mobile web apps and sites. I thought it would be useful to show what the development of web design for mobile-first would look like. It can feel a little backwards, as the next stage would be to have media queries for responsive design going back to the desktop, and this is something we might check out in another video.

I hope this gave you a good idea of what the mobile design first website development can look like.

You can download the figma file for this mobile design here:

Design for Developers - Enhance UI
A book I've created to help you improve the look of your apps and websites.

#mobilefirst #webdesign #adriantwarog

Hachibur Rahman:

Follow and support me:

[AdrianTwarog]

I am trying to grow my channel, so if you find this video useful, #subscribe & hitting the #bell :) Thanks for watching and hope you liked and learnt something new!

[hachib_design]

Really amazing tutorial, you are very much skilled and doing all the things faster. Keep it up and I hope we will more work together.

[zoltanskultety]

Hello Adrian, I learnd a lot from this video, will you return to this project in the future? I would like to see the next steps making it scale for desktops etc.

[gwolojulius]

Great video. I was looking forward to see you extending from mobile design to desktop design in one video

[cjtay]

27:01 your other video ads appeared and blocking the view...not able to see what happens when you removed the width and height for the section. I was curious how do we achieve the main hero image to be slightly shifted up at the same level as the hamburger menu (similar to what was shown in the figma)..the menu icon was occupying the whole row.

[sonvu]

This is a lot for me to learn as a beginner

[LondonATL]

If you keep going with stuff like this, you'll blow up. Can we have one on html/CSS/JS to CMS? Maybe do it as a series? So over time, maybe a month?
You did that wordpress a month ago and that was good.

[Matisantillandev]

Great tutorial man! Maybe for the next time you can use flex-wrap: wrap to the sections “buttons” and not create two sections with the same elements.
Flex-wrap send the elements down if elements is overflowing. Keep sharing content and happy coding bro!! 💪🏼

[afzalmahmud]

I am from Bangldesh. I love you .This one inspire me.Thank you,

[hlwanhtetnaing]

Can u show me how to open Hachibur Rahman's files to figma

[joroh_]

Great Video.
I always wonder Why Mobile First ? why we don't start with a desktop then mobile ?

[Imranhossain-rksy]

Thanks for sharing.
#introduction_web_design_q

[christophershangrei]

This tutorial is blessing for me thank u 👍👍👍👍👍

[creptonice]

The link for download isn't working, could u update it?!

[jgvlc]

Thank you very much for sharing your knowledge, would it be possible to share the code? I wish you a nice day.

[SonGoku-pcjl]

thanks, i learn with you with translator catalan of youtube :)

[justcats]

Why cant i use class inside header.. :(

[vartikagupta]

Could you provide the Figma file so we can follow along with you, cauz this one in des. isn't working !! thanks !!

[Tayu]

At about 8:20 you have nested the menu in the header. Also, around 11:02 you nest the hover for the section. Why is this and how do you do it? Is this Sass?

[dgys]

can you share the figma file link again? it's broken