Web Development: Build your own portfolio using HTML/CSS
By: Aditi Venkatesh
Tags: Coding Tutorial, Webdev, Cca, HTML, CSS

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 🔥