Portfolio Setup, Hosting & GitHub Essentials

A hands-on workshop for ICT students

Friday, May 09, 2025
09:00 - 12:00 (3 hours)
NS1 & R14/15

Workshop Overview

Target Audience

First-Year and ECP students in ICT

Required

Laptop (if available)

Note

Basic computer skills required. No prior Git knowledge needed.

Schedule Overview

  • Introduction & Context (30 min)
  • Git & GitHub Essentials (60 min)
  • Portfolio Development (60 min)
  • Hosting & Wrap-up (30 min)
Why This Workshop Matters

This workshop bridges the gap between classroom theory and industry practice. You'll gain essential skills for showcasing your work professionally and collaborating effectively—two crucial abilities in today's tech industry that aren't typically covered in standard curriculum.

Welcome & Introduction (09:00 - 09:15)

  • Welcome address and introduction of mentors
  • Overview of workshop objectives and agenda
  • Quick participant introductions (by table/group)
  • Set up participant groups (3-4 students per group)
Why This Matters for Beginners

Starting with a clear introduction helps you understand:

  • Learning objectives - What skills you'll gain by the end
  • Workshop structure - How the day will flow
  • Peer connections - Who you'll collaborate with

Group formation is particularly important as tech careers involve significant teamwork and collaboration—you'll practice these skills throughout the workshop.

The Importance of Portfolios in Tech (09:15 - 09:30)

  • Why every tech student needs a portfolio
  • Examples of effective student portfolios
  • How portfolios help in job hunting and professional networking
  • Introduction to Git/GitHub and its importance in tech collaboration
Why This Matters for Beginners

This foundational knowledge provides critical context:

  • Career readiness - Portfolios are often more important than resumes in tech hiring
  • Skill demonstration - Shows what you can actually build, not just what you claim to know
  • Professional presence - Creates your digital identity in the tech community
  • Learning motivation - Understanding "why" makes the technical "how" more engaging

For beginners, seeing real examples helps visualize what you're working toward and sets realistic expectations.

Git & GitHub Setup (09:30 - 10:00)

  • Installing Git (pre-installation instructions sent beforehand)
  • Creating GitHub accounts
  • Configuring Git (username, email)
  • Understanding basic Git concepts (repositories, commits, branches)
  • Hands-on activity: Configuring Git and creating first repository
Why This Matters for Beginners

This technical foundation is crucial because:

  • Industry standard - Git is used by virtually every tech company
  • Version control - Prevents work loss and enables safe experimentation
  • GitHub profile - Functions as your coding resume and portfolio container
  • Practical setup - Gets you past the initial technical hurdles with support

Many beginners struggle with Git setup on their own. Having guided assistance removes this common barrier to entry.

Collaborative Git Workflow (10:00 - 10:30)

  • Introduction to collaborative Git workflows
  • Understanding branches, pull requests, and merges
  • Handling merge conflicts
  • Hands-on activity: Teams collaborate on a simple project
    • Each team member makes changes to different files
    • Pushing changes and resolving simple conflicts
Why This Matters for Beginners

This collaborative experience provides essential skills:

  • Team coordination - Reflects real-world development environments
  • Conflict resolution - Teaches how to handle overlapping changes
  • Branching strategy - Introduces safe ways to develop new features
  • Professional workflow - Mimics industry practices for code review and integration

Working through actual conflicts in a supportive environment builds confidence—something difficult to achieve through solo practice.

Break & Troubleshooting (10:30 - 10:45)

  • Break
  • One-on-one help with Git setup issues
  • Q&A session
Why This Matters for Beginners

Strategic breaks serve multiple purposes:

  • Mental reset - Prevents cognitive overload with new technical concepts
  • Personalized help - Addresses individual challenges before they become blockers
  • Peer learning - Encourages informal knowledge exchange among participants
  • Question opportunity - Creates space for questions students might hesitate to ask in front of everyone

For beginners especially, technical issues can quickly lead to frustration—this break ensures everyone can continue productively.

Portfolio Fundamentals (10:45 - 11:15)

  • Introduction to HTML and CSS basics
  • Understanding portfolio structure and components
  • Cloning the portfolio template repository
  • Walkthrough of template structure and customization points
Why This Matters for Beginners

This session bridges technical knowledge and practical application:

  • Web fundamentals - Provides just enough HTML/CSS to make meaningful changes
  • Structure understanding - Teaches how websites are organized
  • Template approach - Prevents "blank page paralysis" common with beginners
  • Immediate application - Allows you to apply Git skills to a real project immediately

Using a template is especially valuable for beginners—it provides professional structure while still allowing for personalization and learning.

Collaborative Portfolio Customization (11:15 - 11:45)

  • Teams work together to customize portfolio template using Git
  • Each team member is assigned specific sections to modify:
    • Team member 1: Header and navigation
    • Team member 2: About section and skills
    • Team member 3: Projects section
    • Team member 4: Contact section and footer
  • Practice Git workflow: commit, push, pull, merge
Why This Matters for Beginners

This hands-on session combines multiple critical skills:

  • Practical application - Applies Git concepts to a meaningful project
  • Division of labor - Teaches modular development approaches
  • Ownership and accountability - Each person has clear responsibilities
  • Workflow reinforcement - Builds muscle memory for Git operations

As a beginner, you'll experience the satisfaction of seeing your collaborative work come together into a polished final product—a powerful motivator for continued learning.

Hosting Your Portfolio & Wrap-up (11:45 - 12:00)

  • Introduction to GitHub Pages and other free hosting options
  • Demonstration of deploying the portfolio to GitHub Pages
  • Final Q&A session
  • Resources for further learning
  • Workshop feedback collection
Why This Matters for Beginners

The final session completes the practical journey:

  • Deployment skills - Teaches how to make your work publicly accessible
  • Immediate results - Provides the satisfaction of a live, shareable URL
  • Next steps - Offers clear pathways for continued learning
  • Feedback loop - Helps improve future workshops and reinforces your learning

For beginners, seeing your work live on the internet is incredibly empowering—it transforms abstract concepts into tangible results you can share with friends, family, and potential employers.

Collaborative Activities Structure

Activity 1: Git Basics (10:00 - 10:30)

  1. Form teams of 3-4 students
  2. One student creates a repository and adds team members as collaborators
  3. Each student clones the repository
  4. Each student creates a file with their name with brief introduction
  5. Commit and push changes
  6. Pull changes from teammates

Activity 2: Portfolio Customization (11:15 - 11:45)

  1. Teams clone the portfolio template repository
  2. Assign sections to each team member
  3. Create branches for each section
  4. Make modifications to assigned sections
  5. Commit and push changes to respective branches
  6. Create pull requests to merge changes into main branch
Why This Matters for Beginners

Structured activities provide essential learning scaffolding:

  • Clear steps - Break complex tasks into manageable pieces
  • Practical application - Reinforce theoretical concepts through hands-on practice
  • Built-in checkpoints - Allow mentors to verify progress and provide help
  • Collaborative learning - Encourages learning from peers, not just instructors

The progressive structure builds confidence gradually, ensuring beginners can successfully complete each step before moving to more complex tasks.

Tips for Participants

Before the Workshop

  • Create a GitHub account at github.com
  • Install Git on your laptop
  • Download a text editor (VS Code recommended)

During Collaboration

  • Communicate with your team about what files you're editing
  • Commit frequently with clear commit messages
  • Pull before you push to avoid conflicts
  • Ask mentors for help if you get stuck

After the Workshop

  • Continue customizing your portfolio
  • Update it regularly with new projects
  • Share your GitHub profile on your resume and LinkedIn
Why This Matters for Beginners

Clear guidelines prevent common beginner pitfalls:

  • Preparation - Ensures technical prerequisites don't derail your learning
  • Best practices - Establishes good habits from the start
  • Long-term value - Shows how workshop skills extend beyond the classroom
  • Proactive approach - Encourages asking for help rather than struggling silently

For beginners, knowing what's expected removes anxiety and allows you to focus on learning rather than wondering if you're "doing it right."

Resources Provided

Portfolio Template

GitHub repository with starter template for your portfolio website

Git Cheatsheet

Quick reference guide for essential Git commands

HTML/CSS Guide

Reference guide for HTML and CSS fundamentals

Hosting Platforms

List of free hosting options for your portfolio website

Workshop Slides

Digital slides covering all workshop topics

Why This Matters for Beginners

Resource access extends learning beyond the workshop:

  • Reference materials - Provide help when you're working independently
  • Starting point - Eliminate the intimidation of starting from scratch
  • Structured guidance - Offer step-by-step instructions for common tasks
  • Continued learning - Enable you to build on workshop foundations

As a beginner, having these resources means you won't be left on your own after the workshop ends—you'll have materials to refer to as you continue practicing and building your skills.

Thank You!

Portfolio Setup, Hosting & GitHub Essentials

A hands-on workshop for ICT students

mutinnovationlab@gmail.com
github.com/Jabulani00/portfolio-template

We hope you'll use these skills to build an impressive portfolio!

Slide 1 of 14