Skip to content
Submitted about 2 months ago

Omelette Recipe design

Ajaya-Rajbhandari•130
@Ajaya-Rajbhandari
Preview site (opens in new tab)View code (opens in new tab)
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?

I want to have different file created for css and html. I want to learn to use Styled Component CSS.

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

I found it difficult to arrange the table head vertically and data as well changing the color of the bullet. I used the help of w3schools.com and VS code BlackBoxAi to understand the concept.

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

I have use same code repeatedly in css. for example changing the color, font-size of the element in each element css.

Community feedback

  • Teodor Jenkler•3,740
    @TedJenklerPosted about 2 months ago

    Hi @Ajaya-Rajbhandari,

    Nice project! Here are a few suggestions to improve it:

    I noticed that the site isn’t fully responsive and overflows on mobile. This might be because you didn’t start with a mobile-first approach, which is the recommended and modern way to develop websites. It’s best to build your site for a 375px viewport first, and then use media queries to enhance responsiveness for larger screens. This approach often simplifies the code and improves responsiveness.

    I also observed that the structure of your HTML could be improved. The <main> tag should wrap all the important content on the page. Additionally, <section> elements need either a title, aria-label, or aria-describedby to function as landmarks and enhance semantics. I recommend revisiting the semantic structure of your code and reducing the number of <div>s where possible.

    Using a <footer> element would be more appropriate than a <div> for the footer section. Additionally, consider utilizing Flexbox to reduce the number of <div>s by employing flex-column where needed. This will help streamline your layout and make the code cleaner.

    Keep up the great work!

    Best, Teodor

    Marked as helpful
    0
  • Soniawan•100
    @soniawanPosted about 2 months ago

    Congratulations on completing the challenge.

    I have a little suggestion: the list of items should be aligned with the title so that it is more similar to the design. Sorry, my English is bad.

    Marked as helpful
    0
    Ajaya-Rajbhandari•130
    @Ajaya-RajbhandariPosted about 2 months ago

    @soniawan Thank your for the review, i was unaware of that and can you help me with the responsive design?

    0

Please log in to post a comment

Log in with GitHub

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