Goal
Make your Google Site look like you designed it, by coding the sections the templates cannot do.
Audience
Anyone willing to look at code, even if they cannot write it yet. You do not need to be technical. You need to be curious.
Process
Build the site in Google Sites. Describe a section to an AI assistant, it writes the HTML and CSS, you review it, and you place it on your page with Embed code.
Why this is on the list
Google Sites gives you free hosting, a free custom domain, and an editor you already know. What it does not give you is much control over layout and type. Code fills that gap. You describe a section to an AI assistant (a project grid, a hero in your own typefaces, a case study layout), it writes the HTML and CSS, and you paste it into your page with the Sites Embed tool. The rest of the site stays drag and drop.
Total ongoing cost: $0, plus about $12 a year if you want your own domain. There is nothing else to pay, ever.
Not long ago I would not have put this on a list for a design student. The AI assistants changed that. You still have to think, and you still have to judge whether the result is any good. But you are a designer. Judging whether something looks right is the thing you are already trained to do.
Cost
This is the hardest option on the list, and I am not going to pretend otherwise. Coded sections have no drag-and-drop editor. You will meet words you have never seen: div, class, media query. None of them are hard, but all of them are new, and new is tiring when you are also job hunting.
Embedded code sits in a box on the page. You may have to resize that box so nothing is cut off on a phone, and search engines do not read what is inside it as page text. Keep your name, headings, and project descriptions in regular Sites text boxes.
And AI writes code that looks confident and is sometimes wrong. It will hand you something broken with total conviction. You have to look at what came back and judge it, which means the work never fully leaves your hands. That is a feature, not a bug, but know it going in.
Set it up
- Sketch first, on paper. What pages? What goes on the homepage? Do not skip this. “Make me a portfolio” produces slop. A clear description produces a good site.
- Decide your design system before you type a word. Pick your typefaces. Pick three to five solid colors and write down the hex codes. You already know how to do this. Hand these to the AI as rules, not suggestions.
- Build the site in Google Sites first. Sign in at sites.google.com with a personal Google account (your school account may close after you graduate), create your pages, and set a custom theme with your fonts and colors as closely as Sites allows.
- Pick the sections the templates cannot do, such as a project grid or a hero. Code those, and only those.
- Open Gemini with your Maricopa account and describe one section. Be specific. Tell it: one self-contained block of HTML and CSS, my exact colors, my exact fonts, no gradients, works on a phone.
- Read what it gives you. Ask it to explain any part you do not understand. It will. This is how you learn, and you will pick up more HTML in a weekend than you expect.
- Place it in Sites. Choose Insert, then Embed, then Embed code, and paste the code. Drag the box until nothing is cut off.
- Iterate like a designer. “The headline is too heavy.” “Tighten the space above the project grid.” “This does not work on a phone.” You already know how to give this kind of feedback. Give it. Check every page in the Sites preview at phone and desktop sizes.
- Click Publish. Your site is live at
sites.google.com/view/yournamefree, forever. - Optional: point your own domain at it. Google Sites supports custom domains for free. See the domain page.
Pros and cons
Pros
- Free forever on a personal Google account. No subscription, no lapse.
- Custom domain support, free.
- Design control where it counts. The coded sections look like you, because they are you.
- “I built my own portfolio site” is a real thing to say in an interview, and people remember it.
- You learn a little HTML, and that skill transfers to every digital design job.
- The site itself becomes a work sample.
Cons
- The steepest learning curve here. Real, and worth naming.
- No visual editor for coded sections. Updates mean editing code and pasting it again.
- Embed boxes sometimes need resizing for phones.
- New vocabulary that has nothing to do with design.
- No support line. Just you, the internet, and the AI.
- The AI will confidently give you broken code sometimes. You have to check.
- You can absolutely build something ugly. The template was not there to save you.
The reason this is worth the trouble: the templates stop being the ceiling. Your site still lives on free Google hosting, and the parts that matter most look like you designed them, because you did. If you ever move your site, the code you wrote moves with you.
Resources
- Google Sites · free, with the account you already have
- Google Sites Help: add files, videos and website content · how Embed code works
- MDN: Getting started with the web · the best free HTML intro there is
- How to point a custom domain at Google Sites
- Come talk to me. I will walk you through it.
Platforms change their plans and their menus constantly. If a step here does not match what you see on screen, tell me and I will fix the page.