We explore the foundations of web and get to grips with the fundamentals of the HTML language. As you will see, its structure and format is relatively straightforward, and you will be able to understand the basics very quickly. We will be focusing on a small number of 'tags' to get started, and also on the ways in which different html files can be linked together to form a site.

CSS is the language we use the style HTML. This language looks simple at first, but as we will see in the next few weeks, it is considerably more complex than HTML and will require a very careful approach to get right

In order to style the same html elements in different ways we need to use classes. This allows us to target specific occurences of an html element for styling purposes. At the heart of the layout engine in web browsers is a concept called the 'box model'. This defines a general layout structure for all HTML elements, providing a language for specifying important dimensions and relationships to other elements.

Using an understanding of the fundamental features of the box model we can start to produce more interesting page layouts. Specifically, we can break a page down into sections and use box model properties to dimension and position these sections in a flexible manner. This will allow is to grow multi-column pages that can vary according to the size of the browser windows used to view them.

Central to a well design site is a clear and understandably navigation structure. This must easily allow the user to explore the site, provide sufficient context such that the user knows where they are at any stage, and do this in a visually pleasing and efficient manner.

HTML5, the latest version of the standard, introduced a range of new elements. Among the most interesting are the so-called 'semantic' elements. These attempt to re-examine the proliferation of DIVs in html, and proposed an alternative vocabulary that would better reflect the purpose of many of these DIVs

A well structure site combines efficient and carefully composed CSS + well structured html content, cleanly indented with an appropriate selection of semantic elements. A simple site is reviewed here along with some more CSS layout techniques.

The web site will ultimately have to be moved from your local folders to a public web server where it can be accessed via a public domain. Modern tools can make this quite seamless and convenient.

Modern web site development is more more likely to break large pages into smaller 'fragements' - called templates. This allows a more convenient way of building large and complex sites, and facilitates greater reuse of page elements, styles and components.

Semantic-UI is a powerful and expressive CSS framework, providing a broad range of style, components and layouts.

A further exploration of the Semantic-UI library - with a focus on icons, variations in segments and responsive grids

These are the two assignment specifications collected here for convenience.