All solutions

Hello everyone ! here is my solution to this challenge, I'm looking forward to know what you think about this app, and also I'd like to recieve some suggestions about my code readability.

Thanks in advance !

Hello everyone 👋 I picked up this challenge to play around with Tailwind and I actually fell in love with it !

I created a modal for form submit with some cool Lottie animation, so make sure to submit an email to see the modal 😁

I'm looking forward to hear some feedbacks on this, Thanks in advance.

Hey everyone ! This is my first Guru challenge and It's a little bit different from the original design, For example I completely changed the desktop hero section and I created a sidebar for the cart, which was supposed to be a modal.

I also decided to use more reddish color as the primary color, The original orange color didn't look alive enough to me 😁

I'm open to feedbacks and let me know of your thoughts about this solution. Thanks in advance

Hello everyone, This challenge turned out way more trickier than I've anticipated. Specially It took me some time to come up with a solution for masonry layout on the landing page.

This is the first time I'm using Typescript and the reason I took this challenge was learning Typescript, So I'd like to get some feedbacks in regards to TS 😅

I'd like to know about your thoughts and opinion on this solution, possible issues you encounter or any improvements you may come up with.

Thanks in advance

Hey everyone ! I normally would've done this challenge with Vanilla JS, But I've started learning react testing library recently and I wanted to write some tests against a simple app so I picked up this challenge.

Feedbacks are appreciated

Hello everyone, This is my first premium challenge solution. I spent more time on figuring out Figma than actually coding this challenge since I had no experience with Figma before.

I used framer motion for transitions, And also I used pure CSS for stylesheets 😁

Let me know what you think about this solution, Possible improvements and suggestions you have, Thanks in advance.

Hi everyone ! I used Next to complete this challenge. Although I'm not very comfortable with Nextjs, but it's still really jaw dropping how fast Nextjs can be ! I used framer motion for animations, Which is an extremely powerful tool for adding animations to your projects !

As I said, I'm struggling to figure out Nextjs and I'll appreciate if you point out any mistake that I made in this project. I try to solve things in the react way sometimes which causes me to waste the Nextjs powers.

Also I wrote a blog post on adding scroll animations to your react elements with framer motion, It only takes 3 lines of codes to do that which really amazed me !

Hey everybody, I finished this challenge using Next.js, also I built an API for this challenge which you can check that out too, I'm looking forward to hear about your feedbacks and thoughts on this solution

added loading and some transitions. built with vanilla javascript and plain css ✌️

this challenge has a great color scheme 🔥 I used plain css and some vanilla javascript to get this done, I'll be happy to know what you think about my solution

I took this challenge because I really liked the design 😁 I used plain css and a little bit of javascript to complete it, I like to know your thoughts on this

I used plain css and a simple keyframes animation for this challenge, easiest challenge on the platform for sure

I went wild and added some simple animations :D such a enjoyable challenge I really liked it 👍I'd love to get some feedbacks on this

Hello FEM community ! Here is my first junior challenge and I have some questions:

• If you're on mac : I've been told my theme switch method doesn't work on mac but I couldn't find out why since I don't have access to any macOS system, so I'll appreciate it if you can inform me about theme functionality.
• Does animation works properly for you ? and do you have any good resource to learn css animations to share with me ?
• I spent some time to learn accessibility and I applied what I've learned to this project but I really need some advice on accessibility, any resources or feedbacks regards to accessibility is very valuable to me.
• What is best tag for alerts and modals in html ? I used div since I didn't know any other tags for them, Is it a good approach?

AND HERE ARE SOME GOOD RESOURCES I FOUND ALONG THIS PROJECT

• Here is a very good and straight forward article about applying dark mode using sass.
• I learned a lot from this video by legendary Kevin Powell, It's very short video but probably you will find it useful if you're struggling with accessibility like me.
• Here is another great content by Kevin Powell which taught me to add animation to elements on scroll.

✅ That's all, I'm looking forward to your feedbacks. If you have any other thoughts about my solution, don't hesitate to share it with me.

Hello to my fellow developers ! Here is my solution for base apparel comming soon ! I guess the hardest part of this challenge was staying focused while the hero lady staring into your soul 😐Anyway I have some questions :

• Do you have any recommendation and good sources for learning accessibility?
• I always have some trouble with setting svg backgrounds, although they look fine but I'm not satisfied with them, I set them on body tag, but they always look weird to me, is there anything I'm doing wrong or any other approaches that you can recommend me?
• I didn't like the initial error design so I took another approach for errors in this solution, Do they function properly for you?

✅ I'll be happy to know your thoughts and feedbacks on this

Hello ! Here is my solution to this challenge and I have a question on this:

• On desktop, div which contains all social media icons, is bigger than card itself but card has overflow:hidden because I didn't want to add border-radius to the image, So when it reaches desktop breakpoint, I made overflow visible and added border-radius to the image. Is there anyway that I can cancel hidden overflow only for social media icons ?

✅ I'll be glad to know your thoughts and feedbacks on the solution and possible answers to my question.

Hello 👋 ! I used grid to adjust cards into their place, also I added theme feature to this challenge too, But I need you to test this solution and tell me :

• This app should apply initial theme based on your OS preference, does it function properly on your machine ?

• Does toggle feature function properly ?

• What do you think about dark theme design ?

• Any tips or tricks to improve this ?

• What are the best practices to apply dark mode to an application ? Is my approach any good ?

✅ Let me know of your thoughts and feedbacks

Hello ! I added extra feature to this challenge so you can toggle between dark and light theme. and here I have some questions :

• Website should load dark theme by default, does it function correctly on your browser ?
• Can you toggle between themes ? does this solution functions correctly ?
• What are the best practices on creating dark and light mode ? is my approach any good ?

✅ I'd be glad to know your feedbacks on this

Hello my fellow developers ! Here is my solution for this challenge with a extra feature :

• I used grid to position cards.
• I added dark and light mode as a extra feature.

And I have some questions :

• It's first time I'm adding dark-mode to my project and I was very unfamiliar and had to do a lot of research, What are best practices to create dark mode using sass ? Is my approach any good ?

• This should've loaded initial theme based on user's OS theme, But it seems like It's not working after deployment, does it work for you?

• Can you switch themes or is my solution broken ? 😐

✅ Let me know your thoughts and feedbacks on this

I'm going back to my previous challenges and improve them one by one, I used plain css instead of scss as I thought scss is a overkill for this one. Also I added some animations to the design to make it look a little bit cooler !

I'll be glad to know what you guys think about this solution

Hello to my fellow developers ! for this challenge, instead of hardcoding Q&A into the html, I created a data.js file which contains all the Q&As plus unique id for each of them, then I used map function in my script file to loop through data and generate html. I think It's easier to maintain the code and even add new questions in the future this way !

Also I tried a little bit of OOP in my Javascript, and I think I'm satisfied with the result.

Huge thanks to vanzasetia for his clean solution on this challenge ! 👌

I will be glad to know about your thoughts and feedbacks, and possible improvements on my solution

Here I have a question, I used error icon as background image for my inputs in case any error happens, can anyone recommend me any other way to do the same thing ?

any other feedbacks are appreciated !

Hello ! This is my second attempt for this challenge , as my first attempt was so messy ! I used 7-1 pattern to manage my stylesheets, you can find more about this useful folder architecture here . I also used @vanzasetia repository on this solution from Github and copied his sr-only class which I hope he is ok with that !

also any feedback and tips on better approach is appreciated

Hello fellow developers ! I spent 3 days on this challenge not because it's hard, but because I started trying to do things the right way ! so I spent some time learning 7-1 folder architecture to manage my stylesheets, I also tried to stick to a css naming convention to make my code more readable.

I also spent significant amount of time to create a clean github repo for my challenges and I designed specific image for this challenge readme file !

I will appreciate anyone who goes through my code and check my github page and tell if it's still sucks or is it more tolerable