Mobile first concept

i hope this is the right place…

mobile first concept i get… start small, grow to larger sizes

also mobile first helps decipher what is most relevant give the small real estate

any tips on actually getting into my text editor and start coding mobile first?

are there samples out here? some you tubes i did not find helpful

i think css grid would be a good idea

especially grid template areas

that way i have control over what goes where and size… mobile first 1 column, css grid more than 1 column?

in my text editor do i code like i would any size THEN use media queries?

no media query for the mobile first code, then media queries for tablet, laptop, desktop etc.

anything else i should know?

THANK YOU FOR YOUR HELP!!

Look into figma. I really love it for designing sketches of what I’m going to design in css. Having a sketch gives you a lot more focus as to what css is needed and let’s you see what works and what doesn’t visually. (They have a lot of tutorials on how to make mobile sketches).

If you design it mobile first your queries can scale up. Remember to use your inspect element on your browser to see how it looks like in phone view (and don’t neglect that rotation view, it can often break otherwise ok looking sites).

And good luck :slight_smile:

Thank you!

i found figma, though (to me) doesn’t help

so i go back to my original post… how do i code for mobile first?

i understand its a concept… i am having trouble putting mobile first concept into mobile first code

you could say “its just code” but i still don’t get it

is there a specific method?

is it simply a style of coding small and then add more per media query?

where can i see (video?) coding small and then add more per media query?

especially the use of media queries

i do get the concept of media queries

a thorough explanation would be golden to me!

again, use CSS Grid? grid template areas?

you can read i am a bit confused

MANY THANKS!!

so i go back to my original post… how do i code for mobile first?

So you might be aware there’s an inspect element option in the browser, and if you check through the buttons, there’s a button to simulate the browser in a phone view (it even gives you a range of phone models to pick from).

You could start by having your initial layout scheme layed out with dummy content (fake picture, fake text) and see how it looks there. You want will want to use a border outline (not just plain border at least to make sense of how the containers are playing with each other.

Once you see it like this, it’s really just a matter of vertically designing it.

Here’s an exercise that might help you think about it.
Look at a famous news website. How do they style elements in phone view vs browser mode?

We’d imagine there’s “article” elements. In a phone they should probably be flat thin rectangles mainly conveying the article name, and at best a small picture. This thin rectangle takes up 100% of the screen width. You would style it so that they stack like a building. The main css (outside the media query) would aim for that.

Now, if you just have a full monitor screen full of flat little rectangles stacked it wouldn’t work. Here’s where you use the media query and you tell these elements to be bigger boxes (maybe more variety in the size of rectangles to allow for interesting aesthetic etc).

Now, figma might not be your thing, but I’d still recommend to draw this out. It will give your css more focus on what it aims to do. Again, it’s a suggestion from personally struggling to adjust complicated designs from the css alone (and watching other people squander time like that).


Try to see if you can classify the page elements here so that you have css that targets all these things. The better one gets at doing this the easier it is to manipulate the styles later.

MUCH better!!

the idea from starting flat thin rectangles and and stack them like a building appeals to mewith th

again, a full monitor

better!!

the idea from starting flat thin rectangles and and stack them like a building appeals to me

great visual to get me started on mobile first

again, a full monitor this will be wonky

“bigger boxes” with media queries caught my eye

how can i use media queries for bigger boxes?

kindly pass a codepen to me?’

i did get through media queries here at codecademy

is CSS Grid or grid template areas a bad idea for coding larger screens?

just media queries?

need a little help here : )

please clarify, give an example of “vertically designing” i kind of get this, but not completely

yes, i am signing up for figma!

i will keep an open mind.

seriously, i thank you!

do i owe you a $0.25 now?

do i owe you a $0.25 now?

No I’m just another student on these forums haha. It’s all in the spirit of sharing.

vertically designing

That was basically what the flat thin boxes were.

is CSS Grid or grid template areas a bad idea for coding larger screens?

just media queries?

I like to personally use flexbox. You could do grid but I can’t give you specifics since I don’t use grid often.

“bigger boxes” with media queries caught my eye
how can i use media queries for bigger boxes?

Yea so like in the full screen view example of bbc, I’d divide that into two main containers LEFT and RIGHT. The right one would house 4 little boxes in a grid, the left one would just house one big box.

Thanks again!

i gave it some thought, i think grid template areas will work well here

i am working on the preliminary steps for site… i hope to use what you recommended for my mobile first coding

i would like to share my mobile first code with you…

BTW if at all interested, look into CSS Grid and specifically grid template areas

they make layout SO much more simple and organized

i hope to post here soon!

thanks again!!