Build a Visual About Me Page

Build and publish a responsive About Me page with HTML and CSS.

Introduction

30 Second Summary

When someone wants to learn about you online, a plain document can hide the parts that make your story memorable. A clear visual introduction helps your personality come through.

In this project, you will build a colorful personal launch page using HTML and CSS. You will shape it into a responsive layout before publishing it with GitHub Pages.

What You'll Build

Picture sending someone one link to a colorful profile card that reshapes itself for their screen while presenting your interests and learning goals.

By the end of this project, you'll have:

A personal profile page that displays your name, initials, introduction, interests, and technology learning goals.
A responsive design that stacks neatly on narrow screens before forming columns when more space is available.
A live website with a public link that opens your finished page on any device.
Secret Mission: Add a responsive project showcase that presents the page as your first completed build.

Are there any prerequisites?

You'll need a Mac with Visual Studio Code installed.

A GitHub account is also required for publishing.

Before We Start

Before you create any files, take a moment to decide who your About Me page introduces. Choose what visitors should learn about your technology journey while keeping the details safe to share publicly.

Set Up Your Visual Studio Code Workspace

Your first page needs a small workspace that you control. A trusted folder keeps every project file in one clear place.

In this step, you will create that folder in Visual Studio Code. You will also prove that the Integrated Browser can display saved changes from index.html.

In this step, get ready to:

Create a trusted workspace named about-me-launchpad.
Add a valid HTML document with a setup heading.
Preview the page in Visual Studio Code's Integrated Browser.

Create the workspace folder

A workspace gives Visual Studio Code one folder to treat as your project. Trusting this folder allows the editor to use its normal project features because you created the contents yourself.

Press Command-Space bar to open Spotlight.
Type Visual Studio Code.
Press Return to open Visual Studio Code.
Click File in the menu bar.
Select Open Folder....
Select Desktop in the folder picker.
Press Shift-Command-N to create a folder.
Type about-me-launchpad as the folder name.

Your workspace has a home

The folder picker now contains the named folder that will hold your webpage. The next actions open it as your Visual Studio Code workspace.

Press Return to create the folder.
Select the about-me-launchpad folder.
Click Open.
Confirm that you trust the folder if Visual Studio Code asks about workspace trust.

Your trusted workspace now has a clear home for every file you build.

Can't see the workspace folder?

Check that the Explorer sidebar shows about-me-launchpad at the top. If another folder appears, return to File and select Open Folder... again.

Help me open the correct workspace folder in Visual Studio Code.

Create the HTML document

HTML supplies the structure that a browser reads. This starter document includes page metadata plus one visible heading so you can test the preview immediately.

Select the file-creation control beside about-me-launchpad in the Explorer sidebar.
Type index.html as the file name.
Press Return to create the file.
Build the starter page by pasting this code into index.html:

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Tech Launchpad</title>
  </head>
  <body>
    <h1>Setup complete</h1>
  </body>
</html>

What does this HTML do?

The <!doctype html> line identifies this as a modern HTML document.
The <head> stores information about the page.
The viewport metadata tells mobile browsers to use the device width.
The <body> contains the visible Setup complete heading.

Save index.html.

You should see index.html listed beneath about-me-launchpad in the Explorer sidebar.

Is the file missing or unsaved?

Check that index.html sits directly inside about-me-launchpad. A dot beside the editor tab means the file still needs to be saved.

Help me check my HTML file and workspace structure.

✔️ Awesome, I've got everything!

Great. Double check that index.html is saved before opening the preview.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Tech Launchpad</title>
  </head>
  <body>
    <h1>Setup complete</h1>
  </body>
</html>

Preview saved changes

A live preview renders your saved HTML inside Visual Studio Code. It gives you a short loop between editing the file and seeing the result.

Before you open the preview, what heading do you expect the browser to display?

Right-click index.html in the Explorer sidebar.
Select Open in Integrated Browser.

You should see Setup complete in the Integrated Browser preview.

Add a full stop after Setup complete in the heading.
Save index.html.

The preview should update to show Setup complete. with the full stop.

Remove the full stop from the heading.
Save index.html again.

You should see Setup complete again. That proves your saved edits are reaching the Integrated Browser.

Preview not updating?

Confirm that you saved index.html after removing the full stop. Make sure the Integrated Browser is displaying the file from about-me-launchpad.

Help me fix an Integrated Browser preview that is not updating.

Your trusted workspace now renders a valid page from index.html. Next up, you will replace the setup heading with your complete About Me structure.

Build the Page Structure with HTML

Your trusted workspace already shows Setup complete in Visual Studio Code's Integrated Browser. That working preview proves the browser can read index.html.

A browser needs structured content before it can present a complete profile. In this step, you will use HTML to organize your introduction, interests, learning goals, and internal link.

In this step, get ready to:

Replace the setup heading with your profile header.
Add your interests and numbered learning goals.
Test the internal link.

Build the profile header

The profile header introduces you before the visitor reaches the supporting details. Its internal link points visitors toward your first learning goals.

Switch back to index.html in the editor.
Find the <h1>Setup complete</h1> line inside the page body.
Replace that heading with the profile header by copying this code:

    <main class="profile-card">
      <header class="hero">
        <div class="avatar" aria-hidden="true">YN</div>
        <div class="hero-copy">
          <p class="eyebrow">Hello, tech world</p>
          <h1>Your Name</h1>
          <p class="intro">
            I'm beginning my tech journey by learning how websites are structured,
            styled, and shared with the world.
          </p>
          <a class="button" href="#goals">See what I'm learning</a>
        </div>
      </header>
    </main>

What does this code do?

The <main> element holds the primary content of the page.
The <header> element groups your initials, name, introduction, and link.
The aria-hidden="true" attribute prevents the decorative initials from being announced as useful content.
The href="#goals" value points to an element with the matching goals identifier.

Save index.html.
Return to the Integrated Browser preview.

You should see YN above your name and introduction. The See what I'm learning link should appear below the introduction.

Still seeing the setup heading?

Confirm that you replaced the original <h1>Setup complete</h1> line.
Confirm that you saved index.html after adding the profile header.

Help me find why my profile header is missing from the Integrated Browser preview.

Add interests and learning goals

An unordered list groups interests without ranking them. An ordered list gives your learning goals a clear sequence.

Find the closing </header> line in index.html.
Place your cursor after that line.
Add the details area and footer before </main> by copying this code:


      <div class="details">
        <section class="panel">
          <h2>What I enjoy</h2>
          <ul class="tag-list">
            <li>Creative projects</li>
            <li>Solving problems</li>
            <li>Learning new skills</li>
          </ul>
        </section>

        <section class="panel" id="goals">
          <h2>My first goals</h2>
          <ol class="goal-list">
            <li>Build a webpage</li>
            <li>Understand HTML and CSS</li>
            <li>Share a live project</li>
          </ol>
        </section>
      </div>

      <footer class="footer">
        <p>Built with HTML and CSS.</p>
      </footer>

How is the content organized?

Each <section> groups content about one topic.
The tag-list class identifies the unordered interests list.
The goal-list class identifies the numbered goals list.
The id="goals" value creates the destination for the profile header link.
The footer closes the profile with a short build note.

Before you save, do you think the browser will present this content as a designed profile or as a basic document?

Save index.html.
Return to the Integrated Browser preview.

You should see your introduction, interest list, numbered goals, and footer. The browser presents them with default spacing and list styles.

That plain result is the intended shortfall. Your HTML has solved the page structure without controlling its visual presentation.

Are the lists or footer missing?

Confirm that the new code sits after </header>.
Confirm that the new code sits before </main>.
Check that every opening list or section tag has its matching closing tag.

Help me find the missing or misplaced HTML tag.

Keep the profile safe and test the link

Keep public text safe

This profile can become a public website later. A first name, nickname, or initials can introduce you without exposing private information.

Addresses, phone numbers, passwords, and tokens stay out of the page.

Review the Your Name placeholder in index.html.
Keep Your Name as the public-facing name placeholder for this checkpoint.
Keep YN as the public-facing initials placeholder for this checkpoint.
Save index.html.
Return to the Integrated Browser preview.

Before you select the link, where do you think the browser will move within the page?

Select the See what I'm learning link in the preview.

You should move to the My first goals section. The preview should still show the complete profile as a plain document.

Does the link stay in place?

Confirm that the link uses href="#goals".
Confirm that the goals section uses id="goals".
Narrow the preview if the entire page already fits within the visible area.

Help me debug the internal link to my goals section.

✔️ Awesome, I've got everything!

Great. Your index.html file now contains the complete profile structure.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Tech Launchpad</title>
  </head>
  <body>
    <main class="profile-card">
      <header class="hero">
        <div class="avatar" aria-hidden="true">YN</div>
        <div class="hero-copy">
          <p class="eyebrow">Hello, tech world</p>
          <h1>Your Name</h1>
          <p class="intro">
            I'm beginning my tech journey by learning how websites are structured,
            styled, and shared with the world.
          </p>
          <a class="button" href="#goals">See what I'm learning</a>
        </div>
      </header>

      <div class="details">
        <section class="panel">
          <h2>What I enjoy</h2>
          <ul class="tag-list">
            <li>Creative projects</li>
            <li>Solving problems</li>
            <li>Learning new skills</li>
          </ul>
        </section>

        <section class="panel" id="goals">
          <h2>My first goals</h2>
          <ol class="goal-list">
            <li>Build a webpage</li>
            <li>Understand HTML and CSS</li>
            <li>Share a live project</li>
          </ol>
        </section>
      </div>

      <footer class="footer">
        <p>Built with HTML and CSS.</p>
      </footer>
    </main>
  </body>
</html>

Your profile now has a complete structure with working navigation. Next, you will use CSS to turn this plain document into a visual profile card.

Transform the Page with CSS

Your HTML profile now contains the right information. The browser preview also exposes the current problem: every section uses plain default styling.

CSS uses selectors to target parts of the page. In this step, you will turn the plain document into a polished profile while keeping its sections stacked for narrow screens.

In this step, get ready to:

Connect the HTML document to a new stylesheet.
Create the page background, profile card, hero, avatar, button, and footer.
Style the stacked panels, tags, and learning goals.

Connect the stylesheet

An external stylesheet keeps the page structure in index.html separate from the visual rules in styles.css. This makes each file easier to understand.

In Visual Studio Code, select the New File icon in the Explorer sidebar.
Enter styles.css as the filename.
Press Enter to create the file.

You will see styles.css beside index.html in the Explorer. Your two-file workspace is ready for styling.

Switch back to the index.html tab.
Find the line containing <title>My Tech Launchpad</title>.
Add this stylesheet link directly below the title line:

    <link href="styles.css" rel="stylesheet" />

What does this line do?

The link element tells the browser to load the visual rules from styles.css. The rel="stylesheet" value describes the file's relationship to the HTML document.

Save index.html.

✔️ Awesome, I've got everything!

Your HTML document now links to styles.css. Keep both files saved.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Tech Launchpad</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <main class="profile-card">
      <header class="hero">
        <div class="avatar" aria-hidden="true">YN</div>
        <div class="hero-copy">
          <p class="eyebrow">Hello, tech world</p>
          <h1>Your Name</h1>
          <p class="intro">
            I'm beginning my tech journey by learning how websites are structured,
            styled, and shared with the world.
          </p>
          <a class="button" href="#goals">See what I'm learning</a>
        </div>
      </header>

      <div class="details">
        <section class="panel">
          <h2>What I enjoy</h2>
          <ul class="tag-list">
            <li>Creative projects</li>
            <li>Solving problems</li>
            <li>Learning new skills</li>
          </ul>
        </section>

        <section class="panel" id="goals">
          <h2>My first goals</h2>
          <ol class="goal-list">
            <li>Build a webpage</li>
            <li>Understand HTML and CSS</li>
            <li>Share a live project</li>
          </ol>
        </section>
      </div>

      <footer class="footer">
        <p>Built with HTML and CSS.</p>
      </footer>
    </main>
  </body>
</html>

How to compare your file

Check that the stylesheet link sits inside the head element. It belongs directly below the title.

The first CSS rules create the page canvas. They also establish a predictable box model so padding and borders stay inside each element's declared size.

Switch to styles.css.
Add the global sizing rule and page styles with this code:

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #202544;
  background: linear-gradient(135deg, #f6d5f7, #c3d8ff);
}

What do these rules do?

The universal selector applies border-box sizing to every element so padding and borders remain predictable.
The body rule fills the viewport and centers the profile.
The gradient provides the first visible layer of personality behind the content.

Save styles.css.
Switch back to the Integrated Browser preview from earlier.
Refresh the preview.

You will see a pink-to-blue gradient fill the preview. The profile content sits in the center with new typography and spacing.

Still seeing the plain white page?

Check that styles.css is beside index.html in the about-me-launchpad folder. Confirm that both files are saved.

Make sure the stylesheet filename matches styles.css exactly.

Help me find why my stylesheet is not loading in the Integrated Browser.

Style the profile hero

The gradient now frames the page, but the content still lacks a clear container. The next rules create a white card and establish the hero as the strongest part of the design.

Return to styles.css.
Add the profile card rule below the body rule:

.profile-card {
  width: min(100%, 60rem);
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #ddd8f5;
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 3rem rgba(53, 42, 110, 0.18);
}

How does the card work?

The card can fill the available width up to 60rem. Its border, rounded corners, and shadow separate the profile from the gradient.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the profile inside a wide white card with rounded corners and a soft shadow.

Card still looks like plain text?

Confirm that the selector begins with a full stop. It must match class="profile-card" in index.html.

Help me debug why the profile-card styles are not appearing.

Add the hero background and spacing below the profile card rule:

.hero {
  padding: 2rem;
  background: linear-gradient(135deg, #fff7ff, #eef3ff);
}

What does the hero rule change?

The padding moves the hero content away from the card edges. The subtle gradient distinguishes the introduction from the details below it.

Save styles.css.
Refresh the Integrated Browser preview.

You will see more space around the introduction. The hero now has a pale gradient of its own.

Hero background missing?

Check that .hero includes the leading full stop. Confirm that its closing brace appears after the background declaration.

Help me fix a hero selector that is not applying.

Add the avatar rule below the hero rule:

.avatar {
  width: 6rem;
  aspect-ratio: 1;
  margin-bottom: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background-color: #6c4ce3;
  font-size: 2rem;
  font-weight: 700;
}

How does the avatar become a circle?

Equal width and height come from the aspect-ratio declaration. A 50% border radius rounds the square into a circle.

Grid centering places the initials in the middle. The purple background gives them strong contrast.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the initials centered inside a purple circle above the introduction.

Avatar not circular?

Check that aspect-ratio: 1; and border-radius: 50%; are both inside the .avatar rule.

Help me fix an avatar that is not rendering as a circle.

Add the eyebrow label rule below the avatar rule:

.eyebrow {
  margin: 0 0 0.5rem;
  color: #6c4ce3;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}

Why style the eyebrow differently?

The smaller uppercase label introduces the page without competing with the name. Letter spacing keeps the compact text readable.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the greeting become a small purple uppercase label above the name.

Greeting still looks unchanged?

Confirm that .eyebrow matches class="eyebrow" in the HTML.

Help me debug the eyebrow styles on my profile page.

Add the main heading rule below the eyebrow rule:

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  line-height: 1;
}

How does the heading scale?

The clamp() value lets the name grow with the preview width. Its minimum and maximum limits keep the heading readable.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the name become the largest text on the page.

Name is not larger?

Check that the selector is h1 without a leading full stop. Confirm that the clamp() value contains both commas.

Help me fix an h1 rule that is not changing the heading size.

Add the introduction rule below the heading rule:

.intro {
  max-width: 38rem;
  margin: 1rem 0 1.5rem;
  color: #505675;
  font-size: 1.05rem;
  line-height: 1.7;
}

Why limit the introduction width?

A shorter line length makes the introduction easier to scan. The increased line height gives each line more breathing room.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the introduction use softer text with wider line spacing.

Introduction spacing missing?

Confirm that the paragraph still uses class="intro" in index.html.

Help me find why the intro styles are not applying.

Add the button rule below the introduction rule:

.button {
  display: inline-block;
  padding: 0.8rem 1rem;
  color: #ffffff;
  background-color: #6c4ce3;
  border-radius: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

How does the link become a button?

The link keeps its navigation behavior while gaining padding, color, and rounded corners. Removing the underline makes the call to action read as a button.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the internal link become a rounded purple button.

Link still looks like plain text?

Check that .button matches class="button" on the link.

Help me debug why my link is not styled as a button.

Add the interactive button states below the button rule:

.button:hover,
.button:focus {
  background-color: #5032bd;
  transform: translateY(-2px);
}

What do these button states add?

The hover state responds to the pointer. The focus state gives the same visual response when keyboard navigation reaches the link.

Save styles.css.
Refresh the Integrated Browser preview.
Move your pointer over the purple button.

You will see the button darken and lift slightly.

Button does not react?

Confirm that both state selectors include a colon. Check that the comma remains after .button:hover.

Help me fix button hover and focus styles that are not responding.

Add the footer rules below the interactive button states:

.footer {
  padding: 0 1.5rem 1.5rem;
  color: #6d718b;
  text-align: center;
}

.footer p {
  margin: 0;
}

How is the footer finished?

The footer centers its text and uses a muted color. Removing the paragraph margin keeps the card's bottom spacing consistent.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the footer centered beneath the rest of the profile.

Footer still sits to one side?

Check that text-align: center; is inside the .footer rule.

Help me fix footer text that is not centered.

Style the stacked details

The hero now creates a clear first impression. The interests and goals still need separation so visitors can scan them as two distinct groups.

Add the details layout rule below the button state rules:

.details {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

Why use a grid here?

The details grid controls the space between the two sections. Without column definitions, the sections remain stacked for narrow screens.

Save styles.css.
Refresh the Integrated Browser preview.

You will see consistent space around the interests and goals sections.

Details still touch the card edges?

Confirm that the selector is .details. Check that its padding declaration sits before the closing brace.

Help me debug spacing around the details area.

Add the panel rule below the details rule:

.panel {
  padding: 1.25rem;
  background-color: #f8f7ff;
  border: 1px solid #e4e0fa;
  border-radius: 1rem;
}

How do panels create hierarchy?

Each panel gains its own background and border. Padding keeps the content away from those edges.

Save styles.css.
Refresh the Integrated Browser preview.

You will see two pale panels with rounded corners stacked inside the card.

Panels have no background?

Confirm that both sections still use class="panel" in index.html.

Help me fix panel styles that are not appearing.

Add the section heading rule below the panel rule:

h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

What does the heading rule improve?

The heading margin creates a consistent gap before each list. The smaller size keeps these headings below the page name in the visual hierarchy.

Save styles.css.
Refresh the Integrated Browser preview.

You will see matching space below both panel headings.

Panel headings look uneven?

Check that the selector is h2 without a leading full stop. Confirm that both declarations sit inside its braces.

Help me fix inconsistent h2 spacing in my panels.

Add the interest list layout below the heading rule:

.tag-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

How does the tag layout work?

Flexbox places the interests beside each other when space allows. Wrapping moves later items onto a new line when the panel becomes narrow.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the interest items flow across the panel without bullet points.

Interest bullets still visible?

Check that list-style: none; is inside .tag-list. Confirm that the unordered list still uses class="tag-list".

Help me remove the bullets and wrap the interest list.

Add the individual tag rule below the tag list rule:

.tag-list li {
  padding: 0.5rem 0.75rem;
  color: #4d347f;
  background-color: #ece5ff;
  border-radius: 999px;
}

How do the tags become pills?

Padding creates space around each interest. The large border radius rounds both ends into a pill shape.

Save styles.css.
Refresh the Integrated Browser preview.

You will see each interest inside a pale purple pill.

Tags have no pill shape?

Make sure the selector contains a space between .tag-list and li. That space targets list items inside the tag list.

Help me fix interest tags that are not styled as pills.

Add the goal list rule below the tag item rule:

.goal-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #505675;
  line-height: 1.9;
}

Why keep the goal numbers?

The ordered list communicates progression across the learning goals. Extra line height keeps each goal distinct without adding more boxes.

Save styles.css.
Refresh the Integrated Browser preview.

You will see the numbered goals use softer text with more vertical space.

Goals look cramped?

Confirm that the ordered list uses class="goal-list" in index.html. Check that line-height: 1.9; is inside the matching CSS rule.

Help me fix the spacing and color in my goal list.

A quick color experiment shows how one declaration can change the mood of the whole page. You will restore the original value afterward so your final file matches the finished design.

Find color: #202544; inside the body rule.
Replace #202544 with #6c4ce3.
Save styles.css.
Refresh the Integrated Browser preview.

You will see the main text shift from deep blue to purple. That single value changes the visual tone across every element that inherits the body color.

Restore #202544 in the same color declaration.
Save styles.css.

✔️ Awesome, I've got everything!

Your complete stylesheet is saved. The page is ready for its final visual check.

ⓧ I'd like to double check the full code

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #202544;
  background: linear-gradient(135deg, #f6d5f7, #c3d8ff);
}

.profile-card {
  width: min(100%, 60rem);
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #ddd8f5;
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 3rem rgba(53, 42, 110, 0.18);
}

.hero {
  padding: 2rem;
  background: linear-gradient(135deg, #fff7ff, #eef3ff);
}

.avatar {
  width: 6rem;
  aspect-ratio: 1;
  margin-bottom: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background-color: #6c4ce3;
  font-size: 2rem;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: #6c4ce3;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  line-height: 1;
}

.intro {
  max-width: 38rem;
  margin: 1rem 0 1.5rem;
  color: #505675;
  font-size: 1.05rem;
  line-height: 1.7;
}

.button {
  display: inline-block;
  padding: 0.8rem 1rem;
  color: #ffffff;
  background-color: #6c4ce3;
  border-radius: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.button:hover,
.button:focus {
  background-color: #5032bd;
  transform: translateY(-2px);
}

.details {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.panel {
  padding: 1.25rem;
  background-color: #f8f7ff;
  border: 1px solid #e4e0fa;
  border-radius: 1rem;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.tag-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.tag-list li {
  padding: 0.5rem 0.75rem;
  color: #4d347f;
  background-color: #ece5ff;
  border-radius: 999px;
}

.goal-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #505675;
  line-height: 1.9;
}

.footer {
  padding: 0 1.5rem 1.5rem;
  color: #6d718b;
  text-align: center;
}

.footer p {
  margin: 0;
}

How to compare your stylesheet

Compare each selector in order. Check that every opening brace has a matching closing brace.

Before the final refresh, which parts of the plain HTML page do you expect to look most different?

Save index.html.
Save styles.css.
Refresh the Integrated Browser preview.

You will see a gradient background, a white profile card, a circular initials avatar, a purple button, interest tags, and two stacked panels. The content remains readable without horizontal scrolling.

That is a major visual leap: your profile now has hierarchy, spacing, and personality while keeping the HTML content intact.

Your narrow-screen design is polished and complete. Next, you will use the available space on wider screens by introducing a responsive multi-column layout.

Make the Layout Responsive

Your profile now looks polished in the Visual Studio Code Integrated Browser. A site also needs to stay readable as the browser width changes.

You are about to test how the mobile-first layout uses extra room. That evidence will guide a wide-screen layout that preserves the narrow view.

In this step, get ready to:

Expose the current layout's wide-screen limitation.
Add responsive rules for wider previews.
Verify the layout at narrow and wide sizes.

Test the wide-screen layout

A mobile-first layout starts with CSS rules that work on narrow screens. Testing those rules at a wider size reveals how well they use extra space.

Before you resize the preview, do you think the page will use the extra width or keep its current arrangement?

Drag the right edge of the Integrated Browser preview outward until the profile card reaches its widest size.

You will see the avatar, introduction, interests, and goals remain in one vertical stack. The unused horizontal space is the intended limitation for this test.

What did this test prove?

The base styles give narrow screens a clear reading order. Wider screens need an additional layout rule to make better use of the available space.

Add the wide-screen breakpoint

A media query applies a group of CSS rules only when its condition is met. This breakpoint activates when the preview reaches 44rem wide.

Switch back to the open styles.css tab.
Scroll below the existing .footer p rule.
Add the responsive layout by pasting this code:

@media screen and (width >= 44rem) {
  .hero {
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
    align-items: center;
  }

  .avatar {
    width: 8rem;
    margin-bottom: 0;
    justify-self: center;
  }

  .details {
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
  }
}

What does this CSS do?

The @media screen and (width >= 44rem) condition waits until the preview reaches the breakpoint before applying these rules.
The .hero rule uses CSS Grid to place the avatar beside the introduction.
The 1fr 2fr columns give the introduction twice as much space as the avatar area.
The .avatar rule enlarges the circle to 8rem. It also centers the circle within its column.
The .details rule places the two panels in equal columns.

Save styles.css.

Before you refresh, which sections do you expect to move into columns?

Refresh index.html in the wide Integrated Browser preview.

You should see the avatar beside the introduction. The interests panel should sit beside the goals panel.

That is the key layout change working. Your profile now uses the extra width while keeping its original visual style.

Still seeing a stacked layout?

Confirm that you saved styles.css before refreshing the preview.
Check that the media query appears after the closing brace for the .footer p rule.
Widen the Integrated Browser preview beyond 44rem.

Help me compare my responsive CSS with the expected media query.

✔️ Awesome, I've got everything!

Your responsive rules are saved. Continue to the final resize check.

ⓧ I'd like to double check the full code

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My Tech Launchpad</title>
    <link href="styles.css" rel="stylesheet" />
  </head>
  <body>
    <main class="profile-card">
      <header class="hero">
        <div class="avatar" aria-hidden="true">YN</div>
        <div class="hero-copy">
          <p class="eyebrow">Hello, tech world</p>
          <h1>Your Name</h1>
          <p class="intro">
            I'm beginning my tech journey by learning how websites are structured,
            styled, and shared with the world.
          </p>
          <a class="button" href="#goals">See what I'm learning</a>
        </div>
      </header>

      <div class="details">
        <section class="panel">
          <h2>What I enjoy</h2>
          <ul class="tag-list">
            <li>Creative projects</li>
            <li>Solving problems</li>
            <li>Learning new skills</li>
          </ul>
        </section>

        <section class="panel" id="goals">
          <h2>My first goals</h2>
          <ol class="goal-list">
            <li>Build a webpage</li>
            <li>Understand HTML and CSS</li>
            <li>Share a live project</li>
          </ol>
        </section>
      </div>

      <footer class="footer">
        <p>Built with HTML and CSS.</p>
      </footer>
    </main>
  </body>
</html>

What should match in the HTML?

Your index.html file stays unchanged in this step. Its hero and details classes give the new CSS rules elements to arrange.

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 1.5rem;
  display: grid;
  place-items: center;
  font-family: Arial, Helvetica, sans-serif;
  color: #202544;
  background: linear-gradient(135deg, #f6d5f7, #c3d8ff);
}

.profile-card {
  width: min(100%, 60rem);
  overflow: hidden;
  background-color: #ffffff;
  border: 1px solid #ddd8f5;
  border-radius: 1.5rem;
  box-shadow: 0 1.5rem 3rem rgba(53, 42, 110, 0.18);
}

.hero {
  padding: 2rem;
  background: linear-gradient(135deg, #fff7ff, #eef3ff);
}

.avatar {
  width: 6rem;
  aspect-ratio: 1;
  margin-bottom: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background-color: #6c4ce3;
  font-size: 2rem;
  font-weight: 700;
}

.eyebrow {
  margin: 0 0 0.5rem;
  color: #6c4ce3;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12rem;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 4.5rem);
  line-height: 1;
}

.intro {
  max-width: 38rem;
  margin: 1rem 0 1.5rem;
  color: #505675;
  font-size: 1.05rem;
  line-height: 1.7;
}

.button {
  display: inline-block;
  padding: 0.8rem 1rem;
  color: #ffffff;
  background-color: #6c4ce3;
  border-radius: 0.75rem;
  font-weight: 700;
  text-decoration: none;
  transition: background-color 160ms ease, transform 160ms ease;
}

.button:hover,
.button:focus {
  background-color: #5032bd;
  transform: translateY(-2px);
}

.details {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
}

.panel {
  padding: 1.25rem;
  background-color: #f8f7ff;
  border: 1px solid #e4e0fa;
  border-radius: 1rem;
}

h2 {
  margin: 0 0 1rem;
  font-size: 1.2rem;
}

.tag-list {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
}

.tag-list li {
  padding: 0.5rem 0.75rem;
  color: #4d347f;
  background-color: #ece5ff;
  border-radius: 999px;
}

.goal-list {
  margin: 0;
  padding-left: 1.25rem;
  color: #505675;
  line-height: 1.9;
}

.footer {
  padding: 0 1.5rem 1.5rem;
  color: #6d718b;
  text-align: center;
}

.footer p {
  margin: 0;
}

@media screen and (width >= 44rem) {
  .hero {
    padding: 3rem;
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 2rem;
    align-items: center;
  }

  .avatar {
    width: 8rem;
    margin-bottom: 0;
    justify-self: center;
  }

  .details {
    grid-template-columns: 1fr 1fr;
    padding: 2rem;
  }
}

What should match in the CSS?

Your base styles should remain intact. The media query should appear at the end of styles.css with rules for .hero, .avatar, and .details.

Check both responsive layouts

Responsive design keeps the same content usable across different viewport widths. Your final check confirms that the breakpoint changes the arrangement without creating horizontal scrolling.

Before you resize again, which elements do you expect to switch position as you cross the breakpoint?

Drag the Integrated Browser preview slowly back and forth across the 44rem breakpoint.

Below the breakpoint, you should see the hero content in one column. The two detail panels should also stack.

Above the breakpoint, you should see the avatar beside the introduction. The two detail panels should form equal columns.

Inspect the bottom edge of the preview at both widths for a horizontal scrollbar.

You should see no horizontal scrollbar at either width. The text, tags, button, and panels should remain readable throughout the resize.

That is your responsive layout working: the profile stays readable while it uses wider space well. Next, you will publish the finished page with GitHub Pages so other people can open it.

Publish the Page with GitHub Pages

Your About Me page now adapts cleanly to narrow and wide screens. The finished page still lives only on your Mac, so other people cannot open it from a link.

In this step, you will store your finished files in a public GitHub repository. GitHub Pages will turn those files into a shareable website.

In this step, get ready to:

Create a public repository for your About Me page.
Commit copies of index.html and styles.css through the GitHub web editor.
Deploy the responsive page as a live GitHub Pages site.

Create a public repository

A repository holds your project files with a history of their committed versions. Adding a README creates the initial branch that GitHub Pages can publish from.

Your Site Will Be Public

GitHub Free includes GitHub Pages for public repositories. This publishing path costs $0.

Anyone can view the repository or website after publication. Keep addresses, phone numbers, passwords, tokens, credentials, or other sensitive information out of both files.

Open GitHub in your web browser.
Sign in to your GitHub account.
Open the repository creation menu in GitHub's top-right corner.
Select New repository.
Choose your account from the Owner dropdown.
Enter about-me-launchpad in the repository name field.
Select Public in the visibility section.
Toggle Add README to On.

Select Create repository.

GitHub opens the new public repository with its README on the default branch. That repository is now the publishing home for your page.

Commit the local files

The repository needs the same two files that power your local preview. Each commit records a saved version of one file on the repository's default branch.

Why Use the Web Editor?

The GitHub web editor lets you publish without relying on a local Git installation. The Commit changes action adds each file to the repository history.

Switch back to Visual Studio Code.
Select index.html in the Explorer sidebar.
Copy the entire contents of index.html.
Return to the GitHub repository in your browser.
Select Add file.
Select Create new file.
Enter index.html as the filename.
Paste the copied HTML into the file editor.

The GitHub editor should now contain the same complete HTML document as your local file.

Select Commit changes....
Enter Add the About Me page as the commit message.
Choose the current branch option.
Select Commit changes.

Your repository now lists index.html beside the README. Your page structure is safely committed.

Switch back to Visual Studio Code.
Select styles.css in the Explorer sidebar.
Copy the entire contents of styles.css.
Return to the GitHub repository in your browser.
Select Add file.
Select Create new file.
Enter styles.css as the filename.
Paste the copied CSS into the file editor.

The GitHub editor should now contain every base style plus the responsive 44rem media query.

Select Commit changes....
Enter Add responsive page styles as the commit message.
Choose the current branch option.
Select Commit changes.

The repository now lists the README, index.html, and styles.css on its default branch. Both parts of your responsive page are ready for deployment.

Seeing Propose Changes?

Choose the current branch option if GitHub offers it.
Merge the proposed change into the default branch if GitHub requires a separate branch.
Confirm that both project files appear on the default branch before continuing.

Help me get my project files onto the repository's default branch.

Deploy the site with GitHub Pages

GitHub Pages looks for an entry file at the top level of the selected publishing folder. Your top-level index.html file gives it the page to open.

Select Settings in the repository navigation.
Select Pages in the left sidebar.
Find the Build and deployment section.
Select Deploy from a branch from the Source menu.
Select the repository's default branch from the branch menu.
Select the / root folder from the folder menu.
Select Save.

GitHub Pages now starts deploying the files from your default branch. The deployment can take up to 10 minutes, so a short wait here is expected.

Allow up to 10 minutes for the first deployment to finish.
Return to the repository's Pages area after the deployment finishes.

Before you select Visit site, do you expect the public page to respond to browser width in the same way as your local preview?

Select Visit site under GitHub Pages.
Resize the public website to a narrow browser width.
Widen the public website beyond 44rem.

You will see the same gradient profile card from your local preview. At widths above 44rem, the hero switches to two columns.

The details area also switches to two columns. At narrow widths, the content returns to one column without horizontal scrolling.

Visit Site Is Not Available?

Refresh the Pages area after the 10-minute deployment window.
Confirm that Source shows Deploy from a branch.
Set the branch menu to the repository's default branch.
Set the folder menu to the / root folder.

Help me troubleshoot my GitHub Pages deployment.

You have turned two local files into a public responsive website. Your About Me page now has a live link you can open and share.

Secret mission

Add a First Project Showcase

Your live profile already tells visitors who you are. Add a responsive showcase that presents the page itself as your first completed project. Its facts will stack on narrow screens and form three columns on wide screens.

Clean Up Your Resources

The planned path costs $0 on GitHub Free. Choose whether to keep the resources, unpublish the website for now, or delete everything.

Your Published Work Is Public

Your public repository and GitHub Pages site are available on the internet. Personal contact details and credentials do not belong in either resource.

Resources you used:

The local about-me-launchpad folder containing index.html and styles.css.
The public about-me-launchpad GitHub repository containing the page source.
The live GitHub Pages deployment connected to the repository.

Keep everything running

No action is needed. Choose this option if you want your About Me page to stay online and shareable.

Leave the public about-me-launchpad repository unchanged.
Keep the GitHub Pages deployment published.
Keep the local about-me-launchpad folder for future edits.

Pause - I'll come back to this later

Pausing means unpublishing the website while preserving your source files. The repository remains public because the free GitHub Pages path uses a public repository.

Switch back to the public about-me-launchpad repository on GitHub.
Select Settings.
Select Pages.
Open the menu beside Your site is live at.
Select Unpublish site.

The current deployment is now removed. Your repository contents and local files remain available for your next editing session.

Delete - I don't want to use this again

Removing all project resources is destructive. The confirmation screens give you a final chance to stop.

Repository Deletion Can Be Permanent

Some deleted repositories can be restored within 90 days. Eligibility varies. Treat the deletion as permanent.

Locate the local about-me-launchpad folder on your Mac.
Delete the about-me-launchpad folder from your Mac.
Confirm that about-me-launchpad no longer appears where you saved it.

Your local project copy is now gone from your Mac.

Switch back to the public about-me-launchpad repository on GitHub.
Select Settings.
Scroll to Danger Zone.
Select Delete this repository.
Complete the confirmation steps.
Enter about-me-launchpad when GitHub asks for the repository name.
Select Delete this repository to confirm the deletion.

The public repository is now deleted.

Visit the GitHub Pages address from earlier to verify that the website is unavailable.

That's the cleanup complete. Your local folder, public repository, and live website are gone.

Nice Work!

You did it! Your personalized About Me page now lives online as a public website.

You've learned how to:

Build a clear page with HTML headings, sections, lists, and an internal link.
Use CSS selectors, the box model, Grid, and a breakpoint to turn a plain document into a responsive profile.
Publish a public website with GitHub Pages from source stored in a GitHub repository.
Secret Mission: Extended the live site with a responsive first-project showcase. Its facts stack on narrow screens before forming three columns on wide screens.

Ready to quiz yourself?