Advance Diploma in Web Designing
- In depth knowledge of Web Designing and Graphic Designing
- Expert Trainers with well experience in Designing & training
- Live Projects
- Free Interview preparation classes
- 100% Assured placements
Skills included in Web Designing Training course
HTML 4 & 5
CSS 2 & 3
JavaScript
JQuery
BootStrap
Photoshop
BootStrap
Figma
Live Project
Hosting
Module 1: Web Design (Frontend)
HTML Syllabus
- Architecture of a website
- Different technologies in making the website
- Web Development Introduction
- History of HTML
- What you need to do to get going and make your first HTML page
- What are HTML Tags and Attributes?
- HTML Tag vs. Element
- HTML Attributes
- HTML Basic Tags
- HTML Formatting
Tags - HTML Color Coding
- Div and Span Tags for Grouping
- Unordered Lists
- Ordered Lists
- Definition list
- Image and Image Mapping
- URL – Uniform Resource Locator
- URL Encoding
- < table >
- < th >
- < tr >
- < td >
- < caption >
- < thead >
- < tbody >
- < tfoot >
- < colgroup >
- < col >
- Using Iframe as the Target
- < input >
- < textarea >
- < button >
- < select >
- < label >
- Title
- Base
- Link
- Styles
- Script
- Meta
- HTML Meta Tag
- XHTML
- HTML Deprecated Tags & Attributes
CSS Syllabus
- Benefits of CSS
- CSS Versions History
- CSS Syntax
- External Style Sheet using < link >
- Multiple Style Sheets
- Value Lengths and Percentages
- CSS Syntax
- single Style Sheets
- Multiple Style Sheets
- Value Lengths and Percentages
- ID Selectors
- Class Selectors
- Grouping Selectors
- Universal Selector
- Descendant / Child Selectors
- Attribute Selectors
- CSS – Pseudo Classes
- background-image
- background-repeat
- background-position
- CSS Cursor
- color
- background-color
- text-decoration
- text-align
- vertical-align
- text-indent
- text-transform
- white space
- letter-spacing
- word-spacing
- line-height
- font-family
- font-size
- font-style
- font-variant
- font-weight
- list-style-type
- list-style-position
- list-style-image
- list-style
- CSS Tables
- border
- width & height
- text-align
- vertical-align
- padding
- color
- Borders & Outline
- Margin & Padding
- Height and width
- CSS Dimensions
- CSS Visibility
- CSS Display
- CSS Scrollbars
- CSS Positioning
- Static Positioning
- Fixed Positioning
- Relative Positioning
- Absolute Positioning
- CSS Layers with Z-Index
- The float Property
- The clear Property
- The clear fix Hack
JavaScript Syllabus
- What is JavaScript?
- Evolution of JavaScript
- Features of JavaScript
- Advantages and Disadvantages of JavaScript
- How does JavaScript works?
- Structure of a JavaScript program
- How to write JavaScript in Notepad++, Visual Studio Code, and Eclipse IDE?
- How to add JavaScript in HTML?
- How to include External JavaScript in HTML?
- JavaScript Comments
- JavaScript Keywords
- Data Types in JavaScript
JavaScript Variables - Types of Variables in JavaScript
- Key Difference between Var, Let, and Const
- What are Operators in JavaScript?
- Assignment Operator
- Comparison Operators
- Logical Operators
- Conditional Operators
- Bitwise Operators
- Unary Operators
- TypeOf Operator
- Operator Precedence
- Conditional Statement
- If statement
- If else statement
- Switch statement
- Loop statements
- While Loop
- Do while Loop
- For loop
- Nested for loops
- For In loop
- For Of loop
- Break statement
- Continue statement
- What is a function in JavaScript?
- How to call a function in JavaScript using arguments?
- Pass By Value in JavaScript
- Function return (or return statement)
- Nested functions
- Rest parameter
- Anonymous functions
Recursion - Arrow Function
- What is an Object?
- Types of Objects
- Array Object
- Properties of Array Object
- Methods of Array Object
- String Object
- Properties of String Object
- Methods of String Object
- Math Object
- Properties of Math Object
- Methods of Math Object
- Date Object
- Methods of Date Object
- Global Object
- Properties of Global Object
- Methods of Global Object
- Number Object
- Properties of Number Object
- Methods of Number Object
- Creating your own Objects
- Defining methods
- Top-level Objects
- Window Object
- Creating a Window
- Communicating with the user
- Working with Timeouts
- Some properties of Window Object
- Some other useful methods of Window Object
- Location Object
- Properties of Location Object
- Methods of Location Object
- Document Object
- Properties of Document Object
- Methods of Document Object
- The Navigator Object
- Properties of Navigator Object
- Methods of Navigator Object
- History Object
- Properties of History Object
- Methods of History Object
- Screen Object
- Working with Frames
- Creating frames
- The frame tree
- Accessing frames
- Nested frames
- Frame object model
- Frame element object
- Events
- How does it work?
- Objects and Events
- Creating an Event handler
- Changing Event handlers
- Managing JavaScript Events
- Mouse Events
- Keyboard Events
- The onLoad and onUnload Events
- Event Simulation
- The Event object
- Event capturing
- Turning off Event capturing
- Event bubbling
- Preventing Event bubbling
- Exceptions and Errors
- Exception mechanism
- “try-catch-finally” constructions
- Throwing exceptions
- Error Object
- Properties of Error Object
- Methods of Error Object
- The Form Object
- Accessing Forms within JavaScript
- Accessing Form elements
- About <input> element objects
- Properties of Form Object
- Methods of Form Object
- Fieldset and Legend Element Objects
- Label Element Object
- Text Input Object
- Properties of Text Input Object
- Methods of Text Input Object
- Password Input Object
- Hidden Input Object
- Textarea Element Object
- Properties of Textarea Element Object
- Button Element Object
- Checkbox Input Object
- Properties of Checkbox Input Object
- Method of Checkbox Input Object
- Radio Input Object
- Properties of Radio Input Object
- Methods of Radio Input Object
- Image Input Object
- Properties of Image Input Object
- Select Element Object
- Properties of Select Element Object
- Methods of Select Element Object
- Option Element Object
- File Input Element Object
- Document Object Model (DOM) and W3C
- DOM Levels
- DOM and JavaScript
- New DOM Concepts
- Element Referencing
- Hierarchy of nodes
- Node properties
- Node methods
- Generating new node content
- Replacing node content
JQuery Syllabus
- What You Should Already Know
- What is jQuery ?
- Adding the jQuery Library to Your Pages
- Basic jQuery Example
- Downloading jQuery
- Alternatives to Downloading
- jQuery Syntax
- The Document Ready Function
- How to use Custom Scripts?
- Using Multiple Libraries
- jQuery – noConflict() Method
- String
- Numbers
- Boolean
- Objects
- Arrays
- Functions
- Arguments
- Scope
- Built-in Functions
- jQuery – CSS Element Selector and ID Selector
- jQuery – CSS Element Class Selector and Universal Selector
- jQuery – CSS Multiple Elements E, F, G Selector
- jQuery Callback Functions
- Get Attribute Value
- Set Attribute Value
- Find Elements by index
- Filtering out Elements
- Locating Descendent Elements
- JQuery DOM Traversing Methods
- Apply CSS Properties and Multiple CSS Properties
- Setting Element Width & Height
- JQuery CSS Methods
- Content Manipulation
- DOM Element Replacement
- Removing DOM Elements
- Inserting DOM elements
- DOM Manipulation Methods
- Binding event handlers
- Removing event handlers
- Event Types
- The Event Object and Attributes
- JQuery Effect Methods, Hide and Show
- jQuery Toggle
- jQuery Slide – slideDown, slideUp, slideToggle
- jQuery Fade – fadeIn, fadeOut, fadeTo
- jQuery Custom Animations
- load()
- get()
- post()
- ajax()
- getJSON()
HTML 5
- article
- aside
- figcaption
- figure
- footer
- header
- mark
- nav
- progress
- section
summary
time
- datalist
- keygen
- output
- Color
- Date
- Datetime
- Datetime-local
- Month
- Number
- Range
- Search
- Tel
- Url
- Time
- Week
- autocomplete
- autofocus
- form
- formaction
- formenctype
- formmethod
- formnovalidate
- formtarget
- height and width
- list
- min and max
- multiple
- pattern (regexp
BootStrap
- Bootstrap Get Started What is Bootstrap ?
- Bootstrap History
- Why Use Bootstrap ?
- Where To get Bootstrap ?
- Downloading Bootstrap Bootstrap CDN
- Add the HTML5 Doctype
- Bootstrap is Mobile –First
- Containers
- Basic Bootstrap Pages
- Bootstrap Grids
- Bootstrap Grid
- System
- Grid Classes
- Basic Structure of a Bootstrap Grid
- Equal Columns Unequal Columns
- Bootstrap’s Default Settings
- Bootstrap vs. Browser Defaults
- Bootstrap Tag Elements
- Contextual Colors and Background
- Typography Classes
- Rounded Corners
- Circle
- Thumbnail
- Responsive Images
- Image Gallery
- Responsive Embeds
- Creating a Jumbotron
- Jumbotron Inside Container
- Jumbotron Outside Container
- Creating a Page Header
- Wells
- Well Size
- Alerts
- Closing Alerts
- Animated Alerts
- Button Style
- Button Sizes
- Block Level Buttons
- Active /Disable Buttons
- Button Groups
- Vertical Button Groups
- Justified Button Group
- Nesting Button Groups &
- Dropdown Menus
- Split Button Dropdowns
- Glyphicons
- Glyphicons Syntax
- Glyphicon Example
- Badges
- Labels
- Basic Progress Bar
- Progress Bar With Label
- Colored Progress Bars
- Striped Progress Bars
- Basic Pagination
- Active State
- Disabled State
- Pagination Sizing
- What is Pager?
- Align Buttons
- Basic list Groups
- List Group With Badges
- List Group With Linked Items
- Contextual Classes
- Custom Content
- Panels
- Panel Heading
- Panel Footer Panel Group
- Panel with Contextual Classes
- Basic Dropdown
- Dropdown Driver
- Dropdown Header
- Disable an Item
- Dropdown Accessibility
- Bootstrap Collapse
- Example Explained
- Collapsible Panel
- Collapsible List Group
- Accordion
- Menus
- Tabs
- Tabs With Dropdown Menu
- Pills
- Vertical Pills
- Vertical
- Pills in Row Pills with Dropdown Menu
- Centered Tabs and Pills
- Toggable/Dynamic Tabs
- Toggable/Dynamic Pills
- Navigation Bars
- Inverted Navigation Bar
- Fixed Navigation Bar
- Navigation Bars
- Right Aligned Navigation Bar
- Collapsing The Navigation Bar
- Bootstrap’s Default Settings
- Bootstrap Form Layouts
- Bootstrap Vertical Form
- Bootstrap Inline Form
- Bootstrap Horizontal Form
- Bootstrap Form Inputs Supported Form Controls
- Bootstrap Text area
- Bootstrap Checkboxes
- Bootstrap Radio Buttons
- Bootstrap Select List
- Static Control
- Bootstrap Form Control States
- Input Sizing in Forms
- Height Sizing Column Sizing
Module 2: Graphic Design
Adobe Photoshop Syllabus
- Overview to graphic design
- Different ways to use the colours
- Importance of colour schemes
- Colour codes and format
- Extensions
- Size and Resize
- Different types of graphics
- Process of graphic designing
- Scope of graphic designing
- Overview to Photoshop
- Scope of using photoshop
- Different ways to use photoshop in graphic design
- Process of photoshop
- Overview to a variety of tools
- How does Photoshop work?
- Basics and version history of photoshop
- Image editing
- Layering
- Tool uses
- Overview to photoshop selections
- Basic selections
- Direct selection tool
- Clone stamp tool
- Custom shaping
- Quick Mask
- How do you use the selection tool in Photoshop?
- Selecting portions
- Adjustment layers
- 3D in photoshop
- Overview of photoshop tools
Healing tools - Eyedropper tool
- Eraser tools
- Magnetic lasso tool
- Pen tool
- Brush tool
- Smudge tools
- Black and white with colours
- Gradients
- Introduction to different photoshop effects
- Masks and watercolour brushes
- Tilt-shift effects
- 3D and realist effects
- Lomo photo effect
- Action features
- Vintage effects
- Retro photo masks
- Image correction
- Size and colour correction
- Creation of 2D and 3D image
- Design a Glossy Icon
- Craft a Vintage Letter
- Draw a Pirate Character in Photoshop
- Learn to Paint Beautiful Realistic drawings
- Brochure designing
- Pamphlet design
- Digital creatives
- Billboards
- Hoardings
Adobe Illustrator Syllabus
- Overview to illustrator
- Different tools in illustrator
- Significance of using an illustrator
- Projects in illustrator
- Line segmentation
- Colour schemes
- Shaping
- Free transformation
- Versions of illustrator
- 2D and 3D effects
- Ways to selection tool
- Basics of selection
- Direct selection tool
- Magic wand
- Curvature tools
- Easy perspective grid selection
- Appearance Panel
- Revolving
- Opacity masking
- Clipping mask
- Introduction to
- different illustrator tools
- Different ways to use the tools
- Bristle brushes
- Reflect tools
- Path eraser tool
- Pen tool
- Anchor point tool
- Colour swatches
- Typography
- Map art
- Custom symbols
- Aligning panel
- Unique effect creations
- Blur Effect
- Grain Effect
- Drop Shadow
- Inner Glow Effect
- Roughen Effect
- Liquefying effects
- Opaque effects
- 3D effects
- Vectors
- Realistic fur effect
- Neat typography effects
- Introduction to different photoshop effects
- Masks and watercolour brushes
- Tilt-shift effects
- 3D and realist effects
- Lomo photo effect
- Action features
- Vintage effects
- Retro photo masks
- Image correction
- Size and colour correction
- Web graphics
- Posters
- Vectors
- Brochure designing
- Web banners
- Icons
- Animated illustrations
- Infographics
- T-shirt poster designing
- Slide graphics
Corel Draw Syllabus
- Overview to corel draw
- Applications of
- corel draw
- Corel draw functionalities
- Elements and components
- How to use the tools?
- What all can be created with corel draw?
- Making trendy and unique transitions
- 3D depth through gradient
- New document and page setup
- Practical knowledge
- Basic selection tools
- Save and copy commands
- Selection objects
- Selecting similar objects in Corel Draw
- Pick tool in Corel draw
- Selecting nodes
- Selection box
- Cut, copy and paste command
- Zoom and pan tool
- Applying a master page
- Introduction to different tools
- Working with multiple artboards
- Content placer tool
- Working with fonts
- Use of opacity
- Exporting of different objects
- Shape, crop and curve
- Changing colour values
- Colour swatches
- Picker tool
- Opacity within graphics
- 3D effect
- Contouring
- Gradient interactive effects
- Glowy effect
- Creative effect
- Colorful creatives
- Artistic texts
- Block shadow effect
- Rhinestone effect
- Designing Brochures
Catalogues - Newspapers Designing for publications
- Case studies and Projects
- Typography projects Symbols
- Icon Design for Publications
- Posters
- Magazine designing
- Branding logo
- Web graphics
FIGMA
- Build & test a complete mobile app and CMS website.
- Work with colors & fonts.
- interactive prototype with micro interactions.
- Learn professional technique & shortcuts.
- Design for Augmented Reality projects.
- choose colors.
- choose the correct font
- send your final project to other professionals in the
- correct formats
- Build a UI project from beginning to end.
- Build and test a complete landing page.
- Learn to design mobile apps & websites.
- Interactive prototyping
- Export production ready assets.
- Design 3 different logos.
- Create low-fidelity wireframe.
- Downloadable exercise files.
- All the techniques used by UI professionals
- You will learn about typography
Module 3: Online Tools
- PosterMyWall
- Canva
- Adobe Express
Advance diploma Courses
Advance Diploma in Web Development
