@huyphan2210
Posted
HI, @Srikathyayini
I checked out your solution and I have some thoughts:
- Semantic HTML: It's important for accessibility, particularly for screen readers. Using elements like
<header>
,<nav>
,<article>
,<footer>
, etc. instead of<div>
provides structure and meaning to your content, making it easier for assistive technologies to interpret. - Color Contrast: At this stage, you don't need to worry too much about color contrast since it's more of a design-focused issue. Right now, I'd recommend concentrating on making your solution closely match the design of the challenges. You can address color contrast once you're more comfortable with the other aspects.
- Responsive Design: It would be helpful to explore media queries and CSS relative units, like
rem
,em
, and%
, which help ensure your designs adapt to different screen sizes. Also, CSS functions likecalc()
andminmax()
can enhance flexibility, and attributes likewidth
,height
, andpadding
can be adjusted using relative units. Additionally, researching the mobile-first approach will improve your understanding of responsive design principles. Spacing and Layout: For things like spacing, padding, and text scaling, if you're unsure how to proceed, I recommend checking out design systems like Material Design, Bootstrap, or Tailwind CSS. Studying their documentation will give you useful insights that you can apply to your solution.
Hope this helps!
@Srikathyayini
Posted
@huyphan2210 Thank you for taking the time to review my solution and for your valuable feedback. I really appreciate your insights, especially regarding semantic HTML. I'll definitely work on incorporating more semantic tags like <header>,<nav>, <article>, and <footer> to improve the accessibility and overall structure of my code. It's a great reminder to keep in mind how assistive technologies interact with the markup.
For color contrast, I agree with your suggestion to focus more on matching the design at this stage and improving those aspects later. I’ll revisit contrast and accessibility concerns as I grow more comfortable with other elements of the design process.
Regarding responsive design, I'll take your advice and dive deeper into media queries, relative units, and the mobile-first approach. I believe this will really help in making my designs more flexible and adaptive. Exploring CSS functions like calc() and minmax() sounds particularly interesting, and I'll be sure to look into them to further enhance responsiveness.
Your suggestion to check out design systems like Material Design, Bootstrap, or Tailwind CSS is very helpful. I’ve been meaning to familiarize myself with these frameworks, and I’m sure they will provide a strong foundation for improving my layouts and spacing.
Thank you once again for your thoughtful feedback! I’ll be incorporating these suggestions as I continue to work on improving my solutions.