Blog preview card

Community feedback

• 

  P

  beowulf1958•1,450

  @beowulf1958Posted 2 months ago

  Congratulations on completing this challenge. It looks great and is responsive. Good job!

  As to better practices, you might consider simplifying your resets. Setting the body tag margin:0 ; padding:0 then a few lines down body * also margin: 0; padding: 0; is redundant and unnecessary. The same effect with all the resets as a whole can probably be done done by shrinking those style done. For example: h1, p, a tags will inherit the styles of the parent. If the font-family is set on the body tag, then you would only need to declare the styles which deviate from the main style. Often times the cascade and inheritance will do your work for you. If you truly need a complete stripping of browser styles, perhaps loading a reset.css before your main styles. Josh Comeau has a popular one here.

  As to bad habits, under .card .publish-date styles you declare font-weight 500; then font-weight: bold; two lines later. The second style overwrites the first. Remember: the best line of code you write is the one you don't write. The most simple code that does the job is the best practice.

  Last but not least, you forgot to add a hover state to the card title as shown in the design file. The h1 turns yellow when you hover over it.

  I do love that you comment your css; this makes it easier to parse--and easier to maintain later on. Look forward to see what you do next! Keep on coding.

  Marked as helpful

  0

  ---

  

  Mary Ronan•40

  @MazontheMoonPosted 2 months ago

  Thanks so much for taking the time to check that out :) @beowulf1958 I can't believe I missed the hover state so I will fix that up and will read up some more on css resets.

  0