# HTML CSS TypeScript Tutorial

## Docs

- [CSS Animations & Transitions](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/animations.md): Learn CSS transitions and keyframe animations to bring your interfaces to life
- [BEM Methodology](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/bem-methodology.md): Learn BEM (Block Element Modifier) naming convention for writing maintainable, scalable CSS
- [Box Model](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/box-model.md): Understand the CSS box model - how margin, border, padding, and content work together to size elements
- [Flexbox Layout](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/flexbox.md): Master CSS Flexbox - the one-dimensional layout system for aligning and distributing space
- [CSS Grid Layout](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/grid.md): Master CSS Grid - the powerful two-dimensional layout system for complex page layouts
- [CSS Introduction](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/introduction.md): Learn the fundamentals of CSS - what it is, how it works, and why it matters for web development
- [Responsive Design](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/responsive-design.md): Master responsive web design with media queries, mobile-first approach, and modern CSS techniques
- [CSS Selectors](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/selectors.md): Master CSS selectors - from basic element selection to advanced pseudo-classes and combinators
- [CSS Variables](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/css/variables.md): Learn CSS Custom Properties (variables) for creating maintainable, themeable design systems
- [HTML Best Practices](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/html/best-practices.md): Learn industry best practices for writing clean, accessible, maintainable, and performant HTML code.
- [Document Structure](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/html/document-structure.md): Understand the anatomy of an HTML document, including the head section, metadata, and essential configurations.
- [Forms and Inputs](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/html/forms-and-inputs.md): Learn how to create interactive forms with various input types, validation, and proper accessibility features.
- [Introduction to HTML](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/html/introduction.md): Learn the fundamentals of HTML (HyperText Markup Language) and understand how it structures web content.
- [Semantic HTML Elements](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/html/semantic-elements.md): Learn how to use HTML5 semantic elements to create meaningful, accessible, and SEO-friendly web pages.
- [Tags and Attributes](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/html/tags-and-attributes.md): Master HTML tags and attributes, including IDs, classes, data attributes, and the BEM methodology for organizing CSS classes.
- [Introduction to the Tutorial](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/introduction.md): Learn how to build a modern e-commerce website from scratch using HTML, CSS, and TypeScript with this comprehensive tutorial.
- [Prerequisites](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/prerequisites.md): Essential tools, software, and background knowledge needed to complete the HTML/CSS/TypeScript tutorial successfully.
- [API Integration](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/api-integration.md): Fetch products from an external API using async/await and handle errors gracefully
- [Building the Footer Component](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/footer-component.md): Create a multi-column footer with contact info, links, and social media
- [Building the Header Component](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/header-component.md): Create a professional header with logo, search bar, navigation, and sticky positioning
- [Creating the Hero Section](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/hero-section.md): Build an eye-catching hero banner with gradients, centering, and call-to-action buttons
- [Project Overview](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/overview.md): Learn the architecture and structure of the e-commerce web store project
- [Building the Product Catalog](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/product-catalog.md): Create a responsive product grid with CSS Grid and dynamic product cards
- [Shopping Cart Functionality](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/shopping-cart.md): Build a shopping cart using Map data structure with real-time badge updates
- [State Management](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/project/state-management.md): Understand centralized application state and how it controls the entire UI
- [Common Code Patterns](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/reference/common-patterns.md): Reusable patterns and best practices from the tutorial project
- [CSS Properties Reference](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/reference/css-properties.md): Quick reference guide for CSS properties used in the tutorial project
- [HTML Tags Reference](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/reference/html-tags.md): Quick reference guide for HTML tags used in the tutorial project
- [TypeScript Types Reference](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/reference/typescript-types.md): Quick reference for TypeScript types, interfaces, and patterns used in the tutorial
- [Project Setup](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/setup.md): Step-by-step instructions to install, configure, and run the ML Store tutorial project on your local machine.
- [Async/Await](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/typescript/async-await.md): Learn how to handle asynchronous operations in TypeScript using async/await for cleaner, more readable code
- [DOM Manipulation](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/typescript/dom-manipulation.md): Learn how to manipulate the DOM with TypeScript using querySelector, getElementById, event listeners, and type-safe element access
- [Enums](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/typescript/enums.md): Learn how to use TypeScript enums to define named constants and avoid string typos in your code
- [Fetch API](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/typescript/fetch-api.md): Learn how to make HTTP requests with the Fetch API, handle responses, parse JSON, and manage errors in TypeScript
- [Interfaces](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/typescript/interfaces.md): Learn how to define object structures with TypeScript interfaces for type safety and better code organization
- [TypeScript Introduction](https://mintlify.wiki/diegoromemora27-creator/HTMLCSSEXPLAIN/typescript/introduction.md): Learn the fundamentals of TypeScript including type annotations, const vs let, and why TypeScript helps prevent errors