✅ Week 1: Introduction to HTML

 Mon: I was introduced to HTML and learned how to structure a basic HTML

document using the doctype, html, head, and body tags.

 Tue: I practiced using various HTML tags including headings, paragraphs, lists, and

line breaks to format content.

 Wed: I learned how to insert images and hyperlinks into a webpage and explored the

use of common HTML attributes such as src, alt, and href.

 Thu: I studied HTML tables and form elements including input fields, checkboxes,

and buttons.

 Fri (Task): I created a simple “About Me” web page using the tags and attributes I

learned during the week.

✅ Week 2: Forms, Semantic HTML & Media Embeds

 Mon: I explored different HTML input types like text, password, email, and date, and

applied form attributes like required and placeholder.

 Tue: I learned about semantic HTML5 tags such as <header>, <nav>, <main>,

<section>, and <footer> and their importance in accessibility.

 Wed: I practiced embedding videos, audio files, and external content using the

<video>, <audio>, and <iframe> tags.

 Thu: I was introduced to HTML5 APIs such as localStorage and geolocation and

learned how they can be used in web applications.

  Fri (Task): I designed a registration form that included various input types and field

validations.

✅ Week 3: Introduction to CSS

 Mon: I learned about the role of CSS in web design and practiced writing CSS rules

to style elements by tag, class, and ID.

 Tue: I applied CSS properties to style background colors, borders, margins, and

paddings on HTML elements.

 Wed: I learned about text formatting in CSS including font styles, font sizes, and line

heights, and studied the box model concept.

 Thu: I explored CSS units of measurement such as px, %, em, rem, vw, and vh, and

understood their application in layout design.

 Fri (Task): I styled my “About Me” page using CSS properties including color,

margin, padding, and font.

✅ Week 4: Advanced CSS Selectors and Effects

 Mon: I practiced using class selectors, ID selectors, group selectors, and universal

selectors in CSS.

 Tue: I studied CSS positioning techniques such as relative, absolute, fixed, and sticky

positioning.

 Wed: I explored pseudo-classes like :hover and :focus, and pseudo-elements

like ::before and ::after.

  Thu: I experimented with CSS transitions and created simple animations on hover

and click.

 Fri (Task): I designed a hover animation effect on buttons and created an interactive

card component using pseudo-classes.

✅ Week 5: Flexbox Layout

 Mon: I learned the fundamentals of Flexbox, including the use of display: flex and

properties like justify-content and align-items.

 Tue: I applied Flexbox properties to child elements such as flex-grow, flex-shrink,

and align-self.

 Wed: I practiced creating nested Flexbox layouts and aligning items both horizontally

and vertically.

 Thu: I used Flexbox to create responsive layouts that adapt to different screen sizes.

 Fri (Task): I built a responsive navigation bar layout using Flexbox principles and

tested it across screen sizes.

✅ Week 6: CSS Grid and Responsive Design

 Mon: I was introduced to CSS Grid layout and learned how to define rows, columns,

and grid gaps.

 Tue: I practiced advanced Grid features like spanning multiple rows/columns and

defining named grid areas.

  Wed: I combined Flexbox and Grid to build complex layouts and explored nesting

Grid inside Flex containers.

 Thu: I implemented responsive design using media queries to adapt page layouts

across devices.

 Fri (Task): I designed a fully responsive blog layout using CSS Grid and applied

media queries for adaptability.

✅ Week 7: Mini Project Development

 Mon: I planned the structure of a multi-section web page and created the base HTML

layout with semantic tags.

 Tue: I added detailed content and applied appropriate classes and IDs to prepare for

styling.

 Wed: I applied CSS styling including Flexbox and Grid for the layout, and added

transitions for interactivity.

 Thu: I worked on making the webpage responsive using media queries and tested it

across various devices.

 Fri (Task): I completed and submitted a mini portfolio project showcasing my

knowledge of HTML and CSS.

✅ Week 8: Review and Practice

 Mon: I reviewed all HTML concepts including tags, forms, attributes, and semantic

structure.
  Tue: I revised CSS concepts including selectors, Flexbox, Grid, and media queries.

 Wed: I completed a timed practice quiz to test my understanding of HTML and CSS.

 Thu: I developed a sample landing page for a fictional business using the skills

learned.

 Fri (Task): I submitted a final revision project that included a responsive landing

page built entirely with HTML and CSS.

Great! Here's the Phase 2 (Months 3 & 4) logbook entries with complete daily sentences

for Bootstrap & JavaScript, Monday–Friday only, and including tasks on selected days.

✅ Week 9: Introduction to Bootstrap

 Mon: I was introduced to Bootstrap and learned how to include the Bootstrap CDN in

an HTML file for styling.

 Tue: I studied Bootstrap’s grid system and practiced building responsive column

layouts using row and col classes.

 Wed: I explored Bootstrap containers (.container, .container-fluid) and learned how

they affect layout width.

 Thu: I worked with utility classes in Bootstrap, including spacing, text alignment, and

background utilities.

 Fri (Task): I created a simple responsive layout using Bootstrap’s grid system and

utility classes.
✅ Week 10: Bootstrap Components and Forms

 Mon: I learned how to use Bootstrap components such as navbars, buttons, and alerts

in web pages.

 Tue: I practiced styling and customizing forms using Bootstrap classes for inputs,

labels, and form groups.

 Wed: I explored card components and created a profile card layout using Bootstrap

cards and buttons.

 Thu: I experimented with modals and dropdown menus and understood how

Bootstrap JS enhances interactivity.

 Fri (Task): I built a simple user registration form using Bootstrap components and

styled it with utility classes.

✅ Week 11: Bootstrap Advanced and Responsive Design

 Mon: I studied Bootstrap responsive breakpoints and created layouts that adapt to

various device sizes.

 Tue: I worked with responsive navigation using the collapsible Bootstrap navbar.

 Wed: I explored custom styling and overriding Bootstrap classes with custom CSS.

 Thu: I used Bootstrap columns and rows to create complex nested layouts.
  Fri (Task): I created a product landing page using Bootstrap’s responsive tools and

components.

✅ Week 12: Bootstrap Mini Project & Review

 Mon: I started planning a Bootstrap-based multi-section project with layout sketches

and content outline.

 Tue: I built the structure of the project using containers, rows, and columns.

 Wed: I implemented navigation, buttons, cards, and form components using

Bootstrap.

 Thu: I added responsiveness, tested the design on different screen sizes, and made

styling improvements.

 Fri (Task): I submitted a responsive Bootstrap website project showcasing a fictional

product or service.

✅ Week 13: Introduction to JavaScript

 Mon: I was introduced to JavaScript and practiced writing scripts using variables,

data types, and console.log().

 Tue: I studied operators, expressions, and the use of conditionals (if, else, switch).

 Wed: I explored loops in JavaScript, including for, while, and do...while.

  Thu: I learned how to define and call functions, including parameter passing and

return values.

 Fri (Task): I wrote a script that takes user input and performs simple calculations

using functions and conditionals.

✅ Week 14: JavaScript DOM Manipulation

 Mon: I learned how to access and manipulate HTML elements using

document.getElementById and querySelector.

 Tue: I practiced updating text and attributes dynamically with JavaScript DOM

methods.

 Wed: I added interactivity to buttons by attaching click event listeners.

 Thu: I explored creating and removing elements dynamically using JavaScript.

 Fri (Task): I built an interactive to-do list that allows users to add and delete tasks

using JavaScript DOM methods.

✅ Week 15: JavaScript Events and Forms

 Mon: I studied different JavaScript events such as onchange, onmouseover, and

onsubmit.

 Tue: I implemented form validation using JavaScript before allowing form

submission.
  Wed: I worked with JavaScript arrays and learned how to use array methods like

push, pop, and filter.

 Thu: I created simple interactive features like image sliders and tab switching using

event handling.

 Fri (Task): I created a form with real-time validation using JavaScript to check inputs

as the user types.

✅ Week 16: JavaScript Mini Project & Review

 Mon: I planned a mini JavaScript project that uses DOM manipulation, functions, and

event handling.

 Tue: I implemented the logic and UI for a calculator using JavaScript.

 Wed: I tested the functionality and fixed bugs in the JavaScript logic.

 Thu: I added styling and final touches to the mini project.

 Fri (Task): I submitted the final JavaScript project (e.g., calculator or interactive

quiz) demonstrating all core JS concepts.

✅ Week 17: Introduction to React.js & JSX

  Mon: I was introduced to React.js and learned how to set up a React project using

Create React App.

 Tue: I studied JSX syntax and practiced rendering elements dynamically in the

browser.

 Wed: I created simple functional components and explored how to break the UI into

reusable parts.

 Thu: I learned about React fragments and how to return multiple elements from a

component.

 Fri (Task): I built a simple React app with a header, footer, and a main content area

using JSX and functional components.

✅ Week 18: Props and Component Composition

 Mon: I learned how to pass data to components using props and understood the

concept of props immutability.

 Tue: I created reusable components and composed them together to build a structured

page layout.

 Wed: I practiced using conditional rendering inside components based on props and

simple logic.

 Thu: I worked with dynamic content by passing arrays and objects as props.

 Fri (Task): I built a testimonials section where each testimonial is rendered from

props using a reusable component.

✅ Week 19: State Management with useState

 Mon: I was introduced to React’s useState hook and practiced updating component

state on user interaction.

 Tue: I created a counter app that increases and decreases value using state and

buttons.

 Wed: I explored how to manage multiple pieces of state and update them

independently.

 Thu: I learned about controlled components by connecting form inputs to component

state.

 Fri (Task): I developed a contact form with real-time input updates using useState for

each field.

✅ Week 20: Event Handling and Conditional Rendering

 Mon: I practiced handling events like onClick, onChange, and onSubmit in React

components.

 Tue: I used inline event handlers and callback functions to manage user interactions.

 Wed: I implemented conditional rendering using logical && and ternary operators.

 Thu: I built dynamic components that respond to user input and display conditional

messages.

 Fri (Task): I built an FAQ accordion component that shows and hides answers when

clicked.
✅ Week 21: Lists and Keys in React

 Mon: I learned how to render lists using the .map() method and assign unique keys to

elements.

 Tue: I created a list of user profiles from an array of objects and displayed them

dynamically.

 Wed: I worked on deleting items from the list using filter and updated state.

 Thu: I practiced dynamically adding new items to a list and re-rendering components.

 Fri (Task): I developed a simple to-do list application with add and delete

functionality using map() and useState.

✅ Week 22: useEffect and Lifecycle in Functional Components

 Mon: I was introduced to the useEffect hook and used it to handle side effects like

document title changes.

 Tue: I implemented API fetching inside useEffect and displayed fetched data in

components.

 Wed: I learned about dependency arrays and how to control when useEffect runs.

 Thu: I handled cleanup logic in useEffect to remove intervals and listeners properly.

 Fri (Task): I created a weather app that fetches data from an API and updates it using

useEffect.

✅ Week 23: React Router Basics

  Mon: I installed react-router-dom and learned how to set up routing for multiple

pages in a React app.

 Tue: I created multiple route components and linked them using <Link> and

<NavLink>.

 Wed: I implemented nested routes and explored route parameters for dynamic

content.

 Thu: I learned how to use useNavigate and useParams to programmatically navigate

between pages.

 Fri (Task): I built a multi-page portfolio website with routing for About, Projects,

and Contact pages.

✅ Week 24: Final Project & Revision

 Mon: I planned a complete React project with multiple components, routing, and

form handling.

 Tue: I implemented the page structure, navigation, and form components.

 Wed: I added interactivity using useState and connected the form to a dummy API

using useEffect.

 Thu: I reviewed and refined the code, ensured responsiveness, and tested all user

interactions.

 Fri (Task): I submitted the final React project a mini blog app with multiple pages,

routing, and dynamic content display.