Build your first project page

A project page is more useful than a “Hello, world” exercise: it gives you somewhere to explain what you built, show the code, and share a link. You will make a complete page with an example project. Replace every example with true information before publishing it.

The result: a page that reads well on desktop and phone, with an introduction, a project entry, and a contact link. Publishing with GitHub Pages is optional. You can complete the entire exercise locally first.

1. Prepare your folder

Create a folder named my-project-page with two files inside: index.html and style.css. Keep them side by side. Open the folder in your text editor.

index.html contains the content and structure. style.css controls its appearance. You only need a browser to check the result: open index.html from your folder.

2. Build the HTML page

Copy this into index.html. Text in square brackets and the example.com address are examples to replace. Do not publish made-up experience or a private address.

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="A page to share my projects." />
  <title>[Your name] — Projects</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="site-header">
    <a class="brand" href="#home">[Your name]</a>
    <nav aria-label="Main navigation">
      <a href="#projects">Projects</a>
      <a href="#contact">Contact</a>
    </nav>
  </header>

  <main id="home">
    <section class="intro" aria-labelledby="intro-title">
      <p class="label">My project page</p>
      <h1 id="intro-title">Hi, I’m [Your name].</h1>
      <p>[Say what you are learning and what you like to build.]</p>
    </section>

    <section class="projects" id="projects" aria-labelledby="projects-title">
      <h2 id="projects-title">A project to explore</h2>
      <article class="project">
        <div>
          <p class="label">Project 01</p>
          <h3>[The real name of your project]</h3>
          <p>[Explain in two sentences what it does and what you built.]</p>
        </div>
        <a href="https://example.com/">View the project ↗</a>
      </article>
    </section>
  </main>

  <footer id="contact">
    <p>Have a question about my project?</p>
    <a href="mailto:hello@example.com">Contact me</a>
  </footer>

</body>
</html>

The <header>, <main>, and <footer> elements describe the page’s main regions. Headings follow the order <h1>, <h2>, <h3>. The #projects and #contact links jump to sections with matching IDs.

3. Add a flexible layout

Copy this into style.css. It starts with one column, then uses two when there is room. You can change the colors after checking that the text remains readable.

style.css

:root {
font-family: system-ui, sans-serif;
color: #1b1b1b;
background: #faf7f0;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
a:focus-visible { outline: 3px solid #a32f12; outline-offset: 4px; }

.site-header, main, footer {
width: min(100% - 2rem, 68rem);
margin-inline: auto;
}
.site-header {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1.5rem;
}
.brand { font-size: 1.35rem; font-weight: 800; text-decoration: none; }
nav { display: flex; gap: 1.25rem; }

.intro { padding-block: clamp(4rem, 10vw, 8rem); }
.label { color: #a32f12; font-size: .85rem; font-weight: 700; }
h1 { font-size: clamp(2.7rem, 8vw, 5.5rem); line-height: 1.05; margin: .8rem 0; }
.intro > p:last-child { font-size: 1.2rem; line-height: 1.55; max-width: 55ch; }
.projects { padding-bottom: 5rem; }
h2 { font-size: clamp(2rem, 5vw, 3rem); }
.project {
background: #fff;
border-top: 4px solid #ed683d;
display: grid;
gap: 2rem;
padding: clamp(1.5rem, 4vw, 3rem);
}
.project h3 { font-size: 1.7rem; margin: .5rem 0; }
.project p { line-height: 1.6; max-width: 50ch; }
.project a { align-self: end; font-weight: 700; }
footer { border-top: 1px solid #d9d1c6; padding-block: 2rem 4rem; }

@media (min-width: 44rem) {
.project { grid-template-columns: 1fr auto; }
}

Save both files and refresh index.html in your browser. Make the window narrow: the text should remain readable and the project entry should return to one column. The viewport meta tag prevents a phone from shrinking the whole page; the @media rule changes the layout when there is enough room.

4. Replace the examples with your real work

Check each part before sharing the page:

Replace [Your name] with the name you choose to make public.
Describe a project you actually made, even a small one: what it does, what you built, and what you learned. Do not add numbers or outcomes you cannot verify.
Replace https://example.com/ with the real URL of your project or repository. If it is not public, remove the “View the project” link.
Replace hello@example.com with an address you are comfortable publishing, or remove the contact section. Do not add a private phone number or other information you do not want to expose.

You can now add a second <article> inside the projects section. Keep one <h3> and a distinct description for each project.

5. Check before publishing

Use both your mouse and the Tab key. Links should be reachable by keyboard and the focus outline visible. Click “Projects” and “Contact”: each should go to the right place. Also check that no text overflows when the window is narrow.

If the page has no styling, confirm that style.css is beside index.html and its name exactly matches <link href="style.css">. If a link goes to the wrong place, check its href and the target section’s id.

On GitHub Free, GitHub Pages publishes from a public repository. Make a new public repository for this exercise; do not expose a private repository that contains other files. Never add a key, password, or information you want to keep private.

Create a public repository on GitHub and add index.html and style.css at its root.
Open Settings → Pages in that repository.
Under Build and deployment, choose Deploy from a branch, then the main branch and /(root) folder. Save.
Use Visit site on the same page to open the published URL. Publication can take a few minutes.

index.html must be at the selected root. Since style.css uses a relative path, it must remain beside it. If the published page returns 404, check the branch, source folder, and presence of index.html. If the CSS is missing, check the file name and capitalization.

Next step: add a real second project and explain in one sentence what you learned while building it. The page becomes interesting when it shows real work, rather than promising more than it contains.