Ready to take your website to the next level? In this section, you'll learn how to add your own images, customize colors and fonts with CSS, update navigation links, add social media connections, and much more! Use the sidebar menu to jump to any section.

Adding and Replacing Images

Images bring your website to life! Let's learn how to replace template images with your own photos.

Understanding Image References in HTML

In your HTML files, images are referenced like this:

Image Code Example
<img src="images/profile-photo.jpg" alt="My profile picture">

What this means:

Step 14: Finding Images to Replace

  1. Open your index.html (or other HTML files)
  2. Search for <img tags or look in sections like:
    • Profile/About section (your headshot)
    • Portfolio/Projects section (project screenshots)
    • Header/Hero section (background images)
  3. Make a list of all image filenames you need to replace:
    • Example: profile.jpg, project1.png, project2.png
Common Image Locations:
  • images/profile.jpg — Your headshot/profile photo
  • images/project1.png, images/project2.png — Portfolio screenshots
  • images/background.jpg — Header/banner background
  • images/logo.png — Your personal logo or branding

Step 15: Preparing Your Images

Before uploading, prep your images properly:

  1. Rename your files to match the HTML references:
    • If HTML says profile.jpg, name your photo profile.jpg
    • Use lowercase letters, no spaces (use hyphens instead)
    • Good: my-project.jpg
    • Bad: My Project.JPG
  2. Check file format:
    • If HTML says .jpg, your file must be .jpg (not .png)
    • If HTML says .png, your file must be .png
    • Common formats: .jpg, .jpeg, .png, .gif, .webp
  3. Optimize file size:
    • Large images slow down your website
    • Aim for under 500KB per image
    • Use tools like TinyPNG or Squoosh to compress
Critical Rules:
  • Filename in HTML and uploaded file MUST match EXACTLY
  • File extension (.jpg, .png) MUST match EXACTLY
  • Case-sensitive: Profile.jpg ≠ profile.jpg

Step 16a: Uploading Images to GitHub

  1. Go to your repository homepage (<> Code tab)
  2. In the file list, click on the images folder (or img folder)
  3. You'll see existing template images
  4. Look for the "Add file" button near the top right
  5. Click it and select "Upload files"
  6. Drag and drop your prepared image files, or click "choose your files"
  7. Add a commit message: "Added my personal images"
  8. Click "Commit changes"
Pro Tip: You can upload multiple images at once! Select all your images and drag them into the upload area together.

Step 16b: If Your Template Doesn't Have an Images Folder

Some templates don't come with an images folder. Here's how to create one:

  1. Go to your repository homepage (<> Code tab)
  2. Click "Add file" → "Create new file"
    3. Screenshot showing the add file button under < > Code tab to start creating a folder.
  3. In the filename box, type: images/placeholder.txt
    • The images/ part creates the folder
    • GitHub requires at least one file to create a folder
    Screenshot showing adding folder name and then / to add a folder< > Code tab to start creating a folder. Screenshot showing adding placeholder.txt to create the folder under < > Code tab to start creating a folder.
  4. In the file content area, type anything (like "This folder contains images")
  5. Click "Commit changes"
  6. Now go into the new images folder
    7. Screenshot showing the add file button under < > Code tab to start creating a folder.
  7. Click "Add file" → "Upload files" to add your images
    8. Screenshot showing the add file button under < > Code tab to start creating a folder.

Step 16c: Image Paths - With Folder vs Without Folder

The path in your HTML depends on where your images are stored:

If images are in a folder (e.g., images):

<img src="images/profile.jpg" alt="My profile picture">
<img src="images/project1.png" alt="Project screenshot">

If images are in the root folder (no folder):

<img src="profile.jpg" alt="My profile picture">
<img src="project1.png" alt="Project screenshot">
Important: The path in your HTML must match exactly where your file is located:
  • Image in images folder → use src="images/filename.jpg"
  • Image in img folder → use src="img/filename.jpg"
  • Image in root (no folder) → use src="filename.jpg"

What if I Want Different Image Names?

If you want to use your own image filenames instead of matching the template:

  1. Upload your image with your preferred name (e.g., my-photo.jpg)
  2. Go to your HTML file and edit the image reference:
    Change this:
    <img src="images/profile.jpg" alt="Profile">
    To this:
    <img src="images/my-photo.jpg" alt="Profile">
  3. Commit the HTML change
  4. Wait 2-3 minutes and check your live site!
Easier Method: It's simpler to just rename your images to match the HTML than to edit the HTML for every image. But both methods work!

Adding Documents (Resume, CV, Portfolio PDFs)

Want to make your resume downloadable on your website? Here's how!

Step 17: Preparing Your Documents

  1. Save your document as a PDF (most professional format)
  2. Name it appropriately: resume.pdf, cv.pdf, portfolio.pdf
  3. Use lowercase, no spaces in filename

Step 18: Uploading Documents

  1. Go to your repository homepage
  2. Look for a folder like files, documents, or assets
  3. If the folder exists, click into it
  4. Click "Add file" → "Upload files"
  5. Upload your PDF
  6. Commit changes

Step 18b: If Your Template Doesn't Have a Files Folder

You can either create a folder or upload directly to the root:

Option A: Create a files folder

  1. Go to your repository homepage (<> Code tab)
  2. Click "Add file" → "Create new file"
  3. In the filename box, type: files/placeholder.txt
    • The files/ part creates the folder
  4. In the file content area, type anything (like "This folder contains documents")
  5. Click "Commit changes"
  6. Now go into the new files folder and upload your PDF

Option B: Upload to root (no folder)

  1. Go to your repository homepage
  2. Click "Add file" → "Upload files"
  3. Upload your PDF directly
  4. Commit changes

Find or create a download link in your HTML:

If your PDF is in a folder (e.g., files):

<a href="files/resume.pdf" download>Download My Resume</a>

If your PDF is in the root folder (no folder):

<a href="resume.pdf" download>Download My Resume</a>

Breaking this down:

  • href="files/resume.pdf" or href="resume.pdf" — Path to your PDF file (must match where you uploaded it)
  • download — This attribute makes the browser download the file instead of opening it
  • Text between tags is what visitors see and click
Important: The path in your HTML must match exactly where your file is located:
  • PDF in files folder → use href="files/resume.pdf"
  • PDF in documents folder → use href="documents/resume.pdf"
  • PDF in root (no folder) → use href="resume.pdf"
Make it a Button: Add class="btn" to make it look like a button: 
<a href="files/resume.pdf" download class="btn">Download Resume</a>

Customizing Colors and Fonts (CSS Editing)

Want to change your website's colors to match your personal brand? CSS is where the magic happens!

Step 20: Finding Your CSS File

  1. Go to your repository homepage
  2. Look for files like:
    • style.css
    • styles.css
    • main.css
    • Or in a folder like css/style.css
  3. Click on the CSS file
  4. Click the pencil icon to edit

Step 21: Changing Colors

Colors in CSS are written in different formats:

Color Format Examples
/* Hex codes (most common) */
color: #3498db;  /* Blue */
color: #e74c3c;  /* Red */

/* RGB */
color: rgb(52, 152, 219);  /* Blue */

/* Color names */
color: blue;
color: red;

Common CSS Properties to Edit:

1. Background Colors:

body {
    background-color: #ffffff;  /* Change to your preferred background */
}

.header {
    background-color: #3498db;  /* Header background color */
}

2. Text Colors:

h1, h2, h3 {
    color: #2c3e50;  /* Heading colors */
}

p {
    color: #34495e;  /* Paragraph text color */
}

a {
    color: #3498db;  /* Link color */
}

3. Button Colors:

.btn {
    background-color: #3498db;  /* Button background */
    color: #ffffff;  /* Button text */
}

.btn:hover {
    background-color: #2980b9;  /* Button color when hovering */
}
Finding Colors: Use online color pickers to find your perfect colors:

Step 22: Changing Fonts

Want to use different fonts? Here's how:

Font Examples
/* System fonts (always work) */
font-family: Arial, sans-serif;
font-family: Georgia, serif;
font-family: 'Courier New', monospace;

/* Google Fonts (more options) */
font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;

To use Google Fonts:

  1. Go to Google Fonts
  2. Choose a font you like
  3. Click "Select this style"
  4. Copy the <link> code provided
  5. Paste it in the <head> section of your HTML
  6. Update your CSS with the font-family name
Safe CSS Changes:
  • Safe to change: colors, font-family, font-size
  • Be careful with: margins, padding, widths
  • ❌ Avoid changing: display, position, flexbox properties (unless you know CSS)

Your navigation menu helps visitors explore your website. Let's customize it!

Step 23: Understanding Navigation Code

Navigation Example
<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#contact">Contact</a>
</nav>

Types of Links:

1. Internal Page Links (one-page sites):

<a href="#about">About</a>  
<!-- Scrolls to an element with id="about" on the same page -->

2. Different Page Links (multi-page sites):

<a href="about.html">About</a>  
<!-- Goes to a different HTML file -->

3. External Links:

<a href="https://linkedin.com/in/yourname" target="_blank">LinkedIn</a>  
<!-- Opens external website in new tab -->
target="_blank": This attribute makes links open in a new tab. Always use it for external links so visitors don't leave your site completely!

To add a new menu item:

<nav>
    <a href="#home">Home</a>
    <a href="#about">About</a>
    <a href="#projects">Projects</a>
    <a href="#blog">Blog</a>  <!-- NEW ITEM -->
    <a href="#contact">Contact</a>
</nav>

To remove a menu item:

Simply delete the entire <a>...</a> line for that item.

Adding Social Media Links

Connect your website to your professional social media profiles!

Step 25: Finding Social Media Section

Look in your HTML for a section that might be called:

  • "Social Links"
  • "Connect" or "Find Me"
  • Often in the footer or contact section
Social Media Links Example
<div class="social-links">
    <a href="https://linkedin.com/in/yourname" target="_blank">LinkedIn</a>
    <a href="https://github.com/yourusername" target="_blank">GitHub</a>
    <a href="https://twitter.com/yourhandle" target="_blank">Twitter</a>
</div>

Step 26: Updating Your Links

  1. Replace placeholder URLs with your actual profile links
  2. Remove any social platforms you don't use (delete the entire <a>...</a> line)
  3. Make sure to keep target="_blank" so links open in new tabs
Pro Tip: Only include professional social media! For a portfolio/resume site, stick to:
  • LinkedIn (professional networking)
  • GitHub (if you're a developer)
  • Behance/Dribbble (if you're a designer)
  • Medium/Personal blog (if you write)
Skip personal platforms like Instagram or TikTok unless they're professionally relevant.

Amazing Work!

You've learned advanced customization:

  • Adding and replacing images properly
  • Uploading documents like resumes
  • Customizing colors and fonts with CSS
  • Editing navigation menus
  • Adding social media links

Your website is really coming together!

What's Next? In Part 4: Troubleshooting, you'll learn how to fix common problems, undo mistakes, and maintain your website for the long term.
Back to Part 2: Editing Continue to Part 4: Troubleshooting →

This tutorial was created for students in the Master of Arts in Educational Innovation, Technology, and Entrepreneurship (MEITE) program at UNC Chapel Hill School of Education.