Skip to content
OverviewSolutions
14
Comments
14
P
Andrew A Lee
@drewlee

All comments

  • Duncan Chege•340
    @duncan-chege
    What are you most proud of, and what would you do differently next time?
    • I'm proud to have finished this project. It seems easy, but it's tricky
    • I used Context API to manage my states and useRouter for programmatic navigation
    • I asked for help within my React networks, and 3 guys gave me fine solutions
    What challenges did you encounter, and how did you overcome them?
    • Switching between light and dark modes was problematic considering I was deploying my app on Vercel. However, I watched a YouTube tutorial and consulted ChatGPT when I was stuck
    • Managing multiple states was tricky, considering I was moving them in different routes. However, I solved that using Context API

    Frontend Quiz App using Next JS and Tailwind CSS

    #next#react-router#tailwind-css#typescript
    1
    P
    Andrew A Lee•380
    @drewlee

    The functionality works well, as I was able to run through the quiz topics. The visual design can be improved to better match the design specification. I would particularly pay attention to the font sizes for each respective viewport and the specific dimensions for the interactive elements, which should be quite a bit larger on the desktop. I've also noticed one minor issue with the toggle switch. If the dark theme is enabled and the page is refreshed, the toggle switch's state isn't synced up with the theme. Meaning that the switch should be enabled. Hope that helps!

    Marked as helpful
  • P
    Aydan•680
    @AydanKara
    What are you most proud of, and what would you do differently next time?

    ✅ Proud of:

    • Custom UI Components: I successfully created a visually appealing and accessible UI, including a custom range slider and styled checkboxes.
    • Smooth user interactions, such as real-time updates on password strength and a visible "Copied" message.
    • Strong password generation using crypto.getRandomValues(), ensuring security.
    • Good use of CSS variables for easy customization of colors and styling.
    • Proper event listeners to dynamically update the UI and handle interactions.

    🔄 What i would do differently:

    • Improve accessibility by adding aria-live to announce changes in password strength and copy status.
    • Use localStorage to remember the last selected settings when reloading the page.
    • Enhance the strength calculation by considering character variety, not just length.
    • Optimize CSS further, possibly using clamp() for better responsiveness.
    • Consider using CSS animations for smoother transitions (e.g., on password strength bars).
    What challenges did you encounter, and how did you overcome them?

    ✅ Dynamic Strength Meter Updates: Ensuring the correct number of bars filled dynamically required restructuring the JavaScript logic.

    👉 Solution: I used an array-based approach to update individual bars based on strength levels.

    ✅ Custom Range Slider Styling: Making the range slider fill dynamically with color while keeping it cross-browser compatible was tricky.

    👉 Solution: I used CSS gradients and JavaScript event listeners to update the slider background dynamically.

    ✅ Checkbox Custom Styling: Styling checkboxes with a custom SVG check icon was challenging due to browser inconsistencies.

    👉 Solution: I used background-image with :checked pseudo-class and ensured accessibility compliance.

    ✅ Secure Password Generation: Using Math.random() was not secure enough.

    👉 Solution: I switched to crypto.getRandomValues(), which provides cryptographically secure randomness.

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

    🔍 Looking for feedback on:

    • Better password strength algorithms – Right now, we check only length. Could we analyze character diversity for a more accurate rating?
    • More accessible UI/UX – How can we improve screen reader support and keyboard navigation?
    • Code optimization – Are there better ways to handle event listeners and state management in plain JavaScript?

    Password generator app

    #accessibility
    1
    P
    Andrew A Lee•380
    @drewlee

    The solution visually looks good and is overall faithful to the design. The interaction is sound. A few suggestions for improvement:

    • In terms of responsiveness, it would be good to scale down the font sizes and other interactive elements to match the mobile design spec. E.g., media queries to target specific styles on small vs. larger screens.
    • Match the custom range slider styles for the Firefox browser, as the vendor-specific pseudo elements such as ::-webkit-slider-thumb are only valid for Webkit-based browsers. As such, the range slider currently looks unstyled in Firefox.
    • The password strength calculation should take into account the type of characters that are being used to compose the password, not just its length. For example, a 20-character password composed of only numbers is not as strong as a 20-character password composed of lowercase letters, since there are only 10 characters to choose from, making it much easier to crack due to a smaller amount of possible combinations.
    • A long password string gets truncated, especially on smaller screen sizes. I ran into the same issue and ended up slightly reducing the font size when the length of the password is longer than 15 characters so that the entire string is visible.

    Hope that helps!

    Marked as helpful
  • Anthony Molina•290
    @LivexTwin
    What are you most proud of, and what would you do differently next time?

    https://github.com/LivexTwin/tip-calculator-app?tab=readme-ov-file#what-i-learned

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

    This was my first time building any type of calculator app, so of course, it came with a lot of bumps and bruises. But online resources and a lot of guides helped me understand exactly what goes into building out the business logic of these things.

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

    How could I have been more creative? For example, should I include a smooth calculation animation to make the app feel even more intuitive? Feel free to leave any feedback.

    100% Fully Responsive Tip Calculator App | Vanilla JS | ARIA

    #accessibility
    1
    P
    Andrew A Lee•380
    @drewlee

    Good work on the visuals and interactions! The app is true to the design and works well on responsive screens.

    From an accessibility perspective, the use of radio buttons is a bit confusing for keyboard-only users, as there's a lack of focus indicators and it's not readily apparent that a selection needs to be made by using the arrow keys, as opposed to using the Tab key. Additionally, the selected radio isn't indicated as active if it's selected with the keyboard. I'd advocate for using a set of HTML buttons, but that's ultimately up to you.

    Good idea on leveraging the IMask library. It sure beats having to manually restrict the character inputs like I did!

    Marked as helpful
  • P
    Andrew A Lee•380
    @drewlee

    The solution visually and functionally looks good. The elements are slightly bigger than in the design spec, but not a major problem.

    Some things to consider:

    • There's a layout variant for tablet-sized screens, where the navigation is at the top, just like in mobile, but the activity cards are broken up into 3 columns and 2 rows, similar to the desktop layout. So it's basically an "in-between" version of mobile and desktop.
    • We should try loading the JSON data asynchronously using a fetch request instead of hardcoding it in the JS file.
    • For accessibility, we should use actual interactive HTML elements for the navigation, such as <a> or <button>, so that they are operable by people with disabilities, especially by users who are unable to use a mouse and rely on the keyboard alone.
    Marked as helpful
  • P
    Andrew A Lee•380
    @drewlee

    This is a good start, and the functionality is mostly there. The visuals could be tightened up to match the design. Otherwise, happy coding!

  • ylin320•200
    @ylin320
    What are you most proud of, and what would you do differently next time?

    Proud of:

    1. Successfully implementing the share button toggle functionality with clean JavaScript code
    2. Creating a responsive layout that works well on both mobile and desktop using CSS Grid
    3. Mastering the use of CSS pseudo-elements to create the bubble shape for the share container
    4. Achieving a clean and semantic HTML structure

    Would do differently:

    1. Plan the HTML structure more carefully before starting mobile development to avoid major refactoring
    2. Consider using CSS variables for breakpoints to make responsive design more maintainable
    3. Implement better state management for the share button functionality
    4. Add more error handling in JavaScript code
    What challenges did you encounter, and how did you overcome them?

    1. Image Responsiveness Challenge:

      • Problem: Struggled with image filling and scaling in different screen sizes
      • Solution: Successfully implemented CSS Grid layout with specific column sizing

    2. Share Container Positioning:

      • Problem: Needed to create a bubble shape for the share container
      • Solution: Used CSS ::after pseudo-element with border properties to create the desired shape

    3. Mobile-First Development:

      • Problem: Moving the author section inside content required significant CSS adjustments
      • Solution: Learned to plan the structure more carefully before starting mobile development
    What specific areas of your project would you like help with?

    1. CSS Grid and Layout:

      • Need guidance on handling more complex grid layouts
      • Want to learn advanced grid techniques for better responsiveness

    2. JavaScript Best Practices:

      • Looking for advice on state management
      • Need help with code organization and reusability

    3. Responsive Design Planning:

      • Seeking tips on better initial structure planning
      • Want to improve mobile-first approach organization

    Article Preview Component - A Responsive Social Sharing Interface

    1
    P
    Andrew A Lee•380
    @drewlee

    Overall, the solution visually looks good. The font size of the heading should be slightly larger to match the visual style guide. A minor improvement would be to better handle the component's vertical alignment between the mobile and larger screen sizes. Right now, the jump between being top-aligned for mobile and center-aligned for tablet/desktop is a bit jarring. The following block of JavaScript code can be more concisely written using a ternary operator.

    Before:

          if (shareContainer.style.display === "flex") {
        shareContainer.style.display = "none";
      } else {
        shareContainer.style.display = "flex";
      }

    After:

          shareContainer.style.display = 
        shareContainer.style.display === "flex"
          ? "none"
          : "flex";

    Hope that helps!

    Marked as helpful
  • P
    Andrew A Lee•380
    @drewlee

    The page is functional and overall fairly close to the spec. I'd suggest a few improvements to more accurately match the visual design.

    • The black heading color is harsh and should be set to the "Slate 900" variant that is established in the style guide.
    • Same issue for the section markers (e.g., "01", "02"), which should be the "Slate 600" variant.
    • The main heading should be a smaller font size for mobile screens.
    • The user pictures in the grid should feature a border-radius.
    • The footer background color should be "Cyan 600" instead of black.

    Additionally, I would look into leveraging more semantic HTML elements for your markup, such as heading, main, footer, section, and article elements. Divs should just basically be reserved for stylistic only purposes or used as a last resort when there are no better options.

  • P
    Andrew A Lee•380
    @drewlee

    The web page visually looks good and is fairly close to the design spec. The gap between rows should be closed up to 24px on the desktop view. There's gap spacing between the middle two rows in table view that is inconsistent with the others.

    Instead of setting display: none on elements based on the viewport size, we can manipulate the specific rows and columns an element stretches across by leveraging the grid-row-start, grid-row-end, grid-column-start, and grid-column-end properties. This way, we don't end up with a bunch of duplicate content in the DOM.

    Marked as helpful
  • P
    Andrew A Lee•380
    @drewlee

    The cards should be slightly wider, at 350px for tablet and desktop screens. Also, in the design, the top card's color bars are straight across and don't display the curvy corners that are the result of the element's border radius. We should try to come up with an approach to render the color bars without relying on the border style. Otherwise, the visual design and code looks good.

  • P
    Andrew A Lee•380
    @drewlee

    The font size on the product title and sale price is slightly smaller than the design. It should be increased from 28px to 32px.

    The responsiveness of the layout works well. However, there is a slight, abrupt jump around the 600px viewport width, where the mobile image gets used for the desktop layout.

    Otherwise, looks good and is overall faithful to the design.

    Marked as helpful
  • P
    Andrew A Lee•380
    @drewlee

    Overall, the functional web page looks good and is faithful to the design. I would suggest a few tweaks to match the design more accurately.

    1. The font size on the primary heading is slightly undersized. It should be 40px for desktop and slightly smaller at 36px for mobile screens.

    2. Same issue for the secondary heading, titled "Preparation time". It should be slightly bigger at 20px for both screen sizes.

    3. The remaining headings should also be slightly enlarged from 24px to 28px.

    Hope that helps!

  • P
    Dany Hoepfner•50
    @DanyHoepfner
    What are you most proud of, and what would you do differently next time?

    I am most proud that I managed to add keyboard events to navigate the links. Next time I'll try to use more descriptive class names and more semantic html.

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

    It took me a while to get the links to spread to the width of its container, but then I found out that could just set its width to 100%.

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

    Is the code semantic enough? good readable?

    Social links with keyboard navigation logic

    1
    P
    Andrew A Lee•380
    @drewlee

    The layout looks great and matches the design spec, as well as being responsive. The code looks good and clean. I have a few optional suggestions that could take this feature to the next level, but they're totally up to your discretion.

    1. The navigation links in the HTML can be made more semantic by encapsulating the links with a <nav> element instead of a <section>.
    2. Usage of aria-label on the links is unnecessary in this case, as screen reader users would be notified of the role of the element (link) along with its URL, and text content, providing more than enough context as to their purpose. Hence, stating "Visit <name> profile" explicitly is a bit redundant and noisy.
    3. The padding on the top and bottom of the card is slightly larger on the desktop screen vs. the mobile screen.
    4. Providing link access by arrow navigation is pretty great! To really streamline the UX, it would be ideal to cycle the focus. For example, if the user is on the last link, pressing down would return the user's focus to the first link. If the user is on the first link, pressing up would place the focus on the last link.
  • P
    Dany Hoepfner•50
    @DanyHoepfner
    What are you most proud of, and what would you do differently next time?

    Most proud am I that I completed this challenge 100 percent by myself. For the next time I'd like to include Block Element Modifier (naming convention for css classes).

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

    Challenge was the same as always when dealing with css, the good old layout and positioning.

    It went better than in the first challenge but it stays a struggle for me.

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

    It would be nice if someone who reads my code could judge my code in terms of

    • semantic html
    • readability

    Responsive Blog Preview CSS card component with simple effects

    2
    P
    Andrew A Lee•380
    @drewlee

    Visually, the site looks great. The associated HTML and CSS code is clean and legible. One minor suggestion would be to look into using clamp() to adjust font sizes in relation to the viewport size. One of the challenges of the project was to make the type size and card width responsive without using media queries. Otherwise, love the transition of the hover effect. Good work!

    Marked as helpful
  • P
    Andrew A Lee•380
    @drewlee

    The solution looks great from a coding and visual perspective. My only suggestion for improvement would be to leverage the "Outfit" web font to match the typography that is included in the Figma design. The custom font is fairly straightforward to incorporate as outlined on the resource's website.

    As another suggestion, while absolute position is quite sufficient for vertical alignment in this case, a more modern approach would be to leverage Flexbox. While I wouldn't necessarily rewrite this particular implementation, it would be a great aspect to learn and keep in mind for future projects.