Creating Simple Web Portfolios using Github Pages
Lesson 6

Creating and Publishing Your Portfolio

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.
This lesson is: Just a draft [2014-03-30]

Making a clean slate

Lorem ipsum (and so forth)

Creating the index.html

Sample code

<!doctype html>
<html lang="en">
<head>
  <title>My Portfolio</title>
</head>
  <body>
    

    <img src="http://placekitten.com/900/300" alt="A cat">

    <h1>Welcome to my Portfolio</h1>

    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis, sunt, ex, incidunt obcaecati magnam nemo nulla.
    </p>


  </body>
</html>

Adding Bootstrap files

  • Download Bootstrap
  • Delete all unnecessary files
  • Create an /assets folder
  • Drag and drop

Incorporating bootstrap styles

  • Add link to bootstrap.css
  • Commit and sync
  • Refresh page
  • Add container div
  • recommit and refresh
  • Add footer div
  • Add footer style
  • Add unstyled list

Creating the header

  • Add nav bar
    • http://getbootstrap.com/components/#navbar
    • http://getbootstrap.com/components/#navbar-fixed-top
  • Add full image
  • Add headline

Adding sections

  • Descriptive text
    • contact info
    • link to resume
  • List of stories
  • Photo gallery
  • Interactive map

Adding JavaScript interaction

comments powered by Disqus

Lessons List