• Introduction to the course

• History of Web development

• How do websites work?
• Job prospects
• Types of applications
• What are programming languages
• Why programming languages?
• Difference between low-level, Intermediate and High-level

• Intro to HTML
• Basic Tags”
• Elements
• Attributes
• Formatting
• Phrase Tags
• Meta Tags
• Comments
• Images
• Tables
• Lists
• Text Links
• Image links
• Email Links
• Frames
• Blocks
• Backgrounds
• Colors
• Fonts
• Forms
• Multimedia
• Header
• Style Sheet
• JavaScript
• Layouts
• Table Element
• Div Element
• Nav Element
• Section Element
• Form and Footer
• Radio Buttons
• Checkboxes
• Value attributes for checkboxes and radio buttons

• Introduction to CSS

• CSS Selectors

• CSS Class

• Multiple Elements with a CSS Class

• Colouring the text

• Importing a Google Font

• Sizing the images

• Circular Images

• Borders around the Elements

• Rounded Corners for borders

• Background colour to div

• id of an element

• id attribute

• Styling ID Attributes

• Padding

• Different Padding for different elements

• Margin

• Negative Margin

• Different margins for different elements

• Notation to specify margin and padding

• Attribute Selector

• Absolute vs Relative Units

• Styling the HTML body elements

• Override Styles

• Inline Styles

• Hex code for specific colours

• Hex code for mix colours

• RGB Values

• Custom CSS Variable

• Fallback values

• Inherit CSS value

• Media query for changing a variable

• Text-align Property – formatting text

• Text – strong, italicize, strikethrough

• text-transform

• font-size

• font-weight

• font-weight

• line-height

• Height property

• Width property

• Background colour to text

• Heading element

• box shadow

• Card like element

• Opacity

• Hover State

• Relative Position

• CSS Offset

• Absolute Positioning

• Fixed Positioning

• z-index

• Float property

• Complementary Colours

• Hue

• Tone

• Gradual CSS Linear Gradient

• CSS Transform scale property

• skewX

• skewY

• Graphic using CSS

• KeyFrames

• Animation during Hover

• Fill Mode

• Movement using CSS animation
• Flexbox
• display
• flex-direction
• flex-direction to make rows
• flex-direction to make columns
• justify-content
• align-items
• Wrap rows and columns
• flex-shrink
• flex-grow
• flex-basis
• flex-shorthand
• order property
• align-self
• grid-template-columns
• grid-template-rows
• Grid Units
• grid-column-gap
• grid-row-gap
• grid-column
• grid-row
• Aligning an element
• Aligning all elements
• Splitting Grids into an area
• repeat function
• minmax Function
• Flexible layout – auto-fill auto-fit
• Media queries for responsive layouts

Creating Grid within Grids

• Bootstrap Introduction
• What is Bootstrap
• Bootstrap Example
• Bootstrap Container
• Bootstrap Jumbotron
• Bootstrap Button
• Bootstrap Grid
• Bootstrap Table
• Bootstrap Form
• Bootstrap Alert
• Bootstrap Wells
• Bootstrap Badge & Label
• Bootstrap Panels
• Bootstrap Pagination
• Bootstrap Pager
• Bootstrap Image
• Bootstrap Glyphicon
• Bootstrap Carousel
• Bootstrap Progress Bar
• Bootstrap List Group
• Bootstrap Dropdown
• Bootstrap Collapse
• Bootstrap Tabs/Pills
• Bootstrap Navbar
• Bootstrap Input Types
• Bootstrap Modals
• Bootstrap Popover
• Bootstrap Scrollspy
• Bootstrap Border
• Bootstrap Clearfix
• Bootstrap Close Icons
• Bootstrap Colors
• Bootstrap Flexbox
• Display property
• Image Replacement
• Invisible Content
• Bootstrap Position
• Responsive helpers
• Screen readers
• Bootstrap Sizing
• Bootstrap Spacing
• Bootstrap Typography

• Capstone Project
• Introduction
• Output
• Statements
• Syntax
• Comments
• Variables
• Let
• Const
• Arithmetic
• Assignment
• Datatypes
• Functions
• Objects
• Events
• Strings
• String Methods
• String Search
• String Templates
• Numbers
• Number Methods
• Arrays
• Array Methods
• Array Sort
• Array Iteration
• Dates
• Date Formats
• Date GET
• Date SET
• Math
• Random
• Booleans
• Comparisons
• If-Else
• Loop for
• Loop for in
• Loop for Of
• Loop While
• Break
• Iterables
• Sets
• Maps
• TypeOf
• Type Conversions
• Bitwise
• Regex
• Errors
• Scope
• Hoisting
• Strict Mode
• this keyword
• Arrow Functions
• Classes
• Modules
• JSON
• Debugging
• Style Guide
• Common Mistakes
• Performance
• Reserved Words
• Object Definition
• Properties
• Methods
• Display
• Accessors
• Constructors
• Prototypes
• Iterables
• Sets
• Maps
• Reference
• Function Definitions
• Function Parameters
• Function Invocation
• Function Call
• Function Apply
• Function Bind
• Function Closures
• Inheritance
• Static Class
• Callbacks
• Asynchronous
• Promises
• Async/Await
• DOM
• Methods
• Documents
• Elements
• DOM HTML
• DOM Forms
• DOM CSS
• DOM Animations
• DOM Events
• DOM Event Listener
• DOM Navigation
• DOM Nodes
• DOM Collections
• DOM Node Lists
• Window
• Screen
• Location
• History
• Navigator
• Popup Alert
• Timing

• Cookies
• Web Forms API
• Web History API
• Web Storage API
• Web Worker API
• Web Fetch API

• Web Geolocation API
• XmlHTTP
• Request
• Response
• XML File
• Database

• Application
• Syntax
• Comparison against XML
• Datatypes
• Parse
• Stringify
• Objects
• Arrays
• Server
• HTML

• JSONP
• Graphics
• Canvas
• Plotly
• Chart.js
• Google Chart

• D3.js
• Collection of Data
• Accessing Arrays content through bracket notation
• push()
• unshift()
• pop()
• shift()
• splice() – Adding and Removing an element
• Copying Array contents
• Spread Operator
• Combining arrays using spread operator
• indexOf()
• Multidimensional Arrays
• Key-Value Pairs using Objects
• Object Nested within an Object
• Accessing Property Names with Bracket Notation
• delete keyword
• Object has a property?
• Object.keys()

• Modifying an array within an object
• Binary Search
• Big O notation
• Imperative code
• Recursion
• Tail recursion
• Array splitting

• Partition
• JavaScript Object
• Constuctor Function
• Constructors to create objects
• Constructors to receive arguments
• instanceOf
• Own Properties
• Iterate through all properties
• Change the prototype to a new object
• Prototype Chain
• Supertype
• Childtype
• Override Inherited Methods
• Mixins
• Closure
• Immediately Invoked Function Expression

• IIFE to create a module
• Hazards of Imperative Code
• concat
• reduce
• map
• filter
• sort
• Split
• join
• Strings to URL Slugs
• every
• some

• Currying and Partial Application
• Script Tags
• HTML Elements with jQuery Selectors
• Access Elements by Class using jQuery
• Access Elements by id using jQuery
• Delete jQuery Functions
• Multiple jQuery Selectors
• Remove classes from an element
• Disable an element
• Changing the text inside an element
• Removing an element
• appendTo
• Cloning an element
• Accessing the parent element
• Accessing the child element
• Accessing the Ev

• jQuery to modify content on a page
• SASS Variables
• Nesting CSS with SASS
• Reusable SASS with Mixin
• @if and @else
• @for
• @each
• @while
• Spliting the styles with Partials

• Extending one style to another
• Simple JSX Element
• Complex JSX Element
• Comments
• Render HTML Elements to DOM
• HTML Class in JSX
• Self-Closing JSX Tags
• React Component
• Component with Composition
• Use React to Render Nested Components
• Compose React Components
• Render a Class Component to the DOM
• Write a React Component from Scratch
• Passing Props to a Stateless Functional Component
• Passing an Array as Props
• Default Props
• Override Default Props
• Use PropTypes to Define the Props You Expect
• Access Props Using this.props
• Review Using Props with Stateless Functional Components
• Create a Stateful Component
• Render State in the User Interface
• Render State in the User Interface Another Way
• Set State with this.setState
• Bind ‘this’ to a Class Method
• Use State to Toggle an Element
• Write a Simple Counter
• Create a Controlled Input
• Create a Controlled Form
• Pass State as Props to Child Components
• Pass a Callback as Props
• Use the Lifecycle Method componentWillMount
• Use the Lifecycle Method componentDidMount
• Add Event Listeners
• Optimize Re-Renders with shouldComponentUpdate
• Introducing Inline Styles
• Add Inline Styles in React
• Use Advanced JavaScript in React Render Method
• Render with an If-Else Condition
• Use && for a More Concise Conditional
• Use a Ternary Expression for Conditional Rendering
• Render Conditionally from Props
• Change Inline CSS Conditionally Based on Component State
• Use Array.map() to Dynamically Render Elements
• Give Sibling Elements a Unique Key Attribute
• Use Array.filter() to Dynamically Filter an Array
• Render React on the Server with renderToString
• Routes
• Conditional Rendering
• Pure Components
• High Order Components

• Controlled and Uncontrolled Components
• Mock API Server
• Axios / POSTMAN

• Server Side Rendering
• Redux Store
• State From Redux Store
• Redux Action
• Action Creator
• Action Event
• Handling Actions
• Switch Statement for Handling Actions
• Store Listener
• Multiple Reducers
• Action Data to the store
• Middleware to Handle Asynchronous Action
• React-Redux
• Provider to connect React with Redux

• Capstone Project
• First Example
• Console
• REPL
• NPM
• CL Options
• Globals
• OS
• Timer
• Errors
• DNS
• Net
• Crypto
• TLS/SSL
• Debugger
• Process
• Child Process
• Buffers
• Streams
• File System
• Path
• StringDecoder
• Query String
• ZLIB
• Assertion
• V8
• Callbacks
• Events
• Punycode
• TTY

• Web Modules
• Create Connection
• Create Database
• Create Collection
• MongoDB Insert
• MongoDB Select
• MongoDB Query
• MongoDB Sorting
• MongoDB Remove
• Callbacks
• Promises
• Generator
• Co Module
• Async Module
• Reading from MongoDB
• Writing to MongoDB
• Mongo Shell

• Schema Initialization
• Express.js Introduction
• Installation
• Request
• Response
• Get
• Post
• Routing
• Cookies
• File Upload
• Middleware
• Scaffolding

• Template
• Express
• Routing
• Request Matching
• Route Parameters
• Route Lookup
• Handler Function
• Request Object
• Response Object
• Middleware
• Resource based
• HTTP Methods
• Actions

• JSON
• Server Restart
• Testing

• Error Handling
• Routing Techniques
• Simple Routing
• Route Parameters
• Route Query String
• Programmatic Navigation
• Nested Routes

• Browser History
• Server-Side Modules
• Introduction to Webpack
• Using Webpack Manually
• Transform and Bundle
• Libraries Bundle
• Hot Module Replacement
• HMR Using Middleware
• Debugging

• ESLint Environment
• Basic Server Rendering
• Handling State
• Initial State
• Server-Side Bundle
• Back-End HMR
• Routed Server Rendering
• Encapsulated Fetch

• New Directory Structure
• Syncing Initial Data
• Common Data Fetcher
• Generated Routes
• Data Fetcher with Parameters
• Data Fetcher with Search
• Nested Components

• Redirects
• MongoDB Aggregate
• Pagination
• Higher Order Components
• Search Bar
• Google Sign-In
• Session Handling
• Controlled Components
• Controlled Components in Forms
• Adding More Filters
• Typed Input
• Edit Form
• Specialized Input Components
• Number Input
• Date Input
• Text Input
• Update API
• Updating an Issue
• Updating a Field
• Delete API

• Deleting an Issue