AJ-Tan

Latest comments

• 

  P

  Bára Kalvodová•120

  @BaraKalvo

  Submitted 18 days ago

  What specific areas of your project would you like help with?

  I’d say the result looks correct at all breakpoints, but I’m not quite confident about how I implemented it. It feels like the way I’ve written it (explicitly defining columns, rows, and grid areas for each card) is too rigid and not really practical – for example, if the content of a card changes or if new cards are added, the whole layout breaks or I need to set new grid areas manually.

  I'd like to know how to make the layout both match the design and be more flexible at the same time? I tried using auto-fit for the columns, but it messed up the entire layout. I'm still a beginner with CSS Grid, so I’d really appreciate any tips or feedback :-)

  

  Responsive Testimonials layout using CSS Grid

  1

  20
  

  AJ-Tan•170

  @AJ-Tan

  Posted 18 days ago

  I can only provide theory or concept of how we can achieve it CSS.

  This can be achieved by preemptively preparing grid area.

  Example: There is only 2 cards, but can later be added up to 5 cards.

  we have something like this

  <div class="parent">
      <div class="card"></div>
      <div class="card"></div>
  </div>
  

  .parent {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     /* Note: card3, card4, and card 5 does not exist yet */
     grid-template-areas:
         "card1 card2"
         "card3 card3"
         "card4 card5"
  }
  
  /* Using :nth-child(n) is the key for this to work */
  .parent > .card:nth-child(1) {
     grid-area: card1;
  }
  
  .parent > .card:nth-child(2) {
     grid-area: card2;
  }
  
  /* Note: these card doesn't exist yet, but we preemptively prepared it */
  .parent > .card:nth-child(3) {
     grid-area: card3;
  }
  
  .parent > .card:nth-child(4) {
     grid-area: card4;
  }
  
  .parent > .card:nth-child(5) {
     grid-area: card5;
  }
  

  New cards will be added based on how you set it up in the grid area. Only issue with this, is that the parent will have extra spaces for the unused areas. Not a clean solution, but its something. If there are better ways to achieve this using only css solution, I would love to know too.

  0
• 

  Banini-AD•130

  @Banini-AD

  Submitted 27 days ago

  What are you most proud of, and what would you do differently next time?

  Here's a Sass I'm proud of,

  @mixin display-flex ($flex-direction, $justify-contents, $align-items) {
      display: flex;
      flex-direction: $flex-direction;
      justify-content: $justify-contents;
      align-items: $align-items; 
  } 
  

  Ive never used Sass before so been able to write this after watching a youtube tutorial was a real joy for me. I had to even celebrate it with a dance.

  What challenges did you encounter, and how did you overcome them?

  Creating the grid desktop view was a real challenge for me. It took days of consistent effort to get it right. I had to go through grid tutorials multiple times to figure everything out.

  What specific areas of your project would you like help with?

  I would love your help with my Sass files—if you could take a look and share some tips on how to improve them, that would be fantastic! Also, I'm eager to level up my CSS grid styling, so any advice you have would be super appreciated. Thank you so much!

  

  Responsive Four Card Feature

  #sass/scss

  2

  20
  

  AJ-Tan•170

  @AJ-Tan

  Posted 20 days ago

  One thing I can say is... I love SASS!

  My favorite feature when using SASS is how clean I can write my scss when incorporated with using BEM naming for the classes in my html elements!

  for example:

  HTML using BEM naming for the classes:

  <article class="card">
      <h2 class="card__header">...</h2>
      <p class="card__description">...</p>
  </article>
  
  /* Card, but background is color green! */
  <article class="card--green">
      <h2 class="card__header">...</h2>
      <p class="card__description">...</p>
  </article>
  

  in scss you can call them like this:

  .card{
      ...
      &__header {
          font-size: 1.8rem;
      }
      
      &__description {
          font-size: 0.9rem;
          line-height: 1.1;
      }
  
      &--green {
          @extend .card; /* copying the properties of .card */
          background-color: green;
      }
  }
  

  This feature alone made me love using SASS. I hope this will inspire you too!

  BEM Naming: https://getbem.com/naming/

  2

  Marked as helpful