From Bugs to Breakthroughs

Latest posts

Class Blog

Documenting our web development course through real bugs, design decisions, and reflections on learning.

A close-up, photographic view of a laptop screen displaying a browser’s developer tools panel on the right and a half-broken web page on the left, with misaligned boxes and overlapping elements. The laptop rests on a tidy, charcoal-colored desk alongside a slim tablet showing a wireframe layout and a closed notebook with a metal pen on top. Cool, overcast window light washes across the scene from the left, creating soft highlights and gentle shadows, conveying a contemplative debugging mood. The composition follows the rule of thirds, keeping the browser and dev tools crisp in focus while peripherals dissolve into a mild bokeh. The overall aesthetic is clean, realistic, and professional, capturing the quiet tension of diagnosing front-end layout bugs during web development.
A sleek, modern workstation dominated by a large ultra-wide monitor filled with a dark-themed code editor, lines of colorful syntax highlighting cascading down the screen. Around it sit a minimalist mechanical keyboard, a matte-black laptop slightly ajar, and scattered sticky notes with abstract shapes symbolizing bugs and ideas instead of text. The desk surface is clean, light wood, backed by a neutral wall with a single geometric poster. Soft, diffused daylight from an unseen side window gently illuminates the scene, creating subtle reflections on the monitor and keyboard. Photographic realism from a slightly elevated eye-level angle, with shallow depth of field that keeps the coding interface sharp while the background fades into a professional, calm blur, suggesting focused, disciplined web development work in progress.

From Bugs to Breakthroughs

This blog documents my web development coursework, tracing each step from initial confusion to working code. I share real bugs, debugging strategies, and breakthroughs to reflect on my growth and give classmates insight into my problem-solving process.

About me

About

Project Phases at a Glance

Follow the site from first project brief to launch: planning, wireframing, initial build, debugging sprints, user testing, performance tweaks, and final polish. Each phase links to posts that capture specific challenges, experiments, and what ultimately worked.

View timeline
A close-up, photographic view of a laptop screen displaying a browser’s developer tools panel on the right and a half-broken web page on the left, with misaligned boxes and overlapping elements. The laptop rests on a tidy, charcoal-colored desk alongside a slim tablet showing a wireframe layout and a closed notebook with a metal pen on top. Cool, overcast window light washes across the scene from the left, creating soft highlights and gentle shadows, conveying a contemplative debugging mood. The composition follows the rule of thirds, keeping the browser and dev tools crisp in focus while peripherals dissolve into a mild bokeh. The overall aesthetic is clean, realistic, and professional, capturing the quiet tension of diagnosing front-end layout bugs during web development.