I used Custom CSS in this project. I used Flex box instead of CSS Grid
Design comparison
Solution retrospective
I am proud of that by completing these projects it will enhance my skills and will help to gain valuable knowledge and hands on experience. I want to write more complex code next time .
What challenges did you encounter, and how did you overcome them?Little bit challanges I faced and I overcome it with the help of google. And That's it.
What specific areas of your project would you like help with?It help me with the html and Css. And I gain valuable knowledge.
Community feedback
- @SSGBCPosted 6 months ago
Viewing the source code for the solution there are mostly div tags used in the HTML which could be updated to tags that have more semantic meaning. There are multiple classes create and there one of which is not used in the CSS style sheet. The HTML and CSS code are well structured and are readable. The solution does differ slightly from the design which can be corrected with a few tweaks to the CSS code.
0 - @devandytechPosted 6 months ago
Trying improving on your color palette, I suggest you use the one provide on the read.md file
0 - @Islandstone89Posted 6 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. Change the first<div>
to a<main>
. -
You don't need all of those divs! You only need one
<div>
, which holds the card content - I would give it a class of.card
. -
The alt text must also say where it leads(frontendmentor website).
-
"Improve your" should be a
<h2>
.
CSS:
-
Including a CSS Reset at the top is good practice.
-
Use the style guide to find the correct
font-family
. -
Use the style guide to find the correct
background-color
. -
Add around
1rem
ofpadding
on thebody
, so the card doesn't touch the edges on small screens. -
To center the card horizontally and vertically, use Flexbox on the body:
display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100svh;
-
Remove all widths and heights.
-
Add a
max-width
of around20rem
on the card, to prevent it from getting too wide on larger screens. -
Add
text-align: center
on the card to center the text. -
To create the space between the image and the edge of the card, set
padding
on all 4 sides of the card:padding: 16px
. -
On the image, add
display: block
andmax-width: 100%
- the max-width prevents it from overflowing its container. Remove the margin. -
Add
border-radius: 10px
on the card and the image.
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