Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All solutions

  • Submitted

    E-commerce product page with React, Typescript and Sass

    #react#sass/scss#typescript#vite#react-testing-library
    • HTML
    • CSS
    • JS

    1


    Hi,

    Can anyone provide guidance on how to control the tab navigation inside the lightbox, to make the focus move to the "Close" lightbox button from the tumbnails?

    Thanks, Cristina

  • Submitted

    API Shortening React App

    #jest#react#react-testing-library#tailwind-css
    • HTML
    • CSS
    • JS
    • API

    0


    Hi,

    Project built in React with CRA, Tailwind CSS, Jest and React Testing Library.

    I've added a window alert in case the API call fails and I've been trying to test this but I haven't been able to figure this out, any suggestions are welcome.

    Thanks

  • Submitted

    React Interactive Card Details Form

    #react#react-router#react-testing-library
    • HTML
    • CSS
    • JS

    0


    Hi there,

    Great challenge to practice accessible forms and input validation with regular expressions. I decided to implement the field validation in real time, rather than after sending the form, and disabling the 'Confirm' button until all fields are valid or not empty.

    I've used React Router to navigate to the Thank You and form pages. Also used this challenge to learn to use React Testing Library.

    Feedback welcome, specially on React Router and React Testing Library, as it's my first time using this libraries.

    Thanks

  • Submitted

    Advice generator - CSS Grid, Vanilla JS

    #accessibility#animation#fetch
    • HTML
    • CSS
    • JS
    • API

    1


    Hi,

    Another great challenge, I enjoyed working on it to practice API integration and CSS grid. I decided to add a theme toggler to the design and also a typewriting effect to the text, I hope you like it. Feedback welcome!

    Cheers

  • Submitted

    Mobile first React Time Tracking Dashboard

    #accessibility#react
    • HTML
    • CSS
    • JS

    0


    Hi

    This is one of my first solo projects in React and really enjoyed working on it. I created a component for the activity cards and I wasn't sure how to style the cards depending on the activity, so I decided to style them with the help of a utility function that provides the in-style variables. Is this a good way of achieving this or is there a best practice way to do this?

    Thanks Cristina

  • Submitted

    Expenses chart component with chart.js

    #accessibility#chart-js#fetch
    • HTML
    • CSS
    • JS

    1


    Hi,

    Great challenge! I decided to use chart.js to build the solution. It's my first time using this library and I can say it's really cool, highly recommended! As the graph is a <canvas> element I've added aria-role and aria-label via javascript to make sure the solution is accessible.

    As always, feedback is welcome! Cristina

  • Submitted


    Hi,

    This is a great project to work on layout. It took me some time adjusting font sizing to get a reponsive solution where the images stayed within the layout but I'm happy with the final solution. As always, any comments on possible improvements are welcome.

    Cristina

  • Submitted


    Hi,

    This project is great to learn about dropdown menus accessibility and keyboard navigation requirements.

    The bit I'm unsure about is managing the image size, as it gets a bit small at some point when resizing the screen. If anyone can suggest a better solution it will be appreciated.

    Thanks

  • Submitted


    I enjoyed working in this project as forms are one of the critical parts of any website, so learning and practicing how to design, style and validate them is crucial both for UX and backend system protection.

    Acknowledgement to CSS Tricks form validation UX and MDN form validation pages, which have provided an immerse source of information and inspiration for this project.

    Feedback welcome!

  • Submitted


    Hi,

    Another interesting challenge. I'm happy with the result and I've learned to change styles with active states. My mobile solution works well in my browser with developer settings for iPhone, however I've noticed that when I look at the site on my iPhone the share button does not return to the original pale colour once the social menu has been deactivated. Can anyone point out what the issue could be? Thanks, Cristina