Design comparison
Solution retrospective
Please checkout my solution. I'm open to any constructive criticisms/feedbacks :)
Community feedback
- @vanzasetiaPosted over 1 year ago
Hi there! 👋
You have received some incredible feedback. I recommend improving your solution. This way, the feedback you already get will not be wasted.
One suggestion I have is to never use
px
unit for font sizes. Userem
orem
instead. Relative units such asrem
andem
can adapt when the users change the browser's font size setting. Learn more — Why you should never use px to set font-size in CSSI hope this little suggestion helps. Happy coding! 😄
Marked as helpful1 - @HassiaiPosted over 1 year ago
Replace <div class="card"> with the main tag and <h3> with <h1> to make the content/page accessible. click here for more on web-accessibility and semantic html
Every html must have <h1> to make it accessible. Always begin the heading of the html with <h1> tag wrap the sub-heading of <h1> in <h2> tag, wrap the sub-heading of <h2> in <h3> this continues until <h6>, never skip a level of a heading.
Give the alt attribute in the img a value. The value of the alt attribute is the description of the image. For decorative images like icons, there is no need to give it an alt value, for more on alt attribute Click here.
To center .card on the page using flexbox, replace the height in the body with min-height: 100vh.
body{ min-height: 100vh; display: flex; align-items: center; justify-content: center; }
For a responsive content,
- Give .container a fixed max-width value and a padding value for all the sides
max-width: 320px which is 20rem/em padding:16px which is 1rem/em
- Give the img a max-width of 100% and a border-radius value, the rest are not needed.
Hope am helpful.
Well done for completing this challenge. HAPPY CODING
Marked as helpful1 - Give .container a fixed max-width value and a padding value for all the sides
- @chizy21Posted over 1 year ago
I would place your color variables in the global * instead of the html... this is my default.css for the resets.
/* ------- / / reset / / ------- / / https://piccalil.li/blog/a-modern-css-reset / / Box sizing */ *, *::before, ::after { box-sizing: border-box; } / Colors */
- { --color-white: #FFF; --color-black: #000; --color-purple: Purple; } /* Reset Margins / body, h1, h2, h3, h4, h5, p, figure, picture { margin: 0; } / Set core root defaults / html:focus-within { scroll-behavior: smooth; } / Set core body defaults / body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; } / Make images easier to work with / img, picture { max-width: 100%; display: block; } / Inherit fonts for inputs and buttons / input, button, textarea, select { font: inherit; } .container { max-width: 1140px; } / Remove all animations and transitions for people that prefer not to see them */ @media (prefers-reduced-motion: reduce) { html:focus-within { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } .attribution { font-size: 11px; text-align: center; } .attribution a { color: hsl(228, 45%, 44%); }
Marked as helpful0
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