Web Design Training Course Outline

Top

Web Design Course Contents

HTML

Introduction

What is internet?
Introduction to HTML, CSS, JS and Dreamweaver
Web browsers (Internet Explorer, Firefox, Safari, Opera and Google Chrome)
Role of HTML in a web design course

HTML (Hyper Text Markup Language)

HTML page structure
HTML tags
HTML attributes and values
View HTML web pages code
HTML vs xHTML

HTML Meta

What are HTML Meta tags
Role of HTML in search engine optimisation
HTML keywords and importance in SEO
HTML meta description
HTML page title

HTML Text

How to use text on HTML web pages
What is HTML paragraph?
Change the font of text
Define text colour and size
Use of Headings H1, H2, H3 etc
What are text comments?
Creating superscripts and subscripts
Striking out text
Make text bold, italic, underlined

HTML List

What is a list?
HTML ordered list
Unordered list
Use list items
Create a navigation with a list

HTML Links

What is HTML hyperlink/link?
How to create a link to another page
Connecting web pages using links
Define target for links
Create HTML anchors
Link to an anchor
Creating a link from an image

HTML Tables & Div

Creating a HTML table
Adding rows and columns to table
Defining padding and spacing
Adding table borders
Merge rows or columns with colspan and rowspan
Create Div
Apply Div Colours
Defining width and height for Div
Float vs Clear
Use background colour for Div
How to use background image for Div
How to use HTML Span
Table vs Div

Working with image in HTML

Adding image
Create image links
The GIF, JPEG and PNG formats
Alternative text, titles and descriptions for images

HTML Multimedia

Creating a marquee
Adding video to web pages
Adding YouTube video to a web page
Adding a Google map to a web page

HTML Form

What is HTML form?
Create a form
Form get and post method
Form action
Creating fieldsets and legends
Creating HTML Form text boxes
Creating password boxes
Using form Labels
Creating text areas
Creating radio buttons
Creating checkboxes
Creating List menus
How to create a file upload
Use of hidden fields
Creating form submit button
Form reset button

CSS

CSS (cascading style sheet)

What is CSS?
Separating content from presentation
Role of CSS in web design course
Inline vs embedded or external CSS
CSS structure

CSS in HTML

Applying style on one web page
Applying style on complete website
Defining styles for Classes
Style for HTML tags
Defining styles for links

Styling text using CSS

Styling text elements
Specifying font size and colour
Text decoration
Specifying font alignment
Choosing a font family
Specify font size
Setting the Line Height
Make text Italics
Use Bold Formatting
Underlining Text
Specify text colour
Apply text case
Use text's background
Word-spacing and Letter-spacing
Text indentation

Styling links using CSS

Creating hover effects
Keeping track of links
Create website navigation using CSS

Creating web page layout using CSS

How to use Div
Fluid layout
Fixed layout
Elastic layout
Specify the height of an element
Specify the width of an element
Specify the border
Specify padding around an element
Specify the margins around an element
Wrapping text around images
Use float and clear
Use background images for elements
CSS positions: static, relative, absolute, fixed
Use z-index to simulate the third dimension

Publishing/Upload website

Domain Name for your website
CPanel intro
Web Servers Introduction
Uploading and Downloading to and from your website
Protocols FTP, HTTP

HTML web page troubleshooting

Test your website
Check HTML code
View code from browser
Use Firebug to inspect HTML web page elements
Markup and CSS Validation tools

JavaScript

Introduction to JavaScript

What is JavaScript
Firebug console and JavaScript
Variables and Functions
Events and Handlers

Projects in Web Design Course

Project1: Create a personal or business website

Using the skills obtained from our web design course, we will build a simple layout website using HTML and CSS. We will create a one-column layout brochure/magazine website with multiple pages, a working navigation and a simple gallery. You will learn how to use DIVs and CSS avoiding tables for layouts; you will learn the importance of a clean and well formatted code. This project involves many stages from planning, team work, and designing, testing and launching your website.