Skip to main content

​
Introduction to the Tutorial

Welcome to this comprehensive tutorial on building a modern web store inspired by Mercado Libre! This hands-on project will teach you the fundamentals of web development through a real-world application.

​
What You’ll Build

You’ll create ML Store, a fully functional e-commerce website that features:
  • 🛍️ Product Catalog - Dynamic product cards loaded from a REST API
  • 🔍 Search Functionality - Search bar with modern styling
  • 🛒 Shopping Cart - Interactive cart with real-time counter updates
  • 📱 Responsive Design - Mobile-first approach that works on all devices
  • 🎨 Professional UI - Clean, modern interface following design best practices

​
What You’ll Learn

This tutorial covers three core technologies that power modern web development:

HTML

  • Semantic HTML5 elements
  • Proper document structure
  • Accessibility best practices
  • Forms and inputs

CSS

  • Modern CSS features
  • Flexbox and Grid layouts
  • BEM methodology
  • Responsive design
  • CSS Variables
  • Animations and transitions

TypeScript

  • Type safety and interfaces
  • Async/await patterns
  • DOM manipulation
  • Event handling
  • State management
  • API integration

​
Project Structure

The project follows a clean, organized structure that separates concerns: 
mi-tutorial/
├── index.html          # Main HTML structure with extensive comments
├── src/
│   ├── main.ts        # TypeScript application logic
│   ├── style.css      # CSS styles with BEM methodology
│   └── counter.ts     # Additional TypeScript utilities
├── public/
│   └── favicon.svg    # Website icon
├── package.json       # Project dependencies
└── tsconfig.json      # TypeScript configuration

​
index.html

The main HTML file contains the complete structure of the web store. It’s heavily commented with educational explanations about:
  • HTML5 semantic elements (<header>, <main>, <footer>, <section>, <article>)
  • Meta tags for SEO and responsive design
  • Accessibility attributes (ARIA labels, alt text)
  • Form elements and inputs
  • The BEM naming convention for classes

​
src/main.ts

The TypeScript file powers the dynamic functionality:
  • Fetching products from the Platzi Fake Store API
  • Rendering product cards dynamically
  • Managing shopping cart state using a Map
  • Event delegation for efficient event handling
  • Error handling with try/catch blocks
  • Creating toast notifications

​
src/style.css

The stylesheet implements modern CSS techniques:
  • CSS custom properties (variables) for theming
  • Flexbox for navigation and layouts
  • CSS Grid for product galleries
  • Smooth transitions and animations
  • Mobile-first responsive design
  • BEM class naming for maintainability

​
Key Concepts Covered

​
HTML Fundamentals

The HTML file includes detailed comments explaining every concept - perfect for beginners!
  • Semantic HTML: Learn why <header>, <nav>, <main>, and <footer> are better than generic <div> elements
  • Document Structure: Understand the <head> and <body> sections and their purposes
  • Forms: Create search forms with proper input types and accessibility
  • Lists: Use <ul>, <ol>, and <li> for navigation and structured content
  • Images: Implement lazy loading and proper alt text for accessibility

​
CSS Architecture

This project uses the BEM (Block Element Modifier) methodology for organized, scalable CSS.
BEM Naming Convention:
  • .block - Independent component (e.g., .header, .product-card)
  • .block__element - Part of a block (e.g., .header__logo, .product-card__title)
  • .block__element--modifier - Variation of an element (e.g., .button--primary)
Example from the project: 
.header { }                    /* Block: header component */
.header__logo { }              /* Element: logo within header */
.header__nav-link { }          /* Element: navigation link */
.header__nav-link--cart { }    /* Modifier: cart variant */

​
TypeScript Features

TypeScript adds type safety to JavaScript, catching errors before runtime.
Key TypeScript concepts demonstrated:
  1. Interfaces - Define the shape of objects 
    interface Product {
  id: number;
  title: string;
  price: number;
  category: Category;
  images: string[];
}
  2. Enums - Named constants for state management 
    enum LoadingState {
  Idle = "IDLE",
  Loading = "LOADING",
  Success = "SUCCESS",
  Error = "ERROR"
}
  3. Generics - Type-safe helper functions 
    function getElement<T extends HTMLElement>(selector: string): T {
  const element = document.querySelector<T>(selector);
  if (!element) throw new Error(`Element not found: ${selector}`);
  return element;
}
  4. Async/Await - Modern asynchronous programming 
    async function fetchProducts(): Promise<Product[]> {
  const response = await fetch(API_URL);
  return await response.json();
}

​
API Integration

The project uses the Platzi Fake Store API, a free REST API that provides:
  • Product listings with images
  • Category information
  • Realistic e-commerce data
The API is public and free - no authentication required! Perfect for learning.

​
Learning Approach

This tutorial takes a learn-by-doing approach:
1

Read the Comments

Every file is extensively commented with explanations of concepts, patterns, and best practices.
2

Understand the Code

Follow the logical flow from HTML structure to CSS styling to TypeScript functionality.
3

Experiment

Modify colors, layouts, and functionality to see how changes affect the result.
4

Build Your Own

Use this project as a foundation to create your own web applications.

​
What Makes This Tutorial Special

Beginner-Friendly

Every concept is explained from first principles with clear examples and analogies.

Real-World Project

Build an actual e-commerce site, not just toy examples.

Modern Best Practices

Learn current industry standards for HTML, CSS, and TypeScript.

Heavily Commented

Over 800 lines of educational comments explain every decision.

​
Technology Stack

The project uses minimal, modern tooling:
  • Vite - Lightning-fast development server and build tool
  • TypeScript 5.9 - Type-safe JavaScript
  • Native Browser APIs - No heavy frameworks, just vanilla JS
  • CSS3 - Modern CSS features without preprocessors
No React, Vue, or Angular! This tutorial focuses on web fundamentals that work everywhere.

​
Next Steps

Ready to get started? Let’s ensure you have everything you need:

Continue to Prerequisites

Check what tools and knowledge you’ll need to complete this tutorial.

Build docs developers (and LLMs) love

Get started for freeTalk to us