Skip to content
Build-In-Public-365
Public template

About

Build-In-Public-365 is a 365-day daily coding challenge focused on 💻 full-stack web development, covering 🌐 HTML, CSS, JavaScript, ⚛️ React & Next.js, 🔧 Node.js & Express, and 🗄️ MongoDB (MERN stack), along with 🧠 core concepts, revision notes, and mini projects, all documented to build 📈 consistency, real-world skills.

Resources

Readme
MIT license
Activity

Stars

65 stars

Watchers

1 watching

Forks

2 forks
Report repository
BranchesTags

Repository files navigation

365 Days 365 Codes ♑

This project is licensed under the MIT License. You can read the full license here:
365 Days 365 Codes License

📊 Progress Tracker
Here's a quick look at my progress over time:

  • Days Completed: 365/365
  • Languages Practiced: HTML, CSS, JavaScript, React.js, Node.js, MongoDB, Express.js, Tailwind CSS, Next.js
  • Current Completed: MERN Stack
  • Current Focus: Revision of MERN Stack + Full-Stack Concepts

Welcome to my 365 Days 365 Codes project! 🚀 This repository is a collection of daily coding challenges and solutions that I have worked on over the span of 365 days. The goal of this project is to improve my problem-solving skills, learn new algorithms, and enhance my coding proficiency.

Project Highlights

  • 🌱 Growth: Every day, I tackle a new challenge to strengthen my skills in different areas like Data Structures, Algorithms, and Web Development.
  • 💻 Technologies Used: HTML, CSS, JavaScript, MERN Stack, and more!
  • 🌍 Objective: To solve one coding problem every day for 365 days.

🚀 Project Overview

  • Objective: Push myself to solve a new coding problem each day for 365 days.
  • Technologies Used: HTML, CSS, JavaScript, MERN Stack.
  • Challenges: Covers topics like algorithms, data structures, mathematics, and building functional web applications.
  • Repository Structure:

Daily Progress Log

  • HTML Development Initiated.
  • Day 1: Basic Introduction. 🌱
  • Day 2: Creating Our First Website. 🌍
  • Day 3: Adding External Files to index.html (like Script.js or Style.css). 📄
  • Day 4: Heading Tags + Basic Bookmarks Website. 🖥️
  • Day 5: Working with Images, Tables, and Lists. 📸
  • Day 6: Learning SEO and Core Web Vitals in HTML. 📶
  • Day 7: Forms and Input Tags in HTML. 📄
  • Day 8: Inline and Block Elements in HTML. 🚩
  • Day 9: IDs and Classes in HTML. 🏛️
  • Day 10: Video and Audio Tags in HTML. 📻
  • Day 11: Semantic Tags in HTML.
  • Day 12: Exercise 1 - Media Player Using HTML Only.
  • Day 13: Entities, Code Tag, and New Features.
  • HTML Completed Successfully.
  • CSS Development Initiated.
  • Day 14: Basic Introduction to CSS.
  • Day 15: Inline, Internal, and External CSS.
  • Day 16: History of CSS and File Creation Using AI.
  • Day 17: CSS Selectors - Definition and Usage.
  • Day 18: CSS Box Model.
  • Day 19: CSS Fonts, Text, and Colors.
  • Day 20: Exercise 2 - CSS Code to Style a Paragraph.
  • Day 21: CSS Specificity & Cascade.
  • Day 22: CSS Sizing Units.
  • Day 23: CSS Display Property.
  • Day 24: CSS Shadows and Outline.
  • Day 25: Styling Lists in CSS.
  • Day 26: CSS Overflow.
  • Day 27: Exercise by ChatGPT.
  • Day 28: CSS Position.
  • Day 29: Exercise 3.
  • Day 30: Variables in CSS.
  • Day 31: CSS Media Queries.
  • Day 32: Solving Exercise 3 with Another Method.
  • Day 33: Exercise 4.
  • Day 34: CSS Float and Clear.
  • Day 35: More on CSS Selectors.
  • Day 36: CSS Multicolor Website Exercise.
  • Day 37: Exercise 5.
  • Day 38: CSS Flexbox.
  • Day 39: CSS Grid Property.
  • Day 40: Layout in CSS.
  • Day 41: Exercise 6.
  • Day 42: CSS Transform.
  • Day 43: Exercise 6 Solution.
  • Day 44: Exercise 7.
  • Day 45: Transition Effects in CSS.
  • Day 46: CSS Animation.
  • Day 47: Exercise 7 Solution.
  • Day 48: Exercise 8.
  • Day 49: CSS object-fit & Position.
  • Day 50: CSS Filters.
  • Day 51: Exercise 8 Solution.
  • Day 52: Basic Figma Introduction and Its Uses in Web Development.
  • Day 53: Netflix Clone Using HTML and CSS.
  • CSS Completed Successfully.
  • JavaScript Development Initiated.
  • Day 54: Introduction to JavaScript and Installing Node.js.
  • Day 55: JavaScript Variables and Objects.
  • Day 56: JavaScript Conditionals: if, else if, else Ladder.
  • Day 57: Loops in JavaScript.
  • Day 58: JavaScript Functions.
  • Day 59: Exercise 9.
  • Day 60: JavaScript Strings and Functions.
  • Day 61: Exercise 9 Solution.
  • Day 62: Exercise 10.
  • Day 63: JavaScript Array Loops and map | filter.
  • Day 64: Exercise 10 Solution.
  • Day 65: Exercise 11.
  • Day 66: JavaScript DOM.
  • Day 67: Accessing JavaScript Node Parent and Children.
  • Day 68: JavaScript - Selecting IDs, Classes, and More.
  • Day 69: Exercise 11 Solution.
  • Day 70: Exercise 12.
  • Day 71: Adding and Removing Elements in JavaScript.
  • Day 72: Exercise 12 Solution.
  • Day 73: Exercise 13.
  • Day 74: Event Bubbling & Event Listeners.
  • Day 75: JavaScript Callbacks & Promises.
  • Day 76: JavaScript async and await.
  • Day 77: Exercise 13 Solution.
  • Day 78: Exercise 14.
  • Day 79: Error Handling in JavaScript.
  • Day 80: JavaScript Classes & Objects with getters and setters.
  • Day 81: Exercise 14 Solution.
  • Day 82: Advanced JavaScript.
  • Day 83: Advanced JavaScript Interview Questions.
  • Day 84: Spotify Clone Using HTML, CSS, and JavaScript.
  • JavaScript Completed Successfully.
  • Node.js Development Initiated.
  • Day 85: Backend, Node.js, & npm.
  • Day 86: CommonJS vs ECMAScript Modules.
  • Day 87: Working with Files: fs and path Modules in Node.js.
  • NodeJs Completed Successfully.
  • Express.js Development Initiated.
  • Day 88: Introduced to Express.js.
  • Day 89: Learned about Response, Request, and Routes in Express.js.
  • Day 90: Middleware in Express.js.
  • Day 91: Exercise 15.
  • Day 92: EJS Template Engine in Express.
  • Day 93: Exercise 15 Solution.
  • ExpressJs Completed Successfully.
  • MongoDB Development Initiated.
  • Day 94: Installing MongoDB & MongoDB Compass.
  • Day 95: CRUD Operations in MongoDB.
  • Day 96: Installing Mongoose & Using It With Express.
  • Day 97: Exercise 16.
  • Day 99: Exercise 16 Solution.
  • MongoDB Completed Successfully.
  • Tailwind CSS Development Initiated.
  • Day 98: Complete Tailwind CSS Tutorial.
  • Day 100: Exercise 17.
  • Day 101: Twitter UI Clone Using Tailwind CSS.
  • Day 102: Exercise 17 Solution.
  • Tailwind CSS Completed Successfully.
  • Hosting Initiated.
  • Day 103: Introduction to web hosting.
  • Day 104: How to host Node.js apps on Ubuntu.
  • Hosting Completed Successfully.
  • React Development Initiated.
  • Day 105: Introduction to React and Why We Use It.
  • Day 106: Components, Props, and JSX in React.
  • Day 107: Hooks and State in React.
  • Day 108: The useEffect Hook in React.
  • Day 109: The useRef Hook in React.
  • Day 110: Conditional Rendering and Rendering Lists in React.
  • Day 111: Exercise 18.
  • Day 112: Event Handling in React.
  • Day 113: Exercise 18 Solution.
  • Day 114: Todo List App Using React.
  • Day 115: React Router : Routing in React.
  • Day 116: The useContext hook in React.
  • Day 117: The useMemo hook in React.
  • Day 118: The useCallback hook in React.
  • Day 119: Handling Forms + Connecting React to Express Backend.
  • Day 120: The Redux Toolkit in React.
  • React Completed Successfully.
  • Next.js Development Initiated.
  • Day 121: Introduction to Next.js & File-Based Routing.
  • Day 122: Server Components in Next.js.
  • Day 123: <Script>, <Link>, and <Image> components in Next.js.
  • Day 124: Creating APIs in Next.js.
  • Day 125: Server Actions in Next.js.
  • Day 126: Middleware in Next.js.
  • Day 127: Auth.js - Authentication in Next.js.
  • Day 128: Dynamic Routes in Next.js.
  • Day 129: Layouts in Next.js.
  • Day 130: Password Manager using React.js, Tailwind CSS, Express.js, and MongoDB.
  • Day 131: Get Me A Chai – Patreon Clone in Next.js.
  • Day 132: Understanding next/navigation module in Next.js.
  • Day 133: SSR, SSG, ISR in Next.js.
  • Day 134: Environment Variables in Next.js.
  • Day 135: Styled JSX and Other Ways to Style in Next.js.
  • Day 136: Let’s Build a URL Shortener in Next.js 15.
  • Day 137: Let’s Build a Linktree Clone in Next.js 15.
  • Day 138: Deploying Our Next.js App to Vercel.
  • Next.js Completed Successfully.

MERN Stack completed successfully with MongoDB, Express, React, Node.js, and Next.js.

Project Work

  • Project 1: Twitter Clone Using Tailwind CSS

    • Day 139: Today, we created the left and right panels of the Twitter layout and added icons to the left sidebar.
    • Day 140: Completed all components and finalized the project.
    • Day 141: Deployed the Twitter Clone on Vercel

  • Project 2: iTask - Todo App Using React and Tailwind CSS

    • Day 141: Today, we created a minimal Todo app with add, edit, delete, and complete features using React, Tailwind CSS, and localStorage.
    • Day 142: Today, we completed all components and Deployed the Todo App on Vercel

  • Project 3: Password Manager using React, Tailwind CSS, MongoDB & Express.js

    • Day 142: Today, we created the Navbar.jsx and Manager.jsx UI with basic functionalities like add, delete, save to localStorage, and styled input fields using React and Tailwind CSS.
    • Day 143: Completed and deployed the responsive Password Manager on Vercel with local & MongoDB versions. Added footer, icons (copy, hide, delete, add, save).

  • Project 4: Get Me A Chai – Patreon Clone using Next.js, Tailwind CSS, MongoDB & Razorpay

    • Day 144: Today, we created the Login page and Main page UI. Arranged icons properly, implemented basic logic to add GitHub account integration to the app.
    • Day 145: Today, we implemented authentication, created the dashboard, added dynamic routes, integrated the Razorpay payment gateway, and set up the user profile.
    • Day 146: Added the .env file and Razorpay keys, and created a new database named chai.
    • Day 147: Integrated razorpay with MongoDB and fetched data using a callback. Also, improved userInteraction.js for better structure and functionality.
    • Day 148: Made the site fully responsive for mobile devices and integrated dynamic payment methods. Users can now securely access their Razorpay ID. Finalized all features and completed the project successfully.

  • Project 5: URL Shortener using Next.js, Tailwind CSS, MongoDB, and Postman

    • Day 149: Today, we created the basic UI design for all pages, added dynamic routes, and configured environment variables.
    • Day 150: Built UI, added dynamic routes, set up env variables, completed backend, tested with Postman & local MongoDB, and finalized the project locally.

  • Project 6: Linktree Clone using Next.js, Tailwind CSS, MongoDB

    • Day 151: Today we created all pages, added images and buttons, and built a well-structured UI with only the Navbar generated. MongoDB added, environment variable added.
    • Day 152: Today completed project, added all backend functionality and dynamic routes in Next.js, integrated MongoDB, and tested using Postman.

Project Work Completed

Finalized Projects

All projects have been successfully completed and uploaded to their respective repositories.

  • React + Tailwind CSS projects are fully hosted and live.
  • Next.js projects are configured for local development and testing, with Postman for API testing and MongoDB for database management.

Revision Phase Begins

🔁 Recent Topics

  • Day 153: Learn Fetch API — making network requests, handling responses, and promises.
  • Day 154: Recursion — understanding recursive functions and their use cases.
  • Day 155: Error Handling in JavaScript — try-catch blocks, throwing errors, and debugging.
  • Day 156: Explored npm, learned about package.json & package-lock.json, understood dependencies management, versioning, and how Node.js handles module installation.
  • Day 157: Learn CommonJS and ECMAScript (ES) Modules in Node.js.
  • Day 158: Learn fs and path modules in Node.js.
  • Day 159: Learn GET requests, slugs, public folder, and Nodemon in Express.js.
  • Day 160: Learn Object-fit and Position in CSS.
  • Day 161: Learn Response, Request, and Routes in Express.js.
  • Day 162: Learn Middleware networking in Express.js.
  • Day 163: Learn EJS template engine in Express.js.
  • Day 164: Learn CallBack and Promises in JavaScript.
  • Day 165: Learn async and await in JavaScript.
  • Day 166: Learn Hooks and States in React.
  • Day 167: Learn props syntax in JSX in React.
  • Day 168: Learn useRef in React.
  • Day 169: Learn Event Handling in React.
  • Day 170: Learn Variables in CSS.
  • Day 171: Learn the basics of Figma — just enough to understand it for learning and project purposes.
  • Day 172: Learn CSS Overflow.
  • Day 173: Learn To Create a Basic 404 Page In React by JavaScript.
  • Day 174: Learn Animations in Tailwind And Created Simple Installation Guide.
  • Day 175: Learn Simple Vue 3 Example From ChatGpt.
  • Day 176: Simple Example of Reversing a Text in Vuejs From ChatGpt.
  • Day 177: Learn a Simple Hooks of React.
  • Day 178: Create a Simple Portfolio using html,CSS only.
  • Day 179: Learn JWT Authentication with Role-Based Access
  • Day 180: Learn User Authentication with JWT.
  • Day 181: Learn CRUD Operations on Products.
  • Day 182: Simple Todo App with mern.
  • Day 183: Created a simple Fetch API call in JavaScript.
  • Day 184: Getter and Setter Use in JavaScript.
  • Day 185: useRef Hook in React.
  • Day 186: Event Handling in React.
  • Day 187: File Based Routing in Next.js.
  • Day 188: Server Components Work in Next.js.
  • Day 189: API Routes in Next.js.
  • Day 190: use server and use client in Next.js.
  • Day 191: Routes Handling using use client Component in Next.js.
  • Day 192: Dynamic Routing in Next.js.
  • Day 193: Middleware Concept in Next.js.
  • Day 194: Link , Script ,Image Components in Next.js.
  • Day 195: auth.js - Authentication in Next.js.
  • Day 196: 404 Page And Dynamic Routes in Next.js.
  • Day 197: Layouts in Next.js.
  • Day 198: next/navigation , next/useRouter in Next.js.
  • Day 199: SSR - SSG - ISR in Next.js.
  • Day 200: .env & .env.local Environment Variables in Next.js.
  • Day 201: Components rendering using UseEffect in React.js.
  • Day 202: useMemo Hook and Expensive Computation in React.js.
  • Day 203: Conditional Rendering in React.js.
  • Day 204: useCallback Hook in React.js.
  • Day 205: useContext Hook in React.js.
  • Day 206: React-Router-Dom use in React.js.
  • Day 207: Style jsx use in Next.js.
  • Day 208: React-Redux Toolkit in React.js.
  • Day 209: useRef Hook in React.
  • Day 210: Forms Handling & Connecting React to Express Backend.

  • Project 7: Task Mangment System using React.js,MongoDB,Express.js and Node.js

    • Day 211: Overview of the project – Generated full technical documentation covering architecture, stack, workflows, and key components.
    • Day 212: Initialized the React app using npm create vite@latest.
    • Day 213: Completed all UI work for the Badge component.
    • Day 214: Created Layout Component to manage application layout`.
    • Day 215: Added navigation to the app using a Navigation Component.
    • Day 216: Created the basic Home page of the app.
    • Day 217: Improved the Home page UI using custom interface design.
    • Day 218: Created the Task List page to display all tasks.
    • Day 219: Set up react-router-dom for handling application routes.
    • Day 220: Created helper functions for RouteIndex and RouteTaskList.
    • Day 221: Created Show Task page, created API, and installed Express.js.
    • Day 222: Today we Enable CORS and JSON parsing in Express app.
    • Day 223: Today we Add basic Task API with routes,controller, and model.
    • Day 224: Today we Refactor task routes and implement task creation & retrieval.
    • Day 225: Today we Implement show, update, and delete task endpoints.
    • Day 226: Today we Add form validation with Zod to HomePage.
    • Day 227: Today we Add Task component and integrate Toast notifications.
    • Day 228: Today the project was fully completed – finalized all features, performed end-to-end testing, fixed bugs, optimized UI/UX, and deployed the application successfully.

  • Project 8: Agency Management - Frontend Application

    • Day 229: Overview of the project – Generated full technical documentation covering architecture, stack, workflows, and key components.
    • Day 230: Initialized the React app using npm create vite@latest.
    • Day 231: Added the React configuration and index.css file for dark mode toggle, and set the primary color.
    • Day 232: Today we added a responsive Navbar component and theme support.
    • Day 233: Today we added new homepage sections (Hero, TrustedBy, Services, Title) and a theme toggle with persistence via localStorage.
    • Day 234: Today we added ServiceCard component and update Services layout.
    • Day 235: Today we Added OurWork component to homepage.
    • Day 236: Designed the OurWork component for the website and created a proper UI supporting both dark and light themes.
    • Day 237: Today we added basic UI improvements using Tailwind classes with a blur effect.
    • Day 238: Today we added dynamic work cards to OurWork component.
    • Day 239: Today we created Teams section and added it to homepage.
    • Day 240: Today we created the Contact section with a form, added toast notifications, and integrated it into the homepage.
    • Day 241: Today we created Footer component and integrate into App.
    • Day 242: Today we added toast notifications.
    • Day 243: Today we added custom animated cursor to app.
    • Day 244: Today we added motion animation using Framer Motion in the Navbar component.
    • Day 245: Today we added motion animations to Hero component.
    • Day 246: Today we added motion animations to service and trusted components.
    • Day 247: Today we added Cursor Effect To app.
    • Day 248: Today we added Primary Color To app.
    • Day 249: Today we added motion animations to ContactUs, OurWork, Teams Pages.
    • Day 250: Today we added framer-motion animations to Footer component.
    • Day 251: Today the project was fully completed – finalized all features, performed end-to-end testing, fixed bugs, optimized UI/UX, and deployed the application successfully.
    • 🔗 Live Demo: Visit Agency Website.

  • JavaScript: Zero to Advanced Development Initiated.

  • Section 1: JavaScript Core Concepts: From Basics to Functions and Data Structures

  • Day 252: Today we learned about JavaScript’s history, its founder, how it was invented, and the differences between ES5 and ES6 versions.

  • Day 253: Today we demonstrates variable declarations using var, let, and const as well as declaration and initialization concepts.

  • Day 254: Today we learned about block, functions, global scope concepts.

  • Day 255: Today we learned example on TDZ in JS.

  • Day 256: Today we JavaScript hoisting.

  • Day 257: Today we solve basic JS scope exercise.

  • Day 258: Today we learned about JavaScript Data Types.

  • Day 259: Today we Demonstrates JavaScript primitive data type.

  • Day 260: Today we demonstrated variable declarations for Symbol and BigInt.

  • Day 261: Today we learned about objects, arrays, dynamic typing and typeof operator.

  • Day 262: Today we learned about type coercion and equality, and completed the section on data types and type systems.

  • Day 263: Today we learned about Arithmetic Operators, including a basic overview of all types of operators.

  • Day 264: Today we learned about Logical Operators.

  • Day 265: Today we demonstrated the use of assignment, comparison, logical, unary, ternary, typeof, and instanceof operators.

  • Day 266: Today we solved various exercises on JavaScript operators.

  • Day 267: Today we learned about control flow if, else, else if, and switch statements.

  • Day 268: Today we learned about early return pattern.

  • Day 269: Today we solve basic Js Control Flow exercise.

  • Day 270: Today we learned the basics of for loop and while loop, and gained a clear understanding of how loops work.

  • Day 271: Today we learned the for loop.

  • Day 272: Today we learned the while loop.

  • Day 273: Today we learned the do-while loop.

  • Day 274: Today we learned the break and continue in loops.

  • Day 275: Today we solved 5 exercises questions on JavaScript Loops.

  • Day 276: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 277: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 278: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 279: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 280: Today we solved next 4 exercises questions on JavaScript Loops.

  • Day 281: Today we solved exercises questions on Break.

  • Day 282: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 283: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 284: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 285: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 286: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 287: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 288: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 289: Today we solved next 5 exercises questions on JavaScript Loops.

  • Day 290: Today we solved exercises questions on Break.

  • Day 291: Today we Learned about JavaScript Functions.

  • Day 292: Today we Learned about Function Declaration and Parameterized Function in JavaScript.

  • Day 293: Today we learned about Default Parameters, Rest Parameters, Return & Early Return, First-Class Functions, Higher-Order Functions, Pure vs Impure Functions, Closures, Lexical Scoping, IIFE (Immediately Invoked Function Expression), and Function Hoisting in JavaScript.

  • Day 294: Today we solved exercise question on JavaScript Functions.

  • Day 295: Today we solved exercise question on JavaScript Functions.

  • Day 296: Today we Created a BMI Calculator in JavaScript Functions.

  • Day 297: Today we Created a Reusable Discount Calculator using JavaScript Functions.

  • Day 298: Today we Created a Reusable Counter closure using JavaScript Functions.

  • Day 299: Today we Created a Value Transformer using Pure Function.

  • Day 300: Today we Created a isolated Variables using IIFE.

  • Day 301: Today we explored Arrow vs Regular Functions, understood this behavior, Function Hoisting, and the Temporal Dead Zone (TDZ) in JavaScript.

  • Day 302: Today we learned about JavaScript Arrays, including creation, accessing elements, and modifying arrays.

  • Day 303: Today we learned about JavaScript Array Methods, including push, pop, shift, unshift, splice, slice, reverse, sort, and various iteration methods.

  • Day 304: Today we solved various exercise questions on JavaScript Array Methods.

  • Day 305: Today we learned about JavaScript Objects, including creation, accessing elements, modifying objects and JavaScript Object Methods, including Object.keys(), Object.values() and Object.entries().

  • Day 306: Today we solved exercise questions on JavaScript Objects.

  • Section 1 Completed
  • Section 2: DOM Manipulation and Advanced JavaScript Concepts

  • Day 307: Today we practiced DOM manipulation using methods like getElementsByClassName, querySelectorAll, and querySelector, and updated HTML elements using textContent and innerHTML.

  • Day 308: Today we learned about Attribute Manipulation and Dynamic DOM Manipulation in JavaScript - including getAttribute, setAttribute, removeAttribute, and creating, appending, prepending, and removing elements dynamically.

  • Day 309: Today we learned about Style and Class Manipulation in JavaScript — including changing element styles dynamically using the .style property and managing CSS classes using .classList.add(), .remove(), and .toggle() methods.

  • Day 310: Today we solved 2 exercise questions on JavaScript DOM Manipulation.

  • Day 311: Today we solved 2 exercise questions on JavaScript DOM Manipulation.

  • Day 312: Today we solved 2 exercise questions on JavaScript DOM Manipulation.

  • Day 313: Today we solved 2 exercise questions on JavaScript DOM Manipulation.

  • Day 314: Today we solved the final question on JavaScript DOM Manipulation and finalized our understanding of the DOM.

  • Day 315: Today we practiced Event Listeners in JavaScript, especially the use of addEventListener() for handling user interactions dynamically.

  • Day 316: Today we explored Common Event Listeners in JavaScript. We implemented a Click Event Listener that changes the color of an <h1> element when clicked, and an Input Event Listener that logs the user’s input dynamically as they type.

  • Day 317: Today we learned about the Change Event Listener in JavaScript. We implemented a Change Event Listener for a <select> element that updates a <div> with the selected device name.

  • Day 318: Today we solved 2 exercise questions on JavaScript DOM Manipulation and created two mini projects — KeyPress Visualizer (displays pressed keys in real time) and SmartUploader (a custom file upload button using event listeners).

  • Day 319: Today we learned about the Submit Event Listener in JavaScript and Created a basic structure for a form submission.

  • Day 320: Today we implemented the Submit Event Listener to dynamically create user profile cards based on form input.

  • Day 321: Today we implemented the mouseover & mouseout Event Listener.

  • Day 322: Today we implemented the mousemove Event Listener to create a dynamic cursor effect that follows the mouse movement.

  • Day 323: Today we explored Event Object properties and methods in JavaScript, including event.target, event.type, event.preventDefault().

  • Day 324: Today we learned about Event Bubbling and Event Delegation in JavaScript, and implemented a project that utilizes event delegation to handle click events on dynamically created buttons.

  • Day 325: Today we Created a Live Character Counter and finalized our understanding of Event Listeners in JavaScript.

  • Day 326: Today we Started learning about Form Validation in JavaScript, including basic validation techniques.

  • Day 327: Today we Created a Email Validator using JavaScript Regular Expressions for form validation.

  • Day 328: Today we Started learning about setTimeout and setInterval in JavaScript for handling asynchronous operations.

  • Day 329: Today we Created a Countdown Timer and Downloader Progress Bar using setTimeout and setInterval.

  • Day 330: Today we Started learning about localStorage.

  • Day 331: Today we Started learning about Session Storage and Cookies.

  • Day 332: Today we Created a Toggle Theme Changer Using localStorage.

  • Day 333: Today we Started Basic UI of User Cards Project.

  • Day 334: Today we Completed User Cards Project Using All DOM Concepts.

  • Day 335: Today we started the basic project Caller Notes and generated all the required HTML and CSS for it.

  • Day 336: Today we Find All necessary DOM elements for project.

  • Day 337: Today we Implemented Add Note and Close Form functionality in the Caller Notes project.

  • Day 338: Today we Completed the Caller Notes Project.

  • Section 2 Completed
  • Section 3: Modern JavaScript – Async Programming, OOP & Core Internals

  • Day 339: Today we started learning about JavaScript scope, execution context, lexical scope, and how closures preserve private data.

  • Day 340: Today we started the basic project Toast Notifications and generated all the required HTML and JS for it.

  • Day 341: Today we Partially Completed the Toast Notifications Project.

  • Day 342: Today we Completed the Toast Notifications Project with enhancements.

  • Day 343: Today we started learning about this keyword and call, apply, bind methods in JavaScript.

  • Day 344: Today we Completed the Basic project of User Profile Card using this keyword and call, apply, bind methods.

  • Day 345: Today we started learning about Object oriented Programing in JavaScript.

  • Day 346: Today we Continued learning about Object oriented Programing in JavaScript and implemented basic classes and objects.

  • Day 347: Today we learned how constructors work in class-based implementations, along with prototypal inheritance.

  • Day 348: Today we learned about JavaScript callbacks, callback hell, promises with resolve/reject, async–await, and handling errors using try–catch.

  • Day 349: Today we Learned about fetch API for making network requests in JavaScript, handling responses, and working with promises.

  • Day 350: Today we Created a Dynamic Cards Using Random User API and fetch API.

    • Section 3 Completed
  • Section 4: JavaScript for Placements

  • Day 351: Today we Find the JavaScript Interview Questions covering common topics and concepts.

  • Day 352: Today we Started learning about Design Patterns and learned about Module Pattern and Revealing Module Pattern in JavaScript.

  • Day 353: Today we learned about Factory Pattern in JavaScript.

  • Day 354: Today we learned about Singleton Pattern in JavaScript.

  • Day 355: Today we learned about Observer Pattern in JavaScript.

  • Day 356: Today we learned in Detail Observer Pattern in JavaScript.

  • Day 357: Today we learned about Debouncing and Throttling in JavaScript for optimizing performance.

  • Day 358: Today we learned about Debouncing in JavaScript with practical examples.

  • Day 359: Today we learned about Throttling in JavaScript with practical examples.

  • Day 360: Today we learned about Lazy Loading in JavaScript for optimizing resource loading.

  • Day 361: Today we learned basic concepts of Code Splitting in JavaScript.

  • Day 362: Today we learned about Code Splitting in JavaScript with practical examples.

  • Day 363: Today we learned about Reflows and Repaint in JavaScript for optimizing rendering performance.

  • Day 364: Today we learned about Memory Leaks in JavaScript and how to prevent them.

  • Day 365: Today we learned about Event Loop in JavaScript and how it handles asynchronous operations.

    • Section 4 Completed

🎉 365 Days Challenge Completed Successfully! 🎉

Congratulations! The 365 Days 365 Codes challenge has been completed successfully! 🚀

  • Total Days: 365/365 ✅
  • Skills Mastered: HTML, CSS, JavaScript, React.js, Node.js, Express.js, MongoDB, Next.js, Tailwind CSS
  • Projects Built: 8 Full-Stack Projects
  • Concepts Learned: DOM Manipulation, Async Programming, OOP, Design Patterns, Performance Optimization, and much more!

This journey has been an incredible learning experience, covering everything from the basics to advanced JavaScript concepts, full-stack development, and real-world project implementations.

Getting Started.

To explore the solutions, please follow these steps:

  1. Clone the repository to your local machine using the following command: 
    git clone https://github.com/sahilzalte/Build-In-Public-365.git

Contact Information

You are welcome to reach out via my professional contact form or connect with me on various social platforms.

Connect with Me

📊 GitHub Activity Analytics

Alt

If you find this content helpful, please consider giving a star to the GitHub repository.

About

Build-In-Public-365 is a 365-day daily coding challenge focused on 💻 full-stack web development, covering 🌐 HTML, CSS, JavaScript, ⚛️ React & Next.js, 🔧 Node.js & Express, and 🗄️ MongoDB (MERN stack), along with 🧠 core concepts, revision notes, and mini projects, all documented to build 📈 consistency, real-world skills.

Resources

Readme
MIT license
Activity

Stars

65 stars

Watchers

1 watching

Forks

2 forks
Report repository

Releases

Packages

Used by

Contributors

Languages