Web Designing Training

  • Overview
  • Course Content
  • Drop us a Query

Web Designing training provides a comprehensive study on the tools and technologies required for the designing of impressive website. Participants will learn the effective use of CSS, Photoshop, Dreamweaver, HTML, HTML5, Java Script, and jQuery.

An experienced trainer guides in understanding the client requirement and further in concept creation. The coding, layout, color scheme, font style/size/color, functionality and other details are encompassed in this training. Aspirants are taught how to keep a balance between text, graphics and multimedia on the website by keeping it comply to the standardization.

By the end of the training , you will be able to do the following:

  • Using CSS- structure text/lists, define link states, define layout, work on forms
  • Using Photoshop and Dreamweaver- for image editing
  • Using HTML - apply tags/elements/attributes/comments, implement formatting, provide linking, create frames/blocks, use colors/fonts/stylesheet/layout
  • Using HTML5- work with text, forms, multimedia, data storage, and geolocation
  • Using JavaScript - use arithmetic/logical operators, loop/control statements, functions/events, DOM
  • Using jQuery - use DOM elements, jQuery utilities/events
Target audience
  • Website Developer
  • Web Designer
  • Students
Prerequisites

While there is no formal prerequisite for this training, however candidates with a strong interest in website designing are the ideal participants for this course. Understanding of HTML and CSS will be an added advantage.

Module 1: CSS

  • CSS Syntax                                                                                                         
    • Rules                                                                                                           
    • Selectors                                                                                                      
    • Properties                                                                                                   
    • Values                                                                                                          
    • Applying CSS to HTML                                                                                 
  • Text                                                                                         
    • Structuring Text                                                                                                  
    • Basic Text Elements: Paragraphs, Line Breaks, and Emphasis                   
    • Headings                                                                                                      
    • Quotations                                                                                                   
    • Abbreviations and Acronyms                                                                        
    • Preformatted Text and Computer Code                                                       
    • Editorial Insertions and Deletions                                                              
    • Multilanguage and Bidirectional Text                                                          
    • Addresses                                                                                                   
    • Styling Text                                                                                                          
    • Fonts                                                                                                           
    • Color                                                                                                           
    • Size                                                                                                              
    • Line Height                                                                                                  
    • Bold and Italics                                                                                            
    • Upper and Lower Case                                                                                 
    • The Font Shorthand Property                                                                        
    • Underline and Strikethrough                                                                       
    • Letter and Word Spacing                                                                             
    • Indenting                                                                                                      
    • Horizontal Alignment                                                                                   
    • Vertical Alignment                                                                                        
    • More Text Styling Techniques                                                                       
  • Links                                                                                      
    • Link States: Link, Visited, Hover, Focus, and Active                                           
    • Accessible Links                                                                                                 
    • Tabbing                                                                                                        
    • Access Keys                                                                                                 
    • Link Titles                                                                                                   
    • Pop ups                                                                                                       
    • Adjacent Links                                                                                             
    • Skipping Navigation                                                                                     
  • Images                                                                                    
    • The img Element                                                                                                 
    • Image Maps                                                                                                 
    • Background Images                                                                                           
    • Image Replacement: Providing Graphical Alternatives for Text                         
  • Layout                                                                                    
    • The Box Model                                                                                                     
    • Width and Height                                                                                         
    • Padding                                                                                                       
    • Borders                                                                                                        
    • Margin                                                                                                        
    • The display Property                                                                                       
    • Positioning                                                                                                        
    • Static                                                                                                           
    • Relative                                                                                                      
    • Absolute                                                                                                       
    • Fixed                                                                                                           
    • Floating                                                                                                             
    • Sample Page Layouts                                                                                         
    • Creating Columns                                                                                      
    • Adding a Page Header                                                                                 
    • Adding a Footer                                                                                          
  • Lists                                                                                       
    • Structuring Lists                                                                                               
    • Unordered and Ordered Lists                                                                      
    • Definition Lists                                                                                           
    • Lists as Navigation                                                                                    
    • Presenting Lists                                                                                                 
    • List Markers—Bullets, Numbers, and Images                                          
    • Horizontal Lists                                                                                          
  • Forms                                                                                      
    • Labels                                                                                                        
    • Styling Form Fields                                                                                             
    • Borders                                                                                                      
    • Fonts                                                                                                          
    • Backgrounds                                                                                               
  • Multiple Media                                                                       
    • Screen Readers                                                                                                 
    • Mobile Devices                                                                                                  
    • Print                                                                                                                   
  • Pseudo classes                                                                                                
    • :active                                                                                                        
    • :first                                                                                                             
    • :first child                                                                                                  
    • :focus                                                                                                           
    • :hover                                                                                                          
    • :lang                                                                                                            
    • :left                                                                                                            
    • :link                                                                                                             
    • :right                                                                                                          
    • :visited                                                                                                        
  • Pseudo elements                                                                                               
    • :after                                                                                                          
    • :before                                                                                                         
    • :first letter                                                                                                  
    • :first line                                                                                                    
    • At rules                                                                                                            
    • @import                                                                                                      

CSS  3

  • CSS  History     
    • What is CSS      
    • Animations with CSS      
    • Borders with CSS      
    • Backgrounds with CSS      
    • Fonts with CSS      
    • Multiple Columns       
    • Text Effects with CSS        
    • Transitions Effects       
  • User Interface of CSS         
    • D Transforms with CSS        
    • D Transforms with CSS        

Photoshop

  • Intro Of Photoshop
  • Interface Layout
  • Palettes  
  • Toolbox  
  • Selection Tools  
  • Alteration Tools  
  • Drawing and Selection Tools  
  • Assisting Tools  
  • Color Boxes and Modes  
  • Basic Image Editing  
  • Cropping  
  • Resizing  
  • Correcting  
  • Sharpening/Softening  
  • Saving  
  • Creatng PSD
  • Convert PSD to HTML

Dreamweaver

  • Defining a local site
  • Creating a page in Layout view
  • Inserting an image and a rollover image
  • Working with tables in Standard view
  • Creating a link to another document
  • Inserting assets from the Assets panel
  • Inserting Flash Text and Flash Button objects
  • Creating and applying a template
  • Running a site report
  • Adding a Design Note

Module 2: HTML

  • HTML   Overview
    • Basic HTML Document 
    • HTML Tags 
  • HTML Document Structure 
    • The <!DOCTYPE> Declaration 
  • HTML Basic Tags 
    • Heading Tags 
    • Paragraph Tag   
    • Line Break Tag   
    • Centering Content   
    • Horizontal Lines   
    • Preserve Formatting   
    • Nonbreaking Spaces   
  • HTML Elements   
    • HTML Tag vs Element   
    • Nested HTML Elements   
  • HTML Attributes   
    • Core Attributes   
    • The id Attribute   
    • The title Attribute   
    • The class Attribute   
    • The style Attribute   
    • Internationalization Attributes   
    • The dir Attribute   
    • The lang Attribute   
    • The xml:lang Attribute   
    • Generic Attributes

  

  • HTML Formatting 
    • Bold Text 
    • Italic Text 
    • Underlined Text 
    • Strike Text 
    • Monospaced Font 
    • Superscript Text 
    • Subscript Text 
    • Inserted Text 
    • Deleted Text 
    • Larger Text 
    • Smaller Text
    • Grouping Content
  • HTML Phrase Tags 
    • Emphasized Text  
    • Marked Text   
    • Strong Text   
    • Text Abbreviation   
    • Acronym Element   
    • Text Direction        
    • Special Terms       
    • Quoting Text        
    • Short Quotations    
    • Text Citations        
    • Computer Code    
    • Keyboard Text   
    • Programming Variables      
    • Program Output        
    • Address Text   

    

  • HTML Meta Tags   
    • Adding Meta Tags to Your Documents   
    • Specifying Keywords     
    • Document Description       
    • Document Revision Date    
    • Document Refreshing       
    • Page Redirection  
    • Setting Cookies        
    • Setting Author Name        
    • Specify Character Set   

    

  • HTML Comments        
    • Valid vs Invalid Comments        
    • Multiline Comments   
    • Conditional Comments  
  • HTML Lists   
  • HTML Unordered Lists   
  • The type Attribute   
  • HTML Ordered Lists
  • The type Attribute
  • The start Attribute    
  • HTML Definition Lists   

    

  • HTML Text Links   
    • Linking Documents        
    • The target Attribute        
    • Use of Base Path        
    • Linking to a Page Section 

 

  • HTML Frames   
  • Disadvantages of Frames   
  • Creating Frames 
  • The <frameset> Tag Attributes   
  • The <frame> Tag Attributes   
  • Browser Support for Frames   
  • Frame's name and target attributes   
  • HTML IFrames        
  • The <Iframe> Tag Attributes   
  • HTML Blocks    
    • Block Elements    
    • Inline Elements    
    • Grouping HTML Elements    
    • The <div> tag          
    • The <span> tag    

     

  • HTML Backgrounds    
    • Html Background with Colors    
    • Html Background with Images         
    • Patterned & Transparent Backgrounds    

     

  • HTML Colors    
    • HTML Color Coding Methods    
    • HTML Colors   Color Names    
    • W C Standard    Colors          
    • HTML Colors   Hex Codes          
    • HTML Colors   RGB Values  
    • Browser Safe Colors    
  • HTML Fonts    
    • Set Font Size           
    • Relative Font Size         
    • Setting Font Face          
    • Specify alternate font faces    
    • Setting Font Color          
    • The <basefont> Element:    

     

  • HTML Forms    
    • Form Attributes    
    • HTML Form Controls    
    • Text Input Controls    
    • Single line text input controls          
    • Attributes    
  • HTML Marquees    
  • Syntax    
    • The <marquee> Tag Attributes    

 

  • HTML Header    
    • The HTML <title> Tag    
    • The HTML <meta> Tag    
    • The HTML <base> Tag    
    • The HTML <link> Tag    
    • The HTML <style> Tag    
    • The HTML <script> Tag   

 

  • HTML Stylesheet          
    • External Style Sheet        
    • Internal Style Sheet    
    • Inline Style Sheet    

           

  • HTML Javascript    
    • External Javascript          
    • Internal Script      
    • Event Handlers    
    • Hide Scripts from Older Browsers    
    • The <noscript> Element    
    • Default Scripting Language    
  • HTML Layouts   
    • HTML Layout   Using Tables    
    • Multiple Columns Layout   Using Tables    
    • HTML Layouts   Using DIV, SPAN    

Module 3: HTML5

  • Introduction
    • Main structure  
    • The <head>                                              
    • Using new HTML  structural elements                    
    • Styling HTML  with CSS                                   
    • When to use the new HTML  structural
    • elements                                                
  • Text
    • Structuring main content areas                         
    • Adding blogposts and comments                       
    • Working with HTML  outlines                             
    • Understanding WAI-ARIA                                
    • Even more new structures!                               
    • Redefined elements                                     
    • Global attributes                                        
    • Features not covered in this book                       
  • Forms
    • New input types                            
    • New attributes                                           
    • Putting all this together                                 
    • Backwards compatibility with legacy browsers         
    • Styling new form fields and error messages              
    • Overriding browser defaults                             
    • Using JavaScript for DIY validation
    • Avoiding validation                                     
  • Video and Audio
    • Native multimedia: why, what, and how?               
    • Codecs—the horror, the horror                         
    • Rolling custom controls                                 
    • Multimedia accessibility                                 
  • Canvas
    • Canvas basics                                           
    • Drawing paths                                            
    • Using transformers: pixels in disguise                     
    • Capturing images                                       
    • Pushing pixels                                           
    • Animating your canvas paintings                        
  • Data Storage
    • Storage options                                         
    • Web Storage                                           
    • Web SQL Databases                                     
  • Offline
    • Pulling the plug: going offline                            
    • The cache manifest                                     
    • How to serve the manifest                               
    • The browser-server process                             
    • applicationCache                                       
    • Using the manifest to detect connectivity               
    • Killing the cache                                        
  • Drag and Drop
    • Getting into drag                                       
    • Interoperability of dragged data                       
    • How to drag any element                                
    • Adding custom drag icons                             
    • Accessibility                                             
  • Geolocation
    • Sticking a pin in your visitor                             
    • API methods                                              

Module 4: Java Script

  • Java Script Basic And Programming Concepts
    • The String class  
    • The instanceof operator   
    • Operators  
    • Unary operators  
    • Bitwise operators   
    • Boolean operators   
    • Multiplicative operators   
    • Additive operators   
    • Relational operators   
    • Equality operators   
    • Conditional operator   
    • Assignment operators   
    • Comma operator   
    • Statements  
    • The if statement  
    • Iterative statements   
    • Labeled statements   
    • The break and continue statements    
    • The with statement   
    • The switch statement   
    • Functions  
    • No overloading  
    • The arguments object   
    • The Function class   
    • Closures      
  • JavaScript in the Browser
    • The <script/> tag    
    • External file format    
    • Inline code versus external files    
    • Tag placement
  • DOM
    • What Is the DOM?    
    • Introduction to XML    
    • An API for XML   
    • Hierarchy of nodes    
    • Using the DOM    
    • Accessing relative nodes    
    • Checking the node type    
    • Dealing with attributes    
    • Accessing specific nodes    
    • Creating and manipulating nodes

       

  • Browser and Operating System Detection
    • The Navigator Object    
    • Methods of Browser Detection    
    • Object/feature detection    
    • User-agent string detection   
  • Events
    • Mouse events   
    • Keyboard events    
    • HTML events
  • Forms
    • Getting form references    
    • Accessing form fields    
    • Form field commonalities    
    • Focus on the first field    
    • Submitting forms    
    • Submit only once    
    • Resetting forms    
    • Retrieving/changing a text box value    
    • Selecting text   
    • Text box events    
  • Cookies

Module 5: jQuery

  • jQuery Basics
    • Including the jQuery Library Code in an HTML Page 
    • Selecting DOM Elements Using Selectors and the jQuery Function  
    • Selecting DOM Elements Within a Specified Context  
    • Filtering a Wrapper Set of DOM Elements  
    • Finding Descendant Elements Within the Currently Selected
  • Wrapper Set  
    • Returning to the Prior Selection Before a Destructive Change  
    • Including the Previous Selection with the Current Selection  
    • Traversing the DOM Based on Your Current Context to Acquire a
  • New Set of DOM Elements  
    • Creating, Operating on, and Inserting DOM Elements  
    • Removing DOM Elements  
    • Replacing DOM Elements  
    • Cloning DOM Elements  
    • Getting, Setting, and Removing DOM Element Attributes  
    • Getting and Setting HTML Content  
    • Getting and Setting Text Content  
    • Using the $ Alias Without Creating Global Conflicts  
  • Selecting Elements with jQuery
    • Selecting Child Elements Only  
    • Selecting Specific Siblings  
    • Selecting Elements by Index Order  
    • Selecting Elements That Are Currently Animating  
    • Selecting Elements Based on What They Contain  
    • Selecting Elements by What They Don’t Match  
    • Selecting Elements Based on Their Visibility  
    • Selecting Elements Based on Attributes  
    • Selecting Form Elements by Type  
    • Selecting an Element with Specific Characteristics  
    • Using the Context Parameter  
    • Creating a Custom Filter Selector  
  • Beyond the Basics                                                                                                              
    • Looping Through a Set of Selected Results  
    • Reducing the Selection Set to a Specified Item  
  • Configuring jQuery Not to Conflict with Other Libraries  
  • jQuery Utilities                                                                                                                   
    • Detecting Features with jQuery support  
    • Iterating Over Arrays and Objects with jQuery each  
  • Effects                                                                                                                           
    • Sliding and Fading Elements in and out of View   
    • Making Elements Visible by Sliding Them Up   
    • Creating a Horizontal Accordion   
    • Simultaneously Sliding and Fading Elements   
    • Applying Sequential Effects   
    • Determining Whether Elements Are Currently Being Animated   
    • Stopping and Resetting Animations   
    • Using Custom Easing Methods for Effects   
    • Disabling All Effects   
    • Using jQuery UI for Advanced Effects   
  • Events                                                                                                                             
    • Attaching a Handler to Many Events   
    • Reusing a Handler Function with Different Data   
    • Removing a Whole Set of Event Handlers   
    • Triggering Specific Event Handlers   
    • Passing Dynamic Data to Event Handlers   
    • Accessing an Element ASAP (Before document ready)   
    • Stopping the Handler Execution Loop   
    • Getting the Correct Element When Using event target   
    • Avoid Multiple hover() Animations in Parallel   
    • Making Event Handlers Work for Newly Added Elements   
  • HTML Form Enhancements from Scratch                                                                   
    • Focusing a Text Input on Page Load   
    • Disabling and Enabling Form Elements   
    • Selecting Radio Buttons Automatically   
    • (De)selecting All Checkboxes Using Dedicated Links   
    • (De)selecting All Checkboxes Using a Single Toggle 
    • Adding and Removing Select Options   
    • Autotabbing Based on Character Count
    • Displaying Remaining Characte

A Few Things You'll Love!

What our Students Speak

+