### A basic template to get started with HTML, CSS, and JavaScript

This project is a fork of the [HTML5 Boilerplate](http://html5boilerplate.com).  
It has been simplified for those starting out with web development and programming.

An [**example site**](http://pfnp.adrianbautista.com) built with this template.

## Quick start

### How to download this template:

1. **Easy Way** - Download the `.zip` file
   * You can use the "Download ZIP" button in the right sidebar or click [this link](https://github.com/adrianbautista/html-css-template/archive/pfnp.zip).
   * Unzip the template by double clicking on the downloaded `html-css-template-pfnp.zip` file.
2. **Programmer Way** - Clone the Git Repo
   * If you have git on your computer and a github account, you can clone this project from the command line
     ```
     git clone https://github.com/adrianbautista/html-css-template.git
     ```

### How to use this template:

1. Opening the template
     * If you downloaded the zip file, open the unzipped **folder** `html-css-template-pfnp` in a text editor  
     (e.g. [Sublime Text 2](http://www.sublimetext.com/2)).
     * If you cloned the project using git, open the **folder** `html-css-template` in a text editor  
     (e.g. [Sublime Text 2](http://www.sublimetext.com/2)).

2. Using the template  
  
   #### HTML
     * Start with `index.html`, this will be your root page (the main page)  
       Questions about its content? Refer to `template.html`  
     * To make new HTML pages, duplicate `template.html` inside the folder and rename it to the URL path you want.  
       ```
       about.html => my_website.com/about
       ```  
       *It's recommended that you delete the explanation comments in any new HTML pages*

   #### CSS
     * Start with `main.css` inside the `css` folder
     * What are `normalize.css` and `html5-boilerplate.css` for?  
       They make basic styles consistent across all kinds of web browsers

   #### JavaScript
     * Start with `main.js` inside the `js` folder
     * What's jQuery? It's a JavaScript library that allows you to manipulate your website much more easily with JavaScript
     * If you download any jQuery plugins, paste a minified version of them into `plugins.js`

   #### Images
     * If you want to host your own images, put the image file (.jpg, .png, .gif) inside the images directory.  
       Then the source on an **img tag** will be  
       ```
       <img src="/https/raw.githubusercontent.com/images/your_picture.jpg">
       ```