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!

Oldest comments (81)

Collapse
 
dkulthia profile image
Darsh Kulthia

Ok

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
 
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
 
dkulthia profile image
Darsh Kulthia

It should also be posted on devpost.com

Collapse
 
coderamrin profile image
Amrin

i've bookmarked this challenge. currently i am doing my "Build 10 css project" challenge. after that i'm gonna do this one.

Collapse
 
zernonia profile image
Zernonia

Great challenge to kick start the CSS journey! Looking forward to see your solution here 🀩

Collapse
 
brandonwallace profile image
brandon_wallace

Me too.

Collapse
 
rajeshkumarsivaprakasam profile image
RAJESHKUMAR SIVAPRAKASAM

Where i can get this image files?

Collapse
 
zernonia profile image
Zernonia

You need to sign in to Figma, then click on the image you want to download, and click export.

export function

Collapse
 
tatacsd profile image
Thays Casado

πŸ₯°β€οΈ

Collapse
 
arifintajul4 profile image
Tajul Arifin Sirajudin

Where is the design when menu is open in mobile?

Collapse
 
zernonia profile image
Zernonia

That's up to you to add some of your own 'flavor' πŸ˜‰

Collapse
 
wolzcodelife profile image
Joel Adewole

I did that in mine space-devto-challenge.web.app/ πŸ˜‰

Thread Thread
 
brandonwallace profile image
brandon_wallace

How long did it take you to do the page?

Thread Thread
 
wolzcodelife profile image
Joel Adewole

roughly 3hours and 38minutes

Thread Thread
 
hakimio profile image
Tomas Rimkus

At least for now, you submission, wolz, looks the best. Nicely done :)

Thread Thread
 
wolzcodelife profile image
Joel Adewole

Thanks a lot; I’m still looking for a Frontend job role these daysπŸ₯²

Collapse
 
wolzcodelife profile image
Joel Adewole

Okkkkkkk🀣🀣
Just seeing this by 1:12am....I want to see how long it will take me to complete it

Collapse
 
zernonia profile image
Zernonia

OH man.. I think this will take awhile πŸ˜‚πŸ˜‚

Collapse
 
wolzcodelife profile image
Joel Adewole

I'm done with itπŸ˜‚πŸ€£πŸ€£

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