HTML CSS (Grid)

Community feedback

• 

  Arturo Simon•1,785

  @artimysPosted about 4 years ago

  It's a well attempt Diego, I'll provide some thoughts below.

  • I see a lot of duplicate styling to your .fundamental-n classes. I'll refer to them as a card from here. Before writing any css, look at the design and see if you notice similar patterns of styles first. You can then create a base class that share those common styles then create another class to differentiate it. Example below. At this point your .card is a component that can be re-used multiple times. I'm using BEM as a way of naming components. If interested more info here

  <div class="card card--purple">
          <img class="card__image" src="images/image-daniel.jpg" alt="Daniel">
           ...
  </div>
  <div class="card card--gray">
          <img class="card__image" src="images/image-jonathan.jpg" alt="Jonathan">
           ...
  </div>
  

  • For your CSS grid. I can't see a reason for the media query on your fundamental. But a few tips to help with the grid.

  Remove the min-height, grid-template-rows from your .fundamental. Also remove the align-items: center which should not squeeze the card's height and doesn't benefit because the cards do not need to be vertically centered.

  • To help with not calling the same values over and over again. I recommend looking to CSS custom variables. SCSS can be also useful for variables plus other things to making writing CSS easier, especially when writing out BEM.

  • I recommend adding a max-width using a px based value to your main container .fundamental. There's a point where the viewport can get really wide and could possibly skew the design. It highly depends on the design but in this case I think it's needed.

  My apologies for it being rather long. Keep it up. It's all about practice 👍👍

  0

  ---

  

  Diego-Mike•85

  @Diego-MikePosted about 4 years ago

  @artimys

  Hi bro, as you know, i'm still learning and feedback like this it's something i really really REALLY appreciate, so, thank you for those advices, i'm gonna apply them and keep grind !

  1