DEV Community

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

I Design, You Build! - Frontend Challenge #2

Zernonia on September 30, 2021

Appreciation What an overwhelming response from the first challenge! I really enjoy seeing every submission, and appreciate every feedba...
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

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
 
khabub profile image
Robert Rozehnal

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

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

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

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
 
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

Nicely done! Loving the responsiveness and the menu dropdown.

Thank you for participating in this challenge ya! 🤩

Collapse
 
ajedral19 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

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
 
ajedral19 profile image
AJ Edral • Edited

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

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

Collapse
 
wolzcodelife profile image
Joel Adewole

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

Nicely done! I like the tilt animation man! hahahahaa 👍🏼

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

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

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
Joel Adewole

Ooouuu🥺

I’m just seeing this one, but I like it🤪

Collapse
 
id_dev3 profile image
Idrissa Diallo

Feedback: It was a big pleasure to do this challenge