Design comparison
Solution retrospective
I had difficulty in trying to figure out how to tackle the solution. Overall I think I did it okay, but the solution I thought of seems to be fairly hacky probably because I am inexperienced.
How should I go about learning CSS concepts, applying and using them to solve real world problems? What are some best practices I should also implement throughout my learning?
Community feedback
- @Cyber-ChicPosted over 1 year ago
Your solution looks awesome! Great job completing your first challenge! π
I have a one more recommendation that may improve your site:
- Add a <h1> element to your code. All sites should include a minimum of one <h1> element to indicate the the most important (or highest-level) heading on a page.
I hope this is helpful! Happy Coding!
-Angie
1@sneakynickyPosted over 1 year ago@Cyber-Chic Thank you! I'll take note on that and include it in my next challenge! :)
0 - @0xabdulkhaliqPosted over 1 year ago
Hello there π. Congratulations on successfully completing the challenge! π
- I have other recommendations regarding your code that I believe will be of great interest to you.
HTML π·οΈ:
- This solution may cause accessibility errors due to lack of semantic markup, which causes lacking of landmark for a webpage and allows accessibility issues to screen readers, due to accessibility errors our website may not reach its intended audience, face legal consequences, and have poor search engine rankings, highlighting the importance of ensuring accessibility and avoiding errors.
- What is meant by landmark ?, They used to define major sections of your page instead of relying on generic elements like
<div>
or<span>
. They are use to provide a more precise detail of the structure of our webpage to the browser or screen readers
- For example:
- The
<main>
element should include all content directly related to the page's main idea, so there should only be one per page - The
<footer>
typically contains information about the author of the section, copyright data or links to related documents.
- The
- So resolve the issue by replacing the
<div class="container">
element with the proper semantic element<main>
along with<div class="attribution">
into a<footer>
element in yourindex.html
file to improve accessibility and organization of your page
.
I hope you find this helpful π Above all, the solution you submitted is great !
Happy coding!
1@sneakynickyPosted over 1 year ago@0xAbdulKhalid Thanks for the helpful tips! I'll take note of these and include it in the next challenge.
0@0xabdulkhaliqPosted over 1 year ago@sneakynicky Glad you found it helpful ! π€
0 - @ecemgoPosted over 1 year ago
Some recommendations regarding your code that could be of interest to you.
- If you use
max-width
, the card will be responsive and you can increase the width a bit - You'd better update
padding
to give a gap between the content and the border of the card - You don't need to use flexbox here. If the styles don't work, I recommend you don't use them
.card { /* width: 220px; */ /* height: 350px; */ max-width: 300px; /* padding: .5em; */ padding: 15px; /* display: flex; */ /* flex-direction: column; */ }
- In addition to that above, in order to make the card responsive and the image positioned completely on the card, you'd better add
width: 100%
to the img
img { width: 100%; /* width: 200px; */ /* height: 200px; */ border-radius: 10px; /* margin-top: .25rem; */ }
- You'd better update and add font-size and margin for the texts
p.header { font-size: 20px; margin: 10px 0; }
p.content-text { /* font-size: 12px; */ font-size: 16px; margin-bottom: 20px; }
- You don't need to use
.card--title
and.card--text
and you can remove them
/* .card--title { padding: .5em; } */ /* .card--text { padding: 0 .5em; } */
- Finally, if you follow the steps above, the solution will be responsive.
Hope I am helpful. :)
1@sneakynickyPosted over 1 year ago@ecemgo Thanks! I wasn't really thinking about making it responsive but it definitely has to be something to have at the back of the mind in the future.
I appreciate the code samples as suggestive updates too!
1 - If you use
- @skopelosbillPosted over 1 year ago
Now I have managed to visit your GitHub repo (yes is was my problem rather than yours) I see that your image size is 200px x 200px and your container is 220px x 325px. The brief is for the container to have a width of 375 pix which explains why yours is so small. I would suggest fixing this in the first place and then having a look at what the changes do.
0 - @skopelosbillPosted over 1 year ago
Hi, your solution is rather small compared to what it should be but you have positioned it well on the page. I recommend that you search on you tube for Kevin Powell. Kevin has a huge amount of videos on every possible aspect of CSS and I subscribe to his channel, there is so much on there that is so helpful. I canβt comment on your html because I canβt see it but that may be my problem rather than yours. You have made a good start to your front end Mentor journey.
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