All solutions

What are you most proud of, and what would you do differently next time?

Used this project to start get started with typescript, added a little gsap too.

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

None

What are you most proud of, and what would you do differently next time?

My first FEM challenge of 2024 🥳! The purple design was really nice and I could not resist jumping on it.

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

The only challenge I might say I had was how best to display the dark purple background behind the card. Ended up combining the '::before' css pseudo class with absolute positioning to make it work.

This project was fun and helped me to practice grid layouts, my favorite layout of late. I also got to learn about the cool Intersection Observer API, used it to implement a scroll-in animation.

Just completed another Intermediate project. In brief, this cool project helped me to implement and learn about the React ContextAPI. It also made me understand a bit better how the useEffect Hook works.

I liked the layout and goal of this project. It had

• an API to fetch data from and show the results
• Custom error validation message
• Fun alignments of the cards in the statistics section.

I also implemented some accessibility tips from @grace-snow. I hope to learn more on web accessibility and implement them better in my projects going forward.

Let me know your thoughts in the comments.

Happy to complete another FEM project. Was a bit undecided going with vanilla or react because of the Testimonial Section, as i felt react will make implementing the slider much easier. I went with Vanilla js in the end without using a library to implement the slider to learn some new tricks though it began to feel hackish at some point 😅.

I still have a few fixes to implement later like animations but i'm just happy it works for now, though clunky. I now appreciate all the effort OSS devs put into creating libraries that work fine out of the box on almost all screens.

Is the hidden checkbox hack a good way to handle mobile navs? Does it affect accessibility in any way?

A fun and challenging project. I struggled with getting the left and right arrow keyboard keys to work but resolving it made understand some react and JS concept like useCallback and memoization a bit better.

Had fun with this one. Went with vanilla JS for this project instead of react, using the gsap library for simple animations. Reviews are welcome.

Enjoyed working with React on this project. Started with classes at first, then I discovered hooks that made it wayyy easier. I still have some issues to fix which I will do on the next versions of this project, but this will do for now. If anyone has a recommendation for me, I’ll be very happy to listen.

##Issues To fix:

• Radio button does not fire a false event when unchecked, so I need to find a work around to set my radio buttons inactive with Javascript
• Add robust input validation (did only basic one to prevent undefined values)
• Redo project with Redux/ContextAPI, to reduce the nested props

•   Remove  // eslint-disable-next-line from modal component
  

Had fun building this one. Feedback is welcome.

Good challenge to practice with CSS "flex", "grid" and "background" properties.

Discovered the CSS "background" and its supporting properties are a bit trickier then I thought 😅.

With this challenge, I learned how to create a simple mobile navigation bar using only CSS with the checkbox hack

Really enjoyed this one. The ::before and after pseudo elements came in handy in placing the pattern background

Fun task working with browser local storage. Issue with firefoxDev edition clearing local storage on reload and resetting the theme. Works fine with chrome and MS Edge

With this challenge, I learned about the GSAP Animation library and how to do basic transitions with it.

function animate_text_img() {
    gsap.fromTo(".card-img", {duration : 1, x:300, ease:'back'}, {duration : 1, x:0, ease:'back'});
    gsap.fromTo(".card-text", {duration : 1, y:-300, ease:'back'}, {duration : 1, y:0, ease:'back'});
}

With this challenge I learnt how to horizontally center an absolute element.

.progress-card__amount-left{
        position: absolute;
        top: unset;
        bottom: -2.65rem;
        padding: 1rem;
        border-radius: 0.5rem;

        left:0;
        right:0;
        margin-left: auto;
        margin-right: auto;
    }

Let me know if there is a better way to do this.

Good challenge to practice CSS grid

WIth this challenge i learned how to change img source in css with content:url() like so:

.gallery {
        grid-template-columns: 1fr;

    }
    .gimg__deep-earth{
        content:url("../images/mobile/image-deep-earth.jpg");
    }

If there's another/better way, let me know.