Mobile first Responsive

Hi, I want to understand how to create Mobile first.
I don’t know if I understand how to make mobile first.
I think at the beggining I should make simple verticall layout and ok It’s not hard yet.
But What should I do later.
Should I make media query like@media(min-width:500px) ?
And later should I put whole code into that media?

Could you explain it or give me a link to good article about it
I’ve seen only articles like what is this but I haven’t seen how does it look like

Start with your browser as narrow as it will go and style your page so it looks good there. This is your default CSS. Then slowly widen your browser until you come to a point where you can safely rearrange elements on your page for a wider viewport. This will be your first media query break point. Yes, you will use min-width because you don’t want the styling for the wider viewport to start until the viewport is at least a certain width.

Repeat this process as much as you feel is needed. You may only have one media query breakpoint or you may have several. It really depends on the content.

One thing I would recommend is that you consider basing your break points on ‘em’ instead of ‘px’. This allows for changes in text size.

So Is it normal that code in media query is so long?

It depends on your content and the methods you are using to arrange the elements on your page.