Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Request path contains unescaped characters
Request path contains unescaped characters
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

P
Alejandra 10

@a-lebel

Desktop design screenshot for the Equalizer landing page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


What are you most proud of, and what would you do differently next time?

What I learned

Throughout this project, I deepened my understanding of responsive design, particularly how to manage overlapping elements effectively. One of the more challenging aspects was ensuring that phone image and the price card would overlap in smaller devices, and the go full bleed in mobile.

In future projects, I plan to focus on:

  • Advanced CSS Layouts: Further refining my skills with CSS Grid and Flexbox to handle more complex layouts.
  • Accessibility: Ensuring my projects are accessible to users with disabilities by following ARIA guidelines and improving keyboard navigation. JavaScript Interactivity: Adding more dynamic elements using vanilla JavaScript or frameworks like React.

What challenges did you encounter, and how did you overcome them?

I found it difficult to overlap the elements as the screen size went down. I had to look it up and after many tries, I think I got it close to the solution.

What specific areas of your project would you like help with?

Mostly with the overlapping of elements. I find it hard to control it exactly so it matches the original design.

Community feedback

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