Get Started with HTML, CSS and JavaScript

Get Started with HTML, CSS and JavaScript

December 18, 2010

Project: Build a Portfolio with HTML, CSS and JS

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.

Join Make School Icon

Join Make School

Prepare for your career as a founder or software developer

Apply now
Talk to Us Icon

Talk to Us

If you have any questions, please send us an email.

Email Us