ChatGPT Can Write Good CSS?!?

An exploration of using ChatGPT to write HTML and CSS.

After generating the initial code for a simple landing page, we focus on improving the prompts gradually to get the best possible results.

Chapters

00:00 Intro
01:32 A few notes on ChatGPT and this guide
02:05 Prompt 1: Create a landing page
02:42 Prompt 2: Separate HTML & CSS
04:17 Prompt 3: Wrap navigation into ul element
04:44 Prompt 4: Tweak HTML
05:14 Prompt 5: Rewrite HTML & CSS using BEM Methodology
06:01 Prompt 6: Improve landing page design
06:30 Prompt 7: Multiple requests; PX to relative units, black text color, and HSL color format
08:11 Prompt 8: Switch VH units to REM units
08:40 Prompt 9: Switch all colors to HSL format
09:01 Prompt 10: Switch all “white” keywords in CSS to HSL format
09:25 Prompt 11: Switch HSL format to new comma-less syntax
09:34 A note on the current state of ChatUI
09:52 Prompt 12: Improve text color accessibility
10:45 Prompt 13: Tweak the lightness of the color to work around the problem with ChatGPT understanding
11:32 Prompt 14: Use CSS Grid for main page layout
13:13 Prompt 15: Tweak CSS Grid layout sizing
13:42 Note on the instructions
14:11 Can ChatGPT write good-quality CSS?
14:52 Will ChatGPT replace web developers?