Building Your Own Portfolio

Most developers and artists have a blog or a portfolio where they can showcase their work and attract potential employers. It is of course possible to use one of the many templates that are available for free or a fee but the templates you find might not be what you want exactly but you will have to accept it or… make your own portfolio from scratch!

Doing it from scratch is actually not that hard, and will teach you HTML, CSS and JavaScript skills. This tutorial assumes that you have no experience, but for those who have already written in those three languages, we will add some advanced concepts! We will make our portfolio mobile-friendly with advanced CSS3 features and give it a cool looking photo gallery using a neat mobile-friendly JavaScript plugin.

At the end of the tutorial, you will put your newly created website live to Github, so we will also cover version control and publishing a bit.

Our complete portfolio will look like this on desktop & mobile:

Portfolio on desktop and mobile

You can also see a full working version at - go ahead and play with it to see what we will achieve by the end of the tutorial.

Languages We'll Use

We are going to use HTML, CSS and JavaScript to create this site and host it on Github Pages, which will allow other people to access the site.

What is HTML?

HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990, HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW). When writing HTML, you add tags to the text in order to create the structure. These tags tell the browser how to display the text or graphics in the document.

HTML tags have a start tag and an end tag. The p tag (p = paragraph) looks like this: <p>A paragraph is contained inside the p tags.</p> With the exception of a few tags, most HTML tags look similar to the p tag. The image tag <img/> is one of the few tags that don't follow this convention - it is considered and empty tag. But more to that later on!

What is CSS?

CSS stands for Cascading Style Sheets - it’s a language which helps us change the way our HTML page looks. They're called cascading because if you apply two rules of the same property to one element, the last rule will take precedence over any rules that were declared before in the stylesheet. This is because browsers read stylesheets top to bottom, cascading over any rules that were declared for an element.

What is JavaScript?

JavaScript is a cross-platform, object-oriented scripting language. It's the ingredient that makes the Web awesome, your favorite sites interactive, and online games fun. JavaScript contains a standard library of objects, such as Array, Date, and Math, and a core set of language elements such as operators, control structures, and statements. We'll show you how to use it in your portfolio effectively.

Things You'll Learn in this Tutorial

At the end of the tutorial, you will have learned to

  • Create HTML pages
  • Link pages together
  • Use cutting edge CSS3 to make the pages responsive
  • Understand basic JavaScript
  • Learn how to use JavaScript plugins to create an image gallery
  • Host your portfolio on Github and make it accessible to the public

So, let's get started!


If you have feedback on this tutorial or find any mistakes, please open issues on the GitHub Repository or comment below.

Summer academy

An iOS Development Summer Course

Design, code and launch your own app. Locations in San Francisco and Asia

Find your location

Product College

A computer science college

Graduate into a successful career as a founder or software engineer.

Learn more

Cookies on Make School's website

We have placed cookies on your device to ensure that we give you the best experience on our website.

This site uses cookies to deliver our services. By using our site, you acknowledge that you have read and understand our Cookie Policy, Privacy Policy, and our Terms of Service. Your use of Make School’s Products and Services is subject to these policies and terms.

Please note that Make School no longer supports Internet Explorer

We recommend upgrading to a modern web browser. Learn more