Responsive Blog Preview Card

Community feedback

• 

  Dylan Heslop•1,570

  @dylan-dot-cPosted 8 days ago

  Hey! Well done girl! Everything seems good and alright.

  For the size of the card, this is actually a FREE+ challenge that means you get the design(figma) files with it in the folder you downloaded, so you can download figma and inspect the file to see the dimensions of everything.

  As for other challenges if you don't have the premium then you would have to try your best to guess them, but I think they use "predictable" values like rem/em and if you use tailwindCSS, they have a disign system that follows the width and spacing values.

  Some improvements you can make

  • The svg in the html code could be used as an image tag with the link to the svg file, instead of having that very long svg code in your html code. <img src="./assets/images/illustration-article.svg" /> One drawback for this is that if you want to change the color of it on an action(required in an junior challenge) say hover you can't do this because it's kinda locked in and wont change for you.
  • I don't think the learning text is an actual button(tho it could be) but you can leave it as it is, if you think something should happen when a user presses it.
  • Don't use fixed width/heights in your code, but more like max/min/width/heights to restrict them to certain values. You should make the content in the element decide the height so it can be fluid and flexible for smaller screens. You can put a max-width of 375px on your cardwrapper.
  • you can use :root{} in css to declare custom variables that help you build more DRY code and allows ease of flexibility and updating colors in the future. Other than that, you should be good so take care.

  0