Website Designing

Course Outline for Website Design & Development

Goal:

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.

Pre-requisites:

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

Prepares for:

Website Designer

Audience:

Any 10+ students or IT professional

Duration:

2 Months (40 hours)

Course Outline:

LectureDescription
Lecture-1
  • Introduction
  • Editors
  • Basic HTML Structure / Overview
Lecture-2
    • Basic HTML Tags
      • Headings Tag
      • Paragraph Tag
      • Line Break Tag
      • Center Tag
      • Hr Tag
      • Pre Tag
      • nbsp tag
    • HTML Elements

Typee of HTML Elements

    • Block Level Element
    • Inline Level Element
Lecture-3
  • HTML Attributes
    • Align Attribute
    • Title Attribute
    • Class Attribute
    • Style Attribute
  • HTML head Elements.
  • HTML meta Tag
    • Keywords
    • description
    • Author of the page
    • Refresh
  • HTML Formatting Elements.
    • Bold Text
    • Italic Text
    • Underline text
    • Strike Text
    • Superscript Text
    • Subscript Text
    • Delete Text
    • Large Text
    • Monospaced Font
    • Smaller Text
Lecture-4
  • HTML Comments
    • Invalid Comment
    • Multiline Comment
  • HTML Images
    • Insert Simple Image
    • Set image location
    • Set image Width and Height
    • Set image Border
    • Set image Alignment
  • HTML Lists (ordered list , unordered list)
    • HTML Ordered List
    • HTML Unordered List
Lecture-5
  • HTML Links
    • Link on Text
    • Link on Image
    • The Target Attribute
  • HTML Tables
    • Table Border
    • Table Cellspacing
    • Table Cellpadding
    • Table Background-Color
    • Table Width and Height
    • Table Rowspan And Colspan
    • Tables Caption
Lecture-6
  • HTML DIV Tag
  • HTML SPAN Tag
  • HTML Background
    • HTML Background with Color
    • HTML Background with Images
  • HTML Colors
    • HTML Colors- Color-Name
    • HTML Colors- Hex Codes
    • HTML Colors- RGB Value
Lecture-7
    • HTML Fonts
      • Font Size
      • Font Face
    • HTML Form

Form Controls

    • Single-Line Text Input Controls
    • Password Input Control
    • Multiple-line Input Control
    • Checkbox Control
    • Radio Button Control
    • Button Control
    • File Upload Box
  • Entities
Lecture-8
  • Iframe
  • HTML Marquee
    • Marquee Width
    • Marquee Direction
  • Url encode
  • Drop-Down List (Select and Option)
  • Multimedia-Video
    • Video With Contorl
    • Video Autoplay
  • Multimedia-Audio
  • Layout
LectureDescription
Lecture-1
  • HTML5 Introduction
  • HTML5 DOCTYPE Declaration
  • HTML5 Elements
    • Header
    • Footer
    • Navigation
    • Article
    • Section
Lecture-2
  • HTML5 Graphics
    • HTML5 Canvas
    • HTML5 SVG
Lecture-3
  • HTML5 Media
    • HTML5 Video
    • HTML5 Audio
  • HTML5 Plugins
LectureDescription
Lecture-1
Introduction
  • What is CSS?
  • Structure of selectors and declaration blocks
  • Differences between id and class selectors
Lecture-2
Adding Css, Descendant and Grouped Selectors
  • External, embedded, and inline styles
  • Using grouped selectors for common styles
  • Use descendant selectors effectively
Pseudo Class and Element Selectors
  • Differences between pseudo class and pseudo element selectors
  • Common uses for pseudo class/element selectors, Styling hyperlinks
Lecture-3
CSS Comments
CSS Background
  • Set the Background Color
  • Set the Background Image
  • Repeat the Background Image
  • Set the Background Image Position
  • Set the Background Image Attachment
Lecture-4
CSS Fonts
  • Set the Font Family
  • Set the Font style
  • Set the Font weight
  • Set the Font size
CSS Text
  • Set the Text Color
  • Set the Text Direction
  • Set the space between character
  • Set the space between words
  • Set the text Alignment
  • Decorating the text
  • Set the Text Transform
  • Set the White Space between text
  • Set the Text Shadow
Lecture-5
CSS Margin
  • Margin Bottom Property
  • Margin Top Property
  • Margin Left Property
  • Margin Right Property
CSS Padding
  • Padding Top Property
  • Padding Right Property
  • Padding Bottom Property
  • Padding Left Property
Lecture-6
Image Border With CSS
CSS Links
  • Set the Color of Links
  • Change the Color of Links when Mouse is over
  • Change the Color of Active Links
Lecture-7
CSS Borders
  • Border-color
  • Border-Style
    • None
    • Solid
    • Dotted
    • Dashed
    • Double
    • Groove
    • Ridge
    • Inset
    • Outset
    • Hidden
  • Border-Width
  • Border Properties Using Shorthand
Lecture-8
List
  • List StyleType Property
    • Disc
    • Circle
    • Square
Basic CSS-based layout
LectureDescription
Lecture-1
  • CSS3 Introduction
  • CSS3 Rounded Corners
  • CSS3 Border Images
  • CSS3 Background Images
  • CSS3 Colors
  • CSS3 Shadows
Lecture-2
  • CSS3 Text
  • CSS3 2D Transform
  • CSS3 3D Transform
  • CSS3 Transitions
  • CSS3 Animations
  • CSS3 Media Queries
LectureDescription
Lecture-1
  • Introduction of JavaScript(JS)
  • Java Script Elements
    • Finding HTML Element by Id
    • Finding HTML Element by Tag Name
    • Finding HTML element by Class Name
Lecture-2
  • JavaScript variables
    • Creating JAVA-SCRIPT (JS) Variable
    • One Statement, Many Variables in JAVA SCRIPT
  • JAVA SCRIPT popup Boxes
    • Alert box
    • Confirm Box
    • Prompt Box
Lecture-3
  • JAVA SCRIPT Line Break
  • JAVA SCRIPT Strings
    • JAVA SCRIPT Strings Length
    • Adding Special Character in JAVA SCRIPT
  • JAVA SCRIPT Numbers
    • Adding Numbers and Strings
Lecture-4
  • Conditional Statement in JAVA SCRIPT
    • The If Statement
    • The else Statement
    • The else if Statement
Lecture-5
  • JAVA SCRIPT Switch Statement
  • JAVA SCRIPT Loops
    • For loop
    • while loop
Lecture-6
  • JavaScript functions
  • JAVA SCRIPT Objects
  • Displaying Current date and time on page
    • Creating Date Object
Lecture-7
  • JAVA SCRPT Events
  • JAVA SCRPT Arrays
    • Creating an Array
    • Access the Elements of an Array
    • Access the Full Array
Lecture-8
  • JAVA SCRPT Math Object
    • Math.PI
    • Math.round()
    • Math.pow()
    • Math.sqrt()
    • Math.abs()