Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Omelette Recipe design

@Ajaya-Rajbhandari

Desktop design screenshot for the Recipe page coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

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

@TedJenkler

Posted

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

@soniawan

Posted

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

Posted

@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
Discord logo

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