Day 1

• Going slow as 70% of the class did not bring their laptops.
• What HTML and CSS do?
• HTML for the structure and CSS for styling.
• HTML Basic Tags and coding on codepen.io.
• Using Chrome Developer Tools to modify the HTML of a page.
• Hexadecimal - Breaking it into parts and colour mixture.
• Targetting HTML elements using an ID.
• Applying CSS classes to HTML tags.

Day 2

• Using VSCode to make HTML and CSS files.
• head and body tags.
• Linking a stylesheet to a HTML page
• Font Pairing using fontpair.co and linking a font from Google fonts.
• Difference between ID and classes.
• Applying multiple classes.

Day 3

• Inline and block elements.
• Box Model in CSS.
• Margin and Padding.
• Relative and absolute position.
• Breaking a website into boxes.

Day 4

• Reset.css and why to use Reset.css
• <ul> tags.
• text-align: center vs margin-left: auto; margin-right: auto;. Basically how to center text and how to center div inside a div.
• What is mobile responsiveness and why?
• Using Chrome's developer tools to simulate different screen sizes.
• Mobile first approach.
• Started building a small mobile responsive layout.

Day 5

• Quick recap.
• Basics of media queries.
• Why use bootstrap breakpoints?
• Descendant selector and Adjacent selector in CSS.
• inline vs inline-block vs block.
• rem units.
• CSS Specificity basics.
• Relative linking in HTML.
• Semantic HTML brief and advantages.

Day 6 & 7

• Mobile first approach.
• What and why of Bootstrap?
• Bootstrap starter template.
• Bootstrap utilities and how they work.
• Bootstrap grid system and coding something similar ourselves.
• Bootstrap components (Navbar, Jumbotron).
• Learning how to read Bootstrap's documentation.
• Hiding stuff in certain screen sizes and showing them in other sizes.
• Overriding Bootstrap default styles using our stylesheet.

Day 8

• What is a programming language?
• Distinction between HTML & CSS and JS.
• Variables
• console.log()
• Operators
  • Arithmetic
  • Comparison
  • Operator Precedence
• Datatypes and simple operations
  • String concatenation
  • Array accessing, deleting and pushing
• Control Statements
  • If Conditions with simple applications
  • For Loops with simple applications

Day 9

• Only 4/12 students present.
• Deviated into Backend. (IP, Domains, Servers, HTTP etc)
• Logic Puzzles using Control Statements.

Day 10

• Deviated to Git. Low attendance.
• What is Git? Use cases.
• Reverting changes using Git.
• Git vs GitHub
• Uploading a small project to GitHub.

Day 11 & 12

• Functions in JavaScript
• Arguments to functions
• Scope in functions
• Return statements
• Return statements acting as values
• What are classes (behaviour/action and data) and what are objects?
• Constructors
• Methods in classes (bevaiour)
• Inheritance (extends keyword)
• Initialising new objects and using them in Arrays.
• Using objects and making them do stuff.
• new Array(), new String() and new Number().

Day 13 & 14

• What is the DOM?
• DOM Manipulation
  • getElementById, getElementsByClassName and getElementsByTagName
  • Modifying text
  • Deleting elements
  • Creating new elements
  • Changing CSS
• Event Listeners (onClick, onHover)
• setTimeout and setInterval
• Very brief touch up on jQuery
• Simple animations using DOM Manipulation and setInterval

Day 15 & 16

• Browser JavaScript and Node.js
• History and differences
• ES5, ES6, ES7 etc
• How the browser acts as a sandbox for user safety
• Brief intro to npm
• React use cases and installation
• Folder structure on a React Application
• What and why of components?
• Passing data from parent to child using props
• State vs Props
• Changing state using this.setState()
• Simple components which use state and props
• Simple ways to style using className, id and inline style

Day 17 & 18

• React State, Props Refresher
• Event Listeners in React
• Built a Mini Project
• Higher Order Components
• Single Page Applications - Concepts and Advantages
• Server Render Views vs Single Page Applications
• Routing in React using React Router DOM
• Higher Order Components
• Small Example

Day 19 & 20

• Servers, IP and the Internet
• Web Servers and Port Numbers
• Deep dive into servers and clients
• Request Response Lifecycle
• Intro to Protocols
• HTTP Protocols basics
• Status Codes
• REST Basics
• Breaking a web application into CRUD operations
• Routes for CRUD operations
• Intro to Mongo DB
• Database, Collections, Documents and IDs
• Using Atlas's Free Tier
• Using Robo3T to connect and make modifications
• Inserting data using Node.js and Mongo Driver.

Day 21

• Higher Order Functions and Uses
• npm init and package.json refresher
• Higher Order Functions in Express.js
• Automatically restarting the server using nodemon
• Wrote a few routes and tested them using Postman.

Day 22

• Routes for Creating, Reading, Updating and Deleting a resource. (Library Application)
• Stored data in local variables.
• Headers and Body in Requests and Responses.
• Variable Route Patterns.
• Tested routes using Postman.
• Mongo Refresher.
• Mongoose Basics - What and Why?

Day 23

• MVC - What and Why?
• Native driver (Plain Mongo) to create documents
• Difficulty validating.
• ODM's and Mongoose - Comparison against using just the native driver.
• Brief into relations in a database.
• Creating and using a Mongoose Schema.
• Using package.json to create a small script (npm run develop).
• Project Organisation into Models, Views and Controllers.

Day 24

• What is Async Programming?
• Ram, Hard Disk and Network calls.
• Async using Callbacks.
• Async using Promises.
• Nested async code.
• Mongoose using Callbacks.
• Mongoose using Promises.
• Worked on a few controllers.

Day 25

• Breaking controllers into multiple files.
• Updating using Mongoose.
• Revisited a few concepts.
  • Status codes
  • Methods
  • Promises
  • Headers and Body of a request
  • Pattern matching in a route

Day 26

• Connecting backend with the front-end
• Simple React app that uses Axios to talk to the backend and display data
• proxy in package.json
• Tracking source code using Git
• Pushing code to GitHub
• Using .gitignore

Day 27 & 28

• AJAX - What, Why and Examples.
• AJAX using Axios.
• .preventDefault() in forms.
• Revised a lot of React concepts.
• Creating new resources using React, forms and AJAX.
• Lifecycle methods
• componentDidMount with use cases.
• Loading search results while mounting using componentDidMount.
• Query Parameters
• API design for reusing routes (searching using query parameters. Passing data via query params to pass filters)
• Brief about Mongo Indexes.
• Axios .finally() and .create() to set defaults like baseURL.
• Functional Components in React.
• map() in React to render an array.

Day 29 & 30

• User sign up.
• Saving passwords in Mongo.
• Hashing functions.
• bcrypt to hash passwords and verify passwords.
• sparse, unique and default using mongoose.
• How do websites remember us?
• JWT and Cookies.
• JWT internals - data and signature.
• Creating a token using JWT.
• Sign in route backend.

Day 31 & 32

• Sending JWT in the headers using Postman.
• Sending JWT using Axios.
• componentDidMount() Lifecycle to load profile data.
• withRouter higher level component.
• Checking for JWT in the backend.
• DRY - Using Middleware to refactor JWT checking.
• General thinking (why not store more data in JWT? Why send wrong ID and password etc)
• Interview questions and how to tackle them.
• Resume Making Guidelines.