Zernonia
Zernonia

Zernonia

I Design, You Build! - Frontend Challenge #2

I Design, You Build! - Frontend Challenge #2

Zernonia
ยทSep 30, 2021ยท

Subscribe to my newsletter and never miss my upcoming articles

Table of contents

  • Appreciation
  • Challenge
  • Start Coding!
  • Submission
  • Why?

Appreciation

What an overwhelming response from the first challenge! I really enjoy seeing every submission, and appreciate every feedback given. If you haven't give the challenge a try, I strongly encourage you to join us in this fun challenge! ๐Ÿคฉโœจ

I know everyone is in different level of HTML/CSS/Javascript, but don't worry, I will try to mix in different difficulties in the coming challenge, so stay tuned! ๐Ÿ””


Challenge

I have a confession to make, I'm kinda obsessed with Gradient Blob recently. If you check out my website, you will know what I meant.

So, in this challenge, we will be creating an awesome Gradient Blob and Text Website for a web application. Create a homepage following the design. Fulfill Target and/or Extra below:

Target:

  • ๐ŸŽฏ Target : User can see the similar design
  • ๐ŸŽฏ Target : Responsive design
  • ๐ŸŽฏ Target : Gradient text
  • ๐ŸŽฏ Target : Gradient background (gradient blob)
  • ๐ŸŽฏ Target : On mobile, when I select the hamburger menu, I can see a navigation (use your own creativity)

Extra:

  • ๐ŸŒŸ Extra : Add animation to the Gradient blob
  • ๐ŸŒŸ Extra : Add animation to the image

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. Help ๐Ÿ’– this design on Dribbble, and follow me! Please... ๐Ÿ˜ณ
  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 Frontend Challenge #2

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 Dev.to and Twitter ๐Ÿ˜„

Thank you for your time and attention! Hope you'll enjoy!

ย 
Share this