Build a Web Portfolio from Scratch
with Github Pages
This is a very narrowly focused tutorial about web development aimed at novices who have absolutely no web dev experience, nor have used Github or Git, or even the command line.
The end product is a web portfolio, built (mostly) from scratch, that is easy to edit and easy to publish anywhere – Github merely provides an easy starting point.
(This tutorial is in progress. Feel free to fork it on Github)
Lessons
-
Complete [2014-04-10]How to open a Github account, create a project repository, and create a new file in the repository. -
Mostly complete [2014-04-03]How to create and publish a file to the Web and how that is better/worse than publishing a blog post on WordPress. -
Mostly complete [2014-04-03]An (optional) tour of Github Pages pre-built templates and of Markdown, and practical experience with the concept of 'separation of content and presentation.' -
Mostly complete [2014-04-13]How to install the Github desktop app, make a local copy of your Github repo, manage and edit your webpage project on your own operating system, and sync with your Github repo. -
Just a stub [2014-04-10]By using Git, you automatically get data protection features built into your project. This is what makes collaboration so (relatively) smooth. But even if you work alone, Git can reduce anxiety. -
Just a draft [2014-03-30]How to use HTML, JavaScript, and CSS to build your own web portfolio. And then, how to tweak and test things of which you have no real understanding.
Topics covered
- How to use Github and Github Pages to publish content
- How to use the Github desktop app
- Some HTML and CSS concepts
- How to edit a text-file
Topics not covered
- Basic Git concepts and syntax
- How to use Github to collaborate
- The command-line
- Advanced web development
- The difference between Git and Github
Why Github?
Because it’s easy and free. And if you don’t like Github, you can take the exact code you’ve produced and put it anywhere else that acts as a web server. The important thing is: if you do want to learn web development, how to use Git, how to use Github, how to program, and so forth, this lesson provides a stepping-stone to those concepts as well as a canvas to practice on. And even if you don’t want to learn anything, you can come away with something useful: a customized web homepage that you can maintain yourself.
Tweet this lesson if you like it: Tweet
Fork it and copy/improve it on Github.
To be added: more text, explanation
Other resources
Using Github
-
Getting Started With a GitHub Repository - the first of a seven-article series on Github for non-coders, by Konrad M. Lawson, for The Chronicle of Higher Education
-
GitHub For Beginners: Don’t Get Scared, Get Started - by Lauren Orsini, for ReadWrite
-
Github Cheat Sheet - inspired by Github’s Zac Holman, a reference that assumes you have some Git/Github experience.
Using Github Pages
- Github Pages - the official, easy to follow documentation
- Github Pages Automatic Page Generator - official help page on using Github’s pre-designed templates
- How to: Portfolio sites for journalists, GitHub makes them cheap and (kinda) easy - by Tyler Fisher, for the Northwestern Knight Lab
Using Git
- Try Git - A 15-minute interactive tutorial if you want to be more familiar with Git at the command-line.
- git - the simple guide - “just a simple guide for getting started with git. no deep shit”
- Intro to Git for Web Designers
Markdown
- Mastering Markdown - Github’s guide