🌐 Web Technology - Full Stack Front-End Training

Developer: Mallu200 | Program: X-Workz Web-Development

This repository serves as a comprehensive technical archive of my journey in Modern Web Technologies. It tracks my progression from structural markup and responsive styling to the engineering of dynamic, state-managed applications.

---

🏗️ Technical Roadmap (Modules)

I have categorized my front-end training into four core competency layers. Each module contains hands-on implementations and logic:

1. Structural Architecture (HTML5)

• Semantic Web: Header, Main, Section, Article, Footer.
• Data Collection: Forms, Input Types, Validations, Labels.
• Media & Tables: SVG, iFrames, Video/Audio, Semantic Tables.
• SEO Foundations: Meta Tags, Alt Attributes, Document Hierarchy.

2. Design & Responsive Engineering (CSS3 & Bootstrap 5)

• The Box Model: Margin, Padding, Border, Content-Box.
• Layout Engines: Flexbox, CSS Grid, Positioning (Absolute/Relative/Sticky).
• Responsive Design: Media Queries, Breakpoints, Mobile-First Strategy.
• Framework Mastery: Bootstrap Grid (12-Column), Utility Classes, Components (Modals/Navs/Cards).

3. Programmable Logic (JavaScript ES6+)

• Engine Fundamentals: Let/Const, Data Types, Arrow Functions, Template Literals.
• Logic Flow: Conditional Statements, Switch-Case, Loops (for-of, for-in, .forEach).
• Data Manipulation: Object Destructuring, Spread/Rest Operators, Array Methods (.map, .filter, .reduce).
• The DOM API: Event Listeners, Element Selection, Dynamic Styling, Event Bubbling.

4. Advanced Interactivity & Persistence

• Asynchronous JS: Promises, Async/Await, Fetch API, JSON Parsing.
• Browser Storage: LocalStorage, SessionStorage for client-side persistence.
• Error Handling: Try-Catch Blocks, Custom Validation Logic.

---

🛡️ Capstone Project: Nexus Inventory Management

The "Nexus-Inventory-System" folder is the culmination of all the above modules. It is a production-grade Product Management Dashboard featuring:

• Full CRUD Lifecycle: Create, Read, Update, and Delete operations for inventory items.
• State Management: Real-time synchronization between JavaScript objects and the UI.
• Persistent Storage: Data survival across browser sessions via LocalStorage.
• Dynamic UX: Live search filtering and responsive layouts powered by Bootstrap 5.

---

🛠️ Skills Demonstrated

• Languages: HTML5, CSS3, JavaScript (ES6+).
• Frameworks: Bootstrap 5.
• Patterns: Module Pattern, Event-Driven Architecture, Responsive Design.
• Tools: Git, GitHub, VS Code, Chrome Developer Tools (Debugging).

---