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

Responsive Landing Page using CSS Grid

@sayjess

Desktop design screenshot for the Agency landing page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

Design comparison


SolutionDesign

Solution retrospective


  1. What methods do you usually use for your page to be responsive?
  2. Best practices in coding?
  3. How do you make your files organize?

Community feedback

Yemisrach 1,430

@Yemisrach15

Posted

Hey Jess, I use the mobile-first approach to make a page responsive meaning I first work out the css for mobile version then use media queries to adapt for desktop. Your second question is broad but a general one would be DRY (don't repeat yourself) so you should reuse as much as possible. Third, there's no one way to organize, whatever works for you is okay I guess. But if you search for your specific tech (eg. sass/scss), you might find some widely used project architectures. Here are some suggestions on your solution.

  • Check it on table size viewport (768px). The text is tightly packed.
  • Provide an alt text for the images.
  • Social media icons would better be buttons or links.
  • Take a look at the accessibility and html issues report on your solution

Looks good and responsive overall, well done :)

Marked as helpful

0

@sayjess

Posted

@Yemisrach15 thank you for your feedback! I'll take not of your suggestion. ☺️

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