Building Your First Webpage — I've Never Coded

What You'll Build

In this lesson, you'll build a personal portfolio webpage — a real site you can show to friends, put on your resume, or use as a starting point for your online presence. The AI will write the code, and you'll make the creative decisions.

By the end, you'll have a working webpage with:

A hero section with your name and a tagline
An "About Me" section
A "Projects" or "Skills" section
A contact section
Responsive design that works on mobile and desktop

Time needed: About 45 minutes.

What you need: Your AI coding tool set up from Lesson 3 (Cursor, VS Code with Copilot, or a browser-based tool).

Step 1: Set Up the Project

If you're using Cursor or VS Code, create a new folder:

Create a folder called my-portfolio on your computer
Open it in your editor (File > Open Folder)
Open the AI chat panel

If you're using a browser-based tool (Bolt, Lovable, Replit), just start a new project.

Step 2: Generate the Base Page

Give the AI this prompt (customize the placeholder details):

Create a single-page personal portfolio website in a single HTML file. Use this information:

Name: [Your Name]

Title/role: "Aspiring Developer & AI Enthusiast" (or whatever you'd like)

About me: 2-3 sentences about yourself (the AI can write placeholder text)

Skills: list 4-5 things you're interested in or learning

Contact: your email (or a placeholder)

Design requirements:

Modern, clean design with a dark theme

Smooth scrolling between sections

Subtle animations when sections come into view

Fully responsive (works on mobile)

All CSS and JavaScript in the same file (no external dependencies)

Review what the AI creates. Open the file in your browser to see how it looks. It should be a complete, functional page.

Step 3: Customize the Design

Now make it yours. Here are some prompts to try — pick the ones that matter to you:

Change the color scheme:

Change the color scheme to use [color] as the primary accent color instead of the current one. Keep the dark background.

Try colors like:

#E94560 (coral red)
#00D2FF (cyan)
#7C3AED (purple)
#10B981 (green)
#F59E0B (amber)

Improve the hero section:

Make the hero section full-screen height with my name in large, bold text and the tagline below in a lighter weight. Add a subtle animated gradient background.

Add a profile photo placeholder:

Add a circular profile photo placeholder in the hero section. Use a gray circle with an icon for now — I'll replace it with a real photo later.

Customize the layout:

Change the skills section to use a grid of cards instead of a list. Each card should have an icon placeholder, the skill name, and a one-sentence description.

Step 4: Add Content Sections

Let's add more substance. Try these prompts:

Add a projects section:

Add a "Projects" section with 3 project cards. Each card should have:

A colored placeholder image area

Project title

Short description (2 sentences)

Two tags (like "HTML", "CSS", "AI-built")

A "View Project" link (use # as the href for now)

Use these project ideas:

This portfolio website itself

A to-do list app

A weather dashboard

Make the cards look clickable with a subtle hover effect.

Add a timeline or journey section:

Add a section called "My Learning Journey" with a vertical timeline. Include 3-4 milestones like:

"Started learning about AI coding tools"

"Built my first HTML page"

"Completed my first portfolio site"

"Learning JavaScript basics" Add dates (use recent dates) and make it visually clean.

Step 5: Polish the Details

Small details make a big difference. Try these refinements:

Add smooth navigation:

Add a fixed navigation bar at the top with links to each section (Home, About, Projects, Contact). Make it semi-transparent with a blur effect. The nav should highlight the current section as I scroll.

Improve typography:

Import and use the "Inter" font from Google Fonts. Set the body text to 16px with 1.6 line-height. Make headings use a heavier weight.

Add a footer:

Add a simple footer with the text "Built with AI assistance • 2026" and links to placeholder social media (GitHub, LinkedIn, Twitter/X). Use simple SVG icons.

Make it mobile-friendly:

Check that the site works well on mobile. Make the navigation collapse into a hamburger menu on small screens. Ensure the project cards stack vertically on mobile.

Step 6: Test Your Site

Before calling it done, test everything:

In a Desktop Browser

Open the HTML file in Chrome, Firefox, or Safari
Scroll through all sections — do they look right?
Click the navigation links — do they scroll smoothly to each section?
Hover over cards and buttons — do the hover effects work?

On Mobile

Open Chrome DevTools (Cmd+Option+I on Mac, F12 on Windows)
Click the device toggle icon (looks like a phone/tablet)
Select "iPhone 14" or any mobile preset
Check that everything is readable and the layout doesn't break

Fix Issues

If something doesn't look right, tell the AI:

On mobile, the project cards are overlapping. Can you fix the responsive layout so they stack vertically with proper spacing on screens smaller than 768px?

Be specific about what's wrong and what screen size it happens on.

Step 7: Save and Celebrate

You've just built a real webpage. Here's what you accomplished:

Created a complete, multi-section portfolio site
Customized the design (colors, layout, typography)
Made it responsive for mobile devices
Added interactive elements (navigation, hover effects, animations)
Tested and fixed issues

All without writing a single line of code yourself. The AI wrote every character — you made the decisions.

What You Can Do Next With This Project

Your portfolio is a starting point. Here are ways to keep improving it:

Add a real photo: Replace the placeholder with an actual photo of yourself. Ask the AI: "How do I add my own photo? The file is called photo.jpg and it's in the same folder."

Deploy it online: You can put this on the internet for free. We'll cover deployment in Lesson 9, but if you're eager:

Ask the AI: "How do I deploy this HTML page for free using GitHub Pages or Netlify?"

Keep iterating: Every time you learn something new, come back and improve your portfolio. It's a living project.

What Went Wrong (And That's OK)

During this lesson, you probably experienced some of these:

The AI generated something ugly — That's normal. You iterate. "Make it look more modern" or "Use more whitespace" are perfectly valid prompts.
A feature didn't work — Also normal. Tell the AI what's broken and it'll fix it.
You changed your mind — That's the beauty of AI coding. "Actually, make the background light instead of dark" takes seconds.
It took longer than 45 minutes — No problem. Building something real takes time, even with AI help.

The point isn't perfection. The point is that you built something real, and now you know the process.

Checkpoint

Make sure you have:

A working HTML file that opens in a browser
At least 3 sections (hero, about, one more)
Custom colors that you chose
A design that doesn't break on mobile
At least one interactive element (smooth scrolling, hover effects, etc.)

If you're stuck and can't get something working, try this reset prompt:

Let's simplify. Create a clean, minimal portfolio page with just three sections: a hero with my name, an about section, and a contact section. Use a dark theme with [your preferred accent color]. Focus on clean typography and spacing rather than fancy effects.

Sometimes starting simpler and adding complexity is easier than trying to fix a complex page.

What's Next

You've built your first project! In the next lesson, we'll learn about debugging — what to do when code doesn't work as expected, and how to use AI as your debugging partner. This skill will save you hours of frustration.