This page contains all of the material of my Web Technologies Classes. Feel free to bookmark download or distribute its content its all free. Join my classes for a roller coaster ride.
Always keep in mind I am not a guru. Please keep me posted with anything which you know and I don’t.
Facebook Group Link, WhatsApp Group
Github page for FA18 Web classes Code
Github page for FA19 Web Classes
We Would be building A movie Rental App, Complete Code can be downloaded from here
HTML/CSS/JS
Lecture 01 Internet and WWW
Lecture 02 HTML and CSS Basics
Lecture 03 More Basic HTML and CSS
Lecture 04 Page Sections and the CSS Box Model
Lecture 05 Floating and Positioning
Lecture 08 HTML Forms
Lecture 09 Server Browser Interactions //Don’t touch php its no go area 🙂
Lecture 10 Form Validations and Regular Expression
Lecture 12 Basic JavaScript for Client Side Programming
Lecture 13 More JavaScript and DOM // Don’t touch prototype its a no go area 🙂
Lecture 14 Object-Oriented JavaScript
Lecture 15 Advanced JavaScript and DOM
JQuery
Jquery Consume API with fetch
Node
0- JS OOP
1- Node
2- NPM
3- RestFul API Using Express
4- Sync ASync JS
5- CRUD With Mongo and Mongoose
6- Mongoose Relationships
7- Authentication and Authorization
8- Handling Errors
9- Deployment
React
1- Intro
2- Components
3- Pagination Filtering and Sorting
4- Routing, Quick Start
5- Forms
6- Calling Backend Services
7- Authentication and Authorizations
8- Deployment
A nice little tutorial to deploy REACT/NODE on Heroku together
Heroku Deployment Sequece
only once
heroku login
git init
then
git add -A ; git commit -m ‘Adjustments’ ; git push heroku master ; heroku logs –tail
Sample API to work with
Base URL: https://usman-vidly.herokuapp.com/api/
| Method | URL | Description |
|---|---|---|
| POST | /users | { |
| POST | /auth | { “email”:”[email protected]”, “password”:”usman” } |
| GET | /users/me | set x-auth-token generated from login
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1Y2FkYzMyZmJiZWZhNDAwMTZhZmYxZTIiLCJpc0FkbWluIjp0cnVlLCJpYXQiOjE1NTQ4OTMwMTV9.Gyf-aXG1Yb6w2u-l_KsZopRXStxSr-YgvqAYMfrozNs |
| GET | /movies | get all movies |
| GET | /generes | get all generes |
| POST | /geners | { “name”:”Pakistani Drama” }also set x-auth-token |
| PUT | genres/5cadcc4dbbefa40016aff1ea | Modify genre by ID set name |
| GET | genres/5cadcc4dbbefa40016aff1ea | get One Genre |
| DELETE | genres/5cadcc4dbbefa40016aff1ea | Delete One Genre |