Web · HTML · CSS · Case Study

The Incredible Journey
of the Potato

A multi-page educational website built with pure HTML & CSS — no frameworks, no JavaScript.

HTML5CSS3Responsive DesignGitHub Pages
5 Pages
100% HTML & CSS
Responsive All Devices
0 Frameworks Used
GitHub Pages Deployed On
01

Challenge

The goal was to build a complete, multi-page educational website from scratch using only HTML and CSS — no frameworks, no JavaScript, no shortcuts. The subject: the history and cultural journey of the potato, from its origins in the Andes to becoming one of the world's most important crops.

The challenge was to create a structured, visually engaging experience that felt cohesive across multiple pages, with proper navigation, responsive layout, and content hierarchy — all without relying on any external libraries.

02

Approach

Every element was hand-coded using semantic HTML5 and CSS3. The project followed a content-first approach — defining the information architecture before writing a single line of CSS.

  • Designed a multi-page structure: Home, Variety, Recipes, Contact and Booking
  • Built responsive layouts using CSS Flexbox and Grid
  • Implemented a consistent navigation bar across all pages
  • Created an image gallery with CSS-only carousel effect
  • Designed and styled a booking form with validation feedback
  • Deployed via GitHub Pages for public access

Building without frameworks forces a deeper understanding of how the web actually works. Every spacing decision, every layout shift, every hover state — all written by hand.

03

Deliverables

  • 5-page educational website — Home, Variety, Recipes, Contact, Booking
  • Responsive navigation — works across desktop, tablet and mobile
  • Image gallery — CSS-only carousel on the homepage
  • Booking form — styled contact and reservation form
  • GitHub Pages deployment — live and publicly accessible
04

Results

A fully functional, responsive educational website built with zero dependencies:

Pages 5 Complete multi-page site
HTML & CSS 100% No frameworks or JavaScript
All Devices Responsive Works on all screen sizes

The project demonstrates foundational web development skills — clean semantic markup, structured CSS, responsive design principles, and deployment — all without relying on any framework or library.

Ready to build something like this?

Let's build your web presence from the ground up.

Start a Project →