Gabe

Latest comments

• 

  Jason Burke•130

  @JasonPBurkeSubmitted 11 days ago

  

  mobile and desktop with css grid

  #sass/scss

  1

  10
  

  P

  Gabe•300

  @gabeiPosted 8 days ago

  Nice job! I think the max-width of the grid could be a little larger on desktop, but otherwise looks great! I just thought of something that I'll share with you also because I found it interesting:

  You used nth-child property to style the different testimonial sections. If we were to add a variable amount of sections, but still wanted them to alternate colors, we could use the nth-child(an+b) operation to determine a set of colors to alternate through.

  I made a codepen to demonstrate. The syntax is nth-child(4n+b), representing that we want to alternate through 4 colors.

  Anyway - I hope you also found this interesting. Happy coding!

  Marked as helpful

  1
• 

  P

  Kumani Kidd•150

  @amancalledkiddSubmitted 15 days ago

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

  Using grid for the first time, I had previously mainly used flexbox. I will use it more often in the future, its a useful tool.

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

  I had recently been learning about cube-css after watching the link provided in a previous section. However I found it hard to use as I didn't have a full understanding. I have applied some of the best practices but I ahve a lot more to learn.

  Also find it challenging to know the best practices of semantic HTML, overcame this through reading more and trial and error.

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

  Best practices for naming classes?

  Is my use of Scss nesting correct?

  Any suggestions for improving this solution?

  

  Responsive four card feature using Grid and Scss

  #sass/scss

  1

  20
  

  P

  Gabe•300

  @gabeiPosted 15 days ago

  Hey nice job!

  To answer your question about SCSS nesting:

  Usually the benefit of nesting in SCSS is the ability to append class names under the parent element. This is especially apparent when using a CSS methodology like BEM.

  For instance, if you had a paragraph tag with a .card__text class listed under your .card element, you might wright something like:

  .card {
     border: 1px solid black;
  
     &__text {
        padding: 2rem;
     }
  }
  

  This would output to:

  .card { styles here }
  .card__text { styles here }
  

  This can allow you to sort your CSS into a module-like arrangement, where all associated code is bundled together under a .card element at the top.

  Expanding on that idea is then quite easy:

  &__text {
     padding: 2rem;
     &--bold {
       font-weight: 800;
     }
  }
  

  outputs to:

  .card__text--bold { font-weight: 800 }
  

  And so on and so forth.

  I hope this helps - happy coding!

  Marked as helpful

  0
• 

  Ana Tereza Suzana•20

  @ana-suzanaSubmitted 16 days ago

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

  Using CSS grid was a challenge for me. I had never made a web page with CSS grid before, but once I learned how to use it, I found it very useful and easier to work with than I thought.

  In addition, another obstacle I encountered during the process was using the different types of positioning of the elements.

  At the end of the project, I realized that I learned a lot of new things. I am very proud of myself.

  

  Responsive web page with CSS grid

  1

  30
  

  P

  Gabe•300

  @gabeiPosted 16 days ago

  Hello!

  A couple of things I notice right off the bat:

  1. The tablet sizing of your site places the cards into a sort of stack that doesn't match the design.

  2. Check the font colors! Yours appear more of a stark black in comparison to the design ( a more grey color) Definitely a little easier when you have access to the design file so no big deal.

  3. Your header text is off-center when sized down to mobile.

  I hope any of this helps! Happy coding!

  Marked as helpful

  1
• 

  GCrane93•70

  @GCrane93Submitted 22 days ago

  

  Blog Preview Card

  1

  10
  

  P

  Gabe•300

  @gabeiPosted 22 days ago

  Nice job - Looks pretty solid!

  The semantics of your HTML can be improved without jeopardizing the style of the page. Check out this W3 schools article for a start.

  You might also look into keeping a separate stylesheet to organize your code.

  Happy coding!

  Marked as helpful

  2
• 

  Cláudio Júnior•10

  @claudiojrdevSubmitted 26 days ago

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

  I think the project's responsiveness is not very good. On larger screens, the buttons extend beyond the main container, but I don’t know what the issue is in the CSS.

  I also think the way I use classes or HTML semantic markup might not follow common best practices

  

  Social Links Profile with CSS FlexBox

  1

  10
  

  P

  Gabe•300

  @gabeiPosted 26 days ago

  Hello!

  In regards to your question about the buttons extending beyond the container: Check out the height property that you set on the .container class. Look at the page in the inspector and try toggling that on and off. From my view, when I'm viewing your site on a mobile phone and I toggle that, I see quite a big change in the way the child items are arranged.

  BUT that is only when I really squash the page to be pretty small. Either way, the height of your container is already stretching to accommodate the space of the items inside of it. I'm not sure I'm seeing what you are on a big screen.

  ALSO if you do change that, you'll notice that your buttons get pushed together. There are a few ways to approach that. In this instance I would take a look at the gap property for flexbox containers.

  Happy coding!

  Marked as helpful

  1
• 

  Fernando Batista•510

  @FernJBatistaSubmitted 29 days ago

  

  Product Review Card Component

  #sass/scss

  1

  10
  

  P

  Gabe•300

  @gabeiPosted 28 days ago

  Hello - nice job!

  There are a few things I wanted to mention about your solution:

  1. On mobile devices the main container appears to be extending out of the bottom of the screen, which clips the Add to cart. This happens on mobile devices with a screen height less than 700px.

  2. You probably already know this, but you have some CSS variables initialized on the :root selector. You also use some SASS variables further down in your stylesheet. For consistency those could all be SASS variables, and maybe even separated into a separate stylesheet. The same can be said about the reset properties at the beginning. It might be a little neater to navigate for you if they are all separated into several files.

  Happy coding!

  0