Submitted 9 months ago

Omelette Recipe struggles

Malibongwe•210

@Mali-bee

Preview site View code

This is a solution for...Recipe page

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

Not gonna lie, I lowkey struggled with this task hey. I ended up taking waaaay longer than expected doing this. Even in the end there was one thing I was struggling with down by the Nutrition section.

But I don't wanna spend to much time on this so I closed it for now. I know I'll be back and edit it proper at a later stage.

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

Firstly was the challenge of styling the list tags, it was something of a challenge that I did eventually overcome (thank you W3 Schools, lol).

Another great challenge was deciding how to lay out the Nutritional information. I was for a table look, I thinking of putting everything inside a and hiding the borders... uhh yea, so much for that.

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

Making and styling tables

Community feedback

roguemacaroon•40
@roguemacaroonPosted 9 months ago
Hello! I am a newbie too, and also had a rough time with the nutrition section. Take my advice with a grain of salt, because I am a junior, (you are welcome to have a look at my solution too, but my design is a little off) while CSS flexbox is a major component of matching design, the biggest goal behind this exercise was to practice semantics. When you are ready to come back to this exercise, lead with semantics first.

Good job and good luck on future projects!
0
Malibongwe•210
@Mali-beePosted 9 months ago
@roguemacaroon sorry for being dumb, but what do you mean by "semantics"? Mind clarifying?
0
roguemacaroon•40
@roguemacaroonPosted 9 months ago
@Mali-billz Absolutely! Semantics are HTML tags that detail exactly what the tag contains.

Example: things like <header> <main> <article> <footer> are semantic tags.

Tags like <div> and <span> are content holders, but don't have an indication of what their roles are, or what content they contain.

There is a good article here about it and a great image that shows the difference between semantic and non semantics tags. https://www.semrush.com/blog/semantic-html5-guide/
1

Please log in to post a comment

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