Enter your keyword


Web Designing Course

  1. Introduction

In December 2011, Tata Institute of Social Sciences set up the School of Vocational Education (SVE) to provide immediate and definite interventions to improve the lives of the disadvantaged and marginalized youth, especially who are excluded by the formal school education system, through appropriate vocational training programmes. It has been set up with a vision of creating an ecosystem that would bring back the dignity of labour for blue collar streams of work and create sustainable sources of income. This project has been initiated under the aegis of All India Council for Technical Education (AICTE) proposed by the Ministry of HRD, Government of India.

1.1Introduction and Course Objectives:

Web designing is a process of conceptualization, planning, modeling, and execution on internet. This course provides web designing training according to the current requirement of IT industry. Web designing involves client requirement analysis, project scope, concept creation, layout designing, conversation of photoshop design to html/css, functionality implementation and browser testing. While creating websites the primary focus will be on client requirements, taste and targeted users of the website.

In this web designing course we will train a candidate for requirement analysis, concept creation, photoshop layout designing, color scheme creation as per client’s taste ,web design implementation, functionality integration, compatibility testing and web hosting. Web design uses all the same elements as print design. A candidate need to explore the space and layout, handle fonts and colors, and put it all together in a format that puts your message across. These resources will help a candidate to learn Web design whether a candidate are already a professional Web developer or just getting started in the Web arena.

1.2. Eligibility for Admission

The candidate should pass 10+2 in any discipline

1.3. Employability/Skill enhancement

Undergoing the Certificate course in Web Designing course will give the students an upper hand in comparison to others as they will receive additional specialized training as follows:

  • Students will gain the skills needed for entry into web design and development careers.
  • Students will be able to create Web Pages with HTML
  • Students will be able to use Web Authoring Software
  • Students can create overall site design and can do its management
  • Students will be able to formatting Web Pages with Cascading Style Sheets
  • Students will be able to use a variety of strategies and tools to create websites.
  • Students will develop interactive pages using JavaScript and JQuesry, and
  • Will be able to create standards-based websites that can be accessed by the full spectrum of web access technologies.
  • Will be able to do the Search Engine Optimization.

Method of Teaching:

A combination of vocational theory inputs along with relevant practical exposure that would commensurate with the guidelines provided in the Facilitator’s guide.

Method of Assessment & Weightage:

The assessment of students would be done in written, oral and practical examination.

Assessment Weightage:

  • Written + Oral – 50%
  • Practical examination – 50%

2. Course Structure

Duration of Course – 6 Months

Credits for course – 20 Credits

Duration of Course – 450 Hours [For Theory (classroom) courses, 1 credit = 15 hours

For Practical training, 1 credit = 30 hours]

Sr. No. Subjects & Credits Credits Duration (Hrs)


1 Web Designing 20 150+300=450

 Detailed Syllabus

Certificate Course in Web Designing


  • The History of the Web
  • The Basics of HTTP
  • HTML the Language of the Web
  • Basic HTML Tags
  • Basic HTML Body Tags
  • Coding Style
  • Serving Your Web Page
  • Modifying Text
  • Sizing Text
  • Positioning Text
  • Text Styles
  • Unordered Lists
  • Ordered Lists
  • Definition Lists
  • Special Characters
  • All about Links
  • What is a URL?
  • Linking to another Document
  • Internal Links
  • Email Links
  • Relative and Absolute Links
  • Images
  • Referencing Images
  • Clickable Images
  • Image Placement and Alignment
  • Image Size
  • Image Margins
  • Using Images on Your Page
  • Creating Images
  • Image Formats
  • Limiting Image Size
  • Image Maps
  • Defining an Image Map
  • A Quick Note
  • Advanced Use of the BODY tag
  • Coloring Body Content
  • Body Tag Attributes
  • Defining Colors
  • Browser Safe Colors
  • Basic Tables
  • Table Attributes
  • Table Cell Attributes
  • Table Row Attributes
  • Tables Inside of Tables
  • Invisible Spacers
  • Frame-Based Pages
  • Creating Windows
  • Single Window Frames
  • Creating Column Frames
  • Creating Row Frames
  • Creating Complex Frames


  • Getting Started with Styles
  • Creating Tag & Class Styles
  • Creating Styles to Format Images
  • Reviewing CSS Code
  • Previewing Page Styles
  • Understanding Page Properties
  • Creating Divs with ID Styles
  • Getting Started with Styles
  • Creating Tag & Class Styles
  • Creating Styles to Format Images
  • Reviewing CSS Code
  • Previewing Page Styles
  • Understanding Page Properties
  • Creating Divs with ID Styles
  • Getting Started with Styles
  • Creating Tag & Class Styles
  • Creating Styles to Format Images
  • Reviewing CSS Code
  • Previewing Page Styles
  • Understanding Page Properties
  • Creating Divs with ID Styles
  • Creating a Series of Divs
  • Aligning Divs Side by Side
  • Using the Clear Option in CSS
  • Adding Borders with CSS
  • Creating an Image Border
  • Using Margins for Positioning
  • Creating Navigation Links
  • Styling a List for Navigation
  • Creating a Rollover E_ect in CSS
  • Duplicating Existing Styles
  • Changing Page Properties Styles
  • Reviewing Style Selectors


  • Understanding the Box Model
  • Comparing Margins & Padding
  • Viewing CSS in Various Browsers
  • Creating a Page from a Template
  • Using Paste Special
  • Using Styles to Align Images
  • Creating a Two Column Layout
  • Calculating CSS Spacing
  • Styling Headlines
  • Understanding Font Sizes
  • Using External Style Sheets
  • Reviewing CSS Options


  • Discuss the usage and services provided by Internet
  • Describe different browsers
  • Describe the URL
  • Differentiate between web server, web page and web site
  • Discuss Hyper Text Markup Language
  • Identify the need for Java Scripts
  • Compare CGI with Java Scripts
  • Explain the scope of Java Scripts
  • Explain various HTML tags
  • View a web page using Internet Explorer
  • Differentiate “for”, “while” and “do-while” statements
  • Identify the need for “break”, “continue” and “switch-case” statements
  • Use functions with no arguments, fixed arguments and variable number arguments
  • Use variables
  • Use Integers, Floating-point numbers, Boolean and String values
  • Use Arithmetic, Logical and Assignment operators
  • Apply escape characters
  • Use functions
  • Use window object
  • Use set Timeout (), set Interval and clearInterval() methods
  • Discuss various predefined JavaScript objects
  • Create an Array object and apply its methods
  • Create a String object and apply its methods
  • Create a Date object and apply its methods
  • Discuss various predefined JavaScript objects
  • Create an Array object and apply its methods
  • Create user-defined objects
  • Add properties and methods to the user-defined objects
  • Create arrays of user-defined objects
  • Write programs using the Array object
  • Write programs using the String and the Date objects


  • What Are Javascript And Jquery
  • Document Object Model (DOM) And Jquery
  • Programming/Coding Principles
  • Separation Of Structure (HTML), Style (CSS) And
  • Behaviors (Javscript/Jquery)
  • Jquery Wrapper – DOM Elements As Array – $( )
  • Selecting And Manipulating Elements
  • Jquery API
  • Element Properties And Attributes
  • Browser Event Model
  • Jquery Event Model
  • Putting Events To Work
  • Animation And Effects Overview
  • Show/Hide Elements
  • Animate The Display State
  • Animation And Queuing
  • More On Jquery Utilities
  • Extending Jquery, Plugins
  • Dynamic Website Design With Jquery
  • Design And (3) Plans For Implementing Jquery Functionality
  • Drag And Drop Features
  • Sorting Elements
  • Changing The Size Of Elements
  • Making Elements Selectable
  • Buttons And Buttonsets
  • Sliders, Tabs, Accordians
  • Progress Bars
  • Forms/Auto Completers
  • Date Pickers
  • Dialog Boxes

Adobe Dreamweaver


  • Comparing Web Design Options
  • Appreciating CSS Advantages
  • Reviewing Old School Designs
  • Creating Dynamic Sites
  • Reviewing Site Differences


  • Creating a New Site
  • Creating a New Page
  • Adding Images with Alternate Text
  • Inserting & Formatting Text
  • Aligning Images with the Property Inspector
  • Using the Page Properties Dialog Box
  • Linking to Pages in a Site
  • Creating an Email Link
  • Linking to Other Websites
  • Testing & Targeting Links
  • Basics of data bases



  • Opening an Existing Site
  • Working in Code, Design & Split Views
  • Customizing the Insert Bar
  • Use the Properties Inspector & the Tag Selector
  • Reviewing Menu Options & Preferences
  • Comparing the Macintosh & PC Interfaces
  • Previewing in Browsers & Device Central


  • Optimizing Images for the Web
  • Saving GIFs & PNGs in Photoshop
  • Inserting GIFs in Dreamweaver
  • Adjusting Transparency Settings
  • Saving JPGs for the Web
  • Edit Images in Dreamweaver & Photoshop
  • Changing Editor Preferences


  • Understanding Tables & Accessibility
  • Using Tables for Tabular Data
  • Styling a Table
  • Editing Table Layouts
  • Adding Style to a Table Using CSS


  • Introducing Frames
  • Creating a Frameset
  • Opening Pages into Frames
  • Controlling Scrollbars & Borders
  • Targeting Links in Frames


  • Viewing Behaviors in a Browser
  • Introducing the Behaviors Panel
  • Inserting Rollover Images
  • Using the Swap Image Behavior
  • Altering Swap Image Options
  • Using the Show-Hide Elements Behavior
  • Using the Open Browser Behavior
  • Downloading More Behaviors


  • Writing HTML: The Fundamentals
  • Understanding Doctypes
  • Recognizing HTML Tags
  • Understanding Links
  • Working in Split View


  • Using CSS Layouts
  • Editing CSS Layouts
  • Altering CSS Styles
  • Creating a Dynamic Web Template
  • Editing Dynamic Web Templates

Adobe Photoshop

  • What is Photoshop?
  • What Does Photoshop Do?
  • The Photoshop Workspace
  • The Menu Bar
  • The Drawing Canvas
  • The Tool Box
  • The Palettes
  • Drawing Things on the Canvas
  • Choosing a Color
  • Defining the Brush
  • The Pencil Tool
  • The Paintbrush Tool
  • The Line Tool
  • The Airbrush Tool
  • The Text Tool
  • The Paint Bucket Tool
  • The Gradient Tool
  • Modifying Things on the Canvas
  • The Eraser Tool
  • The Smudge Tool
  • The Focus Tool
  • The Toning Tools
  • The Eye Dropper Tool
  • The Zoom Tool
  • Advanced Tools
  • Selecting Things
  • The Marquee Tool
  • The Lasso Tool
  • The Magic Wand Tool
  • The Move Tool
  • The Crop Tool
  • Channels
  • Masks
  • Layers
  • Fills
  • Cloning
  • Filters
  • Text Manipulation
  • Learn by Example
  • Real World Example
  • Backboard Under painting
  • Rainbow Facade Preparation
  • Rainbow Facade Creation
  • Logo Text
  • Logo Text in 3D
  • Visual Illusion
  • Save as: File Formats
  • Buttons
  • Shadows
  • Beveling
  • Arrows

Web Hosting

  • What is Domain ?
  • Introduction to DNS
  • How to register a Domain ?
  • What is web hosting ?
  • How to get a web hosting ?
  • Host your website on web Server


  • FTP Introduction
  • FTP Commands Viewing Files and Directories
  • FTP Commands Transfer and Rename files
  • FTP with WS FTP Windows


Search Engines and Directories

  • What are Search Engines?
  • Types of Search Engines
  • How Search Engines work and how they rank websites based upon a search term ?
  • What are Directories and how do they differ from Search Engines?
  • Difference between Search Engines and Directories.
  • What is Open Directory project and how can a listing in DMOZ boost my SEO effort?
  • What is the importance of Yahoo directory listing?
  • How do you submit your site to search engines/directories?
  • How do you monitor the performance of your website in the search engines?

Introduction to SEO and what it involves

  • What is the importance of search for websites and how can SEO save valuable dollars in advertising expenses?
  • Which search engines should I concentrate on while performing SEO activities?
  • Who can or should perform SEO activities?
  • What are the areas of operation for Search Engine Optimization Professional?

Keyword selection and optimization strategies

  • Keywords – the key to successful SEO
  • What is the importance of keywords in SEO?
  • How do you search for the right keywords that will help bring in the most traffic?
  • What is keyword density and how should you optimize keyword density for the search engines?
  • What is keyword prominence and how does it affect the SEO efforts?
  • How should keywords with two or more words be ideally placed within the webpage? What is Keyword proximity?


  • Responsive web designs fundamentals
  • Frameworks for responsive web designs: Bootstrap
  • Introduction and use of responsive web designs frameworks

Wire framing

  • Introduction of wireframes
  • Uses of wireframes
  • Elements of wireframes


Reading Lists & References:-

Learn to Code HTML and CSS: Develop and Style Websites, by Shay Howe, Publisher: New Riders

Learn to Program with Javascript, tutorials from About.com

Learning From Jquery, Publisher: Shroff – O’Reilly

Dreamweaver CC: Classroom in a Book, Publisher: Pearson Education

Wireframing Essentials by Matthew J. Hamm, Packt Publishing


Start On January 1, 2020
Duration 6M
University Tata Institute of Social Sciences
Institute PC Training Institute Limited
Location Pitampura, New Delhi

Location map

Share our course

Free Demo