Web Development: Build your own portfolio using HTML/CSS
Welcome! The goal of this workshop is to teach you the basics of website development. We’ll be doing this using the example of building your own personal portfolio.
What is Web Development?
The process of building websites using languages such as Javascript, Dart and even Python using certain frameworks. This workshop focuses on using HTML/CSS.
So… what is a website? It is a set of pages that can be accessed using a domain name. Examples of domain names include ‘www.google.com’ and ‘www.facebook.com’.
How do websites work? When you type in a domain name, the browser you are using (e.g. Google Chrome) connects to a web server using an IP address which is found by translating the domain name. The web server is a computer that is connected to the internet and receives the requests for the web page from your browser. The server then sends the information back to your browser, as a HTML document, which displays the website!
Want to know more? Check it out here: https://bit.ly/cca-web-requests.
What is HTML & CSS?
HTML stands for Hypertext Markup Language. Markup languages are used to differentiate the content from the structure of a webpage so the browser knows exactly what to display and how to structure it.
Cascading Style Sheets (CSS) are used to describe the style of a document written in a markup language. We use CSS to format the content specified in the HTML document.
Well, then what is a personal portfolio?
Portfolios are a way to demonstrate your coding experience whilst also displaying your previous experience. The most basic portfolios are a resume that has been converted into a website. It includes your name, your previous work experience and an image of you.
Portfolios are a great way to add depth to your resume when applying for roles allowing you to stand out. They are also the perfect place to display any side projects you have completed!
If you want to see some cool examples of portfolios have a look at this: https://www.awwwards.com/websites/portfolio/
Getting Started
We’ll be using VSCode for this workshop. Below are instructions on how to set up VSCode for the best experience.
- Install VSCode — https://code.visualstudio.com/docs/setup/setup-overview
- Download the ‘Open In Browser’ plugin — https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
- This plugin allows you to run the website by left-clicking on the HTML file and selecting ‘Open in default browser’ (MAC Shortcut is ⌥ B)
- [Optional] Customise VS code using the following plugins — https://code.visualstudio.com/docs/languages/html, https://code.visualstudio.com/docs/languages/css
- Having your resume on hand and some images will make designing your website a lot easier
portfolio.html
This is where your HTML code goes :)
Setting up the file
First, create a file called “portfolio.html”. Then, add a declaration to the file so the browser knows to expect a HTML file.
<!DOCTYPE html> <! -- your code will go here --></html>
Let’s start off by adding a heading. HTML has specific tags that allow you to add headings, they range from <h1>, …., <h6>.
Adding text
We can add a Heading 1 (the largest heading) using the code below:
<h1> The Computing and Commerce Association </h1>Next, we’ll add a short paragraph. We can do this by using the <p></p> tag.
<p> The Computing and Commerce Association aims to “Connect the professionals of today with the professionals of tomorrow”. We are dedicated to providing value-adding opportunities for our members. </p>Images
We’ve got a heading and some information, but it feels like we’re missing something. Let’s add an image.
HTML allows you to add an image using the <img> tag which contains a source attribute (src) that contains a pathway to the image and alternative text (alt) attribute that allows you to describe the image for SEO and accessibility.
<img src=”cca-committee.jpg” alt=”CCA Committee”>Note: If you’ve stored the image in a different directory, be sure to use the exact path to the file.
Hyperlinks
Hyperlinks allow us to add further information by linking to an external website, different component of the same web page or different page within the website.
<a href=”https://www.linkedin.com/company/ccamonash/"> Check us out on Linkedin </a>Add a list
Adding a list is a concise way of displaying information such as prior experience or skills. In this section we’ll add an unordered list. Remember to add a title to your list!
<h2> What we do </h2>
<ul>
<li> Events </li>
<li> Weekly Newsletters </li>
<li> Articles </li>
<li> Social Media Marketing </li>
</ul>portfolio.css
Setting up the file
Create a file in the same directory as portfolio.html and name it ‘portfolio.css’. Here is where we will place the code that formats the content in the html file. There are many ways to incorporate CSS into a HTML file.
We’ll be using an external CSS file so first we’ll need to add a reference in the HTML file.
<link rel=”stylesheet” type=”text/css” href=”portfolio.css”>Customise text
CSS allows you to customise many different features including the font and colour of the text. To customise components, we need to be able to refer to the elements in the HTML text. We do this using a class attribute.
In portfolio.css, add a class attribute to the <h1> tag.
<h1 class=”CCA”> The Computing and Commerce Association </h1>Now, we have a way to change the font, colour and size. Adding this to the CSS file allows us to do so.
.CCA {
font-size: 40px;
color: #ee6225;
font-family: Arial, Helvetica, sans-serif;
}Alignment
CSS has many alignment attributes that allow us to position elements. To align text, we need to use the ‘text-align’ attribute.
.CCA {
<! -- this code is unchanged -- >
text-align: center;
}.description {
font-family: Arial, Helvetica, sans-serif;
text-align: center;
}
Aligning an image is similar. Note that we have added a ‘committee’ class name to the image.
.committee {
display: block;
margin-left: auto;
margin-right: auto;
}Backgrounds
With CSS you can add backgrounds whether they be images or colours. Here, we’ll be adding a background colour.
The background-color can be set using words as well as HEX codes. Width and height are set to 100% to ensure the whole page is covered.
.body {
background-color: antiquewhite;
width: 100%;
height: 100%;
}We’ve added a <body></body> tag here to encapsulate the code. In CSS you can also refer to certain elements using the tag as we’ve done above.
<!DOCTYPE html >
<body>
<! --your code is here -- >
</body>
</html>Challenges
Now you know the basics of HTML/CSS! Here are a few challenges to test yourself.
- Animate the images so that they scroll across the page
- Add an additional web page and nav bar
- Add a parallax scroll to your website
If you want to learn how to deploy your website, check out our AWS tutorial (coming soon!!).
And… voila!! Your basic portfolio structure is done. Feel free to share your final product with us 🔥
