DEV Community

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

Posted on • Updated on • Originally published at blog.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!

Discussion (78)

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 Author

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

Collapse
wolzcodelife profile image
wolz-CODElife • Edited on

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 Author • Edited on

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
wolz-CODElife

Thanks a lot

Collapse
cschliesser profile image
Charlie Schliesser

Well done :)

Collapse
wolzcodelife profile image
wolz-CODElife

Thanks

Collapse
vsompura3 profile image
Vaibhav Sompura • Edited on

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 Author

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

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

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 Author

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 Author

Hahahahaha no problem ๐Ÿคฉ

Collapse
programmerno24 profile image
Darsh

It should also be posted on devpost.com

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 Author

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 on

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 Author

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 Author

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 Author

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

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 on

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

Thread Thread
zernonia profile image
Zernonia Author

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

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 Author

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!

Collapse
arslanmurat06 profile image
Murat Arslan • Edited on

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 Author

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
arifintajul4 profile image
Tajul Arifin Sirajudin

Where is the design when menu is open in mobile?

Collapse
zernonia profile image
Zernonia Author

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

Collapse
wolzcodelife profile image
wolz-CODElife

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
wolz-CODElife

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
wolz-CODElife

Thanks a lot; Iโ€™m still looking for a Frontend job role these days๐Ÿฅฒ

Collapse
pixelgrrl profile image
Brandi Jones

This is a great idea!

It's actually how I learned to code for the real world โž My manager at first agency 15 years ago would ask me to scour template sites for several good designs, and then I would be tasked with recreating/building on my own. It's crazy how much I learned, combined with one of Sitepoint's CSS fundamentals books.

I picked up more about front-end coding and set myself up for future success in those training exercises (he knew I was a junior designer fresh out of college) leaps beyond what school could have ever taught me. It was so valuable, in fact, that I intend to make it part of the onboarding process for any new or junior themers when I eventually become a manager.

Awesome activity you've laid the groundwork for here and hope to see it continue + thrive!
๏ฝก๏ฝฅ::๏ฝฅ๏พŸโ˜…,๏ฝก๏ฝฅ::๏ฝฅ๏พŸโ˜†

Collapse
zernonia profile image
Zernonia Author

Awesome sharing! I couldn't agree with you more, rebuilding websites with good designs really level up my HTML and CSS skills as well.

I would definitely +1 on the idea of making building websites/components as part of the onboarding process, not only you can observe what's their capabilities in writing CSS, it also offers a great opportunity for them to expand their creativity!! ๐Ÿคฉ

Collapse
steffqing profile image
Steve Tomi

Seeing all this beautiful designs increases my appetite to learning

Collapse
zernonia profile image
Zernonia Author

Hahahahah that's the fun of community! It would be so dull and unmotivating if you are learning on your own.

Collapse
steffqing profile image
Steve Tomi

Am still pretty much a beginner at everything, taking it part time from my schedules.
Transitioning from Animal Science to Computer science should come as a big bang ๐Ÿ˜…

Thread Thread
zernonia profile image
Zernonia Author

Awesome! I'm from Actuarial Science to Web Development!! Taking time from the busy schedules is really a huge challenge, but I'm couldn't help myself from falling in love with Web Development ๐Ÿ˜†

Collapse
ajedral1994 profile image
AJ Edral • Edited on

I know it's kinda late, also would like to mention it's difficult for me to deploy in vercel due to my connectivity problems. but please feel free download and criticize my work.
i know the positioning of hero image in my work is kinda off and watch out for sass code. i really made a mess in the last minute. LOL. Thanks for this awesome post!
(Edit: luckily I've been able to deploy :))

Demo: adventure-together-xae.vercel.app/
Github: github.com/ajedral1994/AdventureTo...
Tech-Stack: HTML, SASS, JS
Learning Outcome:

  1. improving my methods of executing the my code.
Collapse
yassercherfaoui profile image
Yasser Cherfaoui

Feedback: This is awesome!

Demo: id-esign-you-code-1-2vjkp16rs-yass...
Github: github.com/yassercher/IDesignYouCo...
Tech-Stack: pure HTML&CSS , TailwindCSS

Collapse
zernonia profile image
Zernonia Author

I love the gravity floating animation!! Feels like I'm in the space! Hahahaha
I think it would be super awesome if you manage to create a responsive design! Maybe give it a try? ๐Ÿคฉ

None the less, thank you for participating on this! Hahahaah

Collapse
yassercherfaoui profile image
Yasser Cherfaoui

Oh yeah I'm planning to, I'm just lil busy with other projects, nd thank you too for sharing these designs with us it's all what I was looking for to strengthen my front end skills

Thread Thread
zernonia profile image
Zernonia Author

Wonderful! No problem, the post and design is here to stay, welcome you to share with us any future update! Cheers! ๐Ÿ˜‰

Collapse
wolzcodelife profile image
wolz-CODElife

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 Author

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

Collapse
wolzcodelife profile image
wolz-CODElife

I'm done with it๐Ÿ˜‚๐Ÿคฃ๐Ÿคฃ

Collapse
maqsudcoder profile image
Maqsud

I love it

Collapse
programmerno24 profile image
Darsh

Ok

Collapse
geminii profile image
Jimmy

Really awesome idea. I really enjoy it. Thanks you so much to let us practice ๐Ÿ™ with really cool project ๐Ÿ‘

Collapse
zernonia profile image
Zernonia Author

Thank you! and no problem ๐Ÿ˜„

Collapse
tatacsd profile image
Thays Casado

๐Ÿฅฐโค๏ธ

Collapse
chelsea_codes profile image
chelsea-codes

I would love to see more of these challenges! Thanks for these!

Collapse
zernonia profile image
Zernonia Author

Worry not, they are coming. Just that there's Hacktoberfest going on, let's focus on that first! hahaha ๐Ÿ˜

Collapse
rajeshkumarsivaprakasam profile image
RAJESHKUMAR SIVAPRAKASAM

Where i can get this image files?

Collapse
zernonia profile image
Zernonia Author

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

export function

Collapse
nickhooligan profile image
Mamphane

I'm down for this challenge.

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 Author

Great challenge to kick start the CSS journey! Looking forward to see your solution here ๐Ÿคฉ

Collapse
brandonwallace profile image
brandon_wallace

Me too.

Collapse
raunak88 profile image
Raunak88

Feedback: I love this series. Waiting for you to upload more such designs.

Demo: confident-blackwell-51029d.netlify...
Github: github.com/Raunak88/idub1
Tech-Stack: ReactJS, CSS

Collapse
zernonia profile image
Zernonia Author

Nicely executed! The mobile menu looks kinda offset to the right, wight gives an awkward feeling, maybe you can try to align in center instead? ๐Ÿ˜„

Collapse
dselasea profile image
Daniel Selase

I'm going to try this. Starting today...

Collapse
zernonia profile image
Zernonia Author

Great! Looking forward to see your masterpiece! ๐Ÿ˜‰

Collapse
brandonwallace profile image
brandon_wallace

Are the designs supposed to have the curved edges? I am not seeing curves in the completed pages. I like the curve in the design.

Collapse
zernonia profile image
Zernonia Author

It doesn't. You can see from the Desktop frame, is it not rounded