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 SummarySyllabus 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 TagsSyllabus 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 SummaryFTP Management
Understanding FTP Setting up FTP Server (Live) Uploading and downloading FTP contents SummaryDeployment
Deploying application on Web Server SummaryLive 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 BootstrapBootstrap Grid System
Working with Grids Defining Rows, Containers, and Columns Offsetting Columns Creating Nested Columns Changing Column OrderBootstrap 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 ButtonsBootstrap 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 AlertsBootstrap 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
- New ES6 Data Types
- Map and Set Collections
- ES6 Arrow Functions
- ES6 String Template Literals
- Logging Messages in the Console
- Debugging with Console
Cotrolling Flow
Conditional Constructs- if-else
- switch
- do-while
- while
- for
- for in
- break
- continue
- 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 ClosuresIntroduction to the Document Object Model (DOM)<
Selecting DOM Elements- getElementById
- getElementsByTagName
- getElementsByName
- getElementsByClassName
- querySelector
- querySelectorAll
>Working with Forms
Accessing Forms from JavaScript Working with Form Elements Validating Form Fields- Checking Required Fields
- Checking Length of Input
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
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
- String, Number, and Boolean
- undefined
- null
- alert
- prompt
- confirm
- Arithmetic Operators
- Assignment Operators
Working with Strings, Numbers, and Arrays
Creating String Objects Using String Methods- Searching within a String
- Returning a Substring
- Converting Character Case
- Using the Array Constructor
- Using Literal Notation
Browser Object Model
Overview of the Browser Object Model Using the window Object- Opening and Closing Windows
- Using Timers
- Passing Data Between Windows
- Writing to the Webpage
- Accessing Properties of the Document
Event Handling in JavaScript
Overview of JavaScript Events- Identifying Differences Between Browsers
- The event Object
- Event Capturing and Bubbling
- Traditional (Inline) Model
- Registering Events in JavaScript
- Adding Multiple Handlers
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 SelectorsJQuery Effects<
Display Effects- hide()
- show()
- toggle()
- fadeIn()
- fadeOut()
- fadeToggle()
- fadeTo()
- slideDown()
- slideUp()
- slideToggle()
- 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
- Understanding “let” and Const
- Functions
- Exports and Imports
- Understanding Classes
- Class Props and Methods
- Spread
- Map
- Filter
- Class Object
- Interfaces
- Subclasses
- Array
- 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
- Module Introduction
- Rendering modules conditionally
- Handing dynamic contents
- Outputting lists
- List and State
- Lists and Keys
- Flexible Lists
- Practices
- Module Introduction
- Outlining the problem set
- Setting Styles Dynamically
- Setting Class names Dynamically
- Enabling CSS modules
- Adding Pseudo selectors
- Working with Media Queries
- 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
- 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
- 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
- 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
- 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