Blog preview card completed

Community feedback

• 

  P

  Matt Pahuta•580

  @MattPahutaPosted 3 months ago

  Hi there. Nicely done completing this challenge. Your finished product is a close match to the design comp and you're using a lot of semantic element tags properly. Also good work with your use of custom properties and responsive units.

  Regarding the naming of CSS classes, this is often a challenge for devs. For some good insight on the topic, check out this video from Kevin Powell.

  Here are few other things I flagged:

  1. You should always have a main element on the page. Nest the div with the class name of 'main-container' within a main tag. Then, for clarity, you might consider renaming the 'main-container' class to 'card'.
  2. Since this is a card component that would sit along similar components on a page, it would likely never serve as the page title. Semantically, the heading should be an h2 instead of an h1 (even though the formatter will give you a warning about it).
  3. Your alt text for the image should just be 'Greg Hooper' or even something like 'Greg Hooper's avatar'. Image descriptions should not include words like 'image' or 'picture' because they are already an image role.
  4. You should have at least one fallback font where you have your font-family set.
  5. Remove that width from your card component ('main-container'). Give the body some padding instead and stick with max-width only on the card (but probably update that to use rem units instead of pixels).
  6. I think it's generally preferred to use unitless values for line-heights, but that might be debatable.
  7. You should avoid using percentages for margin and padding values. Stick with rems, ems, or even pixels.

  Again, good work on this project. Good luck moving forward. Cheers!

  Marked as helpful

  1

  ---

  

  Spencer•80

  @DivinitryPosted 3 months ago

  @MattPahuta

  Hello Matt,

  thank you a lot for the feed back I really appreciate it, will put these comments to good use. Will watch the video and put these tips to use, thank you!

  0
• 

  MikDra1•6,920

  @MikDra1Posted 3 months ago

  Nice one @Spencer 🤗

  If you want to know about naming conventions I would encourage you to try the BEM methodology. If you are not should what that is here is a POST and a VIDEO about it.

  If you find this comment useful please mark it as helpful. 💗

  Good Job and keep going 😀😉😁

  Marked as helpful

  0
• 

  MikDra1•6,920

  @MikDra1Posted 3 months ago

  If you want a quick tip here is a shorter method to center things in the container

  On the container :

  display: grid; place-items: center;

  0
• 

  tushar-Ruhela•210

  @tushar-RuhelaPosted 3 months ago

  yes,this solution include semantic html and this is accessible the improvement should made like fon weight is not right and height and width also little bit different yes layout can look good on a range of screen size .this is plus point yaa but i am not fully sure but depend upon person to person .if any one want see how this code were made so its okk not any problem. not at all but same as design

  0