Complete HTML and CSS - Web Development Essential Skills

Look at the basic layout of a HTML page and get started building one!

HTML5 Basics Lecture Code

How to start layout text on a HTML page using the common text tags.

The Html5spec completed document plus pages from Working With Text Lecture.

Now we have our text laid out - how do we start to manipulate the text? This lecture introduces how we emphasise text in a descriptive way.

Emphasising Text - Code Examples

An introduction to the newer HTML 5 Symantec tags

HTML5 - Code Examples

Hyperlinks (also known as Links) are an important aspect of all HTML webpages as they enable you to link content. This lecture looks at the various options available.

Part 1 of 2.

Hyperlinks (also known as Links) are an important aspect of all HTML webpages as they enable you to link content. This lecture looks at the various options available.

Part 2 of 2.

Hyperlinks - Code Examples

Lists are often used in HTML pages, and for more than you think! This lecture introduces the different Lists we have at our disposal.

Lists - Code Examples

Nearly all web pages use images! In these two lectures we look at how to place images on the page and how to size them for best effect and performance.

Part 1 and 2.

Nearly all web pages use images! In these two lectures we look at how to place images on the page and how to size them for best effect and performance.

Part 2 and 2.

Images and Photos - Code Examples & Assets

In HTML tables are a powerful feature. They allow you to layout data in a controlled and consistent manner. And with a little tweaking you can achieve many different effects.

These two lectures examine how we build, and layout tables, and even look at basic styling.

Part 1 of 2

In HTML tables are a powerful feature. They allow you to layout data in a controlled and consistent manner. And with a little tweaking you can achieve many different effects.

These two lectures examine how we build, and layout tables, and even look at basic styling.

Part 2 of 2

Tables - Code Examples & Assets

Another highly used and important feature of HTML pages. Forms allow us to capture information from a user and control what the user can enter. These two lectures go into detail how we can build our forms and how they submit than information.

Part 1 of 2

Another highly used and important feature of HTML pages. Forms allow us to capture information from a user and control what the user can enter. These two lectures go into detail how we can build our forms and how they submit than information.

Part 1 of 2

Forms - Code Examples & Assets

What are cascading stylesheets (CSS)? What do they do? This lecture introduces what we will be learning in this section of the course.

Before we get into the full power of Cascading Style Sheets (CSS) - lets have a look at the most basic styling we can implement which is on page styling.

This lecture introduces basic styling concepts.

In this lecture we move on to the 'Sheets' in CSS. We examine how we can extract our entire style library into a separate file.

In the next two lectures we start to examine some basic styling techniques.

Part 1 of 2.

This lecture continues basic CSS styling tecniques.

Part 2 of 2.

Basic Styling - Code Examples

The ability to place our elements on screen is a core capability of any web app. These lectures look at our options and how we implement different positioning and the trick of 'floating' elements.

Part 1 of 2.

The ability to place our elements on screen is a core capability of any web app. These lectures look at our options and how we implement different positioning and the trick of 'floating' elements.

Part 2 of 2.

Positioning - Code Examples

We can achieve a range of effects on element backgrounds, from solid colours to images, gradients and shadows. Over the next 3 lectures we look at detail at each of the options available to us.

Part 1 of 3

We can achieve a range of effects on element backgrounds, from solid colours to images, gradients and shadows. Over the next 3 lectures we look at detail at each of the options available to us.

Part 2 of 3

We can achieve a range of effects on element backgrounds, from solid colours to images, gradients and shadows. Over the next 3 lectures we look at detail at each of the options available to us.

Part 3 of 3

Backgrounds - Code Examples

Tables were once the element used to style entire pages! These days we just use them for formatting lists of data. In this lecture we expand on what we learnt in the HTML section and start applying CSS styling.

Tables - Code Examples

All web apps need buttons! A modern trick is to style buttons and links the same. But this means overriding the built in buttony styles and applying our modern day versions.

The next two lectures examine just how we do this.

Part 1 of 2

All web apps need buttons! A modern trick is to style buttons and links the same. But this means overriding the built in buttony styles and applying our modern day versions.

The next two lectures examine just how we do this.

Part 2 of 2

Buttons and Links - Code Examples

We looked at lists purely as lists in the HTML section. However using lists and CSS we can build stunning yet simple menu systems. In these lectures we look at how to build horizontal, vertical and even drop down menus systems. And it's easier than you think!

Part 1 of 2

We looked at lists purely as lists in the HTML section. However using lists and CSS we can build stunning yet simple menu systems. In these lectures we look at how to build horizontal, vertical and even drop down menus systems. And it's easier than you think!

Part 2 of 2

Menus - Code Examples

We've looked at a lot of HTML and CSS styling techniques but all in isolation. So this lecture introduces a challenge - duplicate a modern day example of a famous website using what we've learnt! Are you up for the challenge!?

PS, I give you some hints and then in the next lectures show you how to do it. ;-)

Download this zip file - it contains the image of the page we are going to re-produce, plus all the assets (images) you will need to build the actual page.

Download this zip. This zip contains all the completed HTML files broken down by section (Header, Body etc) plus the overall page itself. Use this file when going through the walkthrough.

In this and the next 5 lectures I'll walk you through how I built the challenge website. All the completed code is available in the previous lecture.