Creating a Website 04: Free Templates

[Mimi58]

Learning how to use a Free Css Template

We will start with some basic information and then zero in on a particular free template. Those interested can download the template and use it as we play.

The templates from Templated.co come with an HTML page (index.html), an external css file (style.css) and usually some images in an image folder.

The HTML page

of the template is sort of like a house plan or blueprint which shows the inside and outside on paper (Webpage shows head and body of HTML page in a file)

A house blueprint has sections showing main spaces  - Bedrooms, Kitchen, Dining, Living, Bathroom (Main containers) An HTML page shows sections/containers such as menu, sidebar, main section, columns, tables, main divs (Main containers)

A blueprint shows storage containers such as closets, cabinets, etc. within main rooms (main containers). A web page shows storage containers such as divs, lists, paragraphs, spans within main sections (main containers

The css file

is a little like an interior decorator that tells the browser how to decorate the home (webpage) and where to put the furniture (sections/containers)

An interior designer might tell the workers what color to paint the walls and what wallpaper to use where. The CSS file tells the browser which color or images to use for various backgrounds on the page.

An interior designer would tell the workers where to put the bed within the bedroom and whether to have the tv on the right or left of the entertainment center or in the middle. The css file would tell the browser whether to put the text above, below, to the right or to the left of an image and whether to have the banner to the left of the page or to the right.

The Image Folder

When the house is built, the pictures are hung on the wall and stay there. When a web page is created, the images stay in the image folder until the page is loaded, then they are called by code to "hang on the walls"