DEV Community

Cover image for Build Your Professional Portfolio Website In 2 Hours Using HTML & CSS.
Lucius Emmanuel Emmaccen
Lucius Emmanuel Emmaccen

Posted on

 

Build Your Professional Portfolio Website In 2 Hours Using HTML & CSS.

Hello šŸ‘‹ , in this article we're going to learn how to build a simple, yet professional portfolio using pure HTML and CSS.

There are a million and one reasons to have a personal portfolio website, from helping you have a gallery of your work/projects online, to, improving your chances of getting a job etc. The fact is, not everyone needs to have one and I recently wrote an article explaining in detail what a portfolio is, why you might want to have one and it's importance in the world today.

What We'll Build šŸ’Ŗ

  • Contact Section (Serving as the Nav && Footer)
  • About Section
  • Work/Portfolio

It might be important to note that, this tutorial is beginner-friendly, you don't need to have a "god-mode" knowledge of HTML or CSS. We'll walk through the entire code together along with suggestions on how to improve them later because we'll be keeping things super simple and summarized.

File Structure šŸ“‚

To follow along with this tutorial, you'll need a file structure such as this:

emmaccen's blog portfolio file structure

Warm-Up

Looking at the UI Design and having an overview of where we're going with code and how the finished website will look like, we can begin to mark out some key points such as colours, sections, styles etc.

Because of this, we'll start by creating some global styles following the DRY (don't repeat yourself) principle. Also, for this tutorial, we'll be interchanging between Grid and Flexbox. I promised to make this tutorial simple so, we won't be writing/coding anything complicated.

If you find something you don't understand in this article, that's fine, you can always Google or learn them later. Don't let anything stop you, you're already awesome šŸ‘.

I've decided to paste the code snippets in PNG formats. This is just me trying to compel/encourage you to code it out by hand because it helps with understanding and well as retention.

If you don't want to go through the process of typing it out, head over to the end of the page and visit the GitHub link, you can download the entire project from there šŸ§‘ā€šŸ’».

With that out of the way, we're ready to start coding.

Index.html

Your file structure should look something like this šŸ‘‡

VS code file structure

Please, ignore the index.js and README.md files. We won't be needing them for this tutorial. I'm using VS code by the way, you can use any code editor you want.

In your index.html file, create a basic HTML template. You can generate this by typing ! followed by the TAB key. See image for reference šŸ‘‡

VS HTML code snippet generator

After you've done that, you should have something like this šŸ‘‡

HTML skeleton

Few things to note from the image above.

  • I've included a google font (we'll use this as our font but, feel free to use any font you want)
  • I've linked the index.css file so we can use it in our index.html.

For everything else, you can put anything you like. e.g the <title> or <meta> tags

Now, run the application and make sure it works as expected. I'm using Live server, a VS Code extension that provides real-time updates of your changes (You don't have to use it though).

To verify that our CSS file have been linked correctly.
In your CSS file, paste: body {background-color: #333;}

Now run the app, you should see a dark background.
If that is not the case, try to verify you don't have a typo when linking your file, either way, I'm sure you'll figure it out šŸ˜Ž!.

Moving forward.

For the files/assets (icons, images) we'll be using in this tutorial, Checkout the GitHub repo, you can download them from there, otherwise you can use Font Awesome, Flat Icon or any icon library of your choice.

CSS Globals and Setup āš™ļø

We'll create some global styles/variables and some basic setups, these are properties I know for sure we'll be using more than once in this tutorial and you don't have to know it all at first, just create a global when you notice you're re-writing the same thing more than once.

CSS Globals code image

CSS Globals code image

You might have to click on the image if it appears to be blurry, stretched or unreadable

We'll be coding 3-sections for this portfolio and now that we have all the basic setup ready, let's get coding.

Contact Section (Also the Nav and Footer)

  • HTML

Contact section code image

  • CSS

contact section CSS code image

  • Visual šŸ”Ž

If you didn't miss anything out, you should have this:

Nav section Image

You can take some time to understand the HTML structure and how the styles apply. Also, as you move forward with the code, you'll soon come to realize that we're mostly just reusing the CSS we've written in globals earlier (Section: CSS Globals and Setup).

About Section

  • HTML

About section code image

Now, if you're wondering what <script>document.write(new Date().getFullYear() - 2013)</script> does. It's javaScript and it's here so we won't have to calculate the years of experience by updating the portfolio/code manually. So if 2012, 2018, or 2020 is the year you started coding? Just replace 2013 in the code with yours.

Though the year you started coding might not exactly pass as experience but... you get the point šŸµ

  • CSS

About section CSS code image

  • Visuals šŸ”Ž

About section visual image

If you don't see something similar to the visual šŸ‘† image above, make sure all your HTML Tags are closed correctly. Do some error checks on your syntax, I'm sure you'll fix it.

Experience Section

  • HTML

Experience section code image

From the snippet above, the duplicateThisDiv class is purely for reference, we won't be styling using that class name. Just duplicate the <div> by as much experience you have.

  • CSS

Experience section CSS code image

  • Visuals šŸ”Ž

Experience section visual image

Portfolio Section

  • HTML

Portfolio section code image

There's a duplicateThisTag class in the snippet above. You already know what to do šŸ‘

  • CSS

Portfolio section CSS code image

  • Visuals šŸ”Ž

Portfolio section visual image

Lastly

  • The Footer

This is just a replica of the Contact section, so just copy/paste it and use it as your footer. Don't forget to replace the <nav> tag with a footer tag in this case.

Full Design šŸŽØšŸ–Œļø

Lucius emmanuel's design

My Thoughts šŸ¤” šŸ’­

I've seen people get better opportunities because they have an online portfolio, including myself (and you don't have to own the greatest portfolio on the planet). If you already have solid years of experience, you might not necessarily need one, however, having one has no disadvantage irrespective of your level in the tech world (I understand that you might have a different opinion).
You can look up some reasons why you should consider having one if you're still unsure about the importance of it.

Pro Tips šŸ’”

  • Check out AOS to add some life to your website.
  • Keep an eye out if you want to learn how to host your website online (I'll be posting in a few days)

For design inspiration (To spark your creativity) look up:
1 Behance
2 Dribbble
3 Awwwards
4 Web Design Inspiration
5 Frontend Mentor etc.

Conclusion āœ…

It's been great having you read up to this point. I post simple tutorials like this, so don't forget to follow me to get more content.
Do play with the comment/discussion area, like and bookmark this blog if you love it or share with others.
Thank you! šŸ™

Socials

Interesting reads šŸ“š

Top comments (11)

Collapse
 
jack94507501 profile image
Jack

After all, I prefer CMS like wordpress.

Collapse
 
joshwcorbett profile image
Josh Corbett

eww

Collapse
 
iankduffy profile image
Ian Duffy

I recommand checking out Sanity CMS, much more flexible CMS than wordpress, can help push your web development

Collapse
 
israelmitolu profile image
IsraelMitolu

This is awesome. Thanks for sharing šŸ‘

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Glad you found it useful, Isreal šŸ˜‡

Collapse
 
oluwaseun_clegg_ profile image
Oluwaseun Clegg

This is an amazing work Em! Iā€™m totally proud of you šŸ‘šŸ½

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks Clegg šŸ˜Š.

Collapse
 
theralphod profile image
Ralph OD

Thanks for putting in the time to come up with this useful and comprehensive article. Really useful.

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks for the feedback, Ralph. Appreciate it šŸ™

Collapse
 
eammy profile image
Emmanuel Uwe

great content em šŸ‘

Collapse
 
emmaccen profile image
Lucius Emmanuel Emmaccen

Thanks šŸ˜‡

Now it's your turn.

šŸ—’ Share a tutorial
šŸ¤” Reflect on your coding journey
ā“ Ask a question

Create an account to join hundreds of thousands of DEV members on their journey.