Turning a design from desktop only to mobile friendly

After talking a lot about making websites responsive, and specifically about mobile-first, I take my desktop only mars weather app and make it responsive. Despite writing it for large screens first, I still kept my code mobile-first in while making the changes.

Part 4: The 'previous weather' section (this video)

/// The Github Repo

/// The Figma design

--

Come hang out with other dev's in my Discord Community

---

Keep up to date with everything I'm up to

---

Help support my channel

---



---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[andreslinares]

I have learned so much from you that I cannot even express it. I really like seeing you on the video the whole time as I feel more connected with the content you are imparting. Thanks!

[c__beck]

I prefer seeing the person, it makes it more personal instead of just seeing your screen.

[sashatv]

It's always better to see you then otherwise, Kevin! And purple is really nice as background.

[ApurvKhare]

I was wondering why didn't you make it responsive a few days ago and here you are making it responsive. Thanks !!

[rujor]

I prefer keeping you in the shot too. It makes it easier to understand whats going on when the keying, or mouse movements, stops occasionally. Like; is it because you are transitioning into an explanation, thinking about how to phrase something, or whatever. 🙂

[IvanildoSilvestredaSNeto]

Here in Brazil we've a meme that says something like "I consider him as a father figure" and is very funny, but learning so much with Kevin makes this sentence so true. lol Tkx KP, love to see you in camera too. I feel like you are really talking to me and you are so adorable.

[avivwachman]

A video called “When to prune cedar hedges” is in the playlist

[Smackindaface]

Definitely prefer seeing the teacher, great content also, I learned react from you :)

[RandyGregory]

Thank you and looking forward to this.

[nerdophile]

About that temperature toggle is it wise to create another toggle adjacent to the temperature and using media query and making it display none. So you don't have to do position absolute and stick it to the top. Just asking a doubt.

[gailoleaga]

kevin, I like you in the picture. What program are you using to edit your website?

[dzenetahajdarpasic]

Yeah, I am more likely to stick to the video if you are there <3 Only screen and no person makes me get bored much quicker :)

[progressisbeautiful]

I am doing:
iPhone
iPad
iPad Pro
iMac 13”
Then 1600px
and so on for media queries.
I wonder is it a good way, because it is more work?
Or is there a better way?

[jeffalves]

And that is a priceless content!
<h1> thank you very much </h1>

[kylekumar]

Hey Kevin! I am wondering if you can help here.... I am getting an error "uncaught (in promise) cannot read property of 'av' of undefined.
Even when I fully downloaded the working project files, this error still occurs!

[cv]

If you don't have access to the design, take a screenshot and backup the code before you are changing the layout

[sampson]

Yes, I prefer that I can see your face while you are talking.

[DinarAndFriends]

Unfortunately vh breaks in 1/3 of browsers (as of 2020). Can you do another video which doesn't use this?

[airbus]

you should try flutter web (no more Css js and html)
just uses one language Dart