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!
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:
You can also see a full working version at http://kitty-makeschool.github.io - go ahead and play with it to see what we will achieve by the end of the tutorial.
Languages We'll Use
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.
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
- 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.