DEV Community

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

Read full post

oussama ayadi • Apr 10 '22 • 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

Zernonia • Apr 11 '22

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

aerial • Oct 19 '21 • 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 ..

Zernonia • Oct 19 '21

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

AJ Edral • Oct 21 '21 • 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

Zernonia • Oct 22 '21

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

AJ Edral • Oct 22 '21

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

Zernonia • Oct 22 '21

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

Raunak88 • Oct 18 '21 • 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.

Zernonia • Oct 18 '21

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

Raunak88 • Oct 18 '21

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

Idrissa Diallo • Feb 6 '24

Feedback: I did it! Another challenge delivered successfully

Demo: SHPX | E-commerce Website
Github: Repo
Tech-Stack: HTML5 | SCSS | Javascript

Robert Rozehnal • Sep 12 '22

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

Antoine Raymond • Oct 14 '21

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 😍