Submitted 3 months ago

Blog Preview Card Main w/ HTML and CSS

Dexter Niles•140

@dexterniles

A solution to the Blog preview card challenge

Preview Code

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think i really flew through this one. Writing the HTML structure was very easy and the css was about the same. Overall I am very happy with the outcome.

What challenges did you encounter, and how did you overcome them?

Nothing too bad. Didn't even have to turn to google for this one which is a major step.

What specific areas of your project would you like help with?

Really just looking for ways to streamline the code. If there are easier and more compact ways to do things I would love to hear about it.

Code

Please log in to post a comment

Community feedback

Marzia Jalili•9,390
@MarziaJalili
Posted 3 months ago
Congratulations on emarking on this amazing journey here! 🎉

Some tiny tweaks?

✅ A pro tip for centering the card:
```
display: grid;
place-items: center;
```
✅ Also, it's best practice to have one main element for each web page, so consider changing the div that wraps all the elements to main for semantics.

🌟 Other than that, the web is impressive, keep it up!

😎😎😎
Marked as helpful
6alactico•470
@6alactico
Posted 3 months ago
Great job! I would recommend using a <span> element instead of a <button> for the "Learning" text. Since it functions as a label, it does not require interactivity. Using a <button> can cause accessibility issues by implying interactivity that is not there. <span> is more semantically correct and allows for easier styling. Here's a helpful example on styling labels.

Join 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