DEV Community

Cover image for I Design, You Build! - Frontend Challenge #2
Zernonia
Zernonia

Posted on • Originally published at blog.zernonia.com

I Design, You Build! - Frontend Challenge #2

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:

⚠ 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

  1. Help πŸ’– this design on Dribbble, and follow me! Please... 😳
  2. Bookmark this post so that you can submit it easier.
  3. Right-click here and open Open link in a New Tab to see the Figma Design.
  4. Enjoy coding! 🀩
  5. Come back to submit!

All the images and assets are free to use, and can be exported from the Figma Design.

Zernonia Frontend Challenge #2


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.

Enter fullscreen mode Exit fullscreen mode

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 πŸ˜„

Thank you for your time and attention! Hope you'll enjoy!

Discussion (22)

Collapse
digitalrama profile image
Ramananda Kairi

Feedback: Another Good Design.

Demo: unx-slik-app.vercel.app/
Github: github.com/ramananda-kairi/unx-sli...
Tech-Stack: Next Js & SCSS
Learning Outcome:

  1. Dig bit deeper in Vercel CLI.
Collapse
zernonia profile image
Zernonia Author

Beautiful! Kudos on Gradient text, blob and Responsive Design!
πŸ’―! 🌟

Collapse
fettah_aud profile image
Fettah Aud

I can't scroll

Collapse
digitalrama profile image
Ramananda Kairi

There is nothing to scroll.. it taking full height.

Collapse
yassercherfaoui profile image
Yasser Cherfaoui

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 ?

Collapse
zernonia profile image
Zernonia Author

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! πŸ€—

Collapse
arslanmurat06 profile image
Murat Arslan

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

Collapse
zernonia profile image
Zernonia Author

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?

Collapse
wolzcodelife profile image
wolz-CODElife

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:

  1. I learnt about realt-tilt animator
  2. I learnt how to use multiple elements to make a background gradient

Thanks a lot Zernonia

Collapse
zernonia profile image
Zernonia Author

Nicely done! I like the tilt animation man! hahahahaa πŸ‘πŸΌ

Collapse
vsompura3 profile image
Vaibhav Sompura

Feedback: Great Design πŸ‘πŸ».
Demo: vsompura3.github.io/ui-development...
Github: github.com/vsompura3/ui-developmen...
Tech-Stack: HTML,CSS,JS
Learning Outcome:

  1. css filter property.
  2. stacking context
  3. background-clip property
Collapse
zernonia profile image
Zernonia Author

Nicely done! Loving the responsiveness and the menu dropdown.

Thank you for participating in this challenge ya! 🀩

Collapse
ajedral1994 profile image
AJ Edral

Check out my work :)

Demo: unx-aje.vercel.app/
Github: github.com/ajedral1994/UNX
Tech-Stack: HTML, SASS, JS

Learning Outcome:

  1. How to use css mask-image property
Collapse
zernonia profile image
Zernonia Author

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%, and transform: translateX(0%) when open, transform: translateX(100%) when off.

Collapse
ajedral1994 profile image
AJ Edral • Edited on

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.

Thread Thread
zernonia profile image
Zernonia Author

Awesome! Well done yaa! Thank you for taking on this challenge! 🀩

Collapse
vucenik profile image
Vucenik

Demo:vlatko-info.herokuapp.com/korona
Github:github.com/Vucenik/korona
Tech-Stack:HTML CSS Javascript

Collapse
zernonia profile image
Zernonia Author

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!

Collapse
vucenik profile image
Vucenik

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.

Collapse
alexringor profile image
AlexRingor

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!

Collapse
zernonia profile image
Zernonia Author

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! πŸ˜†πŸ˜

Collapse
wolzcodelife profile image
wolz-CODElife

OoouuuπŸ₯Ί

I’m just seeing this one, but I like itπŸ€ͺ