Skip to content
Submitted 4 months ago

Music app Summary page

deezjason•20
@deezjason
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

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
    @denissejoycePosted 4 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
    1

Please log in to post a comment

Log in with GitHub

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