Home » Web Designing Syllabus

Web Designing Syllabus

HTML Introduction

HTML, or HyperText Markup Language, is a programming language. With it, you can create web pages and other content for the Internet.

  • What is HTML 4.0 & HTML 5.0
  • Types of HTML
  • Difference between HTML, DHTML, HTML 1.0, HTML 4.0 and HTML 5.0
  • Limitations of HTML 4.0
  • New Features introduced in HTML 5.0
  • List of HTML 4.0 element which was removed
  • List of New HTML 5.0 Elements which was new added.

HTML Formatting Tags

The HTML tags describe how website content elements should be formatted and what their meaning is. Tags can be nested by opening an element with an end tag and closing it with a start tag like this< > </ >.

  • HTML Basic Formatting Tags
  • Heading Tags
  • Division Tags
  • Inline Tags
  • Block Tags in HTML
  • Difference between Inline and Block Element.
  • Header & Footer Tags
  • Section, Article and Aside Tags
  • Address & other HTML Tags
  • Audio and Video Features in HTML 5.0

HTML Web Forms

HTML Form is a simple way to collect responses from a web browser. The inputs are in form of text boxes, checkboxes, radio buttons etc and this data can be delivered to the server using an HTTP request.

  • Attributes in HTML 5.0
  • Input Fields
  • Text area, Select and Multiple Select Fields.
  • Date and Time Fields
  • Form and Action
  • Button Types in HTML 5.0
  • Difference between Submit, Button and Reset
  • Range Selector in HTML
  • Required Fields
  • Patterns Making in HTML 5.0
  • Auto Focus
  • Placeholder Text
  • Disable AutoComplete
  • Restricting Values


The HTML order list is used to organize a number of items. The first character in the identification should be a letter, while subsequent characters can be either letters or numbers. An unordered list of items is a list that has no specified order. This means that the items are not numbered, and the order in which they are added to the list does not matter.

  • Order List & Unorder List
  • Definition List
  • Where and how we used order and unorder list
  • Multiple Chain in Order and Unorder list

HTML Canvas

HTML5 was developed to provide richer content and interactivity on websites without requiring the use of plug-ins like Flash or Silverlight. It works by drawing objects on a canvas, similar to drawing on paper.

  • What is Canvas in HTML 5.0
  • How to Register a Dimension
  • Draw path and Curves in Canvas
  • Coordinates in Canvas
  • Import Images and Background
  • Transformation using Canvas
  • Basic, Advanced and Pixel Animation in Canvas
  • Apply Styles and Color using Canvas
  • Canvas Pattern and Gradients
  • Text Metrics
  • Manipulate video using canvas
  • 2D and 3D using Canvas
  • Implement Canvas Security
  • Implement Captcha using canvas
  • Rendering an image using canvas
  • Browser Compatibility which supports to canvas API
  • Fallback Content
  • When not to use Canvas
  • Limitation of Canvas
  • Advantages and Disadvantages of Canvas Element
  • High end Retina Display media with Canvas


SVG stands for Scalable Vector Graphic. It is an XML-based file format, which is scalable and resolution independent. SVG images are composed of shapes, text and images which can be mixed to form complex graphics.

  • What is SVG
  • Understand the Concept of SVG
  • Create 2D using SVG
  • Create SVG Path & Text
  • Create Patterns using SVG
  • Transform SVG Elements
  • Building Application using SVG
  • Add styles and CSS with SVG
  • Compatibility of SVG

HTML Table

HTML TABLE is the most common table type. It is used to display information in a tabular form, with columns and rows. HTML Table consists of cells, rows, and columns. Within the cells, different types of content can be displayed. Cells are used to mark where certain information should be shown in the table.

  • What is Table, TR and TD
  • Row Span and Col Span
  • Display Table, Row and Cell Property
  • Create Table using DIV
  • Thead, Tfoot, ColGroup

CSS 2.0

CSS 2.0 is a style sheet language for describing the presentation of web content on screen, paper and other media. CSS is designed primarily to enable the separation of information from presentation so that different presentation technologies can be combined on one page easily.

  • What is CSS 2.0 and its Advantages
  • Selectors in CSS
  • Class and ID Selectors
  • Attributes and Child Selectors
  • Grouping of Multiple Selectors
  • Nested Selectors
  • Types of CSS
  • Difference between Internal or external and Inline CSS
  • Import and Link CSS
  • Color in CSS
  • Difference between RGB, Short Hex and Hex Codes
  • Background Color
  • Background Images and its Position
  • Sprite CSS
  • Background Attachment
  • Shorthand Property of Background
  • Gradient in CSS
  • Difference between Linear and Radial Gradients
  • Types of Gradients
  • Use of Fonts in CSS
  • Types of Fonts
  • Google Fonts
  • How we use @font-face
  • Use of Text
  • Color and Direction of Text
  • Indenting and Spacing of Text
  • Shadow between Text
  • Decorating of Text
  • Images Width height Property
  • Hover, Active and Visited Links
  • Margin and its Used
  • Shorthand Property of Margin
  • Padding and it’s Used with Shorthand Padding property
  • Outline Property
  • Min Height and Max Height
  • Line Height
  • Display Visible, Hidden Property
  • Positioning with Absolute and Relative
  • Pseudo Classes
  • Hover, Active and Visited in CSS
  • Margin and its Used
  • Shorthand Property of Margin
  • Padding and it’s Used with Shorthand Padding property
  • Outline Property
  • Min Height and Max Height
  • Line Height
  • Display Visible, Hidden Property
  • Positioning with Absolute and Relative
  • Pseudo Classes
  • Hover, Active and Visited in CSS
  • Filters in CSS
  • Flip Glow Croma and Grayscale Effect
  • Mask and Invert
  • Position using CSS
  • Fixed, Relative and Absolute
  • Z-Index in CSS
  • Flexbox with CSS
  • How we use Flex
  • Set width, basis and Flex Direction
  • Create Website Using Flex
  • Float in CSS
  • Difference between Float and Clear Property with Types

CSS 3.0

CSS 3.0 was created in 2013, This new version of CSS includes a vast number of new features such as animations, flexbox layout, new font properties, and so on.

  • What is CSS 3.0 and its benefits
  • Border Radius in CSS 3.0
  • Drop Shadow and Text Shadow
  • Multiple Background Images
  • Grid Layout
  • Multiple Column Layout
  • Advanced Animation using CSS 3.0
  • Keyframes in CSS 3.0
  • Selection
  • Animation Duration and Time Handling
  • Tailwind in CSS 3.0

Grid Layout

  • Grid Area
  • Grid Auto Flow
  • Grid Auto Row
  • Grid Gap
  • Grid Start
  • Grid Column
  • Grid Template
  • Grid Rows
  • Grid Template with Rows and Columns
  • Grid

Flexbox Layout

  • Align Content
  • Align Self
  • Align Items
  • Flex
  • Flex Basis
  • Flex Direction
  • Flex Shrink
  • Flex Wrap
  • Order
  • Justify Content


  • @KeyFrames
  • Animation Delay
  • Animation Duration
  • Animation iteration Count
  • Animation Name
  • Animation Timing Function
  • List of Animation Properties


LESS is a dynamic style sheet language. It was built with the idea of making responsive web design easier. LESS is a cascading style sheet language that allows you to use the same code to produce both static and dynamic CSS.

SAAS CSS or Source-Agnostic Authoring Services for CSS, is an approach to writing CSS styles that intends to decouple authors from the underlying source of their content.

  • What is Less and SAAS CSS and its benefits
  • Variables in CSS
  • Mixins in CSS
  • Parent Selector in CSS
  • Merge Properties in CSS
  • CSS Guards
  • Extend
  • Maps
  • Scope
  • CSS Guards


JQUERY is a free and open-source JavaScript library that simplifies HTML document traversing, event handling, animation, and Ajax interactions for rapid web development. The library is designed to change the way you look at JavaScript.

  • What is jQuery
  • Difference between document Ready and Window Load
  • Events in jQuery
  • Click and Blur or Key Press Events
  • slide Toggle or Toggle Class
  • Slide Up and Down
  • Add or Remove Class
  • External and Internal jQuery
  • Hover and animate in jQuery
  • Use of Dynamic CSS with jQuery
  • Hide and Show using jQuery
  • Button in jQuery
  • How to handle forms


Designers can use FLEXBOX to create responsive layouts that are optimized for any device. This means they can design an interface that responds smoothly as the user resizes their browser window or switches from desktop to mobile mode. FLEXBOX helps you to create more engaging and memorable user experience in the interactions.

  • What is Flexbox
  • Flex Direction
  • Alignment of Flexbox with Main and Cross Axis
  • Flex Show
  • Flex Shrink
  • Flex Basis
  • Nested Flexbox
  • Creating Background with Flexbox
  • Create Full Screen Background
  • Content Alignment in Flexbox
  • Darkening with CSS
  • Flex Grow
  • Flex Wrap
  • Reordering Flex Content
  • Nested Flex Box


BOOTSTRAP has all the basic features that are needed to create a website from scratch, including grids and an intuitive, flexible mobile-first 12-column grid system. It is also equipped with JavaScript plugins for common tasks like page scrolling and form validation. It provides all the necessary tools to build a project that looks good on all devices, with responsive images, fullscreen video, and enhanced JavaScript support.

  • What is Bootstrap
  • Layout Size in bootstrap
  • Adjusting Spacing
  • Columns, Rows and Gap with Grid
  • Dev Tools for Grid
  • Sizing and Placing with Grid
  • Columns and Rows
  • Auto Fit and Auto Fill
  • Max Content and Min Content
  • Template Areas in Grid
  • Empty Grid Area
  • Align Grid with Container
  • Ordering Grid
  • Individual Grid
  • Make Element Full Width
  • Add Side Columns in Grid
  • Create Website with Bootstrap Grid


  • Work with Google API for Map Integration
  • Web Worker
  • Storage in HTML 5.0
  • Google Chart Integration
  • Drag and Drop API
  • Web API Integration
  • Font Face
  • Google Fonts
  • Font Loading
  • Geolocation API
  • Image Capture API
  • Service Worker
  • Web Animations
  • WebGL
  • XMLHTTP Request
  • Notification Integration

Full Stack Development with 1000% Job Guarantee ( Starting Salary 30+ For Freshers and 50% Hike For Experienced)

Web Designing Course with 100% Job Guarantee ( Starting Salary 15+ )

View Our Batch Classroom
View Our Student Work
Jack Morris Media Pvt. Ltd
LabOcure Healthtest Pvt. Ltd
Twins Car Care
Water & Enviroment Technologies Pvt. Ltd
Advanced Computer Institute for Learning
Solution Engineering