The World Wide Web permeates or lives to an extraordinary degree. However, most of us are unaware of the its technical underpinnings. In this session we explore the nature of the Web and in particular the role of HTTP protocol and the HTML standard. We also identify the 'client/server' nature of the web and its implications. In this context we will gain an understanding of the role of the 'browser' in presenting a web page, and begin to understand pages are retrieved and rendered.

We can now explore the basics of HTML and we will try to 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.

HTML Elements are at the heart of the HTML specification. There are perhaps a dozen categories or elements to explore -in Lab-01 we explored elements from 5 of these categories. Here we review these and examine the role and format of each one in detail.

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.

Inheritance is a key feature in how CSS applies rules, and it has some interesting side effects

These three concepts are essential in order to build useful style sheets. The allow is to define different regions, elements a subsets of elements on a page.

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.

A worked example of the box model in action. This example featured in this weeks lab, and demonstrates the major features of the model.

When you finish this lab you will have the knowledge to prepare your first project for this module. The briefing is here - pay close attention to the guidelines

Another look at the box model, this time exploring an example in detail. This example featured in the recent lab, and demonstrates the major features of the model.

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.

Both HTML & CSS continue to evolve. Understanding where it is going is part and parcel of becoming a programmer. Here we look a some aspects of the history of HTML, including some major milestones in its evolution.

A review of some of the guidelines from the Google HTML/CSS style recommendations.

Building a web site is not just a matter or using correct and pleasing CSS and HTML layout, it also involves project planing and management. This involves considering the general context of the site under development, gaining an overall perspective of the customers needs before work commences, and in general following a plan in order to complete quality work in a timely manner.

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.

CSS allows us to set properties that control where our content is positioned on each web page. Understanding the positioning of elements in relation to each other and the viewport is an important part of writting good CSS for well designed web pages.

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 review of the web site presented in lab-07-a. This lab encapsulates many of the practices we have encountered so far.

CSS allows us to set properties that control where our content is positioned on each web page. Understanding the positioning of elements in relation to each other and the viewport is an important part of writting good CSS for well designed web pages.

Becoming adept at the command prompt is an essential skill for a programmer. May development tools can only be used in this way. Simple command line usage is relatively straightforward, as long as you become comfortable with the notion of the 'current directory'.

Deploying a site involves understanding a little more about Clients & Servers, Hosting Providers, Domain Names, Transferring the Sites Files, HTTP and Absolute & Relative Paths

Harp.js and Surge.sh are the two services we will use to server the page locally, and also to deploy it to a public web server.

The EJS template system implements mechanisms for assembling sites from templates - which are called 'partials' in EJS. Additionally, there is a complimentary 'layout' mechanism for reusing entire page structures.

Project 2 will build on the site you developed in Project 1, with additional content. However you will be expected to use a templated approach + explore a CSS library.

Tables provide for elegant representation of tabular data in Html. They are simple to use, but require some additional attention to be effective.

A review of the folder structure of the our templated project. You should follow this structure for your own assignment

An overview of the container and segments styles in the framework

An exploration of the Grid and Image styles.

An exploration of the Tables

Our final tour of the Semantic-UI library - with a focus on icons, variations in segments and responsive grids

Forms are now an integral part of any website, used for contact, submission of details, signing up for a newsletter, registration of details etc.

CSS3 is the current standard - some of its aspects still evolving. SASS & LESS are tow notable CSS preprocessors, enabling higher order style sheet design. CSS Frameworks, usually built in SASS or LESS, radically boost the design process leveraging large, already worked out, themes and designs.

When you finish this lab you will have the knowledge to prepare your first project for this module. The briefing is here - pay close attention to the guidelines

Project 2 will build on the site you developed in Project 1, with additional content. However you will be expected to use a templated approach + explore a CSS library.