Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

HTML, CSS, and Javascript Implementation

P

@Coder-IsiahJones

Desktop design screenshot for the Pod request access landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What's the best practice approach for developing different device resolutions? I tend to like the desktop-first approach but have trouble sometimes converting over to smaller resolutions in CSS. I want every screen resolution size responsive to my liking. I usually use Boostrap so it takes care of it but my CSS skills with media queries are not there yet and it seems more time-consuming. Any tips and tricks with documentation would be great!

Community feedback

Chris 740

@chrisbailey85

Posted

I was always doing desktop first and then adjusting it to smaller screens. I switched to do a mobile first a little while ago, I have found it's a lot easier but it does take getting used to.

I found the navbar switch over the most difficult part but I learned about CSS property called "all" the other day. You can set it to unset which removes all the the CSS properties that you've applied, which made it a lot easier for and navbar at least.

0

P

@Coder-IsiahJones

Posted

@chrisbailey85 Yes, that makes sense. I found out about the unset property yesterday. I have been too reliant on bootstrap's built-in responsiveness. I really need to dive in and learn the possibilities with CSS.

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord