Skip to content
OverviewSolutions
7
Comments
7

Adam C

@adam-crowley130 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • P
    Adam C•130
    @adam-crowleyPosted 17 days ago

    This all looks really good. Responsive layout, styling, JS, and accessibility are all on point.

    The only improvement I could see is to make the input fields green on :focus like in the design.

    Good work!

    0
  • P
    Adam C•130
    @adam-crowleyPosted 25 days ago

    The design/layout looks good. In mobile view I would shrink the outer margins so the products fill the page a bit more, like the design. The delete item button is missing the x icon.

    Accessibility looks good except the + and - qty div elements should be button elements, so you can access them via keyboard.

    For functionality, everything is working except the confirm order modal window appears to be missing. This window should pop up and shows all the items in your cart.

    You've tagged React but I can't see any in the source code? Javascript looks good.

    0
  • Daniel Knight•50
    @DKulanSubmitted 2 months ago
    What are you most proud of, and what would you do differently next time?

    Happy to worked with Vite.

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

    importing image assets based on a path contained in a json file was a bit of a challenge due to the way static asset handling works in Vite. I had to import all the images directly in the component. Regardless, I think storing the image path in a json file isn't the best way to load an icon.

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

    Maybe the CSS? I understood the responsiveness requirements as "mobile layout until the desktop break point", but maybe it should load the desktop layout after the mobile break point.

    Results summary component

    #vite#react
    1
    P
    Adam C•130
    @adam-crowleyPosted about 2 months ago

    The overall layout looks good. For responsiveness I would set the layout breakpoint for desktop to 768px (it's currently set to 1440px).

    The Continue button needs white text.

    To display the image assets, you can loop through the data json file like below (I've simplified for legibility)

    <ul>
  {data.map((item, index) => (
    <li key={item.category} className={`li-${index.toString()}`}>
      <img src={item.icon} alt="" />                
    </li>
  ))}
</ul>
    0
  • P
    Yarce22•100
    @Yarce22Submitted 5 months ago
    What are you most proud of, and what would you do differently next time?

    This is my first project made with Tailwind-css and Vite.

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

    I had to read a lot of Tailwind documentation to understand how to do a lot of things. I hope to start memorizing Tailwind metrics.

    Recipe page

    #accessibility#tailwind-css#vite
    1
    P
    Adam C•130
    @adam-crowleyPosted about 2 months ago

    Responsive layout looks good. I would just add max-width: 736px and margin: 0 auto to the section element for desktop view (you'll need to translate these into Tailwind). That'll keep the section element from spreading across the page on large screen sizes.

    0
  • André•80
    @psandreSubmitted about 2 months ago
    What are you most proud of, and what would you do differently next time?

    da experiência adquirida nos projetos anteriores me ajudaram bastante para este.

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

    Acho que consegui me sair melhor neste projeto em relação aos anteriores

    html css

    1
    P
    Adam C•130
    @adam-crowleyPosted about 2 months ago

    I would remove the outline on the buttons .btn { border: 0 }, and make them wider. For the hover state, make them green on hover .btn:hover { background-color: #C4F82A; }.

    Add the max-width: 90% property to the .content div. So when you view on mobile the content will fit to 90% of the screen width:

      width: 400px;
  max-width: 90%;
}```
    Marked as helpful
    1
  • M.A.Askat•40
    @AskatAshSubmitted 10 months ago
    What are you most proud of, and what would you do differently next time?

    I tried my best to make the design pixel perfect and and responsive for even the smallest devices. Added hover and active states.

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

    I was getting some accessibility issues while checking with lighthouse devtool and I fixed the issues from suggestions given by lighthouse.

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

    Please suggest how I should animate this UI component or to be specific what type of animation would be good.

    Responsive Blog Preview Blog UI design using html and css

    #accessibility#web-components#styled-components
    1
    P
    Adam C•130
    @adam-crowleyPosted about 2 months ago

    Layout looks great and is identical to the design. Accessibility looks good.

    Responsive layout is good. I would make all the text slightly smaller when the screen size is mobile.

    For animation I would just add subtle hover transitions for the color of the link elements:

      transition: color 0.2s;
  color: var(--gray-950);
}
h1 a:hover {
  color: var(--yellow);
} ```
    0
View more comments