BOOTSTRAP GRID | HTML | CSS

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello there, Rudolf! 👋

  First, you need to fix the HTML.

  • Remove all the br elements. Use margin or padding to create a space between each element. It's best to not use br elements for presentational purposes. Read what MDN documentation says about it.
  • Fix the indentation. Each child element should have indented to make it easier to distinguish which element is a child element and a parent element. I recommend two spaces for the indentation.
  • Use h2 instead of h1. Each page should only have one h1. However, other heading tags can be used multiple times.
  • Add aria-hidden="true" to the svg element or use img element with empty alt="" to make sure that they don't get pronounced by screen readers since those icons are decorative images.
  • Attribution should live outside the main element and should be wrapped by footer landmark.
  • I think those buttons should be link elements. As a user, I would expect after I click one of those buttons, I would get navigated to another page. So, what do you think is going to happen after the user clicks button?

  Once you fixed the HTML, try to follow this guide to fix the responsiveness of the site.

  • First, I would not recommend using CSS framework to do this challenge. In my opinion, not only it's too overkill to use a CSS framework but also newbie challenges (at least for me) are challenges to sharpen your CSS skill. Unless you have got a reason for doing this, I recommend doing this challenge with pure CSS.
  • After you decide that, now some tips to to make the card responsive.
    • The cards don't need any height. Let the content inside it dictate the height of each card.
    • The container (element that wraps all the cards) only needs a max-width to control how to big the cards are allowed to grow.
    • If you find yourself repeating the same styling for each card, I recommend creating a card styling and then adding card class name to each card. This way, you don't have to keep changing three cards styling.

  That's it! Hope this helps.

  2

  ---

  

  Rudolf Luayon•210

  @dumpdope1Posted over 2 years ago

  @vanzasetia Thaaaànk you so much for this feedback appreciate it.

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @dumpdope1 You're welcome, Rudolf! 🙂

  0