recipe page

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 2 months ago

  Congratulations on completing this challenge. Your desktop version is looking good so far. I do have a few suggestions.

  First, I noticed you have styles in three different places: inline styles, internal styles, and an external stylesheet. This makes your page harder to maintain or to fix any problems. Best practice is to put all your styles in the external stylesheet. That said, bgcolor="black" is not a thing. In this case, the browser can't quite figure out what you want, and renders "peach" as medium green and "light-blue" as dark blue, which makes it impossible to read the stats in the table. The correct inline style is <tr style="background-color: lightblue"> Note that lightblue has no hyphen. Also, there is no "peach"; closest would be peachpuff. You can find a list of color names here Or just use one of the color codes: rgb, hsl, hexadecimal.

  Also, the instructions are supposed to be bolded. This can be done using the <strong> tag around the words to be bolded <strong>Cook the omelette:</strong>

  Your recipe is not centered on the page. On my desktop, it is off to the left a bit. This is because you tried to center the recipe using margin-left: 500px Not only is it not centered, but the page is not responsive, and the recipe disappears if the screen shrinks. You can fix this by adding display: flex; min-height: 100vh; to the body tag.

  Last but not least, the lists don't look right; the makers overflow their spaces. You can fix this by setting the list-style: inside on the ul and ol.

  Hope this helps.

  Marked as helpful

  0

  ---

  

  SpeedyRicky•80

  @SpeedyRickyPosted about 2 months ago

  thank you very much for the help but can i ask a question ? what do you mean by the makers overflow their spaces and what is list-style?@beowulf1958

  0

  

  P

  beowulf1958•1,450

  @beowulf1958Posted about 2 months ago

  @SpeedyRicky Take a look at "second_section". The dots in front of the list items are called markers, and they are in the white space outside of the pink area ("the markers overfow their space"). In the design jpg, the markers line up with their labels. This is accomplished by a css property. Try adding this to the css file

  li {
      list-style-position: inside;
  }
  

  This article explains it all.

  Marked as helpful

  0

  

  SpeedyRicky•80

  @SpeedyRickyPosted about 2 months ago

  @beowulf1958 thank you so much for the help I recently just changed it and thanks for also pointing what markers means and thanks for help me again

  0