I have used VS code editor to make this sample webpage.

Community feedback

• 

  Farid_Danilo•140

  @FaridDanilo

  Posted about 1 month ago

  I see in your HTML structure that you have several spelling errors:

  (You must correct these words):

  An esy and quick dish → An easy and quick dish

  perfect fir any meal → perfect for any meal

  Tis classis omelette → This classic omelette

  cheese → cheese

  begetables → vegetables

  Approximately 10 minutes → Approximately 10 minutes

  Beat the eggs → Beat the eggs

  teblespoon of water → tablespoon of water

  fluffy texture → fluffy texture

  bubbing → bubbling

  Cook the omlette → Cook the omelette

  sprinklel ypur chosen filling → sprinkle your chosen filling

  another minute → another minute

  Repeated use of the "<h1>" tag:

  <h1>Simple Omelette Recipe</h1> <h1>Preparation time</h1>

  Use only one "<h1>" tag per page; the second should be "<h2>".

  Incorrect use of "<div id="table">" as a nutrition table:

  You did it like this:

  <div id="table"> Calories 277kcal <hr> Carbs 0g <hr> Protein 20g <hr> Fat 22g </div>

  It should be structured like a real table, so use the "<table>" tag, which helps achieve the expected result, like this:

  <table> <tbody> <tr> <td>Calories</td> <td>277 kcal</td> </tr> <tr> <td>Carbs</td> <td>0g</td> </tr> <tr> <td>Protein</td> <td>20g</td> </tr> <tr> <td>Fat</td> <td>22 g</td> </tr> </tbody> </table>

  Unnecessary use of "<br>". You can remove it if you use CSS margins or "<p>" tags to separate them.

  Style.css:

  The font is not defined correctly:

  • { font-family: 'Young Serif'; }

  You must import the font, otherwise it won't be applied:

  @import url('https://fonts.googleapis.com/css2?family=Young+Serif&display=swap');

  • { font-family: 'Young Serif', serif; }

  word-spacing: 200px; in #table:

  #table { word-spacing: 200px; }

  I've seen that this separates words too much, so it's not ideal for displaying data. I recommend, as I said before, using the "<table>" tag correctly.

  Here you're calling the "flex-direction: column;" property, but it won't work if you don't have "display: flex;"

  #table { flex-direction: column; }

  Unnecessary repetition of h2, h3, h4 rules:

  #main h1{ color: rgb(128, 62, 132); font-size: 15px; }

  h2{ font-size: 15px; color: rgb(124, 62, 36); } h3{ font-size: 15px; color: rgb(124, 62, 36); } h4{ font-size: 15px; color: rgb(124, 62, 36); }

  Instead of writing them separately, simplify it like this:

  h2, h3, h4 { font-size: 15px; color: rgb(124, 62, 36); }

  I see you're using font-family: 'Arial'; directly on several elements like "#main, #font, and #table."

  You should simply define it in the body to apply the font, since you don't need to repeat it on multiple elements:

  @import url('https://fonts.googleapis.com/css2 family=Young+Serif&display=swap');

  body { font-family: 'Young Serif', serif; }

  01

  Marked as helpful