The complete web development bootcamp

Resources

https://www.appbrewery.co/p/web-development-course-resources

Projects

• Project 1 : Using HTML created personal site - https://sdkdeepa.github.io/resume/

• Project 2 : Intro to CSS - https://sdkdeepa.github.io/profile/

• Project 2 final : HTML, CSS and Bootstrap - https://sdkdeepa.github.io/udemy-bootstrap/

• Project 3 : Dice game - JS and DOM methods - https://sdkdeepa.github.io/dice

• Project 4 : Drum kit - JS Keyboard events - https://sdkdeepa.github.io/drumming/

• Project 5 : Simon Game - JS and jQuery - https://sdkdeepa.github.io/Simon-Game-Jquery/

• Project 6: BMI Calculator - Node.js and Express.js. This project using API methods such as GET and POST to calculate the BMI

• Project 7: Weather App - Node.js and Express.js. This project uses external weather API to make GET call to get the weather data after a POST request is sent.

• Project 8: Newsletter Sign up - Html, CSS, Bootstrap, JS, Nodejs, express,API, NPM, Nodemon, body-parser etc - https://shrouded-river-17694.herokuapp.com/

• Project 9 and 10: Todo List app - Continuation of Todo list app v2. Added get, post and delete routes. You can now create and delete todo list for today and for custom list. Custom list can be added to the home route (ex: /work). Using MongoDB Altas cloud database the data is collected. Hosted application through Heroku. Check out: https://tranquil-earth-77166.herokuapp.com/

• Project 11: Multipage Personal Blog Website - Created a multi page personal blog application using HTML, CSS, Bootstrap, JS, Node.js, Express.js, body-parser, API, EJS, Heroku, Mongoose, MogoDB Altas cloud cluster. Checkout: https://morning-brook-32061.herokuapp.com/

Example of wireframing a project

• Project 2. wireframing TinDog.png

Topics covered

HTML, CSS, JavaScript, Bootstrap 4, DOM & DOM Manipulation, jQuery, Node.js, Express, React EJS, body-parser, nodemon, lodash, MongoDB, MongoDB Atlas, mongoose, mongoose-encryption, dotenv, md5, bcrypt, passport, passport-local, passport-local-mongoose, passport-google-path20, mongoose-findorcreate, express-session, API, JSON, Authentication, Mailchimp API, Build REST API from scratch, Heroku.

Section 9: Introduction to JavaScript ES6

• 116-117: Challenge: Changing Casing in Text
• 118: Basic Arithmetic and Modulo Operator in Javascript
• 121-122: Functions Part 1: Challenge - The Karel Robot
• 124: Functions Part 2: Parameters and Arguments

Section 10: Intermediate JavaScript

• 131: Random Number Generation in Javascript: Building a Love Calculator
• 132: Control Statements: Using If-Else Conditionals & Logic
• Coding Exercise 5: BMI Calculator Advanced (IF/ELSE)
• Coding Exercise 6: Leap Year
• 138: Adding Elements and Intermediate Array Techniques

Section 12: Boss Level Challenge 1 - The Dicee Game

• Create an External JS File
• Add Dice Images
• Create a Random Number
• Change both img to a Random Dice
• Change both img Elements
• Change the Title to Display a Winner

Section 13: Advanced JavaScript and DOM Manipulation

• 172: Higher Order Function Challenge

Section 14: Drum Kit

• 171: Adding Event Listners to a Button
• 174: How to Play Sounds on a Website
• 176: How to Use Switch Statements in JavaScript
• 179: Using Keyboard Event Listeners to Check for Key Presses
• 181: Adding Animation to Websites

Section 15: Boss Level Challenge 2 - The Simon Game

• Add JS and jQuery
• Create a New Pattern
• Show the Sequence to the User with Animations and Sounds
• Check Which Button is Pressed
• Add Sounds to Button Clicks
• Add Animations to User Clicks
• Start the Game
• Check the User's Answer Against the Game Sequence
• Game Over
• Restart the Game

Section 19: Express.js with Node.js

• 241: Creating Our First Server with Express
• 242: Handling Requests and Responses: the GET Request
• 244: Understanding and Working with Routes
• 246: Calculator Challenge Setup
• 248: Responding to Requests with HTML Files
• 249: Processing Post Requests with Body Parser
• 250: BMI Routing Challenge

Section 20: APIs - Application Programming Interfaces

• 258: Making GET Requests with the Node HTTPS Module
• 259: How to Parse JSON
• 260: Using Express to Render a Website with Live API Data
• 261: Using Body Parser to Parse POST Requests to the Server Project: Weather Project

Section 21: Newsletter Signup

• 263: Setting up the Sign Up Page
• 264: Posting Data to Mailchimp's Servers via their API
• 265: Adding Success and Failure Pages
• 266: Deploying Your Server with Heroku

Project: https://shrouded-river-17694.herokuapp.com/

Section 22: EJS

• 282: Templates? Why Do We Need Templates?
• 283: Creating Your First EJS Template
• 284: Running Code Inside the EJS Template
• 285: Passing Data from Your Webpage to Your Server
• 287: Adding Pre-Made CSS Stylesheets to Your Website
• 288: Understanding Templating vs Layouts
• 289: Understanding Node Module Exports: How to Pass Functions and Data between Files

Section 23: Boss Level Challenge 3 - Blog Website

• Get Home route and add content to home.ejs
• Pass data from homeStartingContent to home.ejs
• Add header and footer partials to home.ejs
• Moved header and footer to partials folder
• Add About and Contact routes, pass content to about and contact.ejs
• Add nav href to header
• Add compose form and POST route
• Add text fields to compose form and use bootstrap
• Create JS object for post
• Push post into posts array
• Add posts to render array
• Loop through all posts
• Refactor for loop to use forEach
• Render each post onto Home
• Add express routing parameters /posts/:blogPost
• Loop through posts array to check if it matches title in url
• Add lodash and use _.lowerCase on titles
• Separate page for each blog post
• Truncate post body on Home page to 100 characters
• Add Read More to posts

Section 27: Mongoose

• 357: Introduction to Mongoose
• 358: Reading from Your Database with Mongoose
• 359: Data Validation with Mongoose
• 360: Updating and Deleting Data Using Mongoose
• 361: Establishing Relationships and Embedding Documents using Mongoose

Section 28: Putting Everything Together

• 364: Take ToDoList Project to the Next Level and Connect it with Mongoose
• 365: Rendering Database Items into the ToDoList App
• 366: Adding New Items to our ToDoList Database
• 367: Deleting Items from our ToDoList Database
• 368: Creating Custom Lists using Express Route Parameters
• 369: Adding New Items to the Custom ToDoLists
• 370: Revisiting Lodash and Deleting Items from Custom ToDo Lists

Section 29 - Deploying Your Web Application

• 374: How to Deploy Web Apps with a Database
• 374: How to Setup MongoDB Atlas
• 375: Deploying An App with a Database to Heroku

Folder: Project 9 and 10: Todo List https://tranquil-earth-77166.herokuapp.com/

Section 30 - Boss Level Challenge 4 - Blog Website Upgrade

• 381: Save Composed Posts with MongoDB
• 382: Get Home Page to Render the Posts
• 383: Redirect to Home Page after save() is completed with no errors
• 384: Render correct blog post based on post _id

Folder: Project 11: Blog website completed https://morning-brook-32061.herokuapp.com/

Section 31 - Build Your Own RESTful API From Scratch

• 389: Set Up Server Challenge
• 391: GET All Articles
• 392: POST a New Article
• 393: Delete All Articles
• 394: Chained Route Handlers Using Express
• 395: GET a Specific Article
• 396: PUT a Specific Article
• 397: PATCH a Specific Article
• 398: DELETE a Specific Article

Folder: Wiki-API

Section 32 - Authentication & Security

• 403: Getting Set Up
• 404: Level 1 - Register Users with Username and Password
• 406: Level 2 - Database Encryption
• 407: Using Environment Variables to Keep Secrets Safe
• 408: Level 3 - Hashing Passwords
• 410: Level 4 - Salting and Hashing Passwords with bcrypt
• 412: Level 5 - Using Passport.js to Add Cookies and Sessions
• 413a: Level 6 - OAuth 2.0 & How to Implement Sign In with Google
• 413b: Level 6 - OAuth 2.0 with Facebook
• 414: Letting Users Submit Secrets

Folder: Secrets

Section 33 - React.js

• 422: JSX Code Practice
• 423: JavaScript Expressions in JSX & ES6 Template Literals
• 424: JavaScript Expressions in JSX Practice
• 425: Attributes and Styling React Elements
• 426: Inline Styling for React Elements
• 427: React Styling Practice
• 428: React Components
• 429: React Components Practice
• 431: JavaScript ES6 Import, Export and Modules Practice
• 434: Keeper App Project - Part 1
• 436: React Props
• 437: React Props Practice
• 438: React DevTools - https://990sq.csb.app/
• 439: Mapping Data to Components - https://0lrqy.csb.app/
• 440: Mapping Data to Components Practice - https://1kzup.csb.app/
• 441: JavaScript ES6 Map/Filter/Reduce
• 442: JavaScript ES6 Arrow functions
• 443: Keeper App Project - Part 2
• 444: React Conditional Rendering with the Ternary Operator & AND Operator
• 445: Conditional Rendering Practice - https://pr7ow.csb.app/
• 447: React Hooks - useState
• 448: useState Hook Practice
• 449: JavaScript ES6 Object & Array Destructuring
• 450: JavaScript ES6 Destructuring Challenge
• 451: Event Handling in React
• 452: React Forms
• 454: Changing Complex State
• 455: Changing Complex State Practice
• 456: JavaScript ES6 Spread Operator
• 457: JavaScript ES6 Spread Operator Practice
• 458: Managing a Component Tree
• 459: Managing a Component Tree Practice
• 460: Keeper App Project - Part 3
• 461: React Dependencies & Styling the Keeper App - https://pbt9b.csb.app/

Tools used

• codepen
• Atom
• Postman
• Hyper terminal
• Visual Studio Code
• https://codesandbox.io/