BUDT748 · Fall 2026 · Client-Side Technologies

LET'S CREATE A WEBSITE DESIGN

Today let's create a sample website design with Claude and build out its corresponding HTML and CSS code.

From design to deployment

Three steps, start to finish.

01

Design

Draft the layout with Claude on a 12-column grid, using an 80px margin and 20px gutter.

Claude Design

02

Build

Convert the design into HTML and CSS, then style it in VS Code with the Live Server extension.

HTML · CSS · Bootstrap

03

Deploy

Push the finished site to GitHub and publish it for free with GitHub Pages.

Git · GitHub Pages

Built with Bootstrap 5

A responsive navbar, the 12-column grid, styled buttons and form controls — all from the Bootstrap CDN, layered with custom CSS.