Design comparison
Community feedback
- @Islandstone89Posted 7 months ago
HTML:
-
Every webpage needs a
<main>that wraps all of the content, except for<header>andfooter>. This is vital for accessibility, as it helps screen readers identify a page's "main" section. Wrap.containerin a<main>. -
Replace the
<small>element with the following:<p>Published <time datetime="2023-12-21">21 Dec 2023</time></p>. -
Replace
<footer>with<div>. -
The profile image needs a short, descriptive alt text - "Headshot of Gary Hooper".
-
"Greg Hooper" is not a heading, but a
<p>. NB: Remember, headings must always be in order, so you would never jump from a<h2>to a<h4>.
CSS:
-
It is best practice to write CSS in a separate file, often called
style.css. Create one in the same folder as theindex.html, and link to it in the<head>:<link rel="stylesheet" href="style.css">. -
Including a CSS Reset at the top is good practice.
-
Use the style guide to find the correct
background-colorandfont-family. -
Remove
width,marginandpaddingon the top image. -
On "Learning", add
display: inline-block, this makes it only as wide as its content. Add somepaddingto create space between the text and the background. Remove the margins. And you also don't needtext-align: center, as the padding centers the text. -
You don't need to declare
flex-direction: row, as that is the default. -
Remove all of the margins. Instead, give the card padding on all 4 sides:
padding: 1rem;. -
Add
align-items: centerto the<div>at the bottom - this aligns the profile image to the profile name.
0 -
Please log in to post a comment
Log in with GitHub
Join 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