DEV Community

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

Posted on • Originally published at blog.zernonia.com

I Design, You Build! - Frontend Challenge #3

Appreciation

What an overwhelming response from the first two challenges! I know I said it before, but 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

There's a few 1 pager (or should I say 1 section 😆) design previously, how about let's make a Homepage for a Modern Interior Furniture Store?

So, in this challenge, we will be creating a minimalistic E-commerce Website with the touch of modern UI. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:

  • 🎯 Target : User can see the similar design
  • 🎯 Target : Responsive design
  • 🎯 Target : Filter products
  • 🎯 Target : Multiple showcase (use arrow button to navigate)
  • 🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation (use your own creativity)
  • 🎯 Target : On mobile, I can slide the products to left-right.

Extra:

  • 🌟 Extra : Add animation to the filtering
  • 🌟 Extra : Add animation when scrolling down the page

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


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 😄

Also, check out my own Website!

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

Discussion (16)

Collapse
aerial301 profile image
aerial301

Feedback: Nice challenge. Very good for learning and practicing.
Demo: ibrahim-301.github.io/E-commerce-h...
Github: github.com/ibrahim-301/E-commerce-...
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 Author

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

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 Author

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

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

Collapse
raunak88 profile image
Raunak88 • Edited on

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 Author

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
bodybody123 profile image
bodybody123

Chuckle i'm in

Collapse
zernonia profile image
Zernonia Author

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 Author

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 Author

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