Designing, Developing, & Deploying Your Portfolio Part III: Building with Bootstrap & Deploying with GitHub Pages
In this series:
- Part I: Research & Planning
- Part II: Wireframing in Figma
- Part III: Building with Bootstrap & Deploying with GitHub pages
(Note: We decided to combine what was originally Part III and IV into one part.)
Contents
A. Building with Bootstrap
B. Deploying with GitHub Pages
C. Complete HTML/CSS Written in this Tutorial
A. Building with Bootstrap
- Introduction
- Getting Started
- Setting up the Layout & Building a Hero Banner
- Building a Project Gallery
- Building a Navbar
1. Introduction
So, you’ve done some research & planning, as well as some wireframing for your portfolio. Now you’re ready to build your portfolio and get it out there for people to see!
This tutorial is aimed at web design beginners but it’s not an HTML/CSS tutorial. We’ll be showing you how you can use a framework called Bootstrap to quickly and easily build a highly customizable portfolio.
Based off the wireframe in Part II, we went ahead and built a portfolio for Alma Mater at design-innovation-illinois.github.io. This tutorial will show you how to start building a similar site, but we didn’t want to overcomplicate things. If you want to see the exact markup for Alma’s portfolio, check out the GitHub Page. If you get stuck or have questions, please comment below to get help!
Skip ahead to 2. Getting Started if you’re already familiar with HTML/CSS.
1a. Really Quick Intro to HTML
Check it out, here’s what HTML looks like:
<!DOCTYPE html>
<html>
<head>
<title>Cool Portfolio</title>
</head>
<body>
<div class="example">
<p>I have a cool portfolio.</p>
<a href="medium.com">Here's a link to Medium</a>
</div>
</body>
</html>HTML is composed of elements (e.g., the paragraph element) which are defined by tags (e.g., <p>). Throw text in between <p> and </p> to make it show up on your web page. Things like class and href are called attributes, and they take values.
Writing HTML is all about writing these tags, attributes, and values, and arranging them in vaguely the way you want them to look.
How do you know which tags, attributes, and values to write? Probably through a combination of: (a) learning the basics bottom-up from a tutorial, (b) learning top-down via “Inspect Element” on portfolios and other web pages you fancy, and (c) Googling how to do things.
With Bootstrap, you can copy and paste a bunch of pre-written HTML to make your life easier and help you learn by doing.
1b. Really Quick Intro to CSS & Bootstrap
Alright, here’s a taste of CSS:
p {
color: #13294B;
}
.example {
background-color: #E84A27;
}The first three lines will make every <p> element the color, #13294B, aka U of I Blue. The next three lines will give every element with class “example” a background of Urbana Orange. Obviously, you can do a lot more with CSS than we’ve mentioned — this is just to get you familiar with the syntax.
The framework Bootstrap is wonderful, because some other talented people wrote a bunch of CSS and Javascript, and they want you to use it — for free.
Bootstrap has several Components, like buttons and navbars, which are groupings of elements that you can copy and paste. Bootstrap also has Utilities, which are classes that you can add to elements to style them.
2. Getting Started
You can download a free editor like Atom or Notepad++ if you don’t have an editor already. Mac users should be able to use TextEdit (how-to) to write HTML.
(If you really don’t want to download an editor, you can check out Repl.it or Glitch, but usage of these platforms aren’t within the scope of this tutorial.)
Now, let’s make a new folder somewhere and call it something like AlmaPortfolio. In the folder, we’ll create a file called index.html (you have to name it this) and a file called style.css.
We’ll also create an HTML file for each project we want to showcase on our portfolio.
AlmaPortfolio
/index.html
/style.css
/project1.html
/project2.htmlNow, we’ll go copy Bootstrap’s starter template.
Open up index.html in your editor, paste in the starter template, and save the file. To see what it would look like, paste the file address in your browser.
We can delete the line in index.html that says <h1>Hello, world!</h1>. Also, we’ll change the text in between the <title> tags from Hello, world! to the title of our portfolio, e.g., Alma Projects. This text is what appears on the browser tab.
4. Setting up the Site Layout & Building a Hero Banner
4a. Setting up the Site Layout
We can use Bootstrap to lay out a responsive grid for our portfolio.
To lay out our grid, we’ll set up three divs with class “row” inside a div with class “container” right after the opening <body> tag (more about Bootstrap’s layout system).
Our “row” divs are empty for now, but we’ll begin to fill out the first two in this tutorial. Notice that each row has a different id attribute. This will let us link each row to a link in the navbar later.
<body>
<div class="container">
<div class="row py-5" id="home">
</div>
<div class="row py-5" id="work">
</div>
<div class="row py-5" id="about">
</div>
</div>You may notice that each div within the “container” div has two classes: “row” and “py-5”. The class “py-5” leverages Bootstrap’s Utilities and adds padding to the top and bottom of each row. This is a stylistic choice; alter this to py-4, py-3, etc. to reduce the padding, or simply delete py-5 for no padding.
4b. Building a Hero Banner
Now, we’ll set up the layout for the hero banner within the “home” row. This will give us two columns in the “home” row.
<div class="row py-5" id="home">
<div class="col-lg">
</div>
<div class="col-lg">
</div>
</div>Then, we’ll add an image to the leftside column and a catchy headline on the rightside column (see the HTML below).
We’ll specify the address of our image by giving it as a value to the “src” attribute. If you put the image in the same folder as index.html, the value should simply be the name and extension of the image, e.g., “alma-profile.png”.
We’ll give one <p> element a “class” attribute with value, “hero-primary”. This will let us style it as we please in our CSS file. We’ll give the other paragraph element the class, “text-secondary”. This leverages Bootstrap’s utilities, and will automatically give the text a muted look.
Here’s what we’ve added to the “home” row in index.html:
<div class="row py-5" id="home">
<div class="col-lg">
<img src="images/alma-profile.png" width="100%">
</div>
<div class="col-lg">
<p class="hero-primary">
Bronze on the outside, designer at heart.
</p>
<p class="text-secondary">
Inspiring others through design since 1929. Roots in Champaign-Urbana, Illinois.
</p>
</div>
</div>To make our primary text nice and big, we’ll change its font size to 2.5rem in our stylesheet (the CSS file). (Note: “rem” is a relative CSS unit.)
So, this is what we’ll put in style.css:
.hero-primary {
font-size: 2.5rem;
}Here’s a reminder that all the HTML and CSS we mention in this tutorial is in one place at the bottom of this article!
5. Building a Project Gallery
To start making our project gallery, we’ll nest another container in the “work” row (see HTML below). In this container, we can add as many rows as we see fit to showcase our project. Each column (i.e., div with class “col-lg”) will soon contain a project image nested inside an <a> element (a link).
If you’d like, you can put four columns in one row, two in the next, and three in another — this is a stylistic choice. Intuitively, adding more columns to a row will decrease the size of the image in that column.
<div class="row py-5" id="work">
<div class="container">
<div class="row">
<div class="col-lg">
</div>
<div class="col-lg">
</div>
</div>
</div>
</div>Now, we’ll add an anchor element (link) to each column and, within it, an eye-catching image of the project in its respective column. By providing “project1.html” as the value for the “href” attribute, we’re saying that when the image is clicked, it will take the user to the page that we’ve made for that project.
<div class="row py-5" id="work">
<div class="container">
<div class="row">
<div class="col-lg">
<a href="project1.html">
<img class="project" src="mockup.png" width="100%">
</a>
</div>
<div class="col-lg">
<a href="project2.html">
<img class="project" src="mockup2.png" width="100%">
</a>
</div>
</div>
</div>
</div>Of course there’s nothing in project1.html, yet. Here’s what we recommend for creating HTML files for each project: copy and paste everything except for what’s inside <body></body>. Then, add a Breadcrumb component, so users can navigate back to the home page. Then, of course, add relevant images and text regarding the project.
Here’s a starter sample for the body of project1.html:
<body>
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb py-3">
<li class="breadcrumb-item"><a href="index.html">Alma Mater</a></li>
<li class="breadcrumb-item"><a href="index.html#work">Work</a></li>
<li class="breadcrumb-item active" aria-current="page">Project1</li>
</ol>
</nav>
<div class="row">
<div class="col-lg">
<img src="images/mockup.png" width="100%">
</div>
<div class="col-lg">
<h1>Project1</h1>
<h2>An exploration of lorem ipsum dolor sit amet</h2>
</div>
</div>
</div>Notice that we’ve added the class “project” to each image in index.html. For some flair, we can add a transparent border that turns pink when a cursor hovers over it.
To do this, we’ll add the following to style.css:
.project {
border: 5px solid transparent;
transition: .5s ease-out;
}
.project:hover {
border: 5px solid #FF6666;
}Now we have a pretty project gallery!
3. Building a Navbar
The navbar above was produced by copying Bootstrap’s Nav component and changing the text and href values for the links (and changing “bg-light” to “bg-white”).
Here’s the updated markup, which should go right after the opening <body> tag in index.html:
<body> <nav class="navbar navbar-expand-lg navbar-light bg-white py-5">
<div class="container">
<a class="navbar-brand" href="#home">Alma Mater</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button> <div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="ml-3 nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="ml-3 nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="ml-3 nav-link" href="#">About</a>
</li>
</ul>
</div> </div>
</nav> <div class="container">
And now you have a simple portfolio, ready to be customized and deployed!
B. Deploying with GitHub pages
- Getting started
- Setting up your host repository
- Activating a custom domain
1. Getting started
GitHub? For some of you, this may be your first time hearing about GitHub, and that’s completely okay! GitHub is primarily a tool to help software developers maintain and develop their code. For our use case, we’ll be utilizing GitHub Pages, an easy and free way to host your website and get it running live! Make sure to create a Github account if you don’t already have one to be able to upload your website’s code and host it.
2. Setting up your host repository
After performing the due diligence of bootstrapping and coding out your envisioned portfolio, now it’s time to get it live. At a summarized high level, you will upload your code to GitHub with some specifications telling it to host and deploy your website, pointing to a certain domain.
First, create a new repository by clicking the ‘New’ option under the Repository tab, naming it your-github-username-here.github.io, with attention to that it must exactly have this name with your username exactly as is.
After making the repository, upload the all of the files for your website from your computer into the repository. You can either do this by manually uploading from the GitHub web UI ‘Upload files’ button below(easier & recommended in getting started) or by using the command line.
Make sure to transfer your files exactly in the same file and folder organization as when working on your local computer. For example, if your local folder for your personal portfolio is called ‘PersonalPortfolio’, you would upload the contents of that folder directly into this new GitHub repository but not the local folder ‘PersonalPortfolio’ itself. The homepage HTML of your website must be named ‘index.html’ in the Github repository. After all files are uploaded, click the ‘Commit changes’ button and you should see your website up within 10 minutes!
3. Activating a custom domain
After successfully completing your work in the last section, you may now set your website to a custom url! Please note this step is optional, as your website should already be up at your-github-username@github.io, this step should just be for anyone who wants to host their website at a custom domain such as your-name.com. Do note to purchase your personal domain for a year will typically cost around $10–20.
First, go and purchase your desired domain on GoDaddy. Then, follow the exact steps at this tutorial — don’t worry about understanding each step! After following these steps, wait a few minutes and your website should be up at the custom domain!
We do realize that these steps can be confusing and foreign, so we’ve attached several alternate tutorials in setting up your website with Github Pages below. Feel free to contact us below for any troubleshooting or thoughts!
Alternate guides/References:
C. Complete HTML/CSS Written in This Tutorial
- index.html
- style.css
- project1.html
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>AlmaPortfolio</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-white py-5">
<div class="container">
<a class="navbar-brand" href="#home">Alma Mater</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="ml-3 nav-link" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="ml-3 nav-link" href="#work">Work</a>
</li>
<li class="nav-item">
<a class="ml-3 nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="container">
<div id="home" class="row py-5">
<div class="col-lg">
<img src="alma.jpg" width="100%">
</div>
<div class="col-lg">
<p class="hero-primary">
Bronze on the outside, designer at heart.
</p>
<p class="text-secondary">
Inspiring others through design since 1929. Roots in Champaign-Urbana, Illinois.
</div>
</div>
<div class="row py-5" id="work">
<div class="container">
<div class="row">
<div class="col-md">
<a href="project1.html">
<img class="project" src="mockup.png" width="100%">
</a>
</div>
<div class="col-md">
<a href="project2.html">
<img class="project" src="mockup2.png" width="100%">
</a>
</div>
</div>
</div>
</div>
<div class="row" id="about">
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
</html>
style.css
.hero-primary {
font-size: 2.5rem;
}
.project {
border: 5px solid transparent;
transition: .5s ease-out;
}
.project:hover {
border: 5px solid #FF6666;
}project1.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&&family=Roboto+Mono:wght@400" rel="stylesheet"><title>Alma Mater</title>
</head>
<body>
<div class="container">
<nav aria-label="breadcrumb">
<ol class="breadcrumb py-3">
<li class="breadcrumb-item"><a href="index.html">Alma Mater</a></li>
<li class="breadcrumb-item"><a href="index.html#work">Work</a></li>
<li class="breadcrumb-item active" aria-current="page">Project1</li>
</ol>
</nav>
<div class="row">
<div class="col-lg">
<img src="images/mockup.png" width="100%">
</div>
<div class="col-lg">
<h1>Project1</h1>
<h2>An exploration of lorem ipsum dolor sit amet</h2>
</div>
</div>
</div><!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>
</html>
