Skip to main content

Command Palette

Search for a command to run...

I Design, You build! - Frontend Challenge #1

Published
I Design, You build! - Frontend Challenge #1

Challenge

Awesome Gradient, 3D Space design with different kind of Design Flavor. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:

  • 🎯 Target : User can see the similar design
  • 🎯 Target : Responsive design
  • 🎯 Target : On mobile, when I select the hamburger menu, I can see a navigation

Extra:

  • 🌟 Extra : Background blur tips: backdrop-filter: blur();
  • 🌟 Extra : Animation, hover animation

Resources:

  • 📃 Icon : https://icones.js.org/collection/all
  • 📃 Hosting: https://vercel.com/

⚠ 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. Bookmark this post so that you can submit it easier.
  2. Right-click here and open Open link in a New Tab to see the Figma Design.
  3. Enjoy coding! 🤩
  4. Come back to submit!

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

Zernonia Space Design


Submission

The comment section here in Hashnode will serves as Submission Area.

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!

** If you are new to Hashnode, you can apply use this link to join the amazing Hashnode community!

Feedback: This is awesome!

Demo: <url>
Github: <url>
Tech-Stack: Vue, TailwindCSS
Learning Outcome: 
  1. 
  2.

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 Hashnode and Twitter 😄

Thank you for your time and attention!

M
Metaltank3y ago

Feedback: This is awesome!

Demo: xae-bot.vercel.app/src/index.html Github: github.com/webAKAsh Tech-Stack: HTML, TailwindCSS Learning Outcome:

  1. I learn responsive designs.
  2. I win the fear of adjusting background Images.
O

Is challenge #4 only has prizes? OR what exactly?

1
Z
Zernonia3y ago

Yup! Only submission for challenge #4 will have the chance to win the SWAG 😉

A
  • Feedback: First one!

  • Demo: "main--zernonia-frontend-challenge-1-altf4dev.netlify.app/"

  • Github: "/AlejandroAltF4Dev/Challenge-1"

  • Tech-Stack: Angular, Angular Material, TailwindCSS

ZernoniaLooks like i can't post links as i'm a new user.

2
Z
Zernonia3y ago

Hi Alejandro Alvarez! Thank you for your submission!!

I love the button click animation and sidebar transition! Overall design is super well done!!! Love the responsiveness too! 🤩🙌🏼

If you are ok to share the source code, perhaps I can provide more feedback on that! 😉

** I would recommend try out Challenge #4. There's a contest going on now!!


Yup I'm aware of the link submission for new user. So yeah you can submit the link in "text" form.

A

Zernonia I did share the SC, but seems it was removed. Fixed. I submit for Challenge 4 already! Thanks.

2
J

Awesome! Congrats and thanks! I hope you don't give up on this project, it helps a lot! I don't understand only one thing: We have to follow a template? Or we can code with some else technologies?

2
Z
Zernonia4y ago

Thank you! I'm gonna try my best to keep this series alive 😂

Nope, you can use whatever framework you like and improve the design as much as you like. As long as you able to create similar mockup, it's a win!

D

this is amazing,

2
Z
Zernonia4y ago

Thank you!! Feel free to give the challenge series a try 😉

A

Hi, Really good job. I'm a UI/UX designer myself and a frontend developer but currently im trying to learn React so i will use your templates to code my first react projects! I'm looking forward to start up on this. I appreciate the effort you have put in to this, it's really beautiful and nicely done.

Currently i'm starting up on some Udemy cources but after i would love to submit my small React projects here and follow along with this challenge

2
Z
Zernonia4y ago

Thank you!! Appreciate your kind word! Perhaps you wanna share your design in the coming Challenge for other dev to build it? 😉

I'm looking forward to your submission ya!!!

S

If you don't mind can I use this (as a reference) to make website.

2
Z
Zernonia4y ago

I don't mind it at all! In fact, you can build your portfolio from the design if you want!

Y

This is the best article series ever i really needed this for a long time cause first i suck at designing but at the same time i want to build pretty stuff (i always made sites that just work but it wasn't pretty so i usually didn't publish them) now i can make them work and be pretty so i would put them on my portfolio

2
Z
Zernonia4y ago

Dude you just made my day!!!

Thank you so much for sharing your experience, and I really hope that this series would help you to be a better developer with design skill.

Do share in the comment about your masterpiece, when you are completed the challenge ya! 🤩🙌🏼

More from this blog

Z

Zernonia

10 posts

a Web Designer and Developer in Malaysia. I specialize in Responsive Web Design, and Web Application Development