Creating our Website using Visual Studio Code

Part 1: Setting the stage with VS Code, HTML and CSS

GitHub Repository: Jonathan Layman Resume Site

Every craft has its tools. A carpenter has a lathe; a writer has a fountain pen; and a cloud engineer has an Integrated Development Environment (IDE). When I started this project, the primary goal of Phase 1 was to establish my workspace and build the visual foundation of my resume using HTML and CSS. To build like a professional, I had to move beyond basic text editors and start utilizing a robust environment where my code and my creative assets could live in harmony.

The Workshop: Visual Studio Code

My primary environment is Visual Studio Code (VS Code). For this phase, it served as the cockpit for a significant amount of front-end development. While I had some background in web design, this was an opportunity to truly immerse myself in the intricacies of modern HTML5 and CSS3.

VS Code is more than just an editor for me; it is the central nervous system of my project. Throughout this challenge, I used it not only for the front-end layout but also for writing my Python-based Lambda functions and eventually for orchestrating my entire cloud infrastructure through Terraform.

I didn't want to just "deploy a site"; I wanted to build an experience that felt personal and professional. I curated several different website templates, each possessing a specific element—a header style here, a typography choice there—that captured the aesthetic I was chasing. Using VS Code, I began the meticulous process of merging these disparate pieces. This wasn't a simple copy-and-paste job; it involved:

  • Refactoring HTML — stripping out bloat and ensuring the document structure was semantic and clean.
  • Consolidating CSS — resolving style conflicts between templates and creating a unified design language for the site.
  • Precision tuning — manually adjusting margins, padding, and colors until the site gave off the exact feel I wanted.

The Role of AI in the Programming Process

One of the most valuable additions to my VS Code workflow was the strategic use of AI assistance. Rather than letting a tool write the site for me, I used AI as an advanced "pair programmer." Programming today isn't just about memorizing syntax; it's about knowing how to utilize the right resources to solve complex problems efficiently. When I ran into a CSS alignment issue or wanted the most efficient way to structure a responsive navigation bar, I used AI to explain the underlying concepts and suggest snippets.

  • Iterate faster — test different layout ideas in seconds rather than minutes.
  • Learn deeper — ask the AI to explain why a piece of code works so the final code is clean, modern, and accessible.
  • Debug smarter — use AI as a second set of eyes to catch unclosed tags or conflicting styles before they become major headaches.

Why the Time Investment Mattered

It would have been easy to pick one template and move on, but I chose to stay in this phase until the site looked exactly as I envisioned. In the cloud, it is easy to get lost in the plumbing of databases and APIs. By investing heavily in the front-end first within a professional VS Code workflow, I ensured that the public-facing side of my work—the part that actually represents me—was something I could be proud of.