Uploaded February 2023 | Updated September 2026, 1 week ago
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.
🖇️ Links
Switch to HSL Color Format: youtu.be/VInSzHOeFkE
Guide to grid-template-areas: youtu.be/sAsX9e2NzZ4
Kevin Powell's ChatGPT Video: youtube.com/watch?v=u0HTvSXNJmE
📖 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?
#css #chatgpt
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
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.
🖇️ Links
Switch to HSL Color Format: youtu.be/VInSzHOeFkE
Guide to grid-template-areas: youtu.be/sAsX9e2NzZ4
Kevin Powell's ChatGPT Video: youtube.com/watch?v=u0HTvSXNJmE
📖 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?
#css #chatgpt
Support CSS Weekly by buying my course:
🔥 Mastering Prettier & Stylelint: masteringlinting.com
Subscribe to CSS Weekly Newsletter:
💌 css-weekly.com
Keep up-to-date with CSS Weekly:
👉 Twitter: twitter.com/CSSWeekly
👉 Instagram: instagram.com/cssweekly
👉 Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
🔗 Blog: zoranjambor.com
👉 Twitter: twitter.com/zoranjambor
👉 LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
