DEV Community

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

I Design, You Build! - Frontend Challenge #3

Zernonia on October 14, 2021

Appreciation What an overwhelming response from the first two challenges! I know I said it before, but I really enjoy seeing every submi...
Collapse
 
ayadi1 profile image
oussama ayadi • Edited

Feedback: This is awesome! i like this challenge

Demo: shpx-e-commerce-landing-page-using...
Github: github.com/ayadi1/shpx-e-commerce-...

nextJS - sass :D

Collapse
 
zernonia profile image
Zernonia

Glad to see that you enjoy it! 😁

Nicely done on the filters! and I love that you split those code into different section (header/main/footer) and components! 🤩

Collapse
 
aerial profile image
aerial • Edited

Feedback: Nice challenge. Very good for learning and practicing.
Demo: aerial-301.github.io/E-commerce-ho...
Github: github.com/aerial-301/E-commerce-h...
Tech-Stack: Vanilla (html, css, js).
Learning Outcome:

  • Applying animations in javascript using Element.animate().
  • Making image fade-in transition effect.
  • The z-index css property.
  • And a lot more ..
Collapse
 
zernonia profile image
Zernonia

Awesome! I like the animations and sliders. And glad to hear you have so many learning outcome!

Minor improvement:

  • Add cursor: pointer to your button to let the user know this element can be clicked.
  • Uniform heading for each section. Products font-size is significantly smaller than other heading.

Thank you so much for participating in this small challenge 😂🤩

Collapse
 
ajedral19 profile image
AJ Edral • Edited

I tried to do this as clean as I wanted to, but I'm kind of in a rush. I apologize already for my messy code and conversion. :D

Demo: shpx-ajedral1994.vercel.app/
Github: github.com/ajedral1994/SHPX
Tech-Stack: HTML, Sass, Js
Learning Outcome:

experimenting with the tilt effect, also with transition events

Collapse
 
zernonia profile image
Zernonia

I love it! Search button, mobile menu, hamburger icon animation, tilt effect looks super good!

Thank you for taking on this challenge (even though you are in a rush Hahaha)
Cheers! 🤩

Collapse
 
ajedral19 profile image
AJ Edral

Thank you! I'm looking forward to the next challenge and next time I'll take my time Hahaha. :D
Thank you again for creating those awesome designs. :D

Thread Thread
 
zernonia profile image
Zernonia

No problem! Feel free to share around, or invites others to join this challenge! Hahahahaha 😉

Collapse
 
raunak88 profile image
Raunak88 • Edited

Feedback: This series is awesome. Its nice to get an opportunity to challenge myself to implement these designs.

Demo: serene-ramanujan-f3eb0a.netlify.app/
Github: github.com/Raunak88/idub2
Tech-Stack: ReactJS, CSS

P.S. : I've made some changes to the layout inorder to show maximum content on mobile screens.

Collapse
 
zernonia profile image
Zernonia

You could try max-width on the .App to address wider screen monitor, else the design would feel too empty.

Also, the font-size is not quite consistent, it would be much better if the font-size for smaller text be the same.

Nonetheless, good try! 🤩

Collapse
 
raunak88 profile image
Raunak88

Point noted....Ill try to fix those...I am mostly using percentage and ems for element widths. However, your designs mention pixels for the element sizes...If I try to use them the layout is not looking similar to the design..Can you suggest any solution to make it pixel perfect

Collapse
 
id_dev3 profile image
Idrissa Diallo

Feedback: I did it! Another challenge delivered successfully

Collapse
 
khabub profile image
Robert Rozehnal

Feedback: This is awesome!

Demo: webdev-learning-shpx.vercel.app/
Github: github.com/Khabub/webdev-learning-...
Tech-Stack: React, HTML, CSS, JS, Styled-components, Swiper, React-select

Thank you for the design :)

Collapse
 
bodybody123 profile image
bodybody123

Chuckle i'm in

Collapse
 
zernonia profile image
Zernonia

Wonderful! 🤩

Collapse
 
z2lai profile image
z2lai

Fantastic idea for an article series! This content is the cream of the crop for dev.to, keep it up!

Collapse
 
zernonia profile image
Zernonia

Thank you!! 🤩 It's been a wonderful series seeing so many devs took on this challenge and actually completed it!

Collapse
 
raptor78455 profile image
Antoine Raymond

That's a great idea ! As a backend developer, I am interested in by web design and I'm learning it. This post comes out at a perfect timing so I can exercise 😍

Collapse
 
zernonia profile image
Zernonia

Perfect! Excited to see your masterpiece! 🤩

Collapse
 
microbouji profile image
Elian Ibaj

I went a bit crazy with this one 😄: dev.to/microbouji/ui-html-css-5k2

Collapse
 
rt1616103 profile image
Ryan Tyler

Is the challenge still on.