Website Design

Course Outline for Website Design & Development


This course is designed with aim to teach the fundamentals of Web site designing and development. This course will train user on website development tools eg HTML, CSS and Java Script. This course is more practical oriented.


It is expected that the trainee has some elementary knowledge of English and
basic computer applications.

Prepares for:

Web site Designer


Any 10+ students or IT professional


2 Months (40 hours)

Course Outline

HTML (11 Hours)

  • Introduction
  • Editors
  • Basics
  • Elements
  • Attributes
  • Headings
  • Paragraph
  • Formatting
  • Links
  • Head (title , base , meta , style , script)
  • CSS
  • Images
  • Tables
  • Lists (ordered list , unordered list)
  • Blocks
  • Layout
  • Form
  • Iframe
  • Colors
  • Colornames
  • Colorvalues
  • Entities
  • Url encode
  • Quick list
  • Multimedia-Video
  • Multimedia-Sound
  • Cascading Style Sheets (6 Hours)

    1: Introduction

    • What is CSS?
    • Structure of selectors and declaration blocks
    • External, embedded, and inline styles

    2: Id, Class, Descendant and Grouped Selectors

    • Differences between id and class selectors
    • Using grouped selectors for common styles
    • Use descendant selectors effectively

    3: Pseudo Class and Element Selectors

    • Differences between pseudo class and pseudo element selectors
    • Common uses for pseudo class/element selectors, Styling hyperlinks

    4: Testing the Cascade

    • Specificity basics, Review and testing of Cascade rules
    • What is the !importance rule?

    5: Backgrounds and Borders

    • Adding background images
    • Borders for block-level and inline elements
    • Browser quirks with borders

    6: Sprucing up Lists and Tables

    • Adding style to lists
    • Styles allowed for table layout

    7: Margins and Alignment

    • Basic rues of the box model
    • Overlapping blocks
    • Positioning content with margins

    8: Putting It Together

    • Basic CSS-based layout
    • Comprehensive review of properties discussed

    Dreamweaver (6 Hours)

    1. Dreamweaver Basic (2 Hours)
    The Dreamweaver Interface, Setting Up a Site in Dreamweaver, Creating Links,
    Inserting Text, Inserting Images, FTP with Dreamweaver.

    2. Using HTML & Cascading Style Sheets (4 Hours)
    Hierarchical structure: elements (tags) and text, Basic XHTML document
    structure, Paragraphs, Whitespace and line breaks in XHTML, Headings, Phrase
    mark-up in XHTML, Hypertext links, Embedded images, Lists, Preformatted text,
    Special characters in XHTML, XHTML and Semantic markup, Using Cascading
    Style Sheets to Style Your Page, Formatting Text with CSS, Embedding Style
    Sheets, Attaching External Style Sheets, Page Layout with CSS.

    Adobe Photoshop (6 Hours)

    1. Photoshop Basic (3 Hours)
    Introduction to the tools used in Photoshop

    2.Using Selections and Layers , Image Retouching (3 Hours)
    Making geometric selections, Modifying selections, Combining selections, Using the Quick Selection tool,Understanding layers, Creating layers, Working in the Layers panel, Locking layers, Working with multiple layers,Cropping, Straightening, Transforming, Using the Spot Healing Brush tool, Using the Healing Brush tool, Using the Patch tool, Using the Clone Stamp tool, Enhancing eyes, Changing facial structure, Softening skin

    JavaScript (11 Hours)

    • JavaScript as a Web programming language
    • The script element
    • Creating variables in JavaScript
    • Using alert and confirm boxes
    • Using prompt to access user input
    • Basic script debugging
    • Strings and numbers in JavaScript
    • Converting strings to numbers – parseInt, parseFloat, and Number
    • Using conditional statement – if, else if, and else
    • Understanding switch
    • Creating for and while loops
    • JavaScript functions
    • JavaScript objects
    • Using the Array object
    • Creating single-dimensional arrays
    • Understanding the Math object
    • Using random numbers
    • Understanding the Date object
    • Displaying date and time on your pages
    • Using international time
    • Creating a timer
    • Using inline event handlers
    • Using the String object
    • Manipulating string data
    • Basic events and event handlers
    • Using the traditional event registration model
    • Event capturing and event bubbling
    • Understanding the Browser Object Model (BOM)
    • Browser object detection techniques
    • Simple and complex rollovers
    • Open, move, and resize new windows
    • Understanding the Document Object Model (DOM)
    • HTML documents as family trees
    • HTMLdocuments as node trees
    • Basic DOM objects, methods, and properties
    • JavaScript best practices
    • Graceful degradation
    • Progressive enhancement
    • Separating structure, presentation, and behavior