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

Non-responsive/Desktop solution for blog preview card

dripper91 130

@dripper91

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 are you most proud of, and what would you do differently next time?

I got it to look pretty close to the design, I only looked at my notes a couple times. I would like to do it again when I learn responsive design.

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

I had trouble with elements overflowing out of the bottom of the card, I just made the card longer lol

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

If anyone has any constructive criticisms to add I would greatly appreciate it.

Community feedback

Alex 3,130

@Alex-Archer-I

Posted

Hi! It's a good work! Very interesting approach to create a greyish text by reducing opacity. Never saw that one, cool =)

The only is that your card isn't centered as in the origin design. You could use a flex rule to achieve it.

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

Oh, and I can give another tip. When you are using variable fonts it is not really necessary to use another font rules. That the trick with these var-fonts that you can customize them as you want. For example you need fonts with weights 300, 700 and 1000 for your work. You just add one rule:

@font-face {
    font-family: "Figtree";
    src: url("../assets/fonts/Figtree-VariableFont_wght.ttf");
    font-weight: 300 1000;
}

And you have fonts with the range from 300 to 1000. So now you can just do stuff like this:

.just-text {
    font-weight: 300;
}
.not-very-bold-text {
    font-weight: 700;
}
.very-bold-text {
    font-weight: 1000;
}

I don't want to say that your way is wrong, it's just a tip. Maybe I just too hyped with those variable fonts cos I learned about them just yesterday =)

So, good luck!

0

@heloabrantessb

Posted

Hey there! Your card was pretty much identical to the design, it is really good. My recommendation is to edit the README.md file to make it easier for people who will look at the repo to know what the project is about.

I also looked at your CSS file and saw that you use px a lot, and maybe it would be better to use rem instead because rem is relative and adjusts to the font size of the user's browser.

That is all, great project, hope that you make good progress!

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