Skip to content
Customize step • bootstrap-styled

Customize Your Page

This is your main customization workflow: save your file, use DevTools, check accessibility, complete challenges, then use extra resources for polish.

Start Setup DevTools Workflow

What to collect

  • One Coolors palette
  • One Google Fonts pairing
  • One beginner UI pattern
  • Optional bonus: Level up the icons

Customization challenges

Want to see a full sample first? Open the Example page.

Challenge 1

Pick a color theme

Open Coolors and choose one palette you like. Copy the hex codes, then paste them into Gemini and say: "make this my color palette".

  • Choose 4-5 colors
  • Copy the hex codes
  • Export -> Code -> CSV
Challenge 2

Choose a font style

Browse Google Fonts and pick a heading font and a body font for your page.

  • Pick one heading font and one body font
  • Copy the font names
  • Paste into Gemini: "use these as my page fonts"
Challenge 3

Choose one UI pattern

Look through UIverse and pick one card or component idea you want to adapt.

  • Pick only one pattern to start
  • Copy the code for that pattern
  • Paste into Gemini and tell Gemini what to replace

Bonus Challenge: Add art or icons

If you finish early, browse SVG Repo, pick an icon from a library you like, copy the SVG code, and ask Gemini to add it to a heading, button, list or card.

Before DevTools: Save your page file

We are using DevTools in the Chrome browser. First, copy your Gemini code into a text editor and save it to your Desktop as an HTML file.

Mac steps

  1. Open TextEdit.
  2. Choose Format -> Make Plain Text.
  3. Paste your code from Gemini.
  4. Save to Desktop as my-page.html.
  5. Double-click the file to open it in your browser.

Windows steps

  1. Open Notepad.
  2. Paste your code from Gemini.
  3. Save to Desktop as my-page.html (set Save as type to All Files if needed).
  4. Double-click the file to open it in your browser.

This file is local on your computer only. It is not a public website unless you publish it online.

DevTools workflow

Use Chrome browser for these DevTools steps.

Mac: Cmd + Option + I PC: Ctrl + Shift + I

Select element: click this, then click a part of the page to find its name/class.

Toggle device toolbar: preview how the page looks on phone/tablet widths.

Action 1: Find the element name for AI

  1. Open DevTools (shortcut above or Right-click → Inspect)
  2. Use Select element, then click the part you want to change
  3. Find the class or element name in the inspector
  4. Ask AI to edit only that named part
  5. Paste AI's update into your file and refresh

Action 2: Check accessibility and screen sizes

  1. Check text contrast so content is easy to read
  2. Click Toggle device toolbar
  3. Switch between phone/tablet widths
  4. Ask AI to adjust spacing or layout if anything looks off