Web Designing

Web Design Course

Web design refers to the visual design and experiential aspects of a particular website.

  •  4 to 5 Months

What Will You Learn?

Web designing is the process of planning, conceptualizing, and implementing the plan for designing a website in a way that is functional and offers a good user experience. User experience is central to the web designing process.

Course Curriculum

  •  Syllabus Covered (HTML)
    Introduction of different Web Technology Introduction HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Formatting HTML Fonts HTML Styles HTML Links HTML Images HTML Tables HTML Lists HTML Forms HTML Frames HTML Iframes HTML Colors HTML Color names HTML Color values HTML Quick List HTML Layout HTML Doctypes HTML Head HTML Meta HTML Scripts HTML Entities HTML URLs HTML URL Encode HTML Media HTML Audio HTML Object HTML Video HTML YouTube HTML Media Tags HTML Summary
     Syllabus Covered (HTML5)
    HTML5 Introduction HTML5 New Elements HTML5 Video HTML5 Video/DOM HTML5 Audio HTML5 Drag and Drop HTML5 Canvas HTML5 SVG HTML5 Canvas vs. SVG HTML5 Geolocation HTML5 Web Storage HTML5 App Cache HTML5 Web Workers HTML5 SSE HTML5 Tags
     Syllabus Covered (CSS)
    CSS Introduction CSS Syntax CSS Id & Class CSS Styling Styling Backgrounds Styling Text Styling Fonts Styling Links Styling Lists Styling Tables CSS Box Model CSS Box Model CSS Border CSS Outline CSS Margin CSS Padding CSS Advanced CSS Grouping/Nesting CSS Dimension CSS Display CSS Positioning CSS Floating CSS Align CSS Navigation Bar CSS Image Gallery CSS Image Opacity CSS Image Sprites CSS Media Types CSS hacking CSS Summary
     FTP Management
    Understanding FTP Setting up FTP Server (Live) Uploading and downloading FTP contents Summary
     Deployment
    Deploying application on Web Server Summary
     Live Project
    Preparing HTML from Design Hosting on Live Server Summary

  •  Bootstrap TRAINING OUTLINE Bootstrap Overview
    Overview of Mobile-First Design CSS3 Media Queries Downloading Bootstrap Customizing Bootstrap Adding Custom CSS to Bootstrap
     Bootstrap Grid System
    Working with Grids Defining Rows, Containers, and Columns Offsetting Columns Creating Nested Columns Changing Column Order
     Bootstrap Base CSS
    Overview of Bootstrap's Base CSS Using Helper Classes and Responsive Utilities Working with Typography Classes Formatting Lists Formatting Tables Creating a Striped Table Creating a Responsive Table Enhancing the Appearance of Forms Displaying Inline Forms Displaying Horizontal Forms Formatting Images Creating Responsive Images Styling Links and Buttons
     Bootstrap Components
    Overview of Bootstrap Components Using Glyphicons to Add Symbols to Buttons and Links Creating Dropdowns Creating Navigation Tabbed Navigation Pill Navigation Navigation Bars Collapsible Navigation Bars Breadcrumbs Grouping Inputs, Buttons, and Lists Formatting Page Headers Creating Panels Grouping Panels Creating a Thumbnail Gallery Creating Progress Bars and Alerts
     Bootstrap Plugins
    Plugin Overview Creating Tabbed Navigation Creating a Slideshow Using the Carousel Plugin Using Accordions to Display a Large Amount of Content Adding a Dialog Box Using the Modal Plugin span class="item-name">Displaying Secondary Information Using Popovers or Tooltips

  •  Overview of Client-Side JavaScript
    Including JavaScript in a Page
    • Using the <script> Tag
    • Referencing an External Script File
    • Using an Event Handler
    • Using a URL
    Evolution of the JavaScript Language Common Misconceptions About JavaScript ES5 vs ES6
    • New ES6 Data Types
    • Map and Set Collections
    • ES6 Arrow Functions
    • ES6 String Template Literals
    Using the JavaScript Console
    • Logging Messages in the Console
    • Debugging with Console
     Cotrolling Flow
    Conditional Constructs
    • if-else
    • switch
    Looping Controls
    • do-while
    • while
    • for
    • for in
    Branching Statements
    • break
    • continue
    Equality and Identity Operators Logical and Comparison Operators Error Handling
    • try
    • catch
    • throw
    • finally
     Implementing Functions
    Declaring Functions Invoking Functions Named and Anonymous Functions Passing Arguments Local vs. Global Variables Returning Values from a Function The this Keyword Default Parameters Explaining Closures
     Introduction to the Document Object Model (DOM)<
    Selecting DOM Elements
    • getElementById
    • getElementsByTagName
    • getElementsByName
    • getElementsByClassName
    • querySelector
    • querySelectorAll
    Modifying Page Content with the DOM Manipulating CSS using JavaScript
     >Working with Forms
    Accessing Forms from JavaScript Working with Form Elements Validating Form Fields
    • Checking Required Fields
    • Checking Length of Input
    Canceling Form Submission
     Working with JavaScript Objects and JSON
    Understanding Objects Defining Custom Objects
    • Object Literal Notation
    • Defining Properties and Methods
    • Creating a Constructor
    • ES6 Enhanced Object Literals
    Extending an Existing Object with prototype Using the in and instance of Operators Overview of JSON Using JSON.stringify and JSON.parse
     JavaScript Fundamentals
    Using Strict Mode Adding Comments Debugging JavaScript Code Declaring Variables
    • var, let, and const Keywords
    • Local vs. Global Variables
    • Declaring Block-scoped Variables
    Using JavaScript Primitive Types
    • String, Number, and Boolean
    • undefined
    • null
    Performing Data Conversions Interacting with the User
    • alert
    • prompt
    • confirm
    Working with JavaScript Operators
    • Arithmetic Operators
    • Assignment Operators
    Using the Math and Date Objects
     Working with Strings, Numbers, and Arrays
    Creating String Objects Using String Methods
    • Searching within a String
    • Returning a Substring
    • Converting Character Case
    Creating Number Objects Formatting Numbers Creating Arrays
    • Using the Array Constructor
    • Using Literal Notation
    Accessing Array Elements Common Array Methods Defining and Using Associative Arrays Predefined Object Arrays
     Browser Object Model
    Overview of the Browser Object Model Using the window Object
    • Opening and Closing Windows
    • Using Timers
    • Passing Data Between Windows
    Using the Document Object
    • Writing to the Webpage
    • Accessing Properties of the Document
    navigator Object location Object screen Object
     Event Handling in JavaScript
    Overview of JavaScript Events
    • Identifying Differences Between Browsers
    • The event Object
    • Event Capturing and Bubbling
    Adding Event Handlers
    • Traditional (Inline) Model
    • Registering Events in JavaScript
    • Adding Multiple Handlers
    addEventListener attachEvent Mouse and Keyboard Events Preventing Default Behavior Canceling Events
     Using Ajax
    Overview of Ajax The XMLHttpRequest Object Configuring an Ajax Request Handling Errors on ready state change Using JSON with Ajax

  •  JQuery Introduction
    What is JQuery? History Selectors
     JQuery Effects<
    Display Effects
    • hide()
    • show()
    • toggle()
    Fading Effects
    • fadeIn()
    • fadeOut()
    • fadeToggle()
    • fadeTo()
    Sliding Effects
    • slideDown()
    • slideUp()
    • slideToggle()
    Other Effects
    • animate()
    • delay()
     JQuery HTML and CSS
    html() text() val() css() before() prepend() after() insertAfter() insertAfter() append() appendTo() clone() remove() empty() detach() scrollTop() attr() prop() offset() position() addClass() hasClass() toggleClass() width() height() innerWidth() innerHeight() outerHeight() wrap() wrapInner() unwrap() wrapAll()
     JQuery
     Events
     Form

  • Getting Started
    • Installation steps
    • What is React?
    • Real-world SPA v/s React
    • Creating First Project
    • Building a Project
    • Installing Dependencies
    • React Alternatives
    • Course Outline
    • Useful resources and Link
    Refreshing JavaScript
    • Understanding “let” and Const
    • Functions
    • Exports and Imports
    • Understanding Classes
    • Class Props and Methods
    • Spread
    • Map
    • Filter
    • Class Object
    • Interfaces
    • Subclasses
    • Array
    Understanding Base features and Syntax
    • Creating react app
    • Using create-react-app
    • Understanding component basics
    • Understanding JSX
    • JSX Restrictions
    • Creating Components
    • Working With Components
    • Reusing Components
    • Outputting Dynamic Content
    • Working With Props
    • Understanding Children Property
    • Props and State
    • Handling Events and Methods
    • Manipulating State
    • Functional Components naming
    • Stateless and State full components
    • Passing Methods References between components
    • Adding Two-way data binding
    • Working with Styles
    Working with List and Conditionals
    • Module Introduction
    • Rendering modules conditionally
    • Handing dynamic contents
    • Outputting lists
    • List and State
    • Lists and Keys
    • Flexible Lists
    • Practices
    Styling React Components
    • Module Introduction
    • Outlining the problem set
    • Setting Styles Dynamically
    • Setting Class names Dynamically
    • Enabling CSS modules
    • Adding Pseudo selectors
    • Working with Media Queries
    Components
    • Module Introduction
    • Splitting app into Components
    • Comparing Stateless and Stateful Components
    • Class Components (ES6)
    • Functional Components
    • Lifecycle Methods (Functional Components)
    • Lifecycle Hook in Class Components
    • Creating Default Props
    • Validating Prop Types
    • Higher-Order Components
    • Another form of Higher-Order Components
    • Using refs
    • Using the Context API
    • Handing Providers
    Music Plyer Project – Spotify API
    • Project Introduction
    • Project outline
    • Project Creation
    • Building Search Component
    • Handling API response from server
    • Consuming API response to console
    • Display API response in Artist Component
    • Display Tracks list in Tracks Component
    • Finalizing Project
    Custom Resume Builder – Accessing Local AP
    • Project Introduction
    • Project outline
    • Project Creation
    • Building Resume Component
    • Creating Rest API using JSON Server
    • Consuming API response to console
    • Display API response in Components
    • Assigning Props to various components
    • Finalizing Project
    Routing
    • Module Introduction
    • Building Checkout Container
    • Setting up Routing and Routes
    • Navigating between components
    • Navigating Back & to next page
    • Implementing Children navigation
    • Implementing Component-based navigation
    Forms
    • Analysing Component
    • Creating Custom Dynamic Input Component
    • Setting Up event and state for the form input
    • Handling user input
    • Adding Custom form Validation
    • Working with Refs
    Redux CRUD Application Project – Accessing API Accessing JSON Responses using Axios Deploying