@jboys
@sipanahmad
Submitted
What are you most proud of, and what would you do differently next time?
I'm proud of work with this framework and did it so good.
What challenges did you encounter, and how did you overcome them?
The challenge i see it in this project is how to make the image in mobile screen.
What specific areas of your project would you like help with?
I really want to give this advice for every one solve this challenge watch the other project and improve you code also.
@jboys
Posted
Hey Sipan,
I had a look through your code, and it looks good overall! Just a few thoughts on how you could refine it a bit:
Design
HTML5 Semantics and accessibility
<article> should wrap the whole recipe and each recipe section should be wrapped in a <section> rather than an <article>Code and best practices
role="article" and role="main" in a few spots, which is unnecessary since those tags already have those roles by default.All in all, minor things. Good job!
@KorriganMaster
Submitted
What are you most proud of, and what would you do differently next time?
I've decided to adapt the mobile design for small screens to make the card full screen instead of centered with margins.
What challenges did you encounter, and how did you overcome them?
The main tricky part for me was to include design required properties (font family and colors) into Tailwind CSS using custom config.
I explored the Tailwind documentation to find out how custom theme works.
@jboys
Posted
Great solution — I love the choice in responsiveness! Personally, I would mute the "Front-end developer and avid reader" text a little by making it off-white so it doesn't compete so much with the name and location.
Can't comment on the code as I've only had a cursory look at Astro before. But it looks neat, both your solution (design) and codebase I browsed. Semantics and accessibility look on point.
Marked as helpful
@jrddp
Submitted
What specific areas of your project would you like help with?
@jboys
Posted
Hi Jared,
Nice solution! It looks super close to the target design and your code looks clean and was easy to read.
A couple of sizes were slightly off (nitpicking 🙈):
shadow-[8px_8px_0_0])size-8 rather than size-6)Also, in your tailwind.config.js, I'm not sure why you defined the base font size to be 16px. I thought this was the default by Tailwind?
To improve accessibility, add an alt tag to the author's image (e.g. alt="Author Greg Hooper") and consider a more descriptive alt tag for the article image (e.g. alt="Illustration representing HTML and CSS concepts").
To improve semantics, perhaps wrap the category tag and publication date in a header and the author details in a footer tag. The date should be in a time tag (Published <time datetime="2023-12-21">21 Dec 2023</time>).
Also, I would extract the card into its own div rather than main to make it more reusable, as it is unlikely the card would be the only content on a page.
Marked as helpful
@UmarMubeeen
Submitted
@jboys
Posted
The solution differs quite a bit from the design: there is no QR code in the "solution vs design" view (though in your repo, it is defined and looks correct) and the text needs adjusting to better match the design — font family, line height and the spacing between the heading and text below it.
