Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Blog preview card

@MARCUS-IMPERATOR

Desktop design screenshot for the Blog preview card coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


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

Manipulating elements in a div, any pieces of advice are more then welcome.

Community feedback

@JreyIV

Posted

the responsiveness doesn't work as intended. you have pretty much everything in a div. move the texts into h1 or p. you also don't need everything in a div. you can create sections (for example, the text content can all be in its own div. padding is slightly off, try using learning how to use rem instead of pixels. other than that, it looks very close to the design. well done :)

Marked as helpful

1

@MARCUS-IMPERATOR

Posted

@JreyIV Thank you! Since starting this project, I have been trying to incorporate REM more instead of px, and it has helped improve responsiveness. Apart from that, what other techniques or tricks have you found helpful in enhancing your web dev skills?

0

@JreyIV

Posted

@MARCUS-IMPERATOR

I would say also trying not to use fixed widths and heights have improved my code a lot and made me code a lot faster because then it makes coding responsive sites much faster. max-width/height and min-width/height is so much better than say "300px." I also have been trying to use media query for only special cases and using it as minimally as possible which has been doing wonders. Also using variables like in the :root makes things easier to change later on. For example:

:root {
  --ff-accent: "Young Serif", serif;
  --ff-primary: "Outfit", sans-serif;

  --fw-light: 400;
  --fw-normal: 600;
  --fw-bold: 700;

  --fs-normal: 1rem;

  --clr-nutmeg: hsl(14, 45%, 36%);
  --clr-dark-raspberry: hsl(332, 51%, 32%);

  --clr-white: hsl(0, 0%, 100%);
  --clr-rose-white: hsl(330, 100%, 98%);
  --clr-background: hsl(30, 54%, 90%);
  --clr-light-grey: hsl(30, 18%, 87%);
  --clr-wenge-brown: hsl(30, 10%, 34%);
  --clr-dark-charcoal: hsl(24, 5%, 18%);
}

This makes it easier to use fonts and sizes and colors and then you can change multiple at once by changing the variable.

Also look up CSS resets if you don't know what they are. Saves a lot of headaches.

Check out Kevin Powell on Youtube. He is the best CSS teacher out there and gives amazing tips

Marked as helpful

1

@MARCUS-IMPERATOR

Posted

@JreyIV Thank you for the CSS resets. I had never heard of them before, but they seem to be very useful. I'm very glad that you mentioned Powell, he's an absolute gem. Thank you again friend, and good luck on your learning journey.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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