@Junbol
Posted
Hi Suraj! here are some recommendation for your project: PROS: Most of the features are there and the card looks fine, it’s almost done.
CONS:
-
Forgot to take out this text from the <body>: “ Learning Published 21 Dec 2023 HTML & CSS foundations These languages are the backbone of every website, defining structure, content, and presentation. Greg Hooper”
-
HTML Structure: Your screenshot doesn’t match the original design, the drawing is out of place in the screenshot.
-
Alignment:
a. The alignment of the elements don’t follow the best practices. b. The card is not centered in the screen on mobile view: Reason: You forgot to add display:flex in the parent container.
- Footer: The footer “Attributions needs to be at the bottom. Reason: You need to adjust your parent container.
RECOMMENDATIONS:
- Structure & Semantic HTML: Arrange your <div>’s in a more logical way. You can use nesting for it. And put the div for attribution at the bottom. You can use <footer> instead for the Attributes for better Semantics
<body>
<div class= ”main-container”>
<div class="card-container"></div>
<div class="card-outline"></div>
</div>
<footer class= ”attribution”> </footer>
</body>
- Flexbox: . Try to use Flexbox as much as possible it will give you more control to align and position elements. For your project:
body {
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
}
The will do two things:
- Send the attribution div to the bottom. Make sure you give enough margin-bottom to the card.
- It will center everthing inside <body>
I’m sure you use 3wschools https://www.w3schools.com/css/css3_flexbox.asp to refresh stuff. But these two new kids on the block are really great:
- [Flexbox] (https://web.dev/learn/css/flexbox)
- https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
Good look and Keep going!
Cheers Junier
