Web design tutorial

Responsive Design with HTML5 and CSS3

About this template

This is a mobile-friendly template to build on.

The content and look of the template doesn't matter for my purposes. Students can add their own colour scheme, they can style their links, choose whether or not to have rounded corners, animation, slide shows, other media, a gallery of photos and so on. This is only about giving them something basic to build, then add to, for the purpose of knowing how to adapt a website to be mobile-friendly.

Style Sheets

The cascading style sheets (css) have also been provided for me. These are called styles.css and base.css.

It is the convention to have a single style sheet. However, as I am building a responsive page I will create the styles.css for the desktop and then modify it to suit smaller devices and call that base.css. This style sheet will remove the margins and widths where required and my teacher thinks it might be easier to see a width and know to take it out than to know exactly where you are supposed to put in a width.