Design comparison
Solution retrospective
Making all the spacings, i would do more semantic tags as the previous commenter said it just that i didn't know much
What challenges did you encounter, and how did you overcome them?Making everything in place as i am not aware of all the tags, but i will learn as i go just to make sure i am not stuck
What specific areas of your project would you like help with?learning all the tags and the css properties does require some research or knowledge beforehand
Community feedback
- @Riska997Posted 6 months ago
Make the card design responsive
-Width is set to a fixed percentage (width: 15%;).
-This means that the card will always occupy 15% of the viewport width, regardless of the screen size.
-To make the card design responsive, use relative units like percentages or viewport width (vw) to ensure that the card adjusts its size based on the screen size.
.Card { /* Instead of fixed percentage, use percentage or viewport width for responsiveness */ width: 90%; /* Example: occupy 90% of the viewport width */ }
Make use of semantic HTML elements
-Semantic HTML elements provide meaning to the content, making it easier for browsers, search engines, and screen readers to understand the structure of the document.
-Instead of using generic <div> elements for structural purposes, use semantic elements to better convey the purpose of each section of the webpage.
<header> <!-- Header content goes here --> </header> <article> <!-- Main content/article section goes here --> </article> <footer> <!-- Footer content goes here --> </footer>
Marked as helpful0@kiryu130Posted 6 months ago@Riska997 Hi, i am trying to use semantic tags, but i do not know most of the tags so i will try to implement it in more as i go. I do have a question with the responsive feedback, while i haven't checked and try to make sure it is responsive, i do try to make it responsive by using relative value not fixed value, reading your comment makes me wonder what's the difference between width:15% and width:90% as it is just a difference of how value percentage i gave and why is one called responsive and one not
1@Riska997Posted 6 months ago@kiryu130 Hi.
When you set an element's width using a percentage, it means the element's size is based on its parent element's width.
width: 15%: This makes the element quite narrow. It will change size with the parent element, but on larger screens, it might be too small and hard to read.
width: 90%: This makes the element much wider, taking up most of its parent element's width. This is usually better for making sure the content is easy to read on different screen sizes.
- The key difference between width: 15% and width: 90% lies in how practical and user-friendly the design is across different screen sizes.
- Both are technically responsive, but a wider percentage is often more practical for readability and accessibility.
Marked as helpful0 - @R3lssPosted 6 months ago
Really good job man, but try to follow the figma file, there you can find all the colors, sizes, etc you need for the challenge
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