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

Recipe Page Made with HTML and CSS (lists, tables)

@Jsnowoliv1420

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?

Esta vez seguí al pie de la letra el diseño (al menos en móvil) y me quedo más parecida, me gustó mucho como quedó mi página.

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

El colocarle el color a las listas y colocarle la negrita

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

En el diseño responsivo

Community feedback

P
beowulf1958 1,170

@beowulf1958

Posted

Congratulations on completing this challenge.

There are a few issues with the code. First, the html will not validate. The reason it will not validate is because of the <img /> tag in line 22; all image tags must have an alt attribute. The content of the alt is your explanation of what the image is. For example:

<img src="image-omelette.jpeg" alt="omelette and toast on a plate">

Second, the CSS contains an invalid statement in line 46; there is no such rule as "space-between: 5px; "

Third the image does not look right. Fourth, the content should all sit in the middle of the page. These two issues are related; fixing one helps with the other. To fix the image problem, replace your <img /> styles with the following. Then add two new lines to the class ".contenedor"

  .contenedor{
    width: 30 rem;
    margin: 0 auto;
    border-radius: 5px;
    background-color:hsl(0, 0%, 100%) ;
  }
  img{
    border-radius:5px;
    display: block;
    width: 100%;
    }

After doing this, you should see a big improvement in how the page looks. Hope this helps.

Marked as helpful

1

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