pfcdx / html-css-template Goto Github PK

This project is a fork of the HTML5 Boilerplate.
It has been simplified for those starting out with web development and programming.

An example site built with this template.

1. Easy Way - Download the .zip file
   • You can use the "Download ZIP" button in the right sidebar or click this link.
   • 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
     

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).
   • If you cloned the project using git, open the folder html-css-template in a text editor
     (e.g. Sublime Text 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="/images/your_picture.jpg">