Skip to content
OverviewSolutions
8
Comments
21
P
Gabe
@gabei

All 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
  • Cláudio Júnior•10
    @claudiojrdev
    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
    P
    Gabe•320
    @gabei

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

    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!

  • P
    Kuvashnee Naidoo•450
    @KuvashneeNaidoo
    What are you most proud of, and what would you do differently next time?

    While working on this task, I learned how to use SCSS to nest selectors, making the styles more structured and readable. SCSS also helped to support variables to store reusable values like colors and fonts. I will continue to focus on improving my SCSS skills by diving deeper into mixins to define styles that can be re-used throughout the stylesheet.

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

    At first, I found it a bit tricky to manage global styles such as font and colour variables. I then created a centralised approach which I defined in the :root and at the top of my SCSS file. This allowed me to easily reference the reusable values.

    Social Links Profile created using HTML and SCSS

    #sass/scss
    1
    P
    Gabe•320
    @gabei

    This looks awesome! I love the color alterations and the slight hover animation for the buttons.

    I don't have a lot to say, but I'll add the two things that I pretty much tell everybody since I think they're interesting:

    1. When viewing your site on a device in landscape mode on a mobile device (quite an edge case), the container extends beyond the top of the screen. How might you prevent that from happening?

    2. From a semantic HTML perspective, I tend to think of the social links as a list of sites to visit. This looks the same visibly, but changes how screen readers read off the content. Personally I think the difference is negligible for a site like this, but it's worth mentioning.

    Nice work and happy coding!

    Marked as helpful
  • P
    Gabe•320
    @gabei

    Hello!

    If I can add to what LittleSamm said:

    Check out this article about semantic HTML. In short, it is helpful to have certain elements on the page labeled a certain way (<main>, <h1>, <h2> (in order), etc. This is especially helpful for screen readers, but also helps you to style and organize your code in logical order.

    Something I wanted to add was to check up on the width of the recipe container. Currently it is centered using some margins, but I think you'll find that this starts to act a little odd when you view the page on a smaller device. Here's a classic article about centering divs.

    Nice work and happy coding!

    Marked as helpful
  • Fady•30
    @fadymas
    What are you most proud of, and what would you do differently next time?
    • I learned a great deal about image editing.
    img {
  width: 230px;
  clip-path: circle(26%);
  object-fit: cover;
  object-position: top;
  height: 100px;
}
    What challenges did you encounter, and how did you overcome them?

    "I use CSS properties like clip-path: circle(26%), object-fit: cover, and object-position: top to create and style circular profile photos, controlling the shape, image scaling, and cropping."

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

    I don't have anything in particular I need help with right now, but I'd welcome any useful comments or suggestions. Thanks!

    Social links profile. Semantic HTML5 markup, Font-size using clamp()

    #accessibility
    1
    P
    Gabe•320
    @gabei

    Nice - it looks great and responsive! I'll try to nit pick something since you've covered most of it.

    1. I always mention to people how their site looks when viewed in landscape mode on a mobile device. I used to struggle with this a lot when I used 100vh. How can we accommodate this?

    2. Maybe this is a matter of personal preference, or maybe somebody smarter than me can correct me: I tend to look at projects like this as a list of links. Stylistically it looks the same, but the way it is read by a screen reader is a little different.

    Nice job and happy coding!

    Marked as helpful
  • arthurquique•50
    @arthurquique
    What are you most proud of, and what would you do differently next time?

    I think I have a prettier code than on the last project where I used divs for everything.

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

    Getting started is always the most challenging to me but it becomes more and more easy with experience.

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

    Tips for judging which type of display to use for each element.

    Social links profile

    1
    P
    Gabe•320
    @gabei

    Nice job! A few things to mention, and hopefully an answer to your question.

    1. As far as types of display go, I think you're fine. One thing I would consider is the type of elements you use for the social links on the card. They might be thought of as an unordered list, which is helpful to screen readers when announcing the content ahead. Styling the section as a grid works fine in your case, but I think beginning with a list of links here makes the overall styling a bit simpler in the long run.

    2. Check out how 100vh on the body affects the card's visibility when you switch to landscape mode on a mobile device. This can actually be a quick fix (check out the min-height property, for example).

    Hope this helps. Happy coding!

    Marked as helpful
  • Abigail Figaro•290
    @abigailjulie
    What are you most proud of, and what would you do differently next time?

    Next time I will incorporate more ADA, happy this was done quickly.

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

    I wasn't able to achieve the brightness on the eye icon. I'm not sure if it has to do with z-index, or filter.

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

    the brightness on the eye icon and semantic HTML comments.

    NFT Preview Card w/BEM

    #bootstrap#bem
    1
    P
    Gabe•320
    @gabei

    The eyeball icon is being affected by the opacity of its container, .card_image_overlay. Even if the opacity of the eye itself is set to 1 on hover, it will fall within the bounds of its parent's setting of 0.4. It's a bit of a tricky fix, but I would start there.

    Happy coding!

  • P
    Bastien Winant•20
    @BastienWinant
    What are you most proud of, and what would you do differently next time?

    I made a small extension by allowing for multiple category tags and incorporating some accessibility elements (which I need to do more of).

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

    For accessibility reasons, I did not want to wrap the entire card content in <a> tags, which made it difficult to create the intended hover effect. In my solution, the hover effect (change in font color) when the mouse is directly on the title.

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

    Any comment on the React approach would be appreciated. In this instance, I favored using props over creating a compound component.

    I also need help with accessibility best practices.

    Blog Preview Card

    #react
    1
    P
    Gabe•320
    @gabei

    This looks awesome! I love the card component. It is more modular and is ready to accept variable amounts of props (like additional tags).

    That card hover animation is tricky. After some research I ended up adding an empty :after pseudo element to my link so that I could make it span the whole card without actually wrapping the card in an <a> tag.

    Speaking of hovering: As of writing this, your card does not have the box-shadow change on hover.

    Happy coding!

  • P
    Gabe•320
    @gabei

    This looks awesome! I have very little to say. I had actually never seen the clamp() function before, but after looking at this I want to learn more about it.

    My understanding of the <article> tag is that it is meant for standalone content that can be understood on its own without other context. The examples that W3 Schools use are things like blog posts, news stories, etc.

    I would argue that all of the recipe's content makes sense as a whole together, but each part is basically its own piece — maybe even the whole recipe is an article itself. I don't have an answer for that now, but just wanted to mention it as food for thought.

    Thanks for teaching me something!

  • Doctor-netizen•20
    @Doctor-netizen
    What are you most proud of, and what would you do differently next time?

    I'm really excited to have complete the project in a very short while.

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

    I didn't encounter any challenge really because I have once tried to do this project.

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

    On this project, so far there's no where I would like help with.

    QR-code Project using HTML and CSS

    1
    P
    Gabe•320
    @gabei

    Hello!

    The solution that I am seeing here does not match the design. At present, the QR code is far off to the side and the container is spanning the whole width of the page.

    The structure of the HTML is partially to blame here, but I think you should also take a look at some of the CSS properties you used to see how they should be applied.

    Here is the W3 doc on justify-self, a property applied to a few elements on your page. Here is an article about horizontal and vertical centering.

    I hope this helps - happy coding!

  • Pedro Henrique Jordão•40
    @vargasneto
    What are you most proud of, and what would you do differently next time?

    melhorando...

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

    organizar os itens

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

    ...

    Card Social

    #animation#accessibility
    1
    P
    Gabe•320
    @gabei

    Hey this looks pretty good at all sizes! A couple of things:

    1. If someone were to look at this page in portrait mode, your card would be going out of the top of the screen. How might you remedy that?

    2. There are a lot of magic numbers in the styles. For instance, your avatar is centered by adding a left margin to push it into the middle of the card. If something in the width of the card design were to change by even one pixel, the image becomes out of center.

    Just a couple of things to consider. Happy coding!

  • 𝒗𝒂𝒍•70
    @vasalma
    What are you most proud of, and what would you do differently next time?

    I'm most proud that I could make the whole project, but I definitely need to be faster next time!

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

    Adjusting the flex properties and layout settings in general. I had to use some AI to improve and undestand what I needed to do.

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

    Definitely, layout and design; but I'm open to receiving any recommendations necessary to improve in any aspect.

    QR website

    1
    P
    Gabe•320
    @gabei

    Nice - looks great!

    Quick note about the image: In this instance you can actually remove the div that is surrounding the QR code (currently wrapped in a div with class="QR"). Applying the same styles to the image without the wrapping div will result in the same output.

    If you do this, you would have to update your CSS from ".QR img" to ".QR-box img". I tried it just now in the inspector and it still looks great!

    Now here's the real kicker... Doing the same thing as above, but with the text :)

    Marked as helpful