Challenge
Awesome Gradient, 3D Space design with different kind of Design Flavor. Create a homepage following the design. Fulfill Target...
For further actions, you may consider blocking this person and/or reporting abuse
Maybe add a hashtag to this post like 'IDesignYouBuild' I'd definitely be interested in following that ๐๐
Great idea! I've replaced one of the tags with #idesignyoubuild
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:
idesignyoubuild #webdev #javascript
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 blurlooks good!Nicely done @wolzcodelife !! Thank you so much for challenging this! ๐ค
Thanks a lot
Well done :)
Thanks
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:
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! โก๐คฉ
How long did it take you to do the page?
it took me around 3 hours โ๏ธ.
This is a great idea! Would you mind posting these on Driwwwle as well? I would love to see your idea reach more people.
Lovely website! Definitely will post it there!
That is awesome to hear! Happy to help this initiative.
I think the
<img>withobject-fit: cover;on the Driwwwle post might be betterI was just about push the same changes ๐. Thanks for the feedback! Appreciate it a lot.
Hahahahaha no problem ๐คฉ
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.
Awesome design! But the text kinda overlapped by the spaceman at laptop view. Maybe put
z-index: 10to.content?Thank you for participating ya! ๐and maybe I shall come up with more challenging design for you ๐๐
How long did it take you to do the page?
I came across this post for the first time today! This is a terrific idea! I'll be joining in for sure. Great work
Hahaha awesome! But I would suggest to build "challenge 4" first, because there's a "contest" going on with that challenge!
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?
Hahahaha.. I've another design in the bank.. Will release the challenge #2 in the next few days!
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
I guess in order to validate the idea, you gotta reach out to more people, not everyone would spend time practicing Web Dev skills.
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.
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' ๐
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.
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!
Thank You.
Bit busy with other projects, will still try to make it responsive.
No problem. Take your time! This post will be here waiting for you hahahaha
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!
๏ฝก๏ฝฅ::๏ฝฅ๏พโ ,๏ฝก๏ฝฅ::๏ฝฅ๏พโ
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!! ๐คฉ
Where is the design when menu is open in mobile?
That's up to you to add some of your own 'flavor' ๐
I did that in mine space-devto-challenge.web.app/ ๐
How long did it take you to do the page?
roughly 3hours and 38minutes
At least for now, you submission, wolz, looks the best. Nicely done :)
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:
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!
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
Nope it's not too late! Awesome job ya! The
ground block imagewas squeezed in a smaller viewport, addingobject-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!
Feedback: This is awesome!
Demo: id-esign-you-code-1-2vjkp16rs-yass...
Github: github.com/yassercher/IDesignYouCo...
Tech-Stack: pure HTML&CSS , TailwindCSS
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
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
Wonderful! No problem, the post and design is here to stay, welcome you to share with us any future update! Cheers! ๐
Seeing all this beautiful designs increases my appetite to learning
Hahahahah that's the fun of community! It would be so dull and unmotivating if you are learning on your own.
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 ๐
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 ๐
Okkkkkkk๐คฃ๐คฃ
Just seeing this by 1:12am....I want to see how long it will take me to complete it
OH man.. I think this will take awhile ๐๐
I'm done with it๐๐คฃ๐คฃ
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:
It is never too late :D Perfect for learning, thank you.
Demo: webdev-learning-space.vercel.app
Github: github.com/Khabub/webdev-learning-...
Tech-Stack: React, CSS
Learning Outcome: A little bit of everything :)
Feedback: Thanks for the challenge great design, I really Liked it.
Couldn't do responsive part though, as I did not start with that in mind and because of that I did not plan for it and made the project difficult to make responsive.
I wish I could though. Really gutted to not doing since This was my time to practice what I've been learning
Demo: chaderenyore.github.io/xae-challenge/
Github: github.com/chaderenyore/xae-challenge
Tech-Stack: SCSS
Learning Outcome:
i've bookmarked this challenge. currently i am doing my "Build 10 css project" challenge. after that i'm gonna do this one.
Great challenge to kick start the CSS journey! Looking forward to see your solution here ๐คฉ
Me too.
Where i can get this image files?
You need to sign in to Figma, then click on the image you want to download, and click export.
๐ฅฐโค๏ธ
I'm going to try this. Starting today...
Great! Looking forward to see your masterpiece! ๐
I'm down for this challenge.
Really awesome idea. I really enjoy it. Thanks you so much to let us practice ๐ with really cool project ๐
Thank you! and no problem ๐
I love it
I would love to see more of these challenges! Thanks for these!
Worry not, they are coming. Just that there's Hacktoberfest going on, let's focus on that first! hahaha ๐
Ok
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
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? ๐
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.
It doesn't. You can see from the Desktop frame, is it not rounded