Cellular First Internet Design Tutorial.
On this instance, we develop a web site utilizing cellular first technique and have a look and creating this cool UI design by Hachibur Rahman. We used HTML and CSS to create the cellular web site design by making a baseline telephone define, and utilizing flexbox to create and import all the weather over from Figma.
Web site designs are sometimes achieved for the desktop first, however lately extra individuals use cellular net apps and websites. I assumed it will be helpful to point out what the event of net design for mobile-first would seem like. It might probably really feel a bit of backwards, as the subsequent stage can be to have media queries for responsive design going again to the desktop, and that is one thing we would try in one other video.
I hope this gave you a good suggestion of what the cellular design first web site improvement can seem like.
This video is a part of @Florin Pop #7Days7Websites problem. That is Day 2. You may study extra on his current put up on dev.to:
https://dev.to/florinpop17/the-7days7websites-coding-challenge-3o3g
You may obtain the figma file for this cellular design right here:
https://adriantwarog.com/wp-content/uploads/2020/04/mobile-first-design-hachibar-adrian-twraog.fig
Design for Builders – Improve UI
A guide I’ve created that can assist you enhance the look of your apps and web sites.
📘 Improve UI: https://www.enhanceui.com/
#mobilefirst #webdesign #adriantwarog
Hachibur Rahman:
https://dribbble.com/Hachib
Observe and help me:
🐦 Twitter: https://twitter.com/twarogadrian
💬 Discord: https://discord.gg/nGdThpE
💸 Patreon: https://www.patreon.com/adriantwarog
🖥️ Dev.to: https://dev.to/adriantwarog
source
thanks you
thanks, i learn with you with translator catalan of youtube 🙂
Did anyone get it to work? If so, would you mind posting the code? I can't find a bug. Thanks!
Great. Hello from Brazil
#MobileFirst
Could you provide the Figma file so we can follow along with you, cauz this one in des. isn't working !! thanks !!
sehr professionell
Dankeschön
when i placed the menu class code in css I got an error, is it supposed to be nested like you did it?
Good tutorial. Well explained
I am from Bangldesh. I love you .This one inspire me.Thank you,
yo Bangladesh 🔥🇧🇩
source code
This is web development, not web design
No gay but, love you
Why cant i use class inside header.. 🙁
A burger menu isn't mobile first.
greatt
This tutorial is blessing for me thank u 👍👍👍👍👍
Hi the images i added are not next to each other but one below the other. I just followed your code. what could be the reason? Need help.
Love from bangladesh
can we get the css code?
Thank you very much for sharing your knowledge, would it be possible to share the code? I wish you a nice day.
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.
This is a lot for me to learn as a beginner
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?
warning: this is not a tutorial
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.
Great tuto i love your voice lol