DEV Community

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

Posted on • Edited on • Originally published at zernonia.com

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:

⚠ 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. Love 💖 this design on Dribbble and follow me!
  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 Space Design


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 😄

Thank you for your time and attention!

Top comments (81)

Collapse
 
lil5 profile image
Lucian I. Last

Maybe add a hashtag to this post like 'IDesignYouBuild' I'd definitely be interested in following that 😉👍

Collapse
 
zernonia profile image
Zernonia

Great idea! I've replaced one of the tags with #idesignyoubuild

Collapse
 
wolzcodelife profile image
Joel Adewole • Edited

Feedback: This is awesome!
I started 1:12am and finished 4:50am(although with some breaks) in total: 3hours 38 minutes

Demo: space-devto-challenge.web.app/
Github: github.com/wolz-CODElife/space-dev...
Tech-Stack: React, CSS
Learning Outcome:

  1. I learnt how to position a background image vertically and horizontally.

idesignyoubuild #webdev #javascript

Collapse
 
zernonia profile image
Zernonia • Edited

Oh my!!! Sorry to hear that this challenge makes you stay up so late 🤣🤣

This is amazing!! The design is well implemented, especially where user can scroll the footer if it overflows, and the custom mobile menu's background blur looks good!

Nicely done @wolzcodelife !! Thank you so much for challenging this! 🤟

Collapse
 
wolzcodelife profile image
Joel Adewole

Thanks a lot

Collapse
 
cschliesser profile image
Charlie Schliesser

Well done :)

Collapse
 
wolzcodelife profile image
Joel Adewole

Thanks

Collapse
 
vsompura3 profile image
Vaibhav Sompura • Edited

This will be a great way to improve ui skills.

Demo: vsompura3.github.io/ui-development...
Github: github.com/vsompura3/ui-developmen...
Tech-Stack: HTML,CSS,JS
Learning Outcome:

  1. responsive design
  2. positioning background image
Collapse
 
zernonia profile image
Zernonia

Nicely done!

I think the hero image was stretched, I think it's the problem with Figma export svg.
But nonetheless, awesome job!

Thank you for participating! ⚡🤩

Collapse
 
brandonwallace profile image
brandon_wallace

How long did it take you to do the page?

Collapse
 
vsompura3 profile image
Vaibhav Sompura

it took me around 3 hours ✌️.

Collapse
 
itsnitinr profile image
Nitin Ranganath

This is a great idea! Would you mind posting these on Driwwwle as well? I would love to see your idea reach more people.

Collapse
 
zernonia profile image
Zernonia

Lovely website! Definitely will post it there!

Collapse
 
itsnitinr profile image
Nitin Ranganath

That is awesome to hear! Happy to help this initiative.

Thread Thread
 
zernonia profile image
Zernonia

I think the <img> with object-fit: cover; on the Driwwwle post might be better

Thread Thread
 
itsnitinr profile image
Nitin Ranganath

I was just about push the same changes 😆. Thanks for the feedback! Appreciate it a lot.

Thread Thread
 
zernonia profile image
Zernonia

Hahahahaha no problem 🤩

Collapse
 
darshkul24 profile image
Darsh

It should also be posted on devpost.com

Collapse
 
dewaldels profile image
Dewald Els

I came across this post for the first time today! This is a terrific idea! I'll be joining in for sure. Great work

Collapse
 
zernonia profile image
Zernonia

Hahaha awesome! But I would suggest to build "challenge 4" first, because there's a "contest" going on with that challenge!

Collapse
 
digitalrama profile image
Ramananda Kairi

Feedback: NA

Demo: xae.pages.dev/
Github: github.com/ramananda-kairi/xae
Tech-Stack: Html, CSS (SCSS)
Learning Outcome: Nothing new but but loved doing this and will complete upcoming challanges as well.

Collapse
 
zernonia profile image
Zernonia

Awesome design! But the text kinda overlapped by the spaceman at laptop view. Maybe put z-index: 10 to .content?

Thank you for participating ya! 😄and maybe I shall come up with more challenging design for you 😆😂

Collapse
 
brandonwallace profile image
brandon_wallace

How long did it take you to do the page?

Collapse
 
cloudcrawler profile image
Amit Negi

Feedback: Design was amazing to try out frontend skills 👍
Demo: zernonia-fe-challenge.vercel.app
Github: github.com/cloudcrawler/zernonia-f...
Tech-Stack: HTML, SCSS, NPM
Learning Outcome: I am newbie in frontend development, everything was a learning for me. I recently learned advance CSS concepts like SCSS. Overall it was a good exercise to test out learning vs implementation reality.

Collapse
 
zernonia profile image
Zernonia

Awesome! Glad to hear that you are newbie in frontend dev, welcome! Haahaahha

Next step, perhaps improve the design with responsive design?

Nonetheless, thank you for participating!

Collapse
 
cloudcrawler profile image
Amit Negi • Edited

Thank You.
Bit busy with other projects, will still try to make it responsive.

Thread Thread
 
zernonia profile image
Zernonia

No problem. Take your time! This post will be here waiting for you hahahaha

Collapse
 
brandonwallace profile image
brandon_wallace

This is a wonderful idea. You design, I build It will provide valuable experience for those that would like to practice HTML/CSS. Do you have any more designs?

Collapse
 
zernonia profile image
Zernonia

Hahahaha.. I've another design in the bank.. Will release the challenge #2 in the next few days!

Collapse
 
brandonwallace profile image
brandon_wallace • Edited

I actually had an idea like this in my university a few year back. I designed but no one wanted to build. I should have asked more than one person... LOL

Thread Thread
 
zernonia profile image
Zernonia

I guess in order to validate the idea, you gotta reach out to more people, not everyone would spend time practicing Web Dev skills.

Thread Thread
 
brandonwallace profile image
brandon_wallace

That is true brother. At that time I came up with the idea I did not have access to the internet to share the idea with others.

Thread Thread
 
zernonia profile image
Zernonia

Icic.. now that you have the power of internet, why not share it with the internet? Maybe you could use another title for that challenge, instead of 'I Design, You Build' 😜

Thread Thread
 
brandonwallace profile image
brandon_wallace

Yes, that is true. I could do that. It is not too late. That is another great idea you have come up with. You must be filled with great ideas.

Thread Thread
 
zernonia profile image
Zernonia

Lol.. Thank you.. But honestly, I just put myself at other's shoes, then I kinda know what people are looking for. I myself am a Web Developer too, and I wish people would share their design with me, so that I can play with different kinds of design style 😁

Collapse
 
arslanmurat06 profile image
Murat Arslan • Edited

A little bit late but lets put mine;

Demo: idesignyoubuild.vercel.app/
Github: github.com/arslanmurat06/idesignyo...
Tech-Stack: React, Styled-Components
Learning Outcome:
It was great challenge. Took bounce effect from guy here. Responsive for small screens, not full for mobiles

Collapse
 
zernonia profile image
Zernonia

Nope it's not too late! Awesome job ya! The ground block image was squeezed in a smaller viewport, adding object-fit: cover; will ensure the image stay the same.

Responsive design still can improve a bit, I know it's particularly challenging for this challenge.

But all in all, good job! If you are ready, let's take on challenge #2. Much simpler and beautiful!

Collapse
 
testerslol123 profile image
Danny S

Feedback: I think this challenge was amazing, I only try to copy from figma.
I have some limitation with CSS

Demo: reactjs-frontend-xae.vercel.app/
Github: github.com/testerslol123/reactjs-f...
Tech-Stack: React, CSS
Learning Outcome:

  1. I learn to copy from figma
  2. I use some margin and css from people here.
  3. It's hard to align without using UI framework.
Collapse
 
zernonia profile image
Zernonia

Great job! No worry, is it better to practice than never!
I see great potential in improving the site, maybe you can check out other's solution to learn how they wrote their CSS?

All in all, thank you for showcasing your masterpiece!