what students say
Web Development Basics with JavaScript
Course Description
<p>Website development is a catch-all term for the work that goes into building a website. This includes<br /> everything from markup and coding to scripting, network configuration, and CMS development.<br /> This course is designed to provide skills to the student to develop modern web application and gain<br /> a broad understanding of the Web Technology. This course focuses on the development of dynamic<br /> web contents and applications to facilitate information distribution. The course will initiate students<br /> to the different web development tools and technology such as HTML, HTML 5, CSS, JavaScript and<br /> React JS Framework.</p>
Curriculum
- History of Internet and Web
- Uses of Internet and Services
- Introduction to WWW
- Component of WWW (Web, Webpage, Website, Homepage, Web Browsers, Web Servers, URL and Search Engines)
- Types of Web Pages & its Processing in WWW
- Internet protocols (TCP/IP, ARP, HTTP, FTP, SMTP, POP, SNMP) and applications
- Introduction to HTML
- 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:
- How to differentiate HTML Document Versions
- HTML-Basic Formatting Tags
- HTML Basic Tags
- HTML Formatting Tags
- HTML Color Coding
- HTML-Grouping Using Div Span
- Div and Span Tags for Grouping
- HTML-Lists
- Unordered Lists
- Ordered Lists
- Definition list
- HTML-Images
- Image and Image Mapping
- HTML-Hyperlink
- URL - Uniform Resource Locator
- URL Encoding
- HTML-Table
- <table>
- <th>
- <tr>
- <td>
- <caption>
- <thead>
- <tbody>
- <tfoot>
- <colgroup>
- <col>
- HTML-Iframe
- Attributes Using
- Iframe as the Target
- HTML-Form
- <input>
- <textarea>
- <button>
- <select>
- <label>
- HTML-Headers
- Title
- Base
- Link
- Style s
- Script
- Meta
- HTML-Miscellaneous
- HTML Meta Tag
- XHTML
- HTML Deprecated Tags & Attributes
- Introduction
- Benefits of CSS
- CSS Versions History
- CSS Syntax
- External Style Sheet using <link>
- Multiple Style Sheets
- Value Lengths and Percentages
- CSS2-Syntax
- CSS Syntax
- single Style Sheets
- Multiple Style Sheets
- CSS2-Selectors
- ID Selectors
- Class Selectors
- Grouping Selectors
- Universal Selector
- Descendant / Child Selectors
- Attribute Selectors
- CSS – Pseudo Classes
- CSS2-Color Background Cursor
- background-image
- background-repeat
- background-position
- CSS Cursor
- CSS2-Text Fonts
- 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
- CSS2-Lists Tables
- list-style-type
- list-style-position
- list-style-image
- list-style
- CSS Tables
- border
- width & height
- text-align
- vertical-align
- padding
- colour
- CSS2-Box Mode
- Borders & Outline
- Margin & Padding
- Height and width
- CSS Dimensions
- CSS2-Display Positioning
- CSS Visibility
- CSS Display
- CSS Scrollbars
- CSS Positioning
- Static Positioning
- Fixed Positioning
- Relative Positioning
- Absolute Positioning
- CSS Layers with Z-Index
- CSS Floats
- The float Property
- The clear Property
- The clear fix Hack
- Projects:
- Build a Portfolio or simple personal website
- Make a static Response Website
- Basic JavaScript Introduction
- 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?
- How to add JavaScript in HTML?
- How to include External JavaScript in HTML?
- JavaScript Features and Libraries
- ES5
- ES6/ES2015
- ES7/ES2016
- ES8/ES2017
- JavaScript Data Types and Variables
- JavaScript Comments
- JavaScript Keywords
- Data Types in JavaScript
- JavaScript Variables
- Types of Variables in JavaScript
- Key Difference between Var, Let, and Const
- JavaScript Operators
- What are Operators in JavaScript?
- Assignment Operator
- Comparison Operators
- Logical Operators
- Conditional Operators
- Bitwise Operators
- Unary Operators
- TypeOf Operator
- Operator Precedence
- JavaScript Statement
- 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
- JavaScript Function
- 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
- Objects in JavaScript
- 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
- JavaScript Window and Frame Objects
- 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
- JavaScript Event Handling
- 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
- JavaScript Exception Handling
- Exceptions and Errors
- Exception mechanism
- “try-catch-finally” constructions
- Throwing exceptions
- Error Object
- Properties of Error Object
- Methods of Error Object
- Form
- 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)
- 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
- ES6 JavaScript
- Features
- let & const
- Arrow Functions
- Exports and Imports
- Destruction
- Projects:
- Clock / Calendar
- Build a To-Do List
- Image Color Picker
- Screen Recorder
- Number Guessing Game
- Basic Jquery
- What is JQuery?
- JQuery Syntax
- Basics: Objects, Arrays, Functions, Scope, Built-in functions etc.
- Selectors
- Types of Selectors(name, id, class, types, etc)
- How to use JQuery selectors
- Traversal
- HTML Manipulation
- and content, removing elements and content, manipulating the elements attribute and properties
- Modifying the CSS properties, managing CSS classes, Changing content of element.
- Animations
- Effects
- Events
- Keyboard Events
- Form Events
- Advance JQuery UI
- Widgets: Accordion, Buttons, Menu, Sliders, Progress Bar, Tabs, Datepicker, dialog
- Effects: Add Class, Color Animation, Animation, Switch Class
- Interaction: Draggable, droppable, resizable, selectable, sortable elements
- Utilities: Element Position, Custom Widgets
- Introduction to Ajax
- Overview of Ajax
- What can be achieved by Ajax
- Why is Ajax used
- jQuery vs Ajax
- How to use Ajax
- Synchronous Communication
- Asynchronous Communication
- Introduction to Ajax
- Classic Web applications Architecture
- Ajax based web applications architecture
- Ajax Engine Creation
- Properties of Ajax engine
- readyState
- onreadystatechange
- status
- responseText
- responseXML
- Methods of Ajax engine
- open(-,-,-)
- Send()/send(String)
- setRequestHeader(-,-)
- Ajax application flow
- Projects:
- Form Autocomplete
- Password Strength Checker
- Form Submission and Validation
- Planet Finder Web App
- Overview of JSX
- Virtual Dom
- Difference between JS and JSX
- React components overview
- Containers and components
- What is Child Components
- What is Namespaced components
- Error boundaries
- What are the JavaScript expressions available in JSX?
- React JS Environment SetUp
- Node Setup
- How to use NPM?
- How to create package json and purpose of it?
- ES6 introduction and features.
- Webpack Overview
- Real Time Practicals
- NPM Installation
- Create a Basic React App
- Real-Time Application By Using React Js
- Create a React Component with JSX template
- How to Create Nested components?
- What is React JS render?
- React Props overview.
- Introduction of Props validation with data types.
- Flow of States, Initialize states nd update states
- Real-time Practicals
- Create a Small React Module
- Use All the state in the created Applications.
- React JS Form and UI
- List of Form components
- Real-time Practicals
- Create a React Form.
- Client-side form validation
- Applying form components
- Submit and Rest the form
- React JS Component Life Cycles Overview
- Initial Render
- Props Change
- Stage Change
- Component willMount
- Component didMount
- Component Unmount
- Real-time Practicals
- Applying Different Lifecycles in the Applications
- When to choose Appropriate Lifecycles.
- Routing In React JS
- Single Page Applications Overview.
- How to configure React Router
- How to Handle Conditional Statement in JSX?
- Real-time Practicals
- Create a Single Page Applications
- Applyig Routing
- Dynamic render the components base on url.
- Event Handling in JSX
- onBlur, onKeyUp, onChange and other useful primary events in React JS
- How to sharing events between the components?
- Real-time Practicals
- Communicate Data between components
- Applying all lists of events
- How to write styles in React JS
- CSS and inline styles in React JS overview
- Introduction to styled components
- Real-time Practicals
- Styling the application using styled component
- React Router with Navigation
- How to Load the router library?
- Configure the React Router?
- How to Pass and receive parameters?
- Redux, Flux Overview
- What is Redux?
- Stores
- Actions
- Dispatcher
- View Controllers
- Views
- Reducers
- Providers Component
- Selectors
- Real-time Practicals
- Redux application Development
- Integration with other libraries
- React with JQuery
- React , AJAX and, Axios
- Hooks
- Understanding Hooks
- The useState hook
- useEffect hook
- usecontext hook
- useReducer hook
- WebPacks
- Webpack and its use
- Setting up and installing webpck
- Working with the Configuration file of Webpack
- Projects:
- Calculator
- E-Commerce
- Blog App
- Weather App
- What is Git, Version Control System, GitHub?
- How to install Git and set up a repository?
- Basic Commands: add, commit, push
- Undoing/Reverting/Resetting code changes
- Branches (Create, Merge, Delete)
- What is HEAD?
- Viewing the history of a repository
- gitignore file
