Rebecca Padgett• 1,760
@bccpadge
Posted
Hello @alexpeteronoja. Congratulations on completing this challenge!!!🎉
I have few tips you might be interested in to improve your solution.
- Every website should have at least one landmark like
<main>
Example:
<body>
<main>
All content goes here
</main>
<footer>
attribution goes here
</footer>
<body/>
HEADING TAGS
-
In this project, you are implementing wrong heading tag for the title. To fix this issue change
<h3>to a<h1> -
Heading tags should be used in chronological order
More info📚:
br tag
- Using the
<br>tag isn't a good practice and to add spacing you can use margin and padding
More info📚:
I see you are centering your component with <position: absolute;
-
CSS has two layouts: Flexbox and CSS Grid
-
You can add these styles on the
<body>or the.container
Flexbox
body{
display:flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
CSS Grid
body{
display:grid;
place-content: center;
min-height: 100vh;
}
On the .container
- Add
<max-width: 350px;to make your component responsive without any media queries
Here is my solution to this challenge Blog preview card
Hope you find this useful and don't hesitate to reach out if you have any questions
Marked as helpful
1
alexpeteronoja• 80
@alexpeteronoja
Posted
Thanks
0
