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.

Introduction to Web Technologies

Careers in Web Technologies and Job Roles

How the Website Works?

Client and Server Scripting Languages

Difference between a Web Designer and Web Developer

Types of Websites (Static and Dynamic Websites)

Responsive design and layout

Photoshop

Introduction to Adobe Photoshop

Color mode & resolution

Types of Graphics

Export image

Animated Image

Tools

Ruler and scaling

Create Logos

Photos masking

  • Layer Mask
  • Vector Mask
  • Create Clipping Mask
  • Quick Mask
  • Text Mask

3D tools

Smart Objects

Merge Layers

Group Layers

Matting

Define Brush

Define Pattern

Define Custom shapes

Layer Styles

Blending Options

Advanced Blending

View Menu / Window Menu

Filter Effects

Image Adjustments

Realtime Website Layout Design

HTML 4.0

What is Markup Language

Basic Structure of HTML

Document Overview

  • The Structure Tags
  • Getting Started With HTML
  • Writing the Code
  • Head Section
  • Meta Tags
  • External Link Tags
  • HTML Tags
  • HEAD Tags
  • Title Tags
  • Body Tags
  • Displaying a web page in a web Browser

HTML Elements

  • Block level elements
  • Inline elements
  • Empty elements

Working with Forms

  • Creating a Form
  • Form Tag
  • Text Input, Text Area, Checkbox, Image Input and Radio
  • Select Option
  • Option Group
  • File Upload and Hidden Fields
  • Submit Button, Reset Button
  • Relation between HTML Form and PHP

Adding Special Characters

Block Oriented Elements

  • Defining Paragraphs and new Lines
  • Inserting Spaces
  • Perforating the Text
  • 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

  • How to create table
  • Adding Border to a Table
  • Apply Formatting Features to Table
  • Merge row and columns

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

HTML Frames

  • Frame
  • iframe

HTML5

Introduction to HTML5

  • Introduction to HTML5
  • What's new in HTML5

HTML5 Syntax

  • The DOCTYPE
  • HTML5 Document

New input Elements

  • Color
  • Date
  • Datetime
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week

New Input attributes

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

Audio and Video

  • audio
  • video
  • source

New Structural Elements

  • details
  • dialog
  • summary
  • meter
  • main
  • header& footer
  • section
  • aside
  • figure

SVG

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

Canvas

  • What is canvas?
  • Lines
  • Curves
  • Paths
  • Shapes
  • Color, gradients
  • Image
  • Arc
  • Text
  • Shadowt

HTML5 APIs

  • Google Map
  • Drag & Drop

CSS

CSS Introduction

  • CSS Syntax
  • CSS Id & Class
  • Types of CSS links

Colors and Backgrounds

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

Text and Fonts

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

Lists

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

Tables

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

CSS Selectors

  • Universal Selector
  • Type Selector
  • Class Selector
  • ID Selector
  • Child Selector
  • Descendant Selector
  • Attribute Selector
  • Adjacent Sibling Selector
  • General Sibling Selector
  • Query Selector

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

CSS 3.0

Introduction to CSS3.0

What's new in CSS 3.0

Border

  • border-image
  • border-radius

CSS Shadows

  • Text-shadow
  • Box-shadow

Background

  • background-clip
  • background-size
  • background-origin
  • background-image

Transform

2D Transforms

  • transform
  • matrix()
  • translate(x,y)
  • scale(x,y)
  • rotate(angle)
  • skew(x-angle,y-angle)

3D Transforms

  • transform
  • transform-style
  • perspective
  • transform-origin

Animations

  • @keyframes
  • animation
  • animation-direction
  • animation-duration
  • animation-name

Selectors

  • CSS combinations
  • Pseudo Elements

Gradients

  • Linear Gradients
  • Radial Gradients

HTML5 APIsMultiple Columns

  • column-count
  • column-fill
  • column-gap
  • column-width
  • columns
  • column-rule
  • column-rule-color
  • column-rule-style
  • column-rule-width

User Interface

  • resize
  • box-sizing
  • outline-offset

CSS Filters

  • Blur
  • Brightness
  • Contrast
  • Grayscale
  • Hue-rotate
  • Invert
  • Opacity
  • Saturate
  • Sepia
  • Drop-shadow

Media Query

  • What is Responsive Web Design
  • Intro to the Viewport
  • The Viewport Tag
  • Media Queries
  • Fluid Layouts
  • Tablet Styles
  • Mobile Styles
  • Making a Mobile Drop-down Menu
  • Responsive Images & Polyfills

Web Fonts

  • @font-face
  • font-family
  • src
  • font-stretch
  • font-style
  • font-weight

Flexbox

  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • flex-wrap
  • flex-direction
  • flex-flow
  • justify-content
  • align-items
  • order

Dreamweaver cc

Tables

  • 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

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
  • 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

  • Cascading Style Sheets
  • 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

JAVASCRIPT

Introduction to 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
  • Break

Functions

  • User-defined Functions
    • Function Syntax
    • Function with Arguments
    • Returning Values from Functions
  • Built-in Functions
  • paraseInt and parseFloat

Events

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

Cookies

Page redirection

Built-in Objects

  • Introduction
  • Number
  • Strings
  • Math
  • Arrays
  • Associative Array
  • 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

    JS Document Object Model (DOM)

    • Introduction
    • DOM HTML
    • DOM CSS
    • DOM Events

    JS Browser Object Model (BOM)

    • JS Cookies
    • JS Window
    • JS Location
    • JS Popups
    • JS Time

    Introduction to OOP concept
    JQuery

    What is JQuery?

    Overview of JQuery features

    Using JQuery links

    JQuery Selectors

    JQuery Events

    JQuery Effects

    • Hide() & show()
    • Fade()
    • Slide()
    • Animate()
    • Callback function
    • Chaining

    JQuery HTML

    • Get() & Set()
    • Add() & Remove()
    • CSS()
    • Dimensions()

    JQuery Traversings

    • Parent() & children()
    • Next() & Prev()
    • Find()

    Jquery AJAX

    Image slider using JQuery plugins

    Form Validation

    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

    Live Website Design Project (100% Realtime Project)

    Designing a Professional Photoshop Template

    Conversion of PSD to HTML

    Slideshow Integration

    Implementing Gallery Script

    Adding the Contact Form

    Form validations using JS

COMMENCING NEW BATCHES
ENQUIRY FORM
FOLLOW US ON
SUBSCRIBE TO OUR NEWSLETTER

WE ACCEPT ONLINE PAYMENTS
PAY ONLINE