@Ayako-Yokoe
Submitted
@xYAssixx
@NeonCodes
Submitted
What are you most proud of, and what would you do differently next time?
I am proud that the final result looks close to the image preview. It was also another opportunity to continue practicing flexbox and try hover and focus states. Next time, I hope I will code faster and make less research.
What challenges did you encounter, and how did you overcome them?
-Styling the two images: put each image in a div image 1
and 2 : at first, the first image didn t have round corners despite applying border-radius
; putting it directly in img{}
fixed that at first ; Then, adding padding
to image
erased border-radius
again. = adding padding
to card instead of image
fixed that.
-The yellow background kept getting inside the card: I changed yellow background to html {}
instead of inside *
- Sometimes, It was easy to get lost in all the divs
and containers
. I had to review my code and the indents multiple times to make sure everything was okay.
-The second image doesn’t keep its size inside the div
:did styling on the head
instead of the css stylesheet to fix that.
What specific areas of your project would you like help with?
I need help positioning authorname correctly: It was positioned fine on a previous version then, I changed the font and couldn't get the same result. I can't find it in the repository either. Also, general feedback on the code itself is welcome: organization, unnecessary lines, things that could have been done more easily etc
@xYAssixx
Posted
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample Semantic HTML Page</title>
</head>
<body>
<header>
<h1>Website Title</h1>
<p>Welcome to our website</p>
</header>
<section>
<article>
<h2>Article Title</h2>
<p>This is a sample article about something interesting.</p>
</article>
</section>
<footer>
<p>© 2024 Website Name. All Rights Reserved.</p>
</footer>
</body>
</html>
Marked as helpful
@rajaab100
Submitted
@xYAssixx
Posted