Building a Portfolio Page

Learning Objectives

Properly indent HTML for maximum readability
Distinguish between IDs and classes
Distinguish between block and inline elements
Given CSS selectors, explain which elements they would select
Match CSS properties to their function
Publish a website on the Web using Github Pages
Describe the problem(s) solved by flexbox

Framing

This class is video-based. This series of videos shows the whole process of creating from scratch and publishing an appealing (or at least hopefully-not-awful-looking -- I'm not a designer) portfolio page.

This is intended both to introduce GH Pages and review the basics of HTML and CSS.

We will periodically sync up as a class to discuss and answer questions. You can watch at your own pace. If you don't get through all videos over the course of the class you may watch them on your own time if you wish.

Github Pages

Github Pages is a free service through which you can publish your own webpage at the github.io domain. Many developers use "GH Pages" for their own blogs, portfolio pages, or informational pages about their projects.

Note: You can only use GH Pages for front-end applications: it only works with HTML, CSS, and Javascript (no Ruby, PHP, databases, etc). Probably everything you put on GH Pages will start with an index.html.

As you watch

You won't be turning anything in, but to help you retain the information...:

Write down any CSS selectors with which you're unfamiliar, and what they do. At stopping points over the class period we'll write these on the walls.
You're welcome to code along, or to simply watch, or to start your own portfolio page and pick-and-choose things to apply to it. Remember that every webpage starts the same way:

<!DOCTYPE html>
<html>
  <head>
    <title>My Page</title>
  </head>
  <body>
    <p>Hello, world!</p>
  </body>
</html>

Click here for the videos

References

Jekyll is supported by Github, and dramatically streamlines the process of making a multi-page website.

oduolaakeem / building_a_portfolio_page Goto Github PK