Submitted about 1 year ago

Responsive recipe page using Next.js and TypeScript

next, typescript, tailwind-css

Haiying Liao•10

@HaiyingLiao

A solution to the Recipe page challenge

Preview Code

Solution retrospective

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

I am most proud of achieving a perfect replication of the design. Every element, from the layout to the smallest details, closely matches the original design, showcasing my attention to detail and commitment to quality.

Additionally, I am proud of my implementation of the DRY principle. By thoroughly analysing the design, I was able to create reusable components and streamline my code, ensuring consistency and reducing redundancy throughout the project.

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

One of the main challenges I encountered was integrating multiple fonts using Next.js. I overcame this challenge by thoroughly reading the Next.js documentation, which provided detailed guidelines. By following these best practices, I was able to successfully implement the required fonts.

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

I would appreciate advice on improving my use of semantic HTML. While I have a good understanding of basic semantic elements, I am eager to learn more about best practices and advanced techniques for structuring HTML to enhance accessibility, SEO, and maintainability. Any insights or resources you can share would be incredibly valuable for refining this aspect of my project.

Code

Please log in to post a comment

Community feedback

Luan Barcaça•600

@barcaca

Posted 5 months ago

Your project looks really good!

A suggestion to improve the use of semantic HTML would be to consider using <ul>/<ol> and <li> tags instead of <div> and <p> elements for the list of instructions/ingredients. Since you are presenting a sequence of steps, an <ol> (ordered list) would make more sense, helping with the accessibility and clarity of the content for screen readers.

For example:

<section>
  <h2 className={`${young_serif.className} subtitle`}>Instructions</h2>
  <ol className="list-decimal pl-5">
    {dummyInstuctions.map((item, i) => (
      <li key={i} className="mainTextStyle mb-2">
        {item.name}: {item.content}
      </li>
    ))}
  </ol>
</section>

Additionally, for the nutrition section, using a <table> could be a good alternative since the data is tabular in nature (name and nutritional value).

Overall, excellent work!

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