@youssefsoua
Submitted
@jchu51
@youssefsoua
Submitted
@jchu51
Posted
Hi @youssefsoua
Great job on completing this project.
<form onSubmit={...}>
<input type="radio"/>
<button type="submit" />
</form>
<input type="radio" name="rating" value="1">
<button type="submit">Submit</button>
@professorkabir
Submitted
@jchu51
Posted
Hi @professorkabir,
Great work!
A few minor suggestions:
prettier
.@media only screen and (max-width: 600px) {
.className {
width: ...
}
}
@CodePawsDev
Submitted
Actually, I believe it doesn't necessarily require the use of React and Tailwind. I'm practicing with these tools, so I opted to use them. This can be completed easily using HTML and CSS.
@jchu51
Posted
Hi @CodePawsDev,
Congratulations on completing the challenge! π
Your code is well-organized and neat.
One observation to note: In mobile landscape mode, the blue background doesn't fully cover the height.
@suhjiwon95
Submitted
I'm open to all suggestions! :D
@jchu51
Posted
Hi @suhjiwon95,
congrats on completing the challenge. π
few minor suggestions It's a best practice to call API endpoints using the async/await pattern with promises. To handle potential failures, always include try-catch blocks. For a better user experience, consider adding a loading status or a failure message. While data is being fetched, display a loading indicator or text in the box. If the fetch fails, a message such as 'Failed to generate, please retry' would be beneficial."
It's advantageous to explore various frontend frameworks like React, Vue, and Angular. Additionally, if you're utilizing VSCode, consider installing 'prettier' for enhanced formatting.
Anything I could have done better?
@jchu51
Posted
LGTM.
It's great to see you're using picture
tag, to handle image
Try to avoid using IDs / elements selector for CSS styling. Class selectors are generally preferable as they're reusable and don't have the high specificity that IDs have, reducing the risk of style conflicts.
Use rem for consistent sizing across your website. The sizes are based on the base font-size, and they don't change with the parent element's font-size.
@suhjiwon95
Submitted
Do you have any tips for getting the margin right?
@jchu51
Posted
It's great to see you're using rem
units for padding. To enhance your CSS abilities further, consider creating files like variable.css
and media.css
. These could be useful across many projects. Additionally, familiarizing yourself with Sass (Syntactically Awesome Style Sheets) could be very beneficial.
I'd also recommend getting to grips with the BEM (Block, Element, Modifier) methodology. It's a popular naming convention for classes in HTML and CSS.
A few minor suggestions for improvement include:
Marked as helpful