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

    Loopstudios [Landing Page]

    #react#react-router#vite#sass/scss
    • HTML
    • CSS
    • JS

    1


    The challenge was pretty straightforward and a great way to practice responsive images and overlapping content.

    The "Creations" section required the most attention, as I wanted the entire image to be "clickable" and be accessible, while also applying gradient-background to the image.

    To make things easier to manage, I decided to implement each creation item as a JSON and then render it as list using map().

    After that I "overlapped" the links and images on top of one another using CSS Grid:

      &__item {
        display: grid;
        grid-template-areas: "stack";
    
        & > * {
          grid-area: stack;
        }
      }
    

    For the layout, I used grid-template-columns and simply changed the layout during certain breakpoints.

    To make the entire image "clickable" I used Andy Bell's method of doing so:

    More details provided in the GitHub README...

    As always, all feedback to better improve this challenge is greatly appreciated! ♥️

  • Submitted

    Scoot Website

    #react#react-router#sass/scss#vite#bem
    • HTML
    • CSS
    • JS

    0


    This was my first time 🤩 using Vite and React and I have to say, React's method of using components to build a full site makes the development process a lot easier and faster.

    The main challenge I faced was learning React's method of navigation using the react-router-dom to create a routing configuration to each page and creating the navigation links using the Link element.

    To simplify the information processing, I created JSON files for the "careers", "process steps" and the company's "values", which I then imported to the appropriate component and used the map method to render the list.

    All feedback is greatly appreciated! ♥️

  • Submitted


    I thoroughly enjoyed the process of constructing this two-page website and found great satisfaction in implementing the interactive map using "leaflet." While I typically incorporate my own personal flair into the design, such as animations or alternative styles, this time I chose to prioritize the HTML, CSS, and JS to ensure they meet the required standards and deliver optimal performance.

    As always, any feedback or improvements that can be offered are tremendously appreciated.

  • Submitted


    Great challenge to practice styling radio inputs and obtaining their values.

    To create the rating buttons and to ensure that they were fully accessible, they were built ⚒️ using a form along with five radio inputs (each with their own label); this also prevents users from making more than one selection.

    To announce any changes, when the thank you screen appears, I wrapped the "thank you" content in its own container along with a aria-live="polite".

    For the JS, my eventListener is on the form as a submit.

    Lastly, I took some inspiration from @correlucas own challenge, in regards to his use of border-radius.

    All feedback is greatly appreciated! ♥️

    UPGRADES: 😎

    • Animation Entrance
    • Custom Design
    • Custom Gradient Colors
    • Animated Gradient Background