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

    My Team with Next js, React, Tailwind, and FormSpree

    #accessibility#airtable#next#react#tailwind-css
    • HTML
    • CSS
    • JS

    0


    I had a great time with this project! I'd like to clean up my Nav logic and CSS (show/hide) as I use it all the time and it would be nice to have a standard that I use in all my projects. If anyone has any ideas let me know!!

    Any questions or comments are welcome!!

  • Submitted


    I really enjoyed making this website, I added a few things to make it more functional like a pop-up modal for the forms when you click the CTA buttons. The forms are fully functional and send collected data to FormSpree.

    Any constructive comments and critiques are welcome : )

  • Submitted

    Bookmark landing page with Vanilla Js

    #accessibility#bem
    • HTML
    • CSS
    • JS

    1


    I had a great time doing this project. I found myself wishing details[close] in CSS was a thing. I'm not sure I'm totally happy with the transition/animation I have for the details opening and closing. If anyone has a better way to handle it I'd love to hear it. As always comments and suggestions are welcome!

  • Submitted

    Manage Landing Page built with React, and Next JS

    #next#react#accessibility
    • HTML
    • CSS
    • JS

    0


    I had a lot of fun on this project, I used the Next js modules for the CSS to make it have more of a SMACSS style methodology. I also enabled dark mode styles so if you have dark mode turned on, turn it off to see the original design. Any comments, questions, or feedback is welcome!

  • Submitted


    This was a fun project, I used Hygraph to make a CMS for the listings and then queried it with GraphQL. I was going to make a filter function to filter through the listings based on the selected tag but in the end, I found that a much better solution was

    const match = tagsArray.some((i) => itemsArray.includes(i));
    
    if (itemsArray.length === 0 || match) {
    return (
        //show cards that match selected tags, or show all cards if no tags are selected...
    )
    }
    

    This is a great way to compare two arrays to see if any of the items match to one another!

    Please feel free to leave comments or suggestions!

  • Submitted


    This project has been a collaboration between Brendan Wilson and Eileen D'Angelo. We pair-programmed it together. I had so much fun working on this project with Brendan. We started with HTML and then did the CSS and JavaScript. Any comments or suggestions would be appreciated!

  • Submitted

    Interactive Card Details Form- React, Tailwind, Vite

    #accessibility#react#tailwind-css#vite
    • HTML
    • CSS
    • JS

    1


    This project involved creating a form for entering credit card details, using a mobile-first workflow and semantic HTML5 markup. I used CSS custom properties and Tailwind CSS to style the form and make it responsive to different screen sizes.

    The form included fields for entering the cardholder's name, card number, expiration date, and CVV code. I implemented validation for these fields, ensuring that the user could not submit the form with invalid or incomplete data.

    I used React.js to add interactivity to the form, allowing the user to easily input and edit their card details. This included formatting the card number as the user types it and displaying it on the credit card preview.

    Any feedback and or comments are very welcome, I'm always trying to hone my skills! :)

  • Submitted

    Minimalist portfolio, Next JS, Tailwind CSS, GraphQL, Hygraph CMS,

    #accessibility#graphql#next#tailwind-css#react
    • HTML
    • CSS
    • JS

    0


    I had a great time with this project!

    I used Tailwind CSS to create the visual design of the website. This allowed me to quickly and easily create a clean and consistent look and feel for the website without having to write a lot of custom CSS.

    For the frontend of the website, I used React.js and Next JS, which made it easy to create reusable components and manage the website's data and state. I also used Graphql to handle the data fetching and manipulation, which allowed me to create a more efficient and performant website.

    I used Hygraph CMS and Formspree to manage the website's content and form submission system, respectively. This allowed me to easily create and update the website's content, and securely handle the submission and processing of form data.

    If anyone has any comments, questions or tips please let me know!

  • Submitted


    This was a fun challenge, my first React project! I put the user data into its own file to mimic pulling from an API. I definitely had to adapt to the lack of separation of concerns using JSX. Because of this, I changed the way I did my CSS. I'm wondering if doing the CSS this way will make it more readable/ETC. If anyone has any thoughts please let me know : )

  • Submitted


    This challenge took me 6.5 hours to complete from start to finish. (I'm starting to keep track of how long these take me : ) I was able to complete the bonus and add all the info dynamically from the JSON file. If anyone knows of a more dry way to get the current day to equal the value of the weekday please let me know! I used a switch statement in the end.

  • Submitted


    This was a good project! I had a hard time figuring out how to change the input value if null so I could add the class onto the element displaying the text Not Available. Getting this one part right took 75% of the time I spent on the challenge : ). In the end, I finally figured out that you can use the || operator in template literals. The only link that I couldn't get to work was for the user's company, I'm not sure why. If anyone can figure it out let me know!! I also made it so that it brings up my GitHub profile on load so if you want to compare the design to the one I made go to the live site and search octocat.

  • Submitted


    I had fun with this project and I'm proud of the JavaScript I wrote for it. I feel like my CSS got a little messy if anyone can take a look at it. I normally separate the images from the main content but with this project, I didn't because I thought it made it hard to follow what I was doing. Comments or suggestions? Thanks, everyone!

  • Submitted


    I had to read up on mix-blend-mode to get the layering of the picture correct, but it wasn't complicated, the background-color had to be on the parent container, and the background-image + mix-blend-mode property on the child element. Any feedback is always welcome!

  • Submitted


    This was a good project, I got very good at positioning and learned about layering multiple backgrounds. I did not do the bonus challenge because I'm working on honing my vanilla JavaScript. I'm proud of myself for doing everything with only 9 lines of JavaScript!