I am currently learning Web Development and documenting my daily progress through projects and practice.
📚 What I’ve Learned So Far
🌐 Internet & Web Basics
How the Internet works (IP, DNS, HTTP/HTTPS, packets)
Client–Server Model and request-response cycle
Overview of important protocols (TCP/IP, HTTP, FTP, SMTP)
🧱 HTML
Structure of web pages using HTML
Tags, elements, attributes
Text formatting, links, images, lists, and tables
Semantic HTML for better SEO and accessibility
🎨 CSS
CSS basics: selectors, properties, styling methods
Box Model, margins, padding, borders
Positioning (static, relative, absolute, fixed, sticky)
Flexbox for responsive layouts
CSS Grid for advanced 2D layouts
Transform, hover effects, transitions, perspective
Display properties (block, inline, inline-block, grid)
Advanced styling (background-clip, text-stroke, scrollbar styling)
📱 Responsive Design
Responsive units: %, em, rem, vw, vh, vmin, vmax
Building layouts for different screen sizes
Understanding why rem/em improve scalability
⚡ SCSS
Introduction to SCSS (Sassy CSS)
Variables, mixins, includes
Writing reusable and maintainable styles
🧠 JavaScript (Basics)
Data types and variables
Operators and expressions
Conditional statements and loops
Functions (parameters, return values)
Arrays and objects
🌳 DOM (Document Object Model)
Selecting elements, Changing HTML content, Changing CSS styles, Event listeners, Event delegation, Dynamic DOM creation, State-based UI updates, Template literals, Rendering data from arrays and objects, User interactions and UI manipulation
⏱️ JavaScript Timing Functions
setTimeout(), setInterval(), clearInterval(), Progress simulations, Time-based animations
🎯 Event Handling
click, dblclick, mouseover, mouseout, keydown, keyup, input
🚀 Projects & Mini Applications
Random RGB Color Generator, Dynamic Random Element Generator, Fake Download Progress Bar, Double Click Like Animation, Friend Request Toggle System, Data-Driven Reels UI, Interactive Hover Effects, Spotlight Effect using CSS Variables, Matrix Text Scramble Animation, Animated Gradient Card, CSS Anchor Positioning Demo
💡 Concepts Explored
Data → UI → Interaction, Conditional Rendering, State Management Fundamentals, Dynamic Styling, Modern CSS Effects, Interactive User Experiences, Performance-Aware Animations, Component-Based Thinking, Responsive Design Principles
🛠️ Tools & Technologies
HTML
CSS
SCSS
JavaScript
VS Code
Git & GitHub
📌 Goal
To become a skilled web Developer by building real-world projects and mastering core web technologies.