WebDev with Milk & Eel

Tags and semantic,
layout never out of style,
responsive design

HTML meets Milk - CSS meets Eel

Introduction

This was my first complete web development path - a journey that started with <section> tags and endedd with dark mode toggles, spider-themed 404s, and a portfolio built by me.
Guided by my own fictional duo, Milk (a sentient milk carton) and Eel (a curious moray eel),
I explored how to structure content, style with intention, and make sites responsive, accessible, and memorable.
I didn't pursue this path because I wanted to become a frontend dev - I did it because I wanted to be capable. Now I am.
This website was created with the guidance of ChatGPT. I merely used it for learning, so I could apply that onto my real Portfolio website.
However, some parts are created or enhanced by my influence.

Topics Covered

  • Week 1: HTML & Structure

    learned semantic HTML, nesting, accessibility tags, and page layout foundations.

  • Week 2: CSS Basics

    Styled everything from scratch. Fonts, colors, spacing, and a deeper love for the box model.

  • Week 3: Flexbox & Responsiveness

    Built fluid, adaptable layouts using Flexbox and media queries.

  • Week 4: Grid & Layout Mastery

    Created grid-based cards and content structures with full-width and auto-fit magic.

  • Week 5: Forms & Accessibility

    Crafted accessible and styled input fields, textareas, and dropdowns with floating labels.

  • Week 6: Visual Hirarchy & Layout Polish

    Organized my CSS, built modular styles, and made everything consistent and readable.

  • Week 7: Themes, Variables, and Motion Polish

    Introduced CSS variables, dark mode, hover transitions, and responsive scaling via clmap() and calc()

  • Week 8: Final Polish & Deployment

    Linked everything, added a favicon, created a custom 404 page, and deployed it via GitHub Pages.

Why "Milk & Eel"?

They're two fictional characters I created - part of an ongoing surreal saga.
They represent both silliness and sincerity. So I brought that same energy into this learning path.
You'll find traces of them all over the site:

This was never just about building a site. It was about giving my portfolio a soul. And to have fun while coding.

Outcome

  • Gained complete control over HTML and CSS
  • Built a fully deployable, responsive site from scratch
  • Learned how to structure and scale styles like a real dev
  • Created a design system that reflects both competence and creativity
  • Confirmed I do not want to become a frontend dev - but now I know how to build like one

Project

Take a look at the Milk and Eel Homepage

Note: Current Website contains JavaScript as well, due to my new JS Speech Learning Path.

Back to home