Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
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
Not Found

Submitted

Responsive Recipe Page

Tony 30

@antonpetrov145

Desktop design screenshot for the Recipe 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?

Actually all of it, never started learning html and css tre right way and never finished a challenge here.

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

  • image placement and size -> solution was to have a wrapper div;
  • style lists to be under the headings -> list-style: inside;
  • style list numbers -> .instructions ul li::marker
  • use local fonts;
  • even centering the .container div is huge accomplishement for me;

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

  • when the screen is smaller I can't add margin to the .container div and it stays stick to top and bottom of the browser window, tried with position change (relative->absolute) but it messes the whole page
  • the line is not like in the design - my is shorter

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