Appreciation
What an overwhelming response from the first challenge! I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to join us in this fun challenge! 🤩✨
I know everyone is in different level of HTML/CSS/Javascript, but don't worry, I will try to mix in different difficulties in the coming challenge, so stay tuned! 🔔
Challenge
I have a confession to make, I'm kinda obsessed with Gradient Blob recently. If you check out my website, you will know what I meant.
So, in this challenge, we will be creating an awesome Gradient Blob and Text Website for a web application. Create a homepage following the design. Fulfill Target and/or Extra below:
Target:
- 🎯 Target : User can see the similar design
- 🎯 Target : Responsive design
- 🎯 Target : Gradient text
- 🎯 Target : Gradient background (gradient blob)
- 🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation (use your own creativity)
Extra:
- 🌟 Extra : Add animation to the Gradient blob
- 🌟 Extra : Add animation to the image
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
- Help 💖 this design on Dribbble, and follow me! Please... 😳
- 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 😄
Top comments (24)
Feedback: Another Good Design.
Demo: unx-slik-app.vercel.app/
Github: github.com/ramananda-kairi/unx-sli...
Tech-Stack: Next Js & SCSS
Learning Outcome:
Beautiful! Kudos on Gradient text, blob and Responsive Design!
💯! 🌟
I can't scroll
There is nothing to scroll.. it taking full height.
Feedback: Perfect for learning. Thank you.
Demo: webdev-learning-slick.vercel.app
Github: github.com/Khabub/webdev-learning-...
Tech-Stack: React, CSS, Recharts
Learning Outcome: Recharts,
Getting better with React, css gradients
Hey @zernonia ,
Thanks again for sharing with us these challenges, I'm ready to take the second challenge, and I have a sugguestion for you so maybe it helps you with making the 3rd challenge, I think it would be better if you challenge us to code a porfolio website, since we as a developers all need a portfolio website to showcase our skills and our done projects. how do u find it ?
Not bad idea! But I always believe portfolio is where you distinguish yourself from other developers. It is the best opportunity for your creativity to run wild.
But still, thank you for your suggestion, I will think about it! 🤗
Feedback: Great design, thanks
Demo: idesignyoubuild2.vercel.app/
Github: github.com/arslanmurat06/idesignyo...
Tech-Stack: React & Styled Components
Learning Outcome:
Chart forced me while making the page responsive and still some problems on mobiles
You're welcome!
Usually it will be best to export the charts/visuals as png instead of svg, to save all the trouble of getting charts to become responsve. Perhaps you should give this a try?
Feedback: Great Design 👍🏻.
Demo: vsompura3.github.io/ui-development...
Github: github.com/vsompura3/ui-developmen...
Tech-Stack: HTML,CSS,JS
Learning Outcome:
Nicely done! Loving the responsiveness and the menu dropdown.
Thank you for participating in this challenge ya! 🤩
Check out my work :)
Demo: unx-aje.vercel.app/
Github: github.com/ajedral1994/UNX
Tech-Stack: HTML, SASS, JS
Learning Outcome:
Super well done! Love the responsive and the mobile menu design!
Feedback:
I've noticed that the element on menu is jumping when toggling the menu, it's because of the long overflow wording. So, the better approach is to fix
width: 65%, andtransform: translateX(0%)when open,transform: translateX(100%)when off.yeah Thank you for your feedback. I love it! I noticed what you had mention, but when i do transformX, there's a strange blurry white shadow showing behind the menu during transition and kinda don't like it to ruin the transition, and i don't know where it come from, i think it has something to do with the backdrop filter or maybe with my system., i'll fix it. :D Thanks!
Edit: I've done it. i used overflow-x: clip, but this probably won't work in IE.
Awesome! Well done yaa! Thank you for taking on this challenge! 🤩
Although I've been quite busy, I found time to do the challenge
Feedback: This was a roller-coaster ride🤩🤩
Demo: dashboard-devto-challenge.web.app/
Github: github.com/wolz-CODElife/dashboard...
Tech-Stack: React, CSS
Learning Outcome:
Thanks a lot Zernonia
Nicely done! I like the tilt animation man! hahahahaa 👍🏼
Demo:vlatko-info.herokuapp.com/korona
Github:github.com/Vucenik/korona
Tech-Stack:HTML CSS Javascript
Nice gradient background, but I was hoping to see the image from the design without clicking on the "dashboard" button 😂
Nonetheless, thank you so much for taking on this challenge!
What is the purpose of dashboard buttons on your design?
Dashboard is not an image it is an app. The user must want to use it.
Awesome stuff! I'm always sharing this to the dev community I joined in for aspiring FE devs. Back in the day it's hard to find free stuff like this!
Keep it up man!
Awesome! Thank you for sharing this out! I'm curious which dev community you share it on ya? 😄
Designer usually won't shared out their design (even to this day), because it's their masterpiece and wouldn't want to give it away freely. But that's not the case for me and other who gladly share their work 😉
I'm a Web Dev, and always hoping to see these challenges so that I can sharpen up my skills, add my own flavour to the project, and finally use it on my portfolio. So here I am making this challenge for everyone, as I slowly improve my design skills, everyone can improve their coding skills as well! WIN-WIN! 😆😍
Ooouuu🥺
I’m just seeing this one, but I like it🤪