3 column preview card responsive HTML and CSS

Community feedback

• 

  Saulius K.•560

  @TH3RIVPosted almost 2 years ago

  Hi, @katuramu27!

  Looks wise it looks good, but I would suggest centering the whole card in the middle of the page, you can easily do it by using flexbox on your body element.

  Now onto things you could improve on:

  • Look at accessibility report after you submit your solution for any issues and sort them out if you can.
  • Try using semantic HTML so you can clearly read what content is what. Use landmarks to wrap your content. In this case your whole card should be between <main></main> tags.
  • You are using h2 elements without having a h1 element. It should follow a progression: h1, h2, h3 etc.... You can style the text using CSS to achieve the desired look.
  • Try using custom CSS properties so you can declare certain things like colors once and use them throughout and it makes it a lot easier to change when needed. Removes the need to change every single line of code and instead change line of code to change all uses of that particular property.
  • Try to avoid using px units as much as you can and use em or rem instead.

  Hope this helps! Good luck!

  Marked as helpful

  1

  ---

  

  Agustin•30

  @katuramu27Posted almost 2 years ago

  @TH3RIV Thanks for your suggestions! I thought it was fine using the h2 because the three columns all have the same title importance. Do you think I should use h1,h2 and h3(one for each column)??

  I am still very confused about :root in css, so I wrote the code in every line, but I will try to study hard to implement in the next few challenges!

  I am slowly changing from px to em and rem! I will be using it more often in the future.

  Thanks for every suggestion!

  0

  

  Saulius K.•560

  @TH3RIVPosted almost 2 years ago

  @katuramu27 I used h1 tags for all of the titles, I understand that common practice is having one h1 tag followed by as many lower tier tags as you want. Using lower tier headings without a h1 is considered bad practice though.

  Googling it finds inconsistent results at best and indicates that multiple use of h1 does not affect SEO that much.

  1
• 

  Adriano•38,390

  @AdrianoEscarabotePosted almost 2 years ago

  Hi Agustin, how are you? I really liked the result of your project, but I have some tips that I think you will enjoy:

  To align some content in the center of the screen, always prefer to use display: flex; it will make the layout more responsive!

  body {
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      min-height: 100vh;
  }
  

  I noticed that you used a button in which case the best option would be an a, because in my head when a person clicks on a button written Learn More, he is not confirming a form, or something like, it will be redirected to another page, to Learn More about!

  To resolve do this:

  <a href="/" id="button3">Learn More</a>

  The rest is great!

  I hope it helps... 👍

  Marked as helpful

  0
• 

  Amal Karim ✅•1,290

  @amalkarimPosted almost 2 years ago

  Hi Agustin,

  If you have edited the code after you submit your solution, you could try to press the GENERATE NEW SCREENSHOT button above the Design Comparison section. It would regenerate the new screenshot based on the latest update of your solution. If there's still problem, let me know in the comment.

  0

  ---

  

  Agustin•30

  @katuramu27Posted almost 2 years ago

  @amalkarim Thanks! I solved it.

  0