3-Column-Preview using html and css

Community feedback

• 

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  Hello, Michelle! 👋

  Good effort on this challenge! 👍 Your solution looks great! 👏

  However, I recommend refactoring the CSS by following this guide.

  • First, you don't need absolute positioning. It works well here, however, in a large project (like landing page challenges), it would be a pain to position every element with absolute positioning, especially in making the layout responsive. So, to make the card in the middle of the page you can use flexbox instead of margin and position properties and use padding to control the position of the element inside the card.
  • Second, the element that wraps all the cards only needs a max-width to prevent the cards from becoming too large.
  • Third, every card doesn't need width and height. For width, since it's a block element it will for sure have width: 100% so it will follow the max-width of the parent element. For height, let the element inside it controls the height of it. After that, add padding to prevent the element inside it from touching the edges of the card.

  For the HTML, I recommend leaving the alt empty for all icons because they are only for decoration purposes.

  That's it! Hope this helps.

  2

  ---

  

  Michelle Monrreal•40

  @MichelleMonrrealPosted over 2 years ago

  @vanzasetia Thanks so much this definitely helps! Really appreciate it!

  0

  

  Vanza Setia•27,775

  @vanzasetiaPosted over 2 years ago

  @MichelleMonrreal You're welcome! 😄

  0
• 

  Alexander Hoinville•20

  @ahoin001Posted over 2 years ago

  I would definitely check out flexbox to make things a little easier! Makes centering and laying out elements nice and easy

  https://css-tricks.com/snippets/css/a-guide-to-flexbox/

  Really good visual practice tool https://flexboxfroggy.com/

  1

  ---

  

  Michelle Monrreal•40

  @MichelleMonrrealPosted over 2 years ago

  @ahoin001 Thanks! I'm doing a css course on udemy so I'm practicing what I have learn so far just to get the hang of certain things. And about to get to the flexbox section of the course. But I will definitely check these links out! Thanks again!

  0

  

  Alexander Hoinville•20

  @ahoin001Posted over 2 years ago

  @MichelleMonrreal it’s a game changer for sure ! And your stuff is coming out awesome you got this!

  0

  

  Michelle Monrreal•40

  @MichelleMonrrealPosted over 2 years ago

  @ahoin001 Thanks again!

  1