I think the area I most need help with is simplifying my code. I tend to create a CSS class for almost everything for more control and "future-proofing", but I won't need these classes most of the time. CSS can easily specify what I need, so I waste time creating so many classes. I'm sure my HTML could also be simplified.
Figuring out the correct spacing, font sizes/weights, etc. without using the Figma file.
It's the cutest design I've ever made in this website.
What challenges did you encounter, and how did you overcome them?I think that it was difficult to imagine the landing page without looking the result
This looks great! My only feedback is that the mobile styles take over a little too early. 1200px is still wide enough for many laptops. I think most tablets are <=1024px and phones are <= 480px.
The challenge for this one was getting the buttons centered. I used position relative and moved them to the center that way.
What specific areas of your project would you like help with?Centering divs
This is a really good start! You mentioned needing help centering divs, and IMO the easiest way to center divs is to use Flexbox. Using position works, but you'll need to use more code and it may take longer to troubleshoot. It would look like this
<div class="container">
<div class="container-content">Content 1</div>
<div class="container-content">Content 2</div>
</div>
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100dvh;
gap: 1rem;
}
All the flex items in the container would then be horizontally and vertically centered. The height will only be needed for vertical centering. 100dvh will use up the whole viewport height, so it can be less unless you want the container to be that large. The gap property lets you set a space between items and will be easier to maintain than using <br> to create space.
You'll be able to create responsive layouts more efficiently once you learn Flexbox!
Lastly, try importing the font that is specified in the style guide. Great job overall!
Started to use Figma this time, using it as a tool to get information on border radius, padding, element sizes and everything - so hopefully this has shown positively in the design. I have converted pixels to rem and used that to size the main blog card, however I am still learning with CSS units and working out when best to use them.
What challenges did you encounter, and how did you overcome them?The only challenge I encountered was positioning the author's name at the bottom central virtually, in line with the photo of the author. In the end, I utilised Flex box to do this.
What specific areas of your project would you like help with?I would like help with my use of CSS units and overall design responsiveness, whether I have used the correct units in the right places and also made it as responsive as possible.
Your solution looks great! The card's border looks a little too thick compared to the image design, but if that's what Figma showed, then it's fine. Overall, you did a great job!
flex box:)
This looks like a great start. I would set the height of the container at 100dvh so the entire height of the page is used when vertically centering the container. Decreasing the width of the container would also help with making it look more like the original design.
