Templates

Recordings for 601 and 603 are ready#

I have not had time to proof the text or set up the chapter headings, but the raw recordings are now in UNC Panoto

warning

Your home page, or initial page should always be named index.html. the "i" should be lower case and html should be lowercase. Don't name it index1.html or 2index.html. Don't ever have a page named home.html. Your home page is the index.html page. If you name it with a capital "I" like this,Index.html, OPAL will not hide it in the directory. It will be listed like any other non index.html file.

Navigation#

Navigation design basics are the most crucial next step to learn after getting HTML and CSS basics down. Navigation design is complicated. Especially when building responsive sites. We don't have time to go into the fine details, but I do want to go over some absolute basics. You do not have to follow along with me, but I will create a project and demonstrate this in class. It's your choice follow along or just watch. If you complete this task and post it on opal it will give you credit for both task 02.01 and 02.02, so if you are behind, you can get caught up today.

EZ Template#

We are going click over to my EZ-template Repository on GitHub and download that template. The sample site has four working pages. The template only has a working home page which is the index.html file. The goal of this exercise and practice is to show you how to create multiple pages from this template or any other template. You will see how the CSS file controls all of the colors and fonts to customize the template to suit your needs.

I will encourage you to make your site colors and typography easy to read and meet accessibility guidelines.

Ez-template image

Working with Templates#

If you decided to download a template from the web, here is a video that will show you how you might set it up for your 02.03 project:

Below are a few examples of my own templates that some students have used from past classes (these have the mobile friendly settings in the <head>).

EZ-Template (No Framework just html and css)#

One Page Template (Bootstrap)#

Multiple Page Template (Skeleton Boilerplate)#

UNC Template (Bootstrap)#

Photobackground Template (Bootstrap)#

A lot of students also used templates from the sources on the class web site.

In class we will download some different themes and discuss all of elements that you will need to include in your website to earn full points. The class will be recorded.

Edit this page