Design comparison
Solution retrospective
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
- @TedJenklerPosted 2 months ago
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 helpful0 - @soniawanPosted 2 months ago
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 helpful0@Ajaya-RajbhandariPosted 2 months ago@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 GitHubJoin 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