One Page Portfolio Website Tutorial HTML5

Code Editor & Design Mockup

In this tutorial, I’ll be using Dreamweaver CC for a change instead of my usual code editor, Brackets. Not sure which code editor to use? Read my blog post on the 4 best code editors for web designers. If you’ve watched my recent tutorial on how I designed the website mockup for my one-page portfolio in Photoshop, you’ll know that I already know how I want my portfolio website to look.

The website mockup that I designed in Photoshop served as a visual guide that will help me when I’m coding my website. By designing a website mockup in Photoshop, before touching any code, I now have all the information I need while I’m coding my website. I already know the fonts, colors, images, and layout that I want for my website. Coding the HTML5 and CSS3 is going to be super easy now. It’s in good practice to mockup a website before touching any code, you’ll save a lot of time in the long run. Now let’s start coding the one-page portfolio.

The HTML

Here’s a quick overview of the skeleton/structure of the website (in order):

  1. Header
  2. About
  3. Work
  4. Contact
  5. Image Divider
  6. Footer

Header

First, we’re going to code the header by using the header tag. Within the header tag, I’m going create a div using the div tag and apply the class “intro”. Within the “intro” div, I’m going to use the h1 tag and write my full name. Then, I’ll use the h2 tag and write my professional headline.



About

Now that we’ve coded the header section, let’s code the about section. I’m going to create a div and give it a class called “wrapper”. This will act as a wrapper or container that holds all of the additional content that we’ll be adding to our website (from the about section to the work section). I’m going to use the section tag and give a class called “about”. Then I’m going to create a div, called “about-content”. This is where all the text for the about section will be. I’m going to use the h3 tag for the heading and the paragraph tag for the content. For now, I’m just going to use Lorem Ipsum placeholder text. I’ll write the actual content later on. That’s it for the about section. Let’s code the work section.



Work

So the third section in my one-page portfolio is the work section. First, we’re going to use the h3 tag and introduce the work section by writing a heading. Secondly, we’re going to use the section tag and give it a class called “work”. Within the “work” section tag, we’re going to create a div and give it a class called “image-area left”. This div has two classes: “image-area” is one class that we’ll be selecting when styling our CSS and “left” is another class that we’ll be adding styles to in our CSS. Within the div, we’re going to add an image using the image tag. This is where I’ll be putting the images of my work.

Now, we’re going to create the content part where the information relating to the project will be placed. Let’s create another div and give it the class “text-box”. Within this div, we’re going add another div and give it the class “text-box-content”. Within this div, let’s add a heading using the h3 tag and title the project. Then, we’re going to use the paragraph tag and write a blurb about the project. Lastly, we’re going to make a button that links to the project, using the anchor tag. Make sure that all of your opening tags have their closing tags.

Looking back at the website mockup, there are more than one work items. Also, note that the image alternates between the left and right-hand sides. If you recall earlier, we created a div with the class called “image-area left”. To create the work sections where the image floats to the right, all you need to do is change the word “left” to “right”. So easy! Now, I’m just going to go ahead and copy the first work section we created and paste it below. Then I’m going to change “image-area left” to “image-area right ”. I’ll do this a few more times so that in total, I’ll have five work items. We’re done the work section, now we can move on to the third last part to our one-page portfolio which is the contact section.



Contact

The contact section is very simple to code. First, we’re going to use the section tag and give it the class “contact”. Then we’re going to create a div and give it the class “contact-content”. Within this div, we’re going to use the h4 tag and write a small contact blurb with a link to an email address. I want my email address to automatically open the visitor’s mail client when they click on the link to my email. To do this, I’m going to use the “mailto” hyperlink.



Image Divider

This section wasn’t included in my original mockup. But, I wanted to include an image of myself in my workspace, in my portfolio. To do this, I simply created a div with the class “image-divider”. The image will be added in the CSS in part two of this tutorial.



Footer

Alright, so we’ve reached the last section of code in this tutorial. We’re going to code up the footer of the one-page portfolio website. It’s super easy to do. First, we’re going to use the footer tag. Within the footer tag, we’re going to create a div and apply the class “footer-content”. Then, we’re going to use the paragraph tag and give apply the class “credit” and write a line of copyright text. Then we’re going to use the unordered list tag and give it a class called “social”. Within the unordered list tag, we’re going to use the list tag and then the anchor tag. We’re going to add several social media links. By using target=”_blank” in the hyperlink address, when the link is clicked it will open the link in a new tab, as opposed to opening the link by leaving the current page.



Conclusion

Well, that’s it! That’s all the HTML that was coded to make this one-page portfolio website a reality. If you’re having trouble with your code, watch my video and read my blog post The 10 most common Html coding mistakes it will help you out a ton. Stay tuned for next week’s video, part 2, where we’ll be coding all the CSS for this one-page portfolio website. As always thank you for watching! I’ll see you in part two.

Like this article?

I'm a Content Creator, Front-End Web Developer, UI Designer, based in Toronto, Canada. I have a healthy addiction to the internet, technology, and digital media. I'm so passionate about all things design and tech that I write about it any chance I get on my blog xopixel.com!

Comments

  1. Loved this tutorial! Thank you for everything Marisa 🙂

    Quick question, can you let me know the image dimensions used in this project?

  2. Thanks for this informative tutorial.

    However, I couldn’t manage to get proper results since maybe I am missing some steps or prerequisites.

    Could you please share the full code on codepen.io so everyone can have a reference?

    Thanks

    1. Hi Diaa,

      Glad you like the tutorial 🙂 Codepen is great, but for larger website projects such as this one, I find posting all the images and assets a pain. Other than the code that’s posted here, the images that I used is the one thing that I did not provide, which could possibly be giving you different results. As a result, I’ll be preparing to make the original source files (a folder with all the code, images and files) for my tutorial files available on my blog soon.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.