75 DAYS OF CONSISTENT FULL-STACK LEARNING
75 Days | 75 Professional README Files | GitHub Documentation
DAY 01 — HTML & CSS Basics
Project: Live Demo
Focus: Semantic HTML, CSS fundamentals, box model, flex basics, pseudo-classes.
DAY 02 — CSS Layouts
Project: Live Demo
Focus: Flexbox, Grid, positioning, responsive layout concepts.
DAY 03 — Project 1
Project: Live Demo
Focus: Product UI, flex layouts, hover effects, absolute & relative positioning, icon usage.
DAY 04 — Projects 2 & 3
Project 2: Live Demo
Project 3: Live Demo
Focus: Project 2 — Fashion UI using flex & positioning
Project 3 — Horizontal scroll, image carousel, flex layouts
DAY 05 — Projects 4 & 5
Project 4: Live Demo
Project 5: Live Demo
Focus: Video backgrounds, overlays, carousel/marquee animations, interactive cards, advanced flex layouts, hover & scroll effects.
🔥 Day 06 — JavaScript Basics
- Variables (let, const, var)
- Data types (string, number, boolean, null, undefined, object)
- Operators (arithmetic, assignment, comparison)
- First mini problems solved 🧩
🔥 Day 07 — Control Flow & Loops
if/else, switch ✅- Loops:
for, while, for...in, for...of 🔁
- Practiced patterns & conditional logic
- 🛠️ Approach: Started with simple examples → debugged → built small programs
🔥 Day 08 — Functions Deep Dive
- Function declaration vs expression vs arrow function
- Default & Rest parameters
- Return values + scope concept
- 🧩 Solved problems with reusable functions
🔥 Day 09 — JavaScript Revision
- Covered everything till now 📚
- Arrays:
map, filter, reduce, includes
- Objects: creation, methods, destructuring, spread
- ES6 essentials (let/const, template literals, arrow fn, spread/rest)
- 🛠️ Approach: Revision via notes + practice problems
🔥 Day 10 — Advanced JavaScript Concepts
- Scope & Hoisting, Closures ⚡
- Async JS: Callbacks → Promises → Async/Await
- DOM Manipulation + Event Handling 🎛
- Error Handling (
try...catch)
- 🍪 Cookies & Sessions
- 💾 LocalStorage & SessionStorage
- 🌐 JSON & Fetch API (AJAX)
- 🛠️ Approach: Learned via mini projects (form storage, API fetch)
✅ Day 11 – JavaScript Loops & Input
- Learned for loop,
prompt(), input validation using isNaN.
- Project → Sum of N natural numbers program.
- ⚡ Key Takeaway: Loops + conditionals = core logic builders.
✅ Day 12 – DOM Manipulation
- Practiced
querySelector, innerHTML, addEventListener.
- Built a Counter App (increment/decrement).
- ⚡ Key Takeaway: DOM bridges HTML structure with dynamic JS updates.
✅ Day 13 – GSAP Animations
- Learned GSAP timeline, stagger, ease.
- Project → Hero section animation.
- ⚡ Key Takeaway: GSAP makes animations smooth, professional, and reusable.
✅ Day 14 – Custom Cursor & Hover Effects
- JavaScript + CSS → tracked
mousemove events.
- Added hover-based highlight effects.
- ⚡ Key Takeaway: Small details like cursor effects improve user experience.
✅ Day 15 – Locomotive Scroll + Portfolio Layout
- Integrated locomotive-scroll for smooth scrolling.
- Designed portfolio structure (Hero → Work → About → Footer).
- ⚡ Key Takeaway: Combining animation + smooth scroll = modern UI.
✅ Day 16 – Tailwind CSS Basics
- Installed Tailwind (CDN).
- Explored utility classes (
flex, grid, text-xl, bg-*).
- Rebuilt hero section with Tailwind.
🚀 Days 17–22 Progress — #75DaysFullStackAI
📌 Day 17 — DOM & Events
- Practiced DOM selection, event listeners, and mini-toaster project
- Learned Encapsulation for reusable UI components
- DOM = foundation of interactive web pages
📌 Day 18 — Tailwind Deployment
- Explored Tailwind CLI vs CDN
- Deployed projects successfully:
- Took ~6 hrs of self-learning (with ChatGPT help)
- Clear difference: CLI = scalable projects, CDN = quick prototypes
📌 Day 19 — Website Clone (Animations)
- Cloned Significo.com frontend with animations
- Learned GSAP, Locomotive scroll, and theme switching
- Faced frustration but stayed consistent 💪
- Key Learning → Patience + small wins = growth
📌 Day 20 — Tailwind Clone Project
- Built Significo.com clone (UI only) with Tailwind CSS
- First real Tailwind project → took 7–8 hrs over 2 days
- AI-assisted debugging where stuck
- Key takeaway: Practical cloning teaches structuring & styling
📌 Day 21 — React Basics I
- Started with React setup (Vite, Node.js, npm)
- Learned:
- Components & reusability
- Key prop warning handling
- Fragments (
<>)
- Conditional rendering
- Event handling basics
- Built a Card component and reused multiple times
📌 Day 22 — React Basics II
- Continued React journey 🚀
- Explored deeper:
- Mutable vs Immutable
- Reference vs Primitive
- useState hook basics
- Spread operator & destructuring
- Import/Export (overview)
- Arrow functions & implicit returns
- Map & Filter in React
- Understood Virtual DOM & JSX and how files connect
- Built 2–3 small components linked in
App.jsx
🎯 Reflection (Days 17–22)
- Progressing from vanilla JS → Tailwind → React step by step
- Realized importance of deployment knowledge early
- Tailwind felt tough initially, but cloning projects gave confidence
- React is challenging but exciting → small progress daily adds up
🚀 Days 23–30 — 75 Days Full Stack AI Challenge
This README documents my learnings from Day 23 to Day 30 of my 75 Days Full Stack AI journey.
📅 Day 23 — React useState Deep Dive
useState basics in depth.- Practiced with arrays and objects.
- Advanced array updates (4 practice questions).
- Learned proper immutable state updates.
📅 Day 24 — CSS Media Queries & Responsiveness
- Practiced media queries for multiple devices.
- Built first project focused on responsiveness.
- Learned how layouts adapt on different screen sizes.
- Still need more practice on responsive design.
- 🌐 Live Project
📅 Day 25 — React Hooks & Props
- Learned
useState basics.
- Props definition, usage, and importance.
- Props drilling across components.
- Event handling in React.
- Built card & navbar components with add/remove favorites feature.
📅 Day 26 — Form Handling + React One-Shot Revision
- Controlled components in React forms.
- Practiced with
useRef and react-hook-form.
- Watched Sheriyans React One-Shot video → revision of:
- React Intro & setup with Vite.
- JSX, Virtual DOM, folder structure.
- useState, CSS handling, functions in React.
- Form handling, two-way binding, props drilling.
- Rendering JSON, Axios API integration.
- React Router DOM, Toastify.
- useEffect, useRef, Context API, Redux Toolkit.
- Framer Motion, Deployment.
📅 Day 27 — Form Handling Practice
- Practiced form handling with
useRef.
- Built cards & forms as components.
- Passed data via props from parent to child components.
- Added/removable data directly via UI.
📅 Day 28 — React Router DOM
- Routes and Route basics.
- React Router DOM properties.
Link and NavLink usage (className & span).- Dynamic routing with
useParams.
- Navigation using
useNavigate.
- Nested routing with
Outlet.
- 🌐 Live Project
📅 Day 29 — API Handling in React
- Practiced API calls:
fetch, ajax, axios.
- Learned GET & POST request handling.
- Faced difficulties staying consistent in study hours.
📅 Day 30 — Lifecycle & Context API
- Lifecycle methods implementation with
useState.
- Three types of
useState: update, rerender, specific component render.
- Reconciliation (Virtual DOM updates).
- Conditional rendering recall (loading states).
- Context API:
createContext, Provider, useContext.
- Implemented Context API in a separate folder.
- Revised dynamic routing with
useParams.
🎯 Final Reflection
From Day 23 to Day 30, I went through major React fundamentals (useState, props, form handling, routing, API calls, lifecycle methods, and Context API) while also practicing responsiveness with CSS.
- Faced challenges with consistency (study hours dropped some days).
- React concepts took longer to grasp, but repetition improved clarity.
- Realized the importance of patience, consistency, and practice.
- Projects and live links helped in solidifying concepts practically.
🚀 React E-Commerce Project (Day 31–36 | #75DaysFullStackAI)
This project is built as part of my 75 Days Full Stack Challenge.
From Day 31 → Day 36, I developed a mini E-Commerce app step by step with React, Routing, Context, API → LocalStorage, and Toastify.
📅 Day-Wise Progress (Short)
- Day 31: Setup with React + Vite, learned basics of components & props.
- Day 32: Fetched products via FakeStore API, Axios integration, basic routes.
- Day 33: Context API for global state, useState/useEffect practice.
- Day 34: React Router DOM –
useParams, useNavigate, nested routes.
- Day 35: Dynamic Nav (unique categories), filter logic, category colors.
- Day 36: Migrated API → LocalStorage, added CRUD + React-Toastify, final polish.
⚙️ Tech Stack
- React + Vite
- Tailwind CSS
- Context API
- React Router DOM
- Axios → LocalStorage
- React-Toastify
✨ Features
- Dynamic Product Listing & Details
- Category-based Filtering
- Global State with Context API
- LocalStorage CRUD (Add, Edit, Delete)
- Toast Notifications
🌐 Links
📝 Reflection
These 6 days taught me:
- How to move step-by-step from basics → CRUD.
- Debugging & persistence when API + LocalStorage failed.
- Coding builds skills, struggles build mindset. 💡
#ReactJS #WebDev #ContextAPI #LocalStorage #Toastify #75DaysFullStackAI
📘 Day 37–40 | Full Recap
This is a short summary of my #75DaysFullStackAI journey from Day 37 to Day 40.
🚀 Day 37 | React Project Clone