Web Development

O PREREQUISITE WEB DEVELOPMENT COURSE by Asha Akanksha Foundation

Introduction to Course, Front-End and Back-End

Course Requirements and Setup

Front-End: The Basics

Introduction to HTML: The Body tag

Introduction to Head and DOCTYPE

Introduction to MDN, Comments and Attributes

Basic HTML Elements

Coding Exercise-1

Coding Exercise-1_Solution

HTML Forms

Form Exercise

HTML Conclusion

Introduction to CSS

Basics of CSS

The Box Model

Selecting Specific Areas: The div and span

Selecting Specific Areas: Class and Id

Specificity and Special Selections

Some Broken Things in CSS

Simple Blog Post Code Along: Part 1

Simple Blog Post Code Along: Part 2

Simple Blog Post Code Along: Part 3

Introduction to Bootstrap

Including Bootstrap

Bootstrap Buttons, Forms and Navbar

Introduction to Grid System

The Grid System

Image Gallery Code - Along: Part 1

Image Gallery Code - Along: Part 2

Introduction to Flexbox

Penation Code Along: Part 1

Penation Code Along: Part 2

Introduction to Javascript: Primitive Data Types

Introduction to Javascript: Variables

Introduction to Javascript: Alert, Prompt and Console

Writing Separate Javascript Files

Javascript Exercise: 1

Javascript Exercise: 1_Solution

JavaScript Conditionals: Part 1

JavaScript Conditionals: Part 2

JavaScript Loops: The While Loop

JavaScript Loops: The For Loop

JavaScript Control Flow Code Along

Introduction to JavaScript Arrays

Traversing Arrays

Introduction to Functions

Functions: Arguments/ Parameters

Scope of Variables in JavaScript

Returning Values from Functions

Functions Exercise

Functions Exercise: Solution

Introduction to JavaScript Objects

JavaScript Objects: Part 2

Relating HTML and JavaScript: The DOM

Selecting HTML elements using DOM

Manipulate using DOM

Modifying Attributes with DOM

DOM Exercise 1

DOM Exercise 1_Solution

Introduction to Events

Events Exercise

Events Exercise Solution

Background Color Changer Code Along: Part 1

Background Color Changer Code Along: Part 2

Introduction to jQuery

Including and Selecting in jQuery

Basic jQuery Methods

More jQuery Methods

Advanced jQuery Methods

Introduction to Back-End

The Request- Response Cycle - Working of the Internet

Types of HTTP Requests

Back-End Workflow and Setting Up Goorm IDE

Introduction to Command Line

Command Line Exercise

Introduction to Node

Using Node for Back-End

Introduction to Node Package Manager (npm)

npm Continuation and Exercise

Introduction to Express

Using Express

Express Exercise-1

Introduction to Route Parameters

Route Parameters Exercise

Introduction to EJS

Rendering HTML

Passing Variables, Conditionals and Loops in EJS

Including Partials

Including Custom Assets

Introduction to Post Routes

Using Forms for Post Routes

Introduction to APIs

Formats of Data in APIs

Using API using Request Module

API Example Code - Along

Introduction to Blogify: Setting Up Folder and Trello

Blogify: Setting Up App

Linking ejs with App

Adding Basic Functionality to Routes

Introduction to Databases

Introduction to the Mongo Shell: Part 1

Introduction to the Mongo Shell: Part 2

Introduction to Mongoose

Connecting Blogify to Mongo

Adding Show Route to Blogify

Styling Home Page

Styling Home Page: Part 2

Styling Home Page: Part 3

Styling New Blog Page

Styling Index Page

Changing new.ejs File

RESTful Routing

Restructuring Blogify Code

Adding new.ejs for Comments

Adding Comments Post Routes

Linking Comments to Blogs

Styling Show Page: Part 1

Styling Show Page: Part 2

Introduction to Authentication

Authentication Demo App: Initial Setup

Setting Up Passport and Register Login in Auth. Demo App

Authentication Demo App: Logout, Login and Check Functionality

Setting Up Passport and User Schema in Blogify

Setting Up Login and Register Views in Blogify

Adding Authentication Routes to Blogify

Adding Authentication Middleware and links: Blogify

Blogify: Making Edit Route for Blogs

Adding Update Route to Blogify

Adding Delete to Blogs

Adding User Association to Blogs and Comments

Adding Authentication Middleware to Blogify

Introduction to Error Handling: Connect Flash

Adding Flash Messages to Blogify

Blogify: Final Touches

Introduction to Git

Introduction to Github

Setting up MongoDB Atlas in Blogify

Deploying Blogify: Heroku

The Final Project!!