html ,css, cards

Community feedback

• 

  Myles Enriquez•30

  @enriquezm

  Posted over 4 years ago

  Hey osochash great job on the conversion!

  Here's my feedback:

  • For the container .cards, I recommend you use display: grid. You'll be able to define your grid gaps and position cards easier where ever they need to be place on different breakpoints.
  • I noticed inside a card you have a div that contains the image. You can get away from that by just defining your styles on the img itself. I recommend doing this so we're not introducing nodes to the DOM that aren't needed.
  • For a card. I recommend using display: flex; flex-direction: column; Essentially, there are only 3 items in a card. Two are aligned to the left, the third (the image) is aligned to the right (using align-self: end).

  20
• 

  Szymon Rojek•4,540

  @SzymonRojek

  Posted over 4 years ago

  Hi Gerardo,

  Welcome here, well done :D

  @enriquezm already mentioned important points but also I have checked your project, mainly HTML structure by the inspector in my browser and RWD => a few tips below:

  • instead of div class="texto" I'd suggest to use the header tag;
  • we can only use one the h1 tag on a page so in this project you can use the h1 and inside of it two spans: main-heading and sub-heading;
  • instead of div class="cards" you can use the main tag just to indicate the main content on a page;
  • names of the classes are not readable and descriptive so I'd recommend check the BEM naming convention;
  • you have to reset the CSS styles;
  • check a project in your browser by using the inspector on different devices => the flexbox doesn't work, cards are not growing and do not decrease according to the vwidth;
  • Important: you have used an explicit width a few times => that's not a good practice especially that you want to use the flexbox or grid. It is essential to understand well the height and width vs min-height/max-height & min-width/max-width. You shouldn’t need to give items height unless they have a background or absolutely-positioned or floated elements within them that would not normally be accounted for in the height of an element. Experienced developers use min-height and min/max-width more than anything else. It allows elements to grow and shrink;
  • try to create RWD dedicated for tablets => one column for mobiles, then two rows with two boxes each, and finally desktop design pattern;
  • try to make a project in accordance with the original design;

  Ps. Don't forget to upvote any comments on here that you find helpful.

  Greetings :D

  10