Authoring a website – Session 6 code recap

To aide you in preparing the responsive grid, please use these images as a reference. If your grid is not working as you expect, please ensure your code is correct.

Folder Structure

It is important to maintain a correct folder structure for your sites, they get more complicated and being organized is crucial.

Yours should look something like this.

HTML

For reference, your html file for ‘layout.html‘ should look like this.

CSS

For reference, your css file for ‘layout.html‘ should look like this.

Your css file may become messy like this one, as we are using it to try lots of things out. There a handful of key components within it however – we will need to move these before we begin to build the ‘Farm website‘.

For our grid to work we mainly need the lower section.

Check your code

To help spotting page errors use the W3C Validator to check your code.

Your page should display no errors, you should see only the following warnings.