Hello there! Welcome to day 0!

As developers it is customary to start counting from 0 so here we are. Jokes aside- lets get started!

 

Day 0: Getting comfortable with Tools and Buttons

Today is about setup and getting started. A healthy planning goes a long way in dictating how we will get to the end.

Starting off with tools and technologies to use- HTML, Css and JavaScript are required.

However if you are very familiar with them and want to use a styling library like TailWind or Bootstrap, you’re welcome.

The first week we will be working on making small reusable components. Honestly it’s just making our own implementation of popular styling libraries with some catches and I’ll explain why shortly.

 

The concept of cloning something for study is not something new. It has been around for ages and a fancy term used to describe is “Reverse Engineering“. Although we are doing it for something fairly simple, just the introduction and working hands on will give you a taste of how to replicate it for more complex things that may not be open source or just something cool you found online that you want to replicate.

Also styling from ground up will help you in following ways if you plan to use library in future:

• Fundamentals are important. You need to get your basics right to be able to customize them
• It can be exercise and helps you understand behind the scenes of how the library is working under the hood
• It will make you a better programmer and you will be able to utilize the library in better ways

If using a styling library just remember to try to customize according to design– colors, size stuff.

Tools

Let us introduce some of friends that will help us enormously during the 30 days- the tools and weapons.

First a code editor – since our challenges will be mostly short during weekdays, you can use an online code editor.

Popular choices are- CodePen, CodeSandBox, VS Code Web, Gitpod, StackBlitz or any other one.

Online code editors can allow you to share your code instantly and are really powerful and handy. You can get started coding within minutes without having to install anything, worrying about configuration and stuff. Week 1 challenges all can be done easily on any of them.

Just don’t forget to sign in to save your progress, else you might lose all your work accidentally.

Also doing it online means you can share your work with just the link and don’t have to worry about deployment.

For the long term(after 1st week) what I will be using is VS Code. Working local just feels intuitive and faster. Also since I have been in web dev space,
I have everything configured locally already. If you feel this is better for you, feel free to do so- just push your code to GitHub and share the link.

 

With technologies and tools out of the way, let us now focus on mindset and how to think/progress as to be consistent and motivated for 30 days!

As many have shared and also with my personal experience, doing something alone is feels lonely and you quit soon. Thus the motivation for
doing this challenge in group!

We will be doing the challenge, looking at other’s solutions and learning along the way.

So it is essential that you SHARE your code. No matter how trivial and basic it feels, don’t worry if someone else shared a very fancy, shiny code- you should be proud of code that you wrote and confident enough to share it! Don’t be afraid of criticisms and always have a learning and growth mindset.

I will personally be reviewing every one’s code and checking out the progress and provide feedback if necessary.

Share your progress and work on social media- writing a blog is good too but may take too much time. Instead if you want something simpler, just share your code and progress along with hashtag #30DaysChallenge on Facebook ITSNP group. Be sure to include a link to your code (GitHub or online) and your experience, what you learned as well as anything else you have in mind.

 

Buttons

The first task is to create Buttons! Very basic but don’t underestimate how often it will come handy.

A simple button with html is not much work but you have to configure a few things around.

Here is the design file for first reference task. In future you will have other designers posting their designs and you can choose from there.

First variants– like bootstrap, a simple button should have 5 variations

Primary, Secondary, Success, Error, Outline, Plain

 

Second, make another variation of buttons- with icons.

If you’re using a styling library, be sure to go though documentation and study the api.

That’s it for today’s challenge!

Good job and hope it was a good start.

 

Small start

I will emphasize again that we are starting out small and will be building things up. The buttons you made today will be used countless times throughout the 30 days and beyond if you decide to pursue the developer path.

After you have done your part, feel free to view other’s solutions and improve your own solution.

Additional Challenge

This is not required! If you are feeling motivated to pursue further along this path and want to do more, here are a few things to try out but feel free to ignore them. Additional challenges will have a few things that you can do to improvise your solution and refine it further to sharpen your skills.

It is additional for a reason- it may take considerable additional time and you don’t want to get burned out quickly. These are just fun exercises to explore and experiment with on your free time.

• Make transitions on hover | simple
• Make background color a gradient | mid
• Add loading state (spinner) and disable button when loading | challenging
• Make further variants – bordered and rounded buttons | mid
• Add animation on click/press (like a ripple effect) | advanced
• View and study implementation from Bootstrap, MaterialUI, NextUI | study