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

HTML List

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

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

Animation

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

LESS & SAAS CSS

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

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

FlexBox

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

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.