Skip to content
OverviewSolutions
8
Comments
21
P

Gabe

@gabeiAustin, TX320 points

I'm a library worker who is returning to the world of coding after some time to expand my understanding and (hopefully) build some new tools for myself and others in the field.

I’m currently learning...

React — Express — Web Accessibility — Web Security

Latest solutions

  • Meet Landing Page

    #sass/scss#node
    P
    Gabe•320
    Submitted 5 months ago

    All criticism welcome - thanks!

    1 comment

  • Testimonial Grid

    #node#sass/scss
    P
    Gabe•320
    Submitted 5 months ago

    Feedback on anything and everything is welcome!

    1 comment

  • Four Card Feature Section

    #sass/scss#node
    P
    Gabe•320
    Submitted 6 months ago

    I would like some critique on my usage of grid. I am pretty new to css grid and I haven't delved into best practices yet.

    1 comment

  • Product Preview with Cart Animations and Background Styling

    #animation#node#sass/scss#accessibility
    P
    Gabe•320
    Submitted 6 months ago

    Any feedback is great. If anybody has insight into css animations or the logic that controls them in the JS, I'd love some resources.

    2 comments

  • Recipe Page

    #node#sass/scss
    P
    Gabe•320
    Submitted 6 months ago

    I'm open to any and all criticism. I'm especially curious about how to clean up my CSS a bit, particularly when it comes to making it responsive. It may look different by the time you read it because I'd like to touch it up and refactor it a bit.

    1 comment

  • Social Profile Links

    #sass/scss#node
    P
    Gabe•320
    Submitted 6 months ago

    I would like some overall feedback, but especially on responsive design and how to structure it in my CSS. I've seen it done in a variety of ways, so I'm open to change or insight on best practices!

    1 comment
View more solutions

Latest comments

  • P
    Steven•180
    @stevensuna
    What are you most proud of, and what would you do differently next time? Built With
    • Semantic HTML5 markup
    • CSS custom properties and BEM methodology
    • Vanilla JavaScript with ES6+ features
    • Mobile-first responsive design
    • Focus on accessibility
    • Progressive enhancement
    Key Features
    • Responsive Design: Adapts seamlessly between mobile and desktop views
    • Keyboard Accessibility: Full keyboard navigation support with focus trapping
    • Screen Reader Support: ARIA attributes for enhanced accessibility
    • Smart Animations: Respects user's motion preferences
    • Click Outside: Closes share popup when clicking outside
    • Performance Optimized: Debounced resize handling
    What I Learned

    The project provided great insights into creating accessible interactive components. Here are some key implementations:

    Managing component state:

    const state = {
  isShareActive: false,
  isMobileView: window.innerWidth < BREAKPOINTS.TABLET,
  focusableElements: [],
};

    Implementing focus trapping for keyboard users:

    function setupFocusTrap() {
  const focusableSelectors =
    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
  state.focusableElements = Array.from(
    elements.sharePopup.querySelectorAll(focusableSelectors)
  );
}

    Respecting user preferences:

    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
  document.documentElement.style.setProperty("--transition-default", "0s");
}

    Article Preview Component Solution

    #node
    1
    P
    Gabe•320
    @gabei

    This looks awesome! I really like your animations and the fluidity with which the different menus popup. The focus trap is also a nice touch. I don't know that I have a lot of constructive criticism to add, so I'll nit pick about the share button being a little finicky to click on PC.

  • P
    Gabe•320
    @gabei

    This looks great! I recently realized the power of including media queries in text mixins. Super clean :)

  • P
    Gabe•320
    @gabei

    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
  • P
    Kumani Kidd•170
    @amancalledkidd
    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
    P
    Gabe•320
    @gabei

    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
  • Ana Tereza Suzana•20
    @ana-suzana
    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
    P
    Gabe•320
    @gabei

    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
  • P
    Gabe•320
    @gabei

    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
View more comments