Demo Mode

Activity 8 of 9

Activity 8: AI Coding with IDE

Practice and reinforce the concepts from Lesson 8

My Profile with Trae and AI

What you'll learn

How to use AI to customize HTML and CSS code
Creating a personal profile webpage with AI assistance
Using AI prompts to enhance your web design
Making your webpage responsive and interactive

In this activity, you will use Trae and AI to create your own personal profile webpage. You'll learn how to use AI to help customize HTML and CSS code to make your profile unique and personalized.

Before You Begin:

Make sure you have access to AI tools in Trae
Prepare your personal information: name, about section, hobbies, and contact details
Have a browser ready to preview your webpage

:computer: Activity Overview

Total Time: 45-60 minutes

Part One: Copy template (5 minutes)
Part 2: Customize with AI (20-30 minutes)
Part 3: Enhance design (15-20 minutes)
Part 4: Submit project (5 minutes)

Steps to Create Your AI-Powered Profile

This is an example of the profile you are going to create later.

Part One: Copy the Template Code (5 minutes)

Open Trae in your browser
Create a new HTML file (name it myprofile.html)
Copy the template code below and paste it into your new file:

html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Profile</title>
<style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5; /* Page background */
        }
        
        .profile-container {
            background-color: white; /* White container background */
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Soft shadow around container */
        }
        
        h1 {
            color: #4CAF50; /* Main heading */
            font-size: 2.5em;
            margin-bottom: 10px;
        }
        
        h2 {
            color: #4CAF50; /* Section headings */
            font-size: 1.8em;
            margin-top: 30px;
            margin-bottom: 15px;
        }
        
        p {
            color: #666; /* Dark color for paragraph text */
            line-height: 1.6;
            font-size: 1.1em;
        }
        
        ul {
            color: #666; /* Dark color for list text */
            font-size: 1.1em;
        }
        
        li {
            margin-bottom: 8px;
        }
        
        .contact-info {
            color: #666; /* Dark  color for contact text */
            font-size: 1.1em;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>
    <div class="profile-container">
        {/* CHANGE THIS: Add your name here */}
        <h1>Hi, I'm [ADD YOUR NAME HERE]</h1>
        
        <h2>About Me</h2>
        {/* CHANGE THIS: Write about yourself - your interests, goals, what you study, etc. */}
        <p>[WRITE ABOUT YOURSELF HERE - your interests, goals, what you study, what you enjoy doing]</p>
        
        <h2>My Hobbies</h2>
        {/* CHANGE THIS: Replace with your actual hobbies */}
        <ul>
            <li>[ADD YOUR HOBBY 1]</li>
            <li>[ADD YOUR HOBBY 2]</li>
            <li>[ADD YOUR HOBBY 3]</li>
            <li>[ADD YOUR HOBBY 4]</li>
            {/* Add more hobbies if you want */}
        </ul>
        
        <h2>Contact Me</h2>
        <div class="contact-info">
            {/* CHANGE THIS: Add your email and social media */}
            <p>Email: [ADD YOUR EMAIL HERE]</p>
            <p>Instagram: [ADD YOUR INSTAGRAM HERE]</p>
            {/* You can add more social media like Twitter, TikTok, etc. */}
        </div>
    </div>
</body>
</html>

:bulb: Save your file after pasting! Click the save button or press Ctrl+S (Windows) or Cmd+S (Mac).

Part 2: Customize Your Profile with AI (20-30 minutes)

Now it's time to make this profile yours! Use AI to help you customize the template.

Step One: Basic Personal Information (10 minutes)

Open the AI chat in Trae

Use one of these prompts to start:

:speech_balloon: Personal Information Prompts:

"Help me replace all the placeholder text with my information: My name is [Your Name], I'm a [grade/age] student at [School Name], I love [your main interests]"

"Can you help me write a more detailed About Me section? I want to mention that I'm interested in [specific subjects], my future goals are [your goals], and I enjoy [specific activities]"

"Please update my hobbies to be more specific: instead of just 'Gaming', I want to say '[specific games you play]', and instead of 'Drawing', I want to say '[what you like to draw]'" tip After each AI response, preview your changes in the browser to see how they look!

Step 2: Add New Sections (10-15 minutes)

:speech_balloon: Content Enhancement Prompts:

"Add a 'My Skills' section with progress bars showing my abilities in [subjects you're good at, like Math, Art, Sports, etc.]"
"Create a 'My Goals' section where I can list what I want to achieve this year"
"Add a 'Fun Facts About Me' section with interesting things about myself"
"Can you style the contact section to look like social media buttons?"

Step 3: Advanced Features (Optional - 5-10 minutes)

:speech_balloon: Advanced Customization Prompts:

"Make this profile responsive so it looks good on phones and tablets"
"Add a dark mode toggle button that changes all the colors"
"Create a timeline section where I can add important events in my life"
"Add some emoji icons next to each hobby to make it more fun"

Part 3: Working with AI - Tips and Examples (15-20 minutes)

AI Collaboration Tips:

Start simple - Change basic information first
Preview often - Check your changes after each update
Ask questions - If you don't understand code, ask AI to explain
Be specific - The more details you give AI, the better results you'll get

:bulb: Common Questions to Ask AI

"What does this CSS property do?"

"Can you explain how the HTML structure works?"

"How can I change the color scheme?"

"Can you add comments to explain the code?"

You: "Can you help me change this profile to be about me? My name is Sarah Chen, I'm interested in digital art and music production, my hobbies are painting, playing piano, photography, and hiking. My email is sarah.chen@email.com and my Instagram is @sarahartist"

AI: [Will provide updated HTML with your information]

You: "Can you make the design more artistic with better colors and maybe add some visual elements?"

AI: [Will enhance the CSS with artistic styling]

:warning: Remember Always save your work after making changes! Use Ctrl+S (Windows) or Cmd+S (Mac).

Troubleshooting

Having issues? Here are solutions to common problems:

Common Issues and Solutions:

Code not updating in preview
- Make sure you saved the file (Ctrl+S or Cmd+S)
- Refresh your browser preview
- Check for any error messages in Trae
AI not understanding your request
- Be more specific with your instructions
- Break complex requests into smaller steps
- Use the example prompts as templates
Colors or styles not working
- Check for missing semicolons (;) in CSS
- Make sure color codes are correct (e.g., #4CAF50)
- Ask AI to check for CSS errors

:bulb: Need Help? If you're stuck, try asking AI: "Can you check my code for errors and fix them?"

Part 4: Project Submission (5 minutes)

:emoji:️ Submit Your Work

When you have completed your "My Profile with Trae and AI" project:

Preview your profile in the browser
Make sure all your customizations are visible
Take a screenshot of the entire profile page
Submit your screenshot using the link below

:information_source: Submission Requirements

Screenshot must show your complete profile

All sections should be visible

Your personal information should be filled in

At least one AI enhancement should be visible

Submit Your Profile Screenshot Here

:warning: Important! Make sure to capture the full profile page in your screenshot. If your profile is long, you may need to take multiple screenshots or zoom out in your browser.