All solutions

Hi, this is a simple challenge that I decided to solve in an attempt to gain a better understanding of radix-ui. I'm really impressed by how little to no code I had to write for validating the form. In the process, I got to learn about the ValidityState API and I look forward to learning more such underlying concepts.

Please feel free to review my code and provide any suggestions for improvement. Thank you!

Hello everyone! It has been quite some time since I last posted a solution here. I have been working on my personal projects and learning more about React and TypeScript.

So, I decided to create this multistep form as practice. My goal for this challenge was to implement the functionality of the app and not focus too much on styling. However, since I didn't want the solution to look clunky, I copied and pasted most of the styling from Khent Alba's solution. If you have any compliments regarding the styling, please leave a like on his solution.

I don't have any questions regarding this one, but please feel free to take a look at my code and let me know if I can make any improvements.

Hi! Here's another challenge I've completed to get better React.

I'm still not at a point where I can comfortably create a solution all by myself(with React), I had to study this solution. Please feel free to let me know about any mistakes that I've made.

Click here to view the live site

Click here to view the code

Hi! It's been a good minute since I posted a solution on here. I have been teaching myself ReactJS and wanted to create a small project so, I chose to solve this newbie challenge for some practice.

However, I was unable to complete this challenge on my own. Thanks to this solution I realized where I was going wrong and managed to create my solution.

I have no questions for this one, but I'm open to any tips and feedback you have for me :)

Click here to view the live site

Click here to view the code

Wow! I severely underestimated this challenge, trying to create the card flip animation consumed a lot of my time. Not particularly proud of the code on this one, but with some help, I got there in the end.

Features

• Added particles effect instead of the static stars background.
• Added animations on page load.

Questions

1. Is the particles effect smooth on your device?
2. At the moment, canvas does not resize along with the viewport. Do you know how to fix it?
3. Did you find any bugs?

of course, I'd be happy to receive any kind of feedback you have for me.

Acknowledgment

• I'd like to thank @tediko for his solution to this challenge. After studying his code, a lot things became apparent to me.
• Also shout out to this one person on slack(I'm sorry I lost their username) for showing me this useful codepen

Click here to view the live site

Click here to view the code

P.S. If you have any questions for me, Feel free to comment or message me on slack :)

Hi again! The goal for this challenge was to try something new. I had always wondered how custom cursors were made on most of the "modern" webpages you see these days. So this challenge was a perfect excuse for me to learn about them.

Features

• Added a custom cursor.
• The custom cursor expands and acts as an outline when clicked on the input.

Questions

1. How well does this work on your device?
2. Did you find any bugs?

Known bugs

-The cursor's movement tends to become awkward upon resizing the window. (Clicking on the document should fix this issue, most of the times)

Click here to view the Live Site

Click here to view the Code

P.S. If you have any questions for me, Feel free to comment or message me on slack :)

Hey! guys, I completed another challenge. What seemed to be a fairly simple challenge at first, had some really head scratching elements to it. Took me a while to complete, but in the end I got there.

Some not so necessary features

1. Added a "loading" screen.
2. Added some mildly satisfying hover effects.

Questions

I have no particular questions for this one, but would love the read your thoughts on it. Personally I feel like the code could have been much more efficient and accessible.

Acknowledgement

I want to thank @FlorianJourde and @beslerpatryk. Initially I wasn't so sure of how I'd approach this challenge, but looking through both of their solutions I picked up some really useful things.

Click here to view the Live Site

Click here to view the Code

P.S. If you have any questions for me, Feel free to comment or message me on slack :)

Hi! I went with an easy challenge this time. My goal was to create animations using CSS and not rely on anime.js like I did in my previous challenge.I'm quite happy with how it turned out.

Questions

• Is my markup semantic enough?
• What are your thoughts on the accordion itself?

Acknowledgement

1. Thanks to @emiliemorassi solution, I found out about the details tag. This made my solution much more accessible and saved me a bunch of time.
2. I learned about the aria-hidden attribute Thanks to @JulienLEUILLIER's solution.

P.S. If you have any questions for me, Please feel free to comment or message me on slack :).

😬Yikes! did this challenge take me a long time to complete... Glad to be finally done with it.

Acknowledgment

First off, I'd like to thank @tediko for writing code that's clean and comprehensive. I spent a lot of time studying his Solution to the Calculator app by FEM. This solution forced me to learn a lot of new technologies and concepts that I found extremely helpful.

Secondly, I want thank @Syafiqjos. I found a very useful way to limit user input from his Solution.

Some not so necessary Features

• Added a punny intro animation
• Flipped some colours around and added a dark theme mode
• A toggle button to switch between the two theme modes

Questions

• What tag would be more appropriate for the intro element in my markup?
• I'd like to know your thoughts on my javascript code, I found it a bit challenging to stick to the DRY principle.
• I'm fairly new to webpack, so I'd appreciate it if you could give some tips on writing a better config file.

Click here to view the Live Site

Click here to view the Code

P.S. If you have any questions for me, Please feel free to message me on slack :)

Hi it's me, bunee! I really wanted to learn CSS grids, I figured this challenge would be a great start.

I've learnt quite a bit solving this challenge. As embarrassing as it is to admit, I spent more time centering the testimonials container than learning about grids themselves... Shout out to @tediko, His solution really helped me solve this issue.

Not to sound cheesy but, I need some good resources on "how to center a div" :')

Also if you could take a look at my code and give me some feedback, I'd respect it. Also also, Let me know how you feel about the animations.

Click here to view the Live Site

Click here to view the Code

Phew! Took me a good minute to complete this one. I've learnt a lot whilst coding this. Even though I have used a lot of Hacky ways(if you will) to position most of the elements on the page, I still have a ton of room for improvement :') If you could provide me some Feedback, I'd respect it. Thank you.

I had a ton of fun solving this challenge... So much so that, I spent extra time adding a few personal elements ^.^

If you do decide to go through my code, I would whole heartedly accept your feedback. I personally feel like my markup needs some work.

Hey! This is my first ever solution to a challenge on this website, I thoroughly enjoyed coding this. Hope to keep learning more!☺

I would truly appreciate some feedback but, I must warn you. My code isn't the most prettiest code you'll come across. It's super inefficient and, You may lose brain cells trying to understand it. If you do decide to go through my code regardless and give me feedback... I RESPECT you!