Challenge
Awesome Gradient, 3D Space design with different kind of Design Flavor. Create a homepage following the design. Fulfill Target and/or Extra below:
Target:
- π― Target : User can see the similar design
- π― Target : Responsive design
- π― Target : On mobile, when I select the hamburger menu, I can see a navigation
Extra:
- π Extra : Background blur
tips: backdrop-filter: blur(); - π Extra : Animation, hover animation
Resources:
- π Icon : https://icones.js.org/collection/all
- π Hosting: https://vercel.com/
β It will defeat the purpose of learning if you just copy and paste someone else's answer π!
Start Coding!
If you are ready to take on the challenge, then
- Love π this design on Dribbble and follow me!
- Bookmark this post so that you can submit it easier.
- Right-click here and open Open link in a New Tab to see the Figma Design.
- Enjoy coding! π€©
- Come back to submit!
All the images and assets are free to use, and can be exported from the Figma Design.
Submission
Once you've completed, come back to this post, and submit your solution using the following template in the comment section. You are encouraged to comment and upvotes other's answer!
Thank you!π
Feedback: This is awesome!
Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome:
1.
2.
Why?
I share these design freely so that anyone who wanted to practice or challenge Web design be able to do so without paying other platform (ahem) to get their **Figma Design*π¨ file.
You are free to use the Design you've created in your portfolio. No copyright claims or anything.
But if you are loving my work, you are most welcomed to follow me on Dev.to and Twitter π
Latest comments (81)
It is never too late :D Perfect for learning, thank you.
Demo: webdev-learning-space.vercel.app
Github: github.com/Khabub/webdev-learning-...
Tech-Stack: React, CSS
Learning Outcome: A little bit of everything :)
I came across this post for the first time today! This is a terrific idea! I'll be joining in for sure. Great work
Hahaha awesome! But I would suggest to build "challenge 4" first, because there's a "contest" going on with that challenge!
Feedback: Thanks for the challenge great design, I really Liked it.
Couldn't do responsive part though, as I did not start with that in mind and because of that I did not plan for it and made the project difficult to make responsive.
I wish I could though. Really gutted to not doing since This was my time to practice what I've been learning
Demo: chaderenyore.github.io/xae-challenge/
Github: github.com/chaderenyore/xae-challenge
Tech-Stack: SCSS
Learning Outcome:
Feedback: I love this series. Waiting for you to upload more such designs.
Demo: confident-blackwell-51029d.netlify...
Github: github.com/Raunak88/idub1
Tech-Stack: ReactJS, CSS
Nicely executed! The mobile menu looks kinda offset to the right, wight gives an awkward feeling, maybe you can try to align in center instead? π
Feedback: Design was amazing to try out frontend skills π
Demo: zernonia-fe-challenge.vercel.app
Github: github.com/cloudcrawler/zernonia-f...
Tech-Stack: HTML, SCSS, NPM
Learning Outcome: I am newbie in frontend development, everything was a learning for me. I recently learned advance CSS concepts like SCSS. Overall it was a good exercise to test out learning vs implementation reality.
Awesome! Glad to hear that you are newbie in frontend dev, welcome! Haahaahha
Next step, perhaps improve the design with responsive design?
Nonetheless, thank you for participating!
Thank You.
Bit busy with other projects, will still try to make it responsive.
No problem. Take your time! This post will be here waiting for you hahahaha
I would love to see more of these challenges! Thanks for these!
Worry not, they are coming. Just that there's Hacktoberfest going on, let's focus on that first! hahaha π
I love it
Really awesome idea. I really enjoy it. Thanks you so much to let us practice π with really cool project π
Thank you! and no problem π
A little bit late but lets put mine;
Demo: idesignyoubuild.vercel.app/
Github: github.com/arslanmurat06/idesignyo...
Tech-Stack: React, Styled-Components
Learning Outcome:
It was great challenge. Took bounce effect from guy here. Responsive for small screens, not full for mobiles
Nope it's not too late! Awesome job ya! The
ground block imagewas squeezed in a smaller viewport, addingobject-fit: cover;will ensure the image stay the same.Responsive design still can improve a bit, I know it's particularly challenging for this challenge.
But all in all, good job! If you are ready, let's take on challenge #2. Much simpler and beautiful!
I know it's kinda late, also would like to mention it's difficult for me to deploy in vercel due to my connectivity problems. but please feel free download and criticize my work.
i know the positioning of hero image in my work is kinda off and watch out for sass code. i really made a mess in the last minute. LOL. Thanks for this awesome post!
(Edit: luckily I've been able to deploy :))
Demo: adventure-together-xae.vercel.app/
Github: github.com/ajedral1994/AdventureTo...
Tech-Stack: HTML, SASS, JS
Learning Outcome: