No CSS. No JavaScript. No frameworks. Just HTML.
HTML Recipe Hub is a fully functional recipe website that proves you don't need stylesheets, scripts, or frameworks to build an organized, accessible, and portfolio-ready web project. Every page is crafted with semantic HTML5 elements — from navigation and forms to structured recipe content with Schema.org microdata.
This project is ideal for developers learning HTML fundamentals, educators teaching web accessibility, or anyone who wants a clean static site deployable to GitHub Pages in seconds.
- Home — Featured recipes, category links, and latest additions
- Categories — 8 organized categories with anchor-based navigation
- Recipe Details — 12 full recipes with ingredients, instructions, and chef tips
- Search — Native HTML5 search input with
<datalist>autocomplete and alphabetical recipe index - Favorites — Curated editor's picks with static bookmark-style listings
- Contact — Accessible contact form with
mailto:fallback and FAQ section - SEO Ready —
sitemap.xmlandrobots.txtincluded - Auto Deploy — GitHub Actions workflow for GitHub Pages
- Custom SVG Branding — Original logo, favicon, and social preview assets
This project intentionally uses zero CSS — what you see is the browser's default rendering of semantic HTML5.
| Home Page | Categories |
|---|---|
Open index.html in any browser |
Open pages/categories.html |
| Recipe Details | Search |
|---|---|
Open any file in pages/recipes/ |
Open pages/search.html |
🌐 Production: https://html-recipe-hub.roboticela.com
📦 GitHub Pages: https://muhammadshahsawar.github.io/HTML-Recipe-Hub/
No build tools, package managers, or dependencies required.
git clone https://github.com/MuhammadShahsawar/HTML-Recipe-Hub.git
cd HTML-Recipe-HubDownload the repository as a ZIP from GitHub and extract it to your preferred location.
Open index.html directly in any modern web browser:
# Windows
start index.html
# macOS
open index.html
# Linux
xdg-open index.htmlOr serve locally with any static file server:
# Python 3
python -m http.server 8000
# Then visit http://localhost:8000- Push this repository to GitHub
- Go to Settings → Pages
- Under Build and deployment, set source to GitHub Actions
- Push to the
mainbranch — the included workflow deploys automatically
HTML-Recipe-Hub/
├── .github/
│ └── workflows/
│ └── deploy.yml # GitHub Pages CI/CD
├── assets/
│ ├── icon.svg # Project logo
│ ├── favicon.svg # Browser favicon
│ ├── preview.svg # Social preview (vector)
│ └── preview.png # Social preview (raster)
├── pages/
│ ├── categories.html # Browse by category
│ ├── search.html # Search & recipe index
│ ├── favorites.html # Editor's favorites
│ ├── contact.html # Contact form & FAQ
│ └── recipes/
│ ├── avocado-toast.html
│ ├── beef-stir-fry.html
│ ├── blueberry-pancakes.html
│ ├── caesar-salad.html
│ ├── chicken-tikka-masala.html
│ ├── chocolate-chip-cookies.html
│ ├── greek-yogurt-parfait.html
│ ├── grilled-salmon.html
│ ├── margherita-pizza.html
│ ├── spaghetti-carbonara.html
│ ├── tomato-basil-soup.html
│ └── vegetable-curry.html
├── index.html # Home page
├── sitemap.xml # SEO sitemap
├── robots.txt # Crawler directives
├── README.md # This file
├── LICENSE # MIT License
└── .gitignore
| Feature | Implementation |
|---|---|
| Semantic layout | <header>, <nav>, <main>, <article>, <section>, <aside>, <footer> |
| Navigation | <ul>/<li> link lists with aria-label and aria-current |
| Forms | <form>, <fieldset>, <legend>, <label>, <input>, <select>, <textarea> |
| Search | <input type="search"> with <datalist> autocomplete |
| Time data | <time datetime="PT45M"> for ISO 8601 durations |
| Contact | <address> element and mailto: form action |
| Structured data | Schema.org Recipe microdata via itemscope / itemprop |
| SEO meta | <meta name="description">, robots, viewport |
| Favicon | SVG favicon via <link rel="icon"> |
| Deep linking | Fragment identifiers (#breakfast, #dinner) |
- Semantic landmarks — Screen readers can navigate by region (
header,main,nav,footer) - ARIA labels —
aria-labelon navigation blocks,aria-labelledbyon sections - Current page indication —
aria-current="page"on active nav links - Form accessibility — Every input has an associated
<label>, required fields marked with<abbr title="required"> - Meaningful headings — Logical heading hierarchy (
h1→h2→h3) - Descriptive link text — No "click here" links; all links describe their destination
- Time elements — Machine-readable dates and durations for assistive technology
| Browser | Supported |
|---|---|
| Chrome 90+ | ✅ |
| Firefox 88+ | ✅ |
| Safari 14+ | ✅ |
| Edge 90+ | ✅ |
| Opera 76+ | ✅ |
All features use standard HTML5 — no polyfills or fallbacks needed.
Contributions are welcome! Here's how to get started:
- Fork the repository
- Create a feature branch:
git checkout -b feature/my-recipe - Add your recipe as a new HTML file in
pages/recipes/ - Update
pages/categories.html,pages/search.html, andsitemap.xml - Commit your changes:
git commit -m "Add: New recipe name" - Push to your fork:
git push origin feature/my-recipe - Open a Pull Request
Please ensure all new pages follow the existing semantic HTML5 patterns and contain no CSS or JavaScript.
This project is licensed under the MIT License — see the LICENSE file for details.
Muhammad Shahsawar
- GitHub: @MuhammadShahsawar
- Email: muhammad@roboticela.com
- Website: html-recipe-hub.roboticela.com
- MDN Web Docs — HTML for semantic HTML reference
- Schema.org Recipe for structured data patterns
- GitHub Pages for free static hosting
- The open-source community for inspiration and best practices
Built with ❤️ and pure HTML5
⭐ Star this repo if you find it useful!