Intro
If you’ve been following along, you may already know that the 30 days front end challenge for month May 2022 is underway.
With 10 days complete, I just wanted to share some updates all in one place.
Starting off with things that didn’t go as planned- there weren’t dedicated designers as planned – so it was extra work to make designs and write blogs for challenge. Thus I stopped writing daily blogs and just make posts of Facebook ITSNP group.
You can easily find them pinned or search for #30DaysChallenge and the day for example #Day1 to find the post.
Week1 was a blast starting out and making small components that we are and will be using extensively throughout the challenge.
We made mostly static components ending with switching dark/light mode and a responsive blog site.
Week2 is halfway and early this week we worked extensively with time- making Clock, international time, stopwatch and Pomodoro timer.
We will be working on smaller app parts and end the week with 30 days challenge showoff.
All of the Figma is on same document but on different pages. You can view all of them through here
The details of each challenge along with solutions and submissions will be posted and updated.
Here are the details of the week1 challenges. If you’re late here, feel free to join from the middle or start out from the beginning.
| Day | Title | Figma | Instructions | Solutions |
| Day 1 | Intro | Buttons | Link | Blog | W3Schools |
| Day 2 | Avatars | Authors | Link | Blog | W3Schools |
| Day 3 | Testimonials | Team | Link | Post | W3Schools |
| Day 4 | Cards | Tabs | Link | Post | Cards Tabs |
| Day 5 | Contact Us | Newsletter signup | Link | Post | Newsletter |
| Day 6 | Nav | Footer | Light, Dark mode | Link | Post | Toggle |
| Day 7 | Responsive landing page | Link | Post | HTML5Up |
| Day 8 | Clock | World Clock | Link | Post | Codesandbox |
| Day 9 | Stopwatch | Timer | Link | Post | Stopwatch Timer |
| Day 10 | Pomodoro clock | Link | Post | Blog FreshMan CodePen |
If you are just starting out, good luck.
The solutions are there for reference. They might not be the best solution but it’s the one that gets the job done and what I could find easily.
I did not reference or pick from W3Schools but they have so many solutions and so easy to find.
If you have better solutions, feel free to drop them in comment section.
While doing the challenge, first try to solve it on your own. Try for a while (5-10min at least).
If you can come up with a solution, or by studying the reading docs in Figma, great job. Try to solve it and look at solutions at the end.
Else if you are having a hard time, feel free to Google or just view the solution. Take a good look at each line and try to understand in depth.
Then go back to your code and start on your own. DO NOT COPY PASTE the solution. You may copy a few line but make sure you understand the concepts in-depth.
Good Luck and Happy Learning!
Thumbnail credits: Photo by Lukas
