PRDV251: Creating Your Portfolio Splash Page

Now that you've set up your GitHub repo and dabbled a little with some basic HTML and CSS, let's dive in and start creating the first page of your portfolio that people will come to: The Welcome Page. In web development, when a welcome or entry page does not have any links or allow entry to the site, we call this a splash page. Read the following, follow the directions, and create a splash page that will later turn into the welcome page of your site.

In this course, you will build a website that will eventually become your personal or professional portfolio. To build the first version of your portfolio homepage, a basic splash page (a basic welcome and placeholder page that is commonly used in web development), you will use basic HTML structure and a small CSS file. You will practice headings, paragraphs, lists, links, images, and correct file paths, and also begin using special tags like <header> and <footer> to give your page more meaning.

What you'll use

HTML elements: <!doctype html>, html, head, meta, title, body, h1–h3, p, ul/ol + li, a, img, header, section, main, footer

CSS basics: external stylesheet linked with

<link rel="stylesheet" href="assets/css/style.css">

This is the next step after the <style> tag you used in the MDN Playground - now your CSS lives in its own file.

Before you start

You have your own copy of the course repository.
Open it in github.dev.
You should see:

```
project/
```
```
assets/css/style.css
```
```
assets/img/
```

Step 1 - Structure your homepage

Open project/index.html. Ensure the <head> includes:

<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>Your Name - Portfolio</title>

In <body>, replace <h1>Hello, world!</h1> with this structure, and replace the placeholder content with your content:

<header>
<h1>Your Name</h1>
<p>Short tagline about who you are</p>
</header>
<main>
  <section>
    <h2>About me</h2>
    <p>2–3 sentences about you</p>
    <ul>
      <li>One interest or skill</li>
      <li>Another interest or skill</li>
      <li>One goal for this course</li>
    </ul>
  </section>
  <section>
    <h2>Explore</h2>
    <p>Visit my favorite resource on the web</p>
    <a href="https://developer.mozilla.org/en-US/docs/Web/HTML">MDN: HTML</a>
  </section>
</main>
<footer>
  <p>© <span id="year"></span> Your Name</p>
</footer>

(We'll ignore the #year span for now-it's just a placeholder.)

Step 2 - Add one image with good alt text

Upload a headshot or logo to project/assets/img/

Keep it under ~400 KB.
Use lowercase file names and no spaces (e.g., profile.jpg).

Add your image near the About section: <img src="assets/img/profile.jpg" alt="Your Name smiling in front of a bookshelf">

Remember: alt text describes the image for anyone who can't see it - this supports accessibility and screen readers.

Step 3 - Link your stylesheet and add a tiny bit of style

Make sure project/assets/css/style.css exists.

In <head>, link it like this: <link rel="stylesheet" href="assets/css/style.css">

(This is called a relative path, meaning the browser finds your CSS file starting from your current folder.)

Open style.css and add these starter rules: html { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

body { margin: 2rem; line-height: 1.6; }

```
header h1 { margin: 0 0 .25rem; }
```

img { max-width: 200px; height: auto; display: block; margin: 1rem 0; }

```
a { text-decoration: underline; }
```

a:hover, a:focus { text-decoration: none; }

(We'll design the full layout later - for now, these rules keep things clean and readable.)

Step 4 - Commit and publish

Commit your changes with a clear message like: Add Unit 1 splash page structure, image, and basic styles (If using the GitHub editor, click Source Control → Commit.)
Publish:

Go to Settings → Pages.
Under Branch, select main.
Under Folder, choose /project.
Click Save.

Wait up to 2 minutes, then refresh to see your live site URL.

Check yourself (mini-rubric)

Page loads at your GitHub Pages URL.
Title shows your name in the browser tab.
One <h1> on the page, with logical <h2> subheadings.
At least one paragraph and one list.
One working external link to the MDN HTML page.
One image with meaningful alt text.
CSS file is linked with a relative path: assets/css/style.css.
No broken paths; file names are lowercase with no spaces.

Common fixes

Image not showing? Confirm it's in project/assets/img/ and that spelling and capitalization match exactly in src.
CSS not loading? Check the <link> path and make sure the file exists in assets/css/style.css.
404 page? Re-commit, verify Pages is set to /project, wait 30–60 seconds, and refresh.

Looking ahead

In Unit 2, you'll add site-wide navigation and create about.html and contact.html, using the same file and folder structure. Your splash page becomes the foundation of your full, multi-page portfolio.

Source: Khalil Abdullah and Saylor University
This work is licensed under a Creative Commons Attribution 4.0 License.