Skip to content

Here I will upload 60days of my coding tasks, learnings and projects. I will start from the very basic markup language HTML and go upto Advanced JavaScript Library ReactJS. My goal is to revise and sharpen my frontend web development knowledge by learning modern framework that boost my web development career.

Notifications You must be signed in to change notification settings

Pranto-Bapary/60days-of-coding-challenge

Repository files navigation

🚀 60 Days of Coding Challenge - Frontend Journey

Welcome to my 60 Days of Coding Challenge! This is a journey of consistency, creativity, and growth — where I push myself every day to become a better developer.


📅 Challenge Overview

  • ⏳ Duration: 60 Days (2 Months)
  • 🎯 Goal: Build confidence in frontend development & land an internship
  • 🛠️ Tech Stack:
    • HTML5, CSS3, TailwindCSS
    • JavaScript (ES6+, DOM, Async/Await, Fetch)
    • React.js (Hooks, Router, Context API)
    • Git & GitHub
    • Deployment (Netlify / Vercel)

📊 Progress Tracker

Current Progress
██████████████████████████░░ 30/60 Days - 50% Completed 🎉


| Day | Topic / Task                                                                 | Status |
| --- | ---------------------------------------------------------------------------- | ------ |
| 1   | HTML Basics & Semantic Tags                                                   | ✅ Done |
| 2   | Forms & Inputs                                                                | ✅ Done |
| 3   | CSS Selectors & Box Model                                                     | ✅ Done |
| 4   | Flexbox & Grid Layouts                                                        | ✅ Done |
| 5   | Responsive Design (Flexbox & Grid)                                            | ✅ Done |
| 6   | Mini Landing Page                                                             | ✅ Done |
| 7   | Review: Rebuild one page from scratch                                         | ✅ Done |
| 8   | JavaScript Basics (variables, types, arrow functions)                         | ✅ Done |
| 9   | Arrays & Objects (map/filter/reduce/forEach/find)                             | ✅ Done |
| 10  | DOM Manipulation (querySelector, events, classList)                           | ✅ Done |
| 11  | Task Management App (LocalStorage + Animations)                               | ✅ Done |
| 12  | Async JS: fetch, promises, async/await + GitHub Card                          | ✅ Done |
| 13  | setTimeout + setInterval (Background Color + Clock)                           | ✅ Done |
| 14  | Weather App (LocalStorage + API Integration)                                  | ✅ Done |
| 15  | React Basics: CRA, Vite, JSX, Functional Components                           | ✅ Done |
| 16  | React useState Hook + Counter App                                             | ✅ Done |
| 17  | React Props + Responsive Card Components (Tailwind)                           | ✅ Done |
| 18  | React useState Hook + Background Color Changer                                | ✅ Done |
| 19  | React Hooks (useState, useEffect, useCallback, useRef) + Password Generator   | ✅ Done |
| 20  | Custom Hooks + Currency Converter App (API Integration)                       | ✅ Done |
| 21  | React Router v7 (Basic + Dynamic Routing)                                     | ✅ Done |
| 22  | React Router v7 (Loader, Outlet, NavLink, 404 Page)                           | ✅ Done |
| 23  | React Context API (Login & Profile State)                                     | ✅ Done |
| 24  | React Context API (Theme Switcher – Light/Dark Mode)                          | ✅ Done |
| 25  | React Context API (Todo App + LocalStorage)                                   | ✅ Done |
| 26  | React + Tailwind CSS (Landing Page Planning & Layout)                         | ✅ Done |
| 27  | HooBank Landing Page – Section Design & Gradients                             | ✅ Done |
| 28  | HooBank Landing Page – Responsive Layout & Hover Effects                      | ✅ Done |
| 29  | HooBank Landing Page – UI Polish & Animations                                 | ✅ Done |
| 30  | HooBank Landing Page – Final Review & Optimization                            | ✅ Done |
| ... | ...                                                                          | ...    |
| 60  | Final Review + Internship Applications                                        | ⏳ Pending |


🛠️ Projects Completed So Far

Project Day Status Live Demo
Responsive Landing Page 6 ✅ Done 🌐 Live
Responsive Multi-Section E-Commerce 7 ✅ Done 🌐 Live
Task Management App (LocalStorage + Animations) 11 ✅ Done 🌐 Live
Background Color Changer (JS) 13 ✅ Done 🌐 Live
Digital Clock 13 ✅ Done 🌐 Live
Weather App (LocalStorage + API) 14 ✅ Done 🌐 Live
React Counter App 16 ✅ Done 🌐 Live
React Props Card UI (Tailwind) 17 ✅ Done 🌐 Live
React Background Color Changer 18 ✅ Done 🌐 Live
React Password Generator 19 ✅ Done 🌐 Live
Currency Converter (Custom Hook) 20 ✅ Done 🌐 Live
React Router v7 Practice App 21–22 ✅ Done 🌐 Live
Context API – Login & Profile 23 ✅ Done
Context API – Theme Switcher 24 ✅ Done
Context API – Todo App (LocalStorage) 25 ✅ Done 🌐 Live
HooBank – Modern Bank Landing Page (React + Tailwind CSS) 26–30 ✅ Done 🌐 Live

📂 Repository Structure

60-days-of-coding-challenge/
├── Day-01/
├── Day-2-3/
├── Day-04/
├── Day-05/
├── Day-06/
├── Day-07/
├── Day-08/
├── Day-09/
├── Day-10/
├── Day-11/
├── Day-12/
├── Day-13/
├── Day-14/
├── Day-15/
├── Day-16/
├── Day-17/
├── Day-18/
├── Day-19/
├── Day-20/
├── Day-21/
├── Day-22/
├── Day-23/
├── Day-24/
├── Day-26/
├── Day-27/
├── Day-28/
├── Day-29/
├── Day-30/
└── README.md

🌟 Goals After 60 Days

  • ✔ Build a solid frontend portfolio
  • ✔ Deploy projects & polish GitHub
  • ✔ Apply for internships confidently
  • ✔ Learn the discipline of consistency in coding

👨‍💻 About Me

✨ Hello, I’m Pranto Bapary, a passionate Frontend Developer in progress who loves turning ideas into interactive experiences.

  • I enjoy writing clean, maintainable code and designing applications that balance performance, functionality, and beauty.
  • 💡 I believe in learning by building — every project I complete teaches me something new.
  • 🌱 Currently focusing on React.js to strengthen my modern web development skills.
  • 🚀 My ultimate goal is to become a skilled software engineer, contribute to impactful projects, and land a great internship.

📫 Connect with me:

  • LinkedIn
  • Email
  • Instagram

✨ “Code is like art — every line you write is a brushstroke on the canvas of innovation.” ✨

Made with ❤️ by Pranto Bapary


About

Here I will upload 60days of my coding tasks, learnings and projects. I will start from the very basic markup language HTML and go upto Advanced JavaScript Library ReactJS. My goal is to revise and sharpen my frontend web development knowledge by learning modern framework that boost my web development career.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published