All solutions

Hello everyone! 👋

I'm excited to share my latest project with you all. For this project, I challenged myself to write everything in plain TypeScript without relying on any libraries or dependencies. It was a refreshing change of pace and I'm pleased with the outcome.

To keep things organized, I made sure to extract all of the core "business" logic to the libs folder and built a state-driven app from scratch. I utilized the awesome JavaScript Proxy API, which worked out great. I highly recommend trying it out for vanilla JS form validation.

Additionally, I thoroughly tested all of the core logic with Vitest and used ESLint with Prettier for clean and organized code. As for styling, I utilized plain CSS and a component-based approach to the BEM methodology. Although I had hoped to try stylelint, I will explore it further in future projects.

Please feel free to share your feedback and thoughts 🥰. I hope you all enjoy the final product 😁!

This solution includes skeleton loading state, debounce search and lazy image loading. Any feedback is welcome here 😁

Hey everyone 👋 !

Today I finally finished the project and what can I say, it was huge and took me a long time to do it. Some decisions in the design annoyed me a bit, because I had to use special props to change the gap between sections, and the arrows on the sections differed from each other, but only on certain breakpoints, which obviously doesn't fit a bit with the main idea of reusable components from React. Nevertheless, I'm happy with the final result, and you can judge this one for yourself.

In the project I additionally added an animation of the arrows in the main Hero section and simple transitions between pages using Framer Motion.

I tried to keep the code clean, but I am aware that some things are inconsistent and badly done mainly prop names, variables and functions/handlers. If you know of any best practices or any article about naming props, handlers typically for React I would appreciate it. You can also let me know where you think the name should be changed to a more meaningful name or just which name you think should be named differently. I'm also aware of cut off footer background (I might fix it in the future).

This was also my first intermediate challenge, so any feedback is welcome here 😁

Hey everyone 👋 !

Today I made this project using Web Components. Web Components are basically custom reusable and customizable HTML elements which you can use with any framework or without it in almost all modern browsers. They're great, because it's very easy to change their design (colors for example) with CSS3 custom properties and content with special slot attribute.

I included simple CSS card animation on hover and example configuration, so everyone can try customizing things out.

It's also possible to set up an event listener for clicking the Add To Cart button.

Any feedback is of course more than welcome here 😁!

Hey everyone 👋 !

I used React JS, Tailwind CSS, styled components and Framer Motion. I included a fancy loader after clicking a button and some entry animations. I'm newbie in React, but I really enjoy coding my projects in it. The whole ecosystem of all libraries is huge and most of them are really simple to use.

Any feedback is welcome here of course 🥰

Hope y'all like it 😁

This is my first project in React and I've learned a lot 😇 The components may be too big and the code is not as clean as it could be, but I'm really happy with the final result, especially the animations. For the first time I used some other tools like Tailwind or Framer Motion and it was a pleasure. Any feedback is welcome here 😁.

Any feedback and suggestions are welcome here 😄

Feel free to test my Calculator. Any feedback and suggestions are welcome here :)

Hey!

I'm really happy with the result :)

I turned my spaghetti JavaScript code into cleaner and more maintainable OOP import/export module based code. Animations are made using GSAP and ScrollTrigger plugin. If you know SOLID principles or some design patterns and you think I could have done something better - let me know, since it's my first OOP JS project after all. I'll probably code the next one in TypeScript.

The solution isn't pixel perfect, but it's not that bad. I spent some time working on it, but I thought it wasn't worth it, especially improving "partners" section was hard. (I didn't want to make a modifier class for every image and then compare it to the design, since this section is broken in Figma).

Feel free to test out things and check out my code. I might have missed something, like I always do. Any helpful feedback is appreciated!

Feel free to test it, any feedback is welcome here :)

It was so fun doing this challenge!

Some things I want to say about this solution:

• I made it as close to the design as I could. There are some minor differences in typography between my solution and given design, even tho I used properties directly from Figma. So it's almost pixel-perfect.
• The background in the header is fixed. I really like the effect. I wanted to achieve something like when you scroll on Spotify (artist page).
• Hamburger button has custom animation, when you open and close it.
• You can disable naviagtion menu by clicking outside of it. It's made in JavaScript - app.js file. This video helped me in implementing this feature.
• This site has GSAP / Scroll Trigger animations. I hope y'all like it :) It only works for large screens tho. Animations on mobile devices may be annoying, so I disabled them.
• I wanted to make this solution as clean as possible, so I used 7-1 sass architecture, added extra line breaks to make properties more readable. Also I made sure to make my JavaScript clean as well (Animations could have been done better tho).

Let me know, if I can improve something. Any valuable feedback is welcome here! :)

I'm starting to feel more and more confident with CSS animations and transitions. I hope you enjoy it!

Any valuable feedback is of course welcome!

I improved my previous solution by improving almost everything. Now with figma and better experience I was able to create pixel perfect or almost pixel perfect solution to this challenge and I'm really proud of it.

Things I included in this solution:

• On load animations for image and text
• QR code popup with black glassy background (with animations)
• Better responsiveness (it's not perfect)

To open the popup, you need to click on the image. To close it, you need to click anywhere outside the image.

I learned a lot about animations and trasitions doing this challenge and I recommend you guys to try making more and more fancy animations in your future projects.

Any feedback is welcome here!

Any feedback is welcome here!

Any feedback is welcome here!

Any feedback is welcome here!

Hello, community!

I was really consumed with creating this project! It was great to try my hand at building more complex app and test my JavaScript skills. I made it fancier by adding my own GSAP animations and interactive background particles (from the particles.js library). The layout may not be pixel-perfect, but I'm really happy with the result.

Let me know, if you like it. You can also check out your GitHub profile on the app.

Any feedback is welcome! :)

I had so much fun doing this challenge! I recommend you to do it too! For people not feeling solid in CSS Grid I recommend checking out Grid Garden and than this challenge to get some practice in building grid layouts.

In the solution I used md- prefixes to make my layout suitable for medium sized screens. What do you guys think about this idea? I think it makes things more clearer in the markup and code is easier to understand and maintain. Also, I added some animations when the page loads and when the cursor hovers over sections to make this solution more fancy. I made page responsive even for larger sizes with a new clamp() function in CSS3.

I appreciate any feedback!

Doing this challenge was a pleasure. Any feedback is welcome here!

Let me know if I could do something easier or better. Any feedback is welcome here!

Any feedback is welcome here!

I used GSAP to make loading animations for this project, let me know whether you like it or I should improve something. That was my first time using Parcel and GSAP, so this project isn't that advanced. But as they say practice makes perfect.

Any feedback how can I improve animations and my code are highly appreciated and welcome here!

Any feedback is welcome here!

I really enjoyed making this layout. That was my first time using mixins in SASS and I really enjoy it. In the future I'll make multiple sass files for different things to make my styles easier to maintain. Any feedback is welcome here!