This course introduces students to basic web design using HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets). The course does not require any prior knowledge of HTML or web design. Throughout the course students are introduced to planning and designing effective web pages; implementing web pages by writing HTML and CSS code; enhancing web pages with the use of page layout techniques, text formatting, graphics, images, and multimedia; and producing a functional, multi-page website. The course topical outline provides a summary of course topics that can be used as a guide when progressing through the course. Upon successful completion of this course, students will be able to: Recognize and understand HTML web page elements Know how to write HTML code Understand and apply effective web design principles Enhance web pages using text formatting, color, graphics, images, and multimedia Incorporate forms into web pages Understand and apply CSS to format web page elements Plan, design, and publish a multi-page website Upon successful completion of this course, students will have a good foundation in web design using HTML and CSS and will be prepared to study more advanced web design topics. Students should have a general background in using a computer, managing files, and a basic knowledge of the Internet. Students should also be able to navigate to and within a website using a web browser such as Chrome, Firefox, Internet Explorer, or Safari. Students do not need to purchase any software for this course.

PHOTOSHOP

  • Workflow
  • Selection & Drawing
  • Channels & Layers
  • Image Editing & Special Effects
  • Automating Tasks
  • Print Image

HTML-4

  • Document Overview
  • The Structure Tags
  • Components of the HTML Code
  • Getting Started With HTML
  • Writing the Code

Head Elements

  • HTML Tags
  • HEAD Tags
  • Title Tags
  • Body Tag
  • Displaying a web page in a web Browser

Block Oriented Elements

  • Defining Paragraphs and new Lines
  • Inserting Spaces
  • Perforating the Text
  • FONT Tag
  • Changing Background Color

List

  • Ordered List
  • Unordered List
  • Definition List

Attributes of List

  • Using Type attribute with Unordered list
  • Using Stat attribute with Ordered List
  • Some other elements
  • Visual Markup

Uniform Resource Locators

  • Types of URLs
  • Absolute URLs
  • Relative URLs
  • Document-Relative URLs
  • Server-relative URLs

Hypertext Links

  • Why links fail?

Images

  • Adding Images
  • Adding Border to an image

Tables

  • Adding Border to a Table
  • Apply Formatting Features to Table
  • Spanning Columns and Rows
  • Align Data in Table

Forms

  • CGI Script
  • Creating a Form

Adding Special Characters Introduction to style Sheets

  • How style sheets work
  • Style Sheet Structure

Changing the Background

  • Changing the color of the text
  • Changing the front
  • Changing the Indent of the text
  • Changing the Line Spacing
  • Hide a Style Sheet

Creating Style Classes

  • Div
  • Span
  • Frame
  • Layer
  • Meta

Structural Elements

  • What is SVG?
  • SVG Advantages
  • SVG in HTML
  • SVG Shapes
  • SVG Text
  • SVG Stroke properties

Canvas Overview

  • Lines
  • Curves
  • Paths
  • Shapes
  • Color, gradients
  • Image

HTML 5

  • What is HTML 5
  • Overview of HTML 5

HTML5 Syntax

  • The DOCTYPE
  • The script tag
  • The link tag
  • HTML5 Document

Forms

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

Form Elements

  • novalidate

New attributes for input

  • autofocus
  • formaction
  • formmethod
  • formnovalidate
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

Video and Audio

  • anchor links
  • email links
  • file links
  • image maps

Typography

  • About Typography
  • Web Typography

Tables

  • insert and modify a table
  • fixed width tables
  • relative width tables
  • hybrid table
  • insert tabular data
  • sort table data

Rollovers

  • simple rollovers - insert rollover
  • simple rollover - swap image behavior
  • multiple-event rollovers
  • flash buttons

Cascading Style Sheets

  • redefining HTML tags
  • defining a custom class
  • CSS selectors
  • CSS selectors to group tags
  • linking to external CSS
  • CSS reference panel

Forms

  • form objects
  • creating a form
  • creating a jump menu

Behaviors

  • set text of status bar
  • open browser window behavior

Inserting Media Objects

  • linking to sounds
  • embedding sounds
  • inserting flash content
  • inserting director content

Dreamweaver

  • choosing a workspace
  • document window & toolbars
  • the document window
  • the launcher
  • the insert panel & tool sets
  • the document toolbar
  • the property inspector
  • dockable floating panels
  • using contextual menus

Site Control

  • defining a site
  • file and folder management
  • creating site maps
  • using the file browser
  • create a site from nothing

Basics

  • defining the site
  • creating and saving documents
  • inserting images with assets panel
  • adding text
  • aligning page elements
  • modifying page properties
  • creating links with text and images
  • preview in browser

Linking

  • link with point to file
  • linking to new source files
  • browse for file and link history

Colors and Backgrounds

  • color
  • background-color
  • background
  • background-image
  • background-repeat
  • background-position
  • background-attachment

Text and Fonts

  • font
  • font-family
  • font-size
  • font-weight
  • font-style
  • line-height
  • letter-spacing
  • word-spacing
  • text-align
  • text-decoration
  • text-transform

Lists

  • list-style
  • list-style-type
  • list-style-image
  • list-style-position

Tables

  • table-layout
  • border-collapse
  • border-spacing

CSS Box Model

  • CSS Border
  • CSS Outline
  • CSS Margin
  • CSS Padding

CSS Advanced

  • CSS Grouping/Nesting
  • CSS Dimension
  • CSS Display
  • CSS Positioning
  • CSS Floating
  • CSS Align
  • CSS Pseudo-class
  • CSS Pseudo-element
  • CSS Navigation Bar
  • CSS Image Gallery
  • CSS Image Opacity
  • CSS Attribute Selectors
  • Styling Links

User Interface

  • resize
  • box-sizing
  • outline-offset

CSS

  • CSS Syntax
  • CSS Id & Class
  • CSS How

CSS 3.0

  • Introduction to CSS 3
  • What's new in CSS 3.0
  • Border
  • border-image
  • border-radius
  • Box-shadow
  • Text effects
  • text-shadow
  • background
  • background-clip
  • background-size
  • Outline
  • Transitions
  • transition
  • transition-delay
  • transition-duration
  • transition-property
  • Transform
  • 2D Transforms
  • transform
  • matrix()
  • translate(x,y)
  • scale(x,y)
  • rotate(angle)
  • skew(x-angle,y-angle)
  • 3D Transforms
  • transform
  • transform-style
  • perspective
  • Animations
  • @keyframes
  • animation
  • animation-direction
  • animation-duration
  • animation-name
  • Linear Gradients
  • Radial Gradients
  • Selectors
  • Gradients
  • column-count
  • column-fill
  • column-gap
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width
  • Multiple Columns
  • Cookies
  • Page redirection
  • Built-in Objects
  • Introduction
  • Number
  • Strings
  • Math
  • Arrays
  • Associative
  • Array Properties and Methods
  • Date
  • Boolean
  • Regexp
  • Advanced javascript
  • Form Validations
  • Basics of Form Validation
  • Validating Radio Buttons
  • Validating Checkboxes
  • Validating Select Menus
  • Validating Textareas

JAVASCRIPT

  • Syntax
  • Statements
  • Comments

Enabling in various browsers Popup Boxes

  • Alert
  • Confirm
  • Prompt

Variables Operators

  • Arithmetic
  • Assignment
  • Comparison
  • Logical
  • Conditional

Conditional Statements

  • if
  • if...else
  • if...else if...else
  • Switch

Loops

  • while
  • do...while
  • for
  • for...in Statement
  • Break
  • Continue

Functions

  • User-defined Functions
  • Built-in Functions

Events

  • Introduction
  • Mouse Events
  • Keyboard Events
  • Form Events
  • Document/Window Events

Bootstrap Framework

  • Getting started with Bootstrap
  • Grid system in Bootstrap
  • Adding Header & Navigation
  • Adding Logo in Navigation Bar & Adding Banner
  • Adding Jumbotron
  • Adding Rows, Columns & Containers
  • Adding Column Width using offset
  • Ordering Columns using push or pull
  • Nesting Columns in Bootstrap
  • Adding Footer top Website
  • Typography in Bootstrap
  • Adding glyphicons
  • Styling Tables
  • Adding Responsive or Utilities in Bootstrap
  • Styling Button using between classes
  • Styling Images and making images Responsive
  • Adding description list in bootstrap
  • Adding Panels

Responsive Web Design

  • What is Responsive Web Design?
  • Fluid grid system & Fixed guid system
  • Conversion of old websites in RWD

JQuery

  • What is Jquery?
  • Overview of JQuery's features
  • What is JQuery UI?ore . . .
  • Downloading and using jQuery
  • Validating HTML form data using jQuery
  • Intro into Responsive Design
  • Using JQuery with HTML pages
  • Manipulating HTML CSS, Attribute, Type and ID selector using Jquery
  • Using jQuery sliders and photo galleries
  • Using jQuery sliders and photo galleries
  • Using JQuery based plugins
  • Image Gallery
  • Form Validator
  • Image Zoom
  • plugins and M
COMMENCING NEW BATCHES
ENQUIRY FORM
FOLLOW US ON
SUBSCRIBE TO OUR NEWSLETTER

WE ACCEPT ONLINE PAYMENTS
PAY ONLINE