Skip to content
OverviewSolutions
18
Comments
19
P
Kyle Mulqueen
@kmulqueen

All comments

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Really impressive work on the hamburger menu animation - that smooth transition adds a great polish to the user experience! The overall execution looks fantastic. I noticed you encountered the same challenge I did with the bottom three articles where the images don't quite fill the full height of their containers. It's a tricky layout problem that I haven't found an elegant solution for either. If you figure out a clean approach, I'd love to hear how you tackled it!

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

    R.A.S

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

    I’ve learned CSS and HTML before, so i thought it will be pretty easy but i have to admit i find difficulty to vertically center a div. I forgot that while using .main{ display: flex; align-items: center; }

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

    I need to improve my responsiveness and i encounter issues when i zoom-in up to 500% or zooming-out to 25% cause many elements went through their container and the design is no more suitable.

    Flex box QR Code

    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    Hey it looks like the link you provided for your live site is just the README. When I go to the GitHub repo and click on the Vercel link, I get a 404.

    Looking forward to seeing your finished project when the links are fixed!

    Also when looking at your code in the repo, the HTML looks nice and semantic! One suggestion is that you could use an <article> element instead of a <div> element for the card itself. Other than that good job following semantic HTML guidelines!

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Nice work on this project! I noticed a couple of areas that could enhance the user experience:

    1. The form doesn't reset the input fields after successful submission - users might expect the form to clear automatically.

    2. There's a persistent error state issue: if you submit with invalid input (showing errors), then fix the validation errors and resubmit, the error messages remain visible even after successful submission.

    Both are pretty common edge cases that are easy to miss during development. Overall, solid implementation though!

  • amir mirzakhani•170
    @amir-mirzakhani
    What are you most proud of, and what would you do differently next time?

    .

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

    .

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

    .

    js

    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    Nice work on this project! The functionality works smoothly, and I really appreciate the thoughtful animation you added for the accordion content transitions - it creates a polished user experience.

    I noticed a couple of minor details that could enhance the visual accuracy:

    • The body background appears to be white, but based on the design it should be the light purple color
    • There seems to be some extra spacing after the +/- icons that could be tightened up

    One suggestion for future projects: you might want to explore the native HTML <details> and <summary> elements, which provide built-in accordion functionality without requiring JavaScript. They also come with accessibility features like keyboard navigation right out of the box.

    Overall, this is solid work with good attention to functionality and user experience. The animation touch really elevates the interaction!

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Design looks good visually, but there are significant implementation issues:

    Mobile responsiveness is broken - On mobile devices the layout is cramped and needs proper responsive breakpoints.

    Semantic HTML is completely missing - using <div> for everything creates major accessibility problems! Your submit button should be a <button>, not a <div> with onClick. This breaks:

    • Keyboard navigation
    • Screen readers
    • Form submission
    • Basic web standards

    Quick fixes needed:

    <!-- Your current code -->
<div onClick={handleSubmit}>Submit</div>

<!-- Should be -->
<button type="submit" onClick={handleSubmit}>Submit</button>

    Same applies to other interactive elements. Use proper HTML elements (<form>, <button>, <main>, etc.) instead of styling divs to look like buttons.

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

    Responsive Design down to 150px by using vw, vh, text-break, overflow-hidden, etc.

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

    First time implementing darkMode by saving the boolean state of darkMode to the global redux state and just read it where needed and set conditional dark/light-css classes.

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

    Recommended scale-factors for clamp function. I allways have to set down the given font-sizes to prevent oversized fonts.

    Frontend Quiz using React/TypeScript/Jest/Redux/SCSS

    #jest#react#redux#typescript#sass/scss
    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    I think you did an incredible job! Dark mode functionality is working great, the design is spot on to the design spec. Also nice job adding Jest tests.

    As for the clamp function and using that for font-sizes, the article in the "Building responsive layouts" learning path was helpful. That article also mentions this web.dev article as well. Hopefully you find some answers there!

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Looks true to the design and works great! The slider functionality and progress effect are smooth. Nice interaction effects on the checkboxes and strength indicator. Clean implementation overall - great job!

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

    My progress so far, seem slow but daily pushing forward

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

    Order of arrangements in my javascript file, i was able to sort it by going through series of code online that relate to what i was facing

    Responsive tip calculator

    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    Nice work on your tip calculator! Here's my feedback:

    Strengths

    • Clean UI with good visual feedback for active states
    • Responsive design for different screen sizes
    • Effective input validation
    • Good implementation of the color scheme

    Suggestions

    • Move your HTML structure from JavaScript to the HTML file for better SEO and page loading
    • Replace prompt() for custom tip with an integrated input field
    • Validate inputs as they change rather than only when calculating
    • Add keyboard accessibility (tab navigation, Enter key support)
    • Consider implementing proper error handling for non-numeric custom tip values
    • Add ARIA attributes and proper labeling for accessibility

    While your project URL mentions React, I don't see React being used in the code. This calculator would work well as a React component if you're interested in refactoring it!

    Overall, you've built a functional app with a good UI. The main improvements would be in accessibility and user experience.

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Your implementation for desktop looks excellent! The tablet view appears somewhat compressed, and it seems the mobile design still needs work to be completed. I'd suggest focusing on responsive breakpoints for mobile devices next, ensuring the cards stack properly and maintain readability on smaller screens. Consider adjusting spacing and element sizes to optimize the mobile experience while maintaining the visual appeal you've achieved in the desktop version.

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

    use browser api/3rd party api for validation of forms

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

    Not much really just the default behavior of the forms

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

    none, for now since it works properly

    newsletter sign up with success message main(no api's used)

    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    The desktop and tablet layouts are well-executed. I particularly appreciate the button hover effect with the gradient and box shadow combination—it adds a nice interactive touch. However, I noticed the mobile styles haven't been implemented yet. Looking forward to seeing the completed responsive design!

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

    Easily being able to take a rough estimate on what sizing/shapes/content areas will be. Readjust my Queries, I don't like media queries, and not try to have extra containers unnecessarily.

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

    I would say font sizing and correctly applying good css to the active popup, looking at other solutions mostly and repetitive test to fail.

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

    Media querying, and fixing the button after 2nd click from reverting to a transparent background color.

    Article Preview Solution

    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    Hey there! Just took a look at your project - it's coming along nicely! A few quick thoughts I wanted to share:

    Layout

    • I noticed the article is hanging out on the left side of the screen instead of being centered - easy fix with some CSS magic!
    • A quick margin: 0 auto; should help it find the middle and prevent that horizontal scrolling

    JavaScript

    • Spotted you're using the classic DOMContentLoaded approach - totally works!
    • If you want to streamline things, the defer attribute in your script tag does the same job with less code: 
      <script src="script.js" defer></script>
    • Just a little trick I've found helpful in my own projects

    Typography

    • The fonts and colors seem a bit different from the design specs
    • Might be worth a quick double-check on those values

    Overall, you're on the right track! These are just small tweaks that will help polish things up.

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Your desktop implementation looks really polished and matches the design requirements well. The layout and styling choices show good attention to detail. For a more complete solution, consider adding responsive layouts for tablet and mobile devices as specified in the challenge. This would demonstrate your responsive design skills and ensure the site works seamlessly across all device sizes. Great work on what you've accomplished so far!

  • P
    Kyle Mulqueen•400
    @kmulqueen

    I appreciate the hover effect you implemented in the desktop view - it adds a nice interactive element to the design. Your layout demonstrates excellent responsiveness across various viewport sizes, particularly how the grid transitions smoothly into 2 columns at medium/small breakpoints.

    I think the implementation of grid-template-columns: repeat(auto-fit, minmax(19.4375rem, 1fr)); was an excellent technical choice that allows for fluid adaptation without requiring excessive media queries. Killer job!

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

    it took a day, but i completed this project with css grid the way i want, i made a silly mistake because of that i need to watch some videos but i didn't like their approach, maybe they are experts and their approach is better, but i want to do it in that way i did.

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

    It's funny, i created the div elements and a main but only added the material in one div, all other three divs were empty and i bashed my head for 4 hours, that what is the problem, why after creating rows and columns only one cell has material, and other cells were empty and the materials are floating outside, eventually i found that, and corrected it.

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

    can someone go through my previous projects, i think their is a better way to center everything, i don't know why but every other project i open and did the same thing from previous projects, it won't work in current one, it just won't go in center, and then to complete the project i will have to mannually center it by either margins or position:relative feature.

    four card feature section component

    1
    P
    Kyle Mulqueen•400
    @kmulqueen

    The desktop design looks great! However, I noticed two main issues that are affecting your responsive implementation:

    Your mobile layout has horizontal overflow causing content to extend beyond the viewport. This is primarily due to the fixed min-width of 1200px on your .container class. In responsive design, avoid using min-width with large pixel values as they prevent proper scaling on smaller screens. Regarding your centering struggles: I see you're using both place-content: center and justify-items: center on the body, which is good, but your container's fixed dimensions are overriding these centering properties.

    Some specific suggestions that may help:

    • Replace min-width: 1200px with max-width: 1200px in your .container class.
    • Add width: 90% or similar percentage-based width to .container.
    • Consider implementing a proper tablet layout between 768px-1100px.
    • For the card images, replace the absolute positioning (left: 12em) with flexbox alignment.
    • Use margin: 0 auto instead of fixed margins to ensure consistent centering.

    These adjustments should resolve both your mobile overflow and centering issues without requiring manual positioning.

  • P
    Kyle Mulqueen•400
    @kmulqueen

    Project Feedback

    Great work on the desktop implementation! The layout and styling align well with the design specifications.

    For the mobile version, I noticed some opportunities to better match the provided design comp. The current mobile implementation diverges from the intended responsive behavior in a few key areas.

    Additionally, I'd recommend considering relative units (such as rem and em) instead of fixed pixel values. Relative units offer several advantages:

    • Improved accessibility for users who adjust their browser's base font size
    • More consistent scaling across different screen sizes and device densities
    • Better adherence to responsive design principles

    These small adjustments would help enhance both the visual consistency and technical implementation of the project. Let me know if you'd like any clarification or assistance with implementing these suggestions!

    Marked as helpful
  • P
    Kyle Mulqueen•400
    @kmulqueen

    Code Review Feedback

    Overall Assessment

    Excellent work on your solution! Your implementation aligns remarkably well with the design requirements for this challenge. The attention to detail in your styling and layout demonstrates strong front-end development skills.

    Responsive Design Considerations

    I noticed one opportunity for improvement regarding your responsive design implementation:

    • The current media query breakpoint (max-width: 430px) could benefit from adjustment, as it's causing some text overflow issues in the "Preparation Time" section when viewed on certain devices. Consider implementing a more flexible breakpoint or adding an intermediate breakpoint to ensure content remains properly contained across all viewport sizes.

    Semantic HTML Structure

    Your use of semantic HTML is commendable, particularly:

    • The implementation of <table> for the "Nutrition" section shows good understanding of appropriate HTML elements for tabular data.

    To further enhance the semantic structure of your document, consider:

    • Wrapping distinct content sections in <section> elements rather than using a single <div> as a wrapper for all content. This would improve both the semantic meaning of your document and potentially benefit screen reader users.
    • Each section could also include appropriate heading elements (<h2>, <h3>, etc.) to establish a clear document hierarchy.

    These refinements would elevate an already strong solution to an exemplary level of professional implementation.

    Keep up the excellent work!

    Marked as helpful
  • P
    Kyle Mulqueen•400
    @kmulqueen

    Great work on your submission! The overall implementation is excellent and you've clearly put a lot of thought into your solution.

    One minor observation that might help improve the responsive behavior: I noticed the card has a fixed height property. This can occasionally cause inconsistent padding when viewed on smaller devices, as the content may need more or less space depending on the screen size.

    Consider using min-height instead of a fixed height, or allowing the card to adjust its height naturally based on content and padding. This would help maintain consistent spacing across all device sizes.

    Otherwise, your solution demonstrates strong attention to detail and good implementation of the requirements. Keep up the excellent work!

    Marked as helpful
  • P
    Kyle Mulqueen•400
    @kmulqueen

    Feedback on Blog Preview Card Challenge

    Strengths

    First, congratulations on your solution! You've successfully implemented:

    • The correct overall layout
    • All the main elements required in the challenge
    • A visually appealing design that closely matches the requirements

    Opportunities for Improvement

    Typography

    While the font appears correctly in the Frontend Mentor preview, I noticed that the deployed version doesn't match the specified font in the design. Ensuring consistent typography across all environments would enhance the fidelity to the original design.

    Interactive Elements

    Regarding the hover and focus states:

    • Currently, the card title only changes color when hovering directly over the title itself
    • According to the design specifications, this effect should trigger when hovering anywhere on the card
    • Additionally, the box-shadow should expand slightly on hover to create a subtle elevation effect

    These interactions can be verified in the Figma file's presentation mode for reference.

    Semantic HTML

    I noticed an interesting choice in the author section, where you've used a <ul> (unordered list) with <li> elements containing both the author image and name. While creative, this approach might not be the most semantically appropriate for this content type.

    Consider using a pattern like <figure> with <figcaption> or a simple <div> with appropriate ARIA attributes if needed, which might better represent the relationship between the author's image and name.

    Next Steps

    These are relatively minor adjustments that would bring your implementation even closer to the design specifications. I'd be happy to discuss any of these points further if you'd like additional clarification!