Frontend Mentor | Music app Summary page coding challenge solution

Solution retrospective

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

I was able to fulfill the main part of the code without too much issue

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

I couldn't figure out how to add the background image properly so that it fitted on the page

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

I would like some guidance on how to properly place an svg image as a background of the code without it affecting the entire code

Community feedback

Denisse Joyce• 220

@denissejoyce

Posted about 2 months ago

Hi deezjason, good job on completing the challenge 🎉

To address your question about the background image, the issue here is that you didn't actually set the pattern background image as your page's background. Instead of creating a separate div for it, you can set it as your body's background. Check out this resource to learn more ☺️

Other quick feedback —

You should practice incorporating HTML landmarks (main, footer) in your code to make sure that your webpage is accessible; check out this resource for HTML landmarks
You are using a lot of divs in this solution — it is good practice to use the appropriate semantic HTML tags instead (note that div tags do not convey any meaning about the content that's inside of it)
Practice using responsive units for your CSS properties instead of using px for everything

I hope you found these feedback to be helpful! There are more HTML and CSS best practices that I'm sure you'll learn as you do more challenges — happy coding!

Marked as helpful

Music app Summary page

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community