🤯 30DaysChallenge - 30 Days Extreme HTML & CSS CHALLENGE 🤯
Tags: html, webdev, frontend, 30daysofcode
Published: 2021-05-19 04:37:50

Hey, This is Somanath Goudar. Things are about to get Hard for me these next 30 Days 🤯. You wont Believe What I have planned for these 30 Days 😱. I will be pushing my Limits to the edges to achieve this goal.

------------------------------------------------------------------

**So here is what I have Planned :**
➜ 1) Code a HTML CSS Project Every day (Simple like Hover Effects, form design, CSS animations, which can be used in real world websites etc..) 
➜ 2) Make a Video Tutorial on it and upload to YouTube Every day (so that anyone here can follow along and be a part of this Challenge).
➜ 3) Write a Blog About it and post Every Day.
➜ 4) Post a Instagram Post About it Every Day.
➜ 5) Post a Instagram Reel on it Every Day.

------------------------------------------------------------------
So, Now you know what I have planned and why I am calling it the Extreme Challenge. You might be having so many questions in your head about this. Same here, I too have so many questions about this Challenge 😂. How am I gonna do it? That is a lot to do in a single day, right?.

The thing is I want to provide Something Valuable to this Developers Community 😇 that we have here. I want to help other developers.

------------------------------------------------------------------

**At the end of this challenge** 
➜ 1) You guys will be having 30 Different HTML CSS Projects all at the Same Place. 
➜ 2) 30 YouTube Tutorial Videos if you want to follow along with me and be a part of this challenge
➜ 3) All the Source Code will be shared with love, here on dev.to and on my Blog.
➜ 4) I want to let others know about this challenge, so I will be posting on Instagram and keep track of this challenge here and on Instagram.

------------------------------------------------------------------


Now the question is Can I Do it? The answer is Yes, I will do it. I have learned a lot from this Developers Community and its time that I Provide the same value to others in this community. And Anyone from here is welcome to join me in this challenge.

I Have Spent Day and Night to Make this challenge possible and to put everything together. And for me this will be the first biggest thing that I will be doing.

**Here are the links through which you can keep track of this Challenge.**
👉 [Dev.to](https://dev.to/) : Originally Posting Here
👉 [YouTube](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g) : Video Tutorials
👉 [Instagram](https://www.instagram.com/future_coderss/) : Posting Every Day 
👉 [My Blog](https://www.futurecodersweb.com) : Blog Posts Every Day

Hope You guys like What I am Doing Here
Please Wish me Luck 😅

The Challenge Started on **20th May 2021** 
And Completed on **18th June 2021** ✔️

**Here is What I have done in these 30 Days :**

| #            | Project    | Blog Post      | YouTube Tutorial  |
| :-----:        |    :----:   |   :-----:        |:-----------: |
| 01       | Glowing Neon Buttons | [View Post](https://futurecodersweb.com/glowing-neon-buttons-using-html-and-css-css-hover-effects/)   | [Watch Tutorial](https://youtu.be/TGVncD5dtcI)      |
| 02       | Neumorphism Login Form     | [View Post](https://futurecodersweb.com/neumorphism-login-and-sign-up-form-design-using-html-css-and-javascript/)   | [Watch Tutorial](https://youtu.be/A8OBtZR9Msw)      |
| 03       | Responsive Task Management Dashboard     | [View Post](https://futurecodersweb.com/responsive-task-management-dashboard-using-html-and-css-dashboard-design/)   | [Watch Tutorial](https://youtu.be/mvXX32keamM)      |
| 04      | Side Navigation Bar     | [View Post](https://futurecodersweb.com/how-to-create-modern-side-navigation-bar-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/W6G458BAAYY)      |
| 05      | Social Media Icons with Tooltip on Hover     | [View Post](https://futurecodersweb.com/social-media-icons-with-tooltip-on-hover-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/X86OxINWnVk)      |
| 06      | Toggle Neumorphism Switch     | [View Post](https://futurecodersweb.com/css-toggle-neumorphism-switch-on-off-button-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/HcEXOqHgcL4)      |
| 07      | FAQ Accordion Section     | [View Post](https://futurecodersweb.com/faq-accordion-section-using-html-css-and-javascript/)   | [Watch Tutorial](https://youtu.be/qdYY4a-qPTk)      |
| 08      | Game Card Hover Effects     | [View Post](https://futurecodersweb.com/css-card-hover-effects-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/DmEcanPih_4)      |
| 09      | Dropmorphism     | [View Post](https://futurecodersweb.com/dropmorphism-using-html-and-css-water-drops/)   | [Watch Tutorial](https://youtu.be/1FygYA8bUIY)      |
| 10      | Responsive Image Gallery     | [View Post](https://futurecodersweb.com/how-to-create-responsive-image-gallery-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/6VgThhxrTdk)      |
| 11      | Custom Radio Buttons     | [View Post](https://futurecodersweb.com/how-to-create-custom-radio-buttons-with-html-and-css/)   | [Watch Tutorial](https://youtu.be/ixx5hctmhFU)      |
| 12      | Responsive Pricing Card tables     | [View Post](https://futurecodersweb.com/responsive-pricing-card-tables-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/3no4wrHP2Ek)      |
| 13      | Toggle ON OFF Switch Button     | [View Post](https://futurecodersweb.com/css-toggle-on-off-switch-button-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/E1lCCB6y_JE)      |
| 14      | Samsung Watch Clone     | [View Post](https://futurecodersweb.com/samsung-watch-clone-with-html-and-css/)   | [Watch Tutorial](https://youtu.be/LwPBMR97edA)      |
| 15      | Neumorphic Login Form Design     | [View Post](https://futurecodersweb.com/neumorphic-login-form-design-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/8oxFH0GpiAQ)      |
| 16      | Neumorphism Animation     | [View Post](https://futurecodersweb.com/neumorphism-animation-using-css/)   | [Watch Tutorial](https://youtu.be/RUsjvG3_rNA)      |
| 17      | Card Reveal Hover Effect     | [View Post](https://futurecodersweb.com/css-card-reveal-hover-effect-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/xQCsnByVyIs)      |
| 18      | Animated Login and Sign Up Form     | [View Post](https://futurecodersweb.com/animated-login-and-signup-form-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/au9dLf9IMQ0)      |
| 19      | Awesome Animated Search Bar     | [View Post](https://futurecodersweb.com/awesome-animated-search-bar-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/1NAbwz4Reyw)      |
| 20      | Animated Search Bar     | [View Post](https://futurecodersweb.com/animated-search-bar-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/96YFUIStTUk)      |
| 21      | 3D Button Hover Animation     | [View Post](https://futurecodersweb.com/3d-button-hover-animation-using-css-and-html/)   | [Watch Tutorial](https://youtu.be/9y4jma20KDA)      |
| 22      | Amazing Profile Cards Design     | [View Post](https://futurecodersweb.com/amazing-profile-cards-design-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/DjNqabcLOoE)      |
| 23      | Button with Animated Border     | [View Post](https://futurecodersweb.com/button-with-animated-border-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/1--XN4gLL8M)      |
| 24      | Amazing Profile Cards Design     | [View Post](https://futurecodersweb.com/amazing-profile-cards-design-with-html-and-css/)   | [Watch Tutorial](https://youtu.be/W2TomrNWAl4)      |
| 25      | Image Hover Effects     | [View Post](https://futurecodersweb.com/css-image-hover-effects-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/0hY0mwrQp1M)      |
| 26      | CSS Button Hover Effect     | [View Post](https://futurecodersweb.com/button-hover-effect-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/VZcZYlcFvCA)      |
| 27      | CSS Image Hover Effect     | [View Post](https://futurecodersweb.com/image-hover-effects-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/ZuFVxZdHKkE)      |
| 28      | Awesome CSS Button Hover Effect     | [View Post](https://futurecodersweb.com/button-hover-effect-using-html-and-css-2/)   | [Watch Tutorial](https://youtu.be/AQ30VHSdBEI)      |
| 29      | Awesome CSS Card Hover Effects     | [View Post](https://futurecodersweb.com/awesome-card-hover-effects-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/htGvFqVmkUQ)      |
| 30      | Responsive CSS Cards     | [View Post](https://futurecodersweb.com/responsive-profile-cards-using-html-and-css/)   | [Watch Tutorial](https://youtu.be/0gyDGZmvTSA)      |

------------------------------------------------------------------

Support Me :
👉 Buy me a Coffee: https://www.buymeacoffee.com/somanathgoudar
👉 [Follow Me on Instagram](https://www.instagram.com/somanath_goudar/)
👉 [Follow Future Coders on Instagram](https://www.instagram.com/future_coderss/)
👉 [Subscribe to My Main Channel](https://www.youtube.com/channel/UC_nTrhTr5fnBGjOxnkPUmmA)
👉 [Subscribe to Channel Created for this Challenge](https://www.youtube.com/channel/UCzGSyMOf2jPt1MkNBB3SJ3g)