HTML Coding

Read in: English | Русский | Español

A collection of four website examples built with pure HTML, CSS, and JavaScript — no frameworks, no dependencies. Each example demonstrates modern responsive design, semantic markup, and vanilla JS interactivity.

Examples

Freight Site (ToHome Delivery)

International freight/delivery service website with a shipping calculator, benefits showcase, quality guarantees with certification documents, customer feedback carousel, and a contact form.

Auto Journal (Premium CAR)

Automotive magazine portal with featured articles, sidebar content (interview, popular posts, Instagram feed, tag cloud, newsletter signup), pagination, and a comprehensive footer. Dark theme with professional magazine layout.

Natural Artifacts Collection

Museum/gallery website with a catalog, gallery section, search and login interface, and reusable SVG pagination icons. Dark theme with elegant typography (Cormorant, Open Sans).

Furniture Store (AVION)

E-commerce product catalog with category navigation, product showcases, shopping cart UI, and a mobile-friendly hamburger menu. Clean minimalist design with custom fonts (Clash Display, Satoshi).

Features

• Responsive design with mobile-first approach and hamburger menus
• Semantic HTML5 (<section>, <nav>, <article>, <time>)
• Lazy loading for images (loading="lazy", decoding="async")
• Multi-language support (English, Russian, Spanish) via URL-based switching
• Interactive elements: forms, carousels, keyboard and touch/swipe navigation
• Custom WOFF2 fonts per example
• CSS variables, Flexbox, Grid, transitions, and media queries
• No framework dependencies — pure HTML/CSS/JavaScript (ES modules)

Tech Stack

Layer	Technology
Markup	HTML5
Styling	CSS3 (custom properties, Grid, Flexbox)
Logic	JavaScript ES2022 (ES modules)
Formatting	Prettier
CI/CD	Forgejo Actions

Getting Started

Prerequisites

• A modern browser (Chrome, Firefox, Safari, Edge)

Running Locally

No build step required. Open index.html directly in your browser, or serve it with any static file server:

# Example with Python
python -m http.server 8080

# Example with Node.js (npx)
npx serve .

Then navigate to http://localhost:8080.

Project Structure

├── index.html                         # Main landing page with example links
├── .pre-commit-config.yaml
├── .prettierrc.json
├── main/                              # Shared assets and infrastructure
│   ├── css/                           # Global styles, header, vars
│   ├── js/                            # Language switching system
│   ├── favicon/                       # Favicons & web manifest
│   ├── icons/                         # Language flag SVGs
│   └── images/                        # Preview thumbnails
├── delivery/                          # Freight Site example
│   ├── index.html
│   ├── css/                           # Styles (header, footer, sections)
│   ├── js/                            # Events, functions, constants
│   ├── icons/                         # Benefit & UI icons
│   └── images/                        # Certification docs, hero image
├── car_magazine/                      # Auto Journal example
│   ├── index.html
│   ├── css/                           # Styles (header, footer, sections)
│   ├── fonts/                         # Lato WOFF2
│   ├── icons/                         # Social & navigation SVGs
│   └── images/                        # Articles, Instagram feed, etc.
├── natural_artifacts/                 # Natural Artifacts Collection example
│   ├── index.html
│   ├── css/                           # Styles (header, footer, sections)
│   ├── fonts/                         # Cormorant, OpenSans WOFF2
│   └── images/                        # Gallery figures, backgrounds
└── furniture/                         # Furniture Store example
    ├── index.html
    ├── css/                           # Styles (header, footer, sections)
    ├── fonts/                         # Clash Display, Satoshi WOFF2
    └── images/                        # Product photos

CI/CD

Forgejo Actions workflows run on every pull request and push to main:

Workflow	Trigger	What it does
pre-commit.yml	Pull request	Runs Prettier and file-format checks
deploy.yml	Push to main	Runs pre-commit checks and deploys to server

Contributing

1. Fork the repository and create a branch from main.
2. Install pre-commit hooks:

   pip install pre-commit
   pre-commit install
   

3. Make your changes and ensure formatting passes.
4. Open a pull request — CI will run automatically.