Portfolio: HTML + CSS
Portfolio
1. Create a folder ”Portfolio” in your Web design folder. Open folder ” Portfolio” in Vscode.
2. Copy & paste the following image files inside the folder you created ”Portfolio”:
Act 2 Image trace(Illustrator folder > PNG file)
Act 4 Magazine cover(Photoshop folder > JPEG file)
Project Face swap (Photoshop folder > JPEG file)
Project Geometric pattern (Illustrator folder > PNG file)
A picture of yourself (Portrait, face only keep it professional)
The following will be given by facilitator:
[Link]
[Link]
3. Create a new file “[Link]”. Then add Boilerplate, after change <title> tag to “Portfolio”.
4. Here is the following HTML code:
<body>
<nav>
<div class="logo">Name & Surname</div>
<ul>
<li><a href="#hero">home</a></li>
<li><a href="#about">about</a></li>
<li><a href="#gallery">gallery</a></li>
</ul>
</nav>
<div class="hero" id="hero">
<p><b>Designing. Coding. Growing.</b><br><br>Dive into the work I’ve created during my 3-
month journey through the Graphic Design & Web-Based Multimedia course at Believers Care Society.</p>
<img src="Illustration [Link]" alt="Illustration" style="width: 257px; height: 200px;">
</div>
<div class="about" id="about">
<img src="[Link]" alt="My picture" style="width: 200px; height: 200px;">
<p><b>About</b><br><br>Hello I’m Nathi, a Johannesburg-based educator with a passion for creativity,
technology, and design. As a teacher, I enjoy sharing knowledge and helping others grow while bringing a
creative and friendly approach to everything I do. My interests lie at the intersection of tech, art, and design, where
innovation meets visual storytelling. I’m an ambitious and curious individual who believes in continuous learning,
creative problem-solving, and using digital skills to inspire ideas and build meaningful experiences.</p>
</div>
<div class="gallery" id="gallery">
<div class="gallery-img1"><h3> Image trace </h3></div>
<div class="gallery-img2"><h3>Geometric pattern</h3></div>
<div class="gallery-img3"><h3>Magazine cover</h3></div>
<div class="gallery-img4"><h3>Face swap</h3></div>
</div>
<footer>
<p>Lorem ipsum</p>
</footer>
</body>
5. Create a new file “[Link]”.
6. Link CSS file to HTML file: Go to HTML file> Inside your <head> tag > Add the <link> tag, inside
the href= attribute add forward slash > Select CSS file “[Link]” > Then remove forward
slash.
<head>
<link rel="stylesheet" href="[Link]">
</head>
Favicon: Add another <link> tag > Inside href= attribute select “[Link]” file
<head>
<link rel="shortcut icon" href="[Link]" type="image/x-icon">
<link rel="stylesheet" href="[Link]">
</head>
7. Go to CSS file “[Link]”. Unlike HTML, CSS does not have a boilerplate. Here is the CSS code:
body{
font-family: Arial, Helvetica, sans-serif;
margin: 0;
display: grid;
grid-template-rows: 200px repeat(2, 480px) 600px 100px;
}
/*Images*/
img{
object-fit: cover;
}
/*navbar*/
nav{
color: white;
background-color: black;
text-align: center;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}
.logo{
font-size: large;
font-weight: bold;
}
ul{
list-style-type: none;
margin: 0;
padding: 0;
}
li a{
text-decoration: none;
color: white;
}
li{
padding: 10px;
}
/*hero*/
.hero{
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
text-align: center;
padding: 20px 40px;
}
/*about*/
.about{
background-color: black;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 0 40px;
}
8. To Add url(), it is the same as the href attribute. Inside url() add a forward slash > Select image
file then remove forward slash.
/*gallery*/
.gallery{
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, 2fr);
}
.gallery-img1{
background-image: url("Activity\ 1\ Image\ [Link]");
background-size: cover;
}
.gallery-img2{
background-image: url("Project\ Geometric\ [Link]");
background-size: cover;
}
.gallery-img3{
background-image: url("Activity\ 4\ Magazine\ [Link]");
background-size: cover;
}
.gallery-img4{
background-image: url("Project\ Face\ [Link]");
background-size: cover;
}
.gallery div h3 {
margin: 0;
padding-top: 150px;
text-align: center;
color: white;
display: none;/*Hide the text*/
}
/*footer*/
footer{
background-color: black;
color: white;
text-align: center;
padding: 20px;
}
/*Gallery images on hover*/
.gallery-img1:hover{
background-image: none;
background-color: dodgerblue;
}
.gallery-img2:hover{
background-image: none;
background-color: dodgerblue;
}
.gallery-img3:hover{
background-image: none;
background-color: dodgerblue;
}
.gallery-img4:hover{
background-image: none;
background-color: dodgerblue;
}
.gallery div:hover h3 {
display: block;
}
/*Hyperlinks on hover*/
a:hover{
margin: 0;
padding-top: 150px;
text-align: center;
color: white;
color: dodgerblue;
}
9. Save > Open “[Link]” file using Firefox (browser).
10. Go back to Vscode. Open CSS file > Now to make our website responsive(Look good on
different screen sizes). We refer to this as media queries:
11. Here is the CSS code:
/*mediaquiries 500px & wider*/
@media screen and (min-width: 500px){
body{
grid-template-rows: 100px repeat(2, 480px) 300px 100px;
}
/*navbar*/
nav{
flex-direction: row;
justify-content: space-evenly;
align-items: center;
padding: 20px 20px 20px 60px;
}
.logo{
width: 25%;
text-align: left;
}
ul{
width: 50%;
display: flex;
flex-direction: row;
justify-content: space-evenly;
}
/*hero*/
.hero{
flex-direction: row;
justify-content: space-evenly;
align-items: center;
text-align: center;
}
/*about*/
.about{
text-align: left;
display: flex;
flex-direction: row;
justify-content: space-evenly;
align-items: center;
}
.about p{
width: 50%;
}
.hero p{
width: 50%;
text-align: left;
}
/*gallery*/
.gallery{
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
}
12. Save > Open Firefox (browser) > Reload/ Refresh. To see changes. Open Dev tool(Right click >
Inpect) > Select Accessibility > Select Device options to test.
Accessibility
Device options
13. Your website is now completed. Now to put it online you will need the following:
Internet connection
A Github account or Google account with login info(password & email etc.)
Step 1: Login/ Sign up
1. Go to the Github website.
2. Sign up/ Login to account.
Step 2: Create a New Repository
1. Click 'New Repository'
2. Name it exactly: [Link]
3. Keep it Public
4. Tick 'Add a README file'
5. Click 'Create Repository'
'New Repository'
[Link]
For example: [Link]
Step 3: Upload Your Website Files
1. Inside your repo, Click Add file → Upload files
2. Upload:
a. [Link] (main file)
b. CSS files ([Link])
c. JS files ([Link])
d. Images or folders
3. Click Commit changes
Code → Click Add file → Upload files
Upload files > Click on Commit changes
Select all the files inside your ”Portfolio” folder.
Step 4: Enable GitHub Pages
1. Go to Settings
2. Scroll to 'Pages'
3. Under Build and Deployment choose:
a. Source: Deploy from a branch
b. Branch: main
4. Click Save
'Pages' [Link]
None > Main > Save
Step 5: Visit Your Live Website
1. After a few seconds, go to: [Link]
Example: [Link]/[Link]/
Click on Visit site > If it works you should see this below your site. To open at home just copy URL.