DEV Community

Cover image for Mobile First Web Design Tutorial
Adrian Twarog
Adrian Twarog

Posted on

14 4

Mobile First Web Design Tutorial

Creating for the mobile device is not something I often do. While the vast majority of websites these days are viewed on the mobile phone, most often they are designed for the web first.

In this video, I decided to take a different approach and actually create the mobile version first.

https://youtu.be/NeThtWARdnY

What I go over in this video includes:
  • Using Figma to export components for the mobile design
  • Developing mobile-first basic HTML
  • Styling the design using CSS and SCSS

The design was originally created by Hachibur Rahman, his profile can be found below:
https://dribbble.com/Hachib

This is part of Florin Pops recent #7Days7Websites. You can find out more about it here:
https://dev.to/florinpop17/the-7days7websites-coding-challenge-3o3g

Follow and support me:

Special thanks if you subscribe to my channel :)

Want to see more:

I will try to post new great content every day. Here are the latest items:

Tiugo image

Modular, Fast, and Built for Developers

CKEditor 5 gives you full control over your editing experience. A modular architecture means you get high performance, fewer re-renders and a setup that scales with your needs.

Start now

Top comments (0)

Jetbrains image

Build Secure, Ship Fast

Discover best practices to secure CI/CD without slowing down your pipeline.

Read more

πŸ‘‹ Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay