Web Design Training Course Outline

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. 

Project2: CSS driven gallery

Stretching the boundaries of CSS, we will create an image gallery with CSS only:  disjointed rollover, css positioning, background techniques.

Project3: Advanced website

We will create a more complex website using advanced CSS tricks: pseudo classes, shadows, multiple columns, interactive JavaScript gallery.