Submitted 5 months ago

Responsive blog preview card using SASS

CatalinaF-S•30

@CatalinaF-S

Preview site View code

This is a solution for...Blog preview card

HTML
CSS

1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I really enjoyed this challenge and remembered a lot of the things I learned in the past. I am really proud of the documentation I made in the readme.md file so that I can easily access the knowledge I gained in this challenge in the next project.

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

Challenges:

I am already struggling with a margin-botton of the card in desktop view. I need to figure out how to keep it from getting bigger when the card's width is wider than 1440px.
It was challenging to deploy the project just because I was using an extra / in the relative path of the href for the assets and images.

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

How I mentioned before I want to fix the margin or padding botton when the card's width is wider than 1440px.

Community feedback

Jiří Ćmiel•40
@jiricmielPosted 5 months ago
Hello Catalina, I'll repay you your kindness with giving feedback. Your solution looks really great. I would say much better than mine. I'm gonna assume you chose different font style and card width on purpose and focus only on things that you could improve to get better as a coder. You forgot about shadow around borders of the card. You can add more shadows to an element. Just divide them with comma: box-shadow: shadow1, shadow2, etc.. Your Learning tag is not centered. It is probably due to obsolete height property. You give such element height by adding padding. There's no need of making "h1" inline-block. It is block element by default and you already gave it a width which shrinks the element to sort of inline-block. Somehow you forgot about :hover for the "h2". You should check flexbox functionality. It helps with aligning everything. I think it is not good practise to use "main" as your component container. Instead make it "main>card_element". If you're already making queries you should definitely use responsive units like "rem". It makes life so much easier when it comes to responsive design :-)

It may look as too many comments but don't be discouraged. I'm only trying to help you improve your skills. Keep coding!
Marked as helpful
0
CatalinaF-S•30
@CatalinaF-SPosted 5 months ago
Hi @jiricmiel! Thank you very much for your feedback :) I will review every comment you leave and improve my solution.
Happy coding! :)
0

Please log in to post a comment

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