for some reason, the "1' in the <ol> isn't the same of other "1" in the page, why ? i don't know, maybe it is an imposed style from html ?
i don't see an aera where i should need help but any critisism is welcome, it's difficult to see the flaws in your work
I think it could be good to have some designer tips about sizing elements for them to be pleasing to the eye, i can feel that it is not perfect, it is good but something feels off
I got really stuck, because the default image was too small and I had forgotten about the larger one. Once I had remembered there are two imgs to use and used a srcset, It cleared up 95% of the issues I had.
What specific areas of your project would you like help with?For the life of me, I can't figure out how to proportionally enlarge the height of the #info-container to fill the height of the parent.
Okay that is a great job ! well done
i looked a little bit for the height of the #info-container
there is some conflict because of
styles.css line 2
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 14px;
font-family: var(--primary-font);
}
remove the mardin:0 and padding:0 and height 100% should work now
well done again !
I use the languages like the html,css and bootstrap
Hi, well done ! it is a good first step but there is a lot to be done if you want to achieve a better representation of the design
here's what i saw (i may be wrong of course) :
From a code perspective your html need some tweaking :
<h4 class="mt-2 ms-3">Simple Omelette Recipe</h4>
you choose a <h4> but it is supposed to be the most important title of the page (because it is the name of the list) so a <h1> should be here
this extends to the other titles where the choices of title is a little bit unstructured
i supposed you choose your title based on their look but it is a mistake, you should choose title by order of importance in a page for people who use software to navigate from title to title
So you should have 1 h1 for the recipe name, then h2 for the rest
at line 45 we have this
<h2 class="text-danger ms-4">Instructions</h2>
<p class="ms-4">1 <b>Beat the eggs:</b> In a bowl, beat the eggs with a pinch of salt and pepper until they are<br> well mixed.
You can add a tablespoon of water or milk for a fluffier texture.</p>
<p class="ms-4">2 <b>Heat the pan:</b> Place a non-stick frying pan over medium heat and add butter or oil.</p>
<p class="ms-4">3 <b>Cook the omelette:</b> Once the butter is melted and bubbling, pour in the eggs. Tilt the<br> pan to ensure
the eggs evenly coat the surface.</p>
<p class="ms-4">4 <b>Add fillings (optional):</b> When the eggs begin to set at the edges but are still slightly<br> runny in the
middle, sprinkle your chosen fillings over one half of the omelette.</p>
<p class="ms-4">5 <b>Fold and serve:</b> As the omelette continues to cook, carefully lift one edge and fold it<br> over the
fillings. Let it cook for another minute, then slide it onto a plate.</p>
<p class="ms-4">6 <b>Enjoy:</b> Serve hot, with additional salt and pepper if needed.</p>
<h4 class="text-danger ms-4"> Nutrition</h4>
<p class="ms-4">The table below shows nutritional values per serving without the additional fillings.</p>
<p class="p1">Calories<span class="word">277kcal</span></p>
<div class="line"></div>
<p class="p2">Carbs<span class="word">0g</span></p>
<div class="line"></div>
<p class="p3">Protein<span class="word">20g</span></p>
<div class="line"></div>
<p class="p4">Fat<span class="word">22g</span></p>
You choose to have a succession of paragraph, it should be a list, but an Ordered list, <ol>, then you won't have to add numbers manually and it makes more sense
it is also a succession of <p> while you can use a table
at line 66
<div class="attribution">
Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
Coded by <a href="#">Your Name Here</a>.
</div>
You choose to keep the attribution but forgot to fill it :)
and last but not least important, it is not responsive (by the time i write this) and in this design the mobile version is a little bit different
i think i covered everything i see, of course i may be wrong on something so if anyone want to correct me or add some precisions, be my guest
Well, good luck on finishing the project, you can do it !
Sizing is pretty good ! it is responsive, well done !
However your main border differs from the original design, i don't know if it's a choice or just something you forgot, there should be no visible borders and the corner should be rounded,of course if it is a personal choice well don't change anything
I also noticed that your list of links is just a plain list of text so no one can "click" on anything or navigate with the keyboard, consider adding some <a> to make the design "usable", and we should also have a hover effect on those said link
Otherwise the rest is very well done !
Perfect, code is clear and the visual is exactly what was expected, well done !
