diff --git a/1. dev-basics/1. development-setup.md b/1. dev-basics/1. development-setup.md index 111fb87..c704820 100644 --- a/1. dev-basics/1. development-setup.md +++ b/1. dev-basics/1. development-setup.md @@ -10,11 +10,11 @@ You need a linux equivalent operating system loaded computer for this Bootcamp. - Windows is **NOT acceptable**. If you have Windows, install Ubuntu. ### Reference -[https://github.com/mountblue/gearup/blob/master/dual_booting_ubuntu_windows.md](https://github.com/mountblue/gearup/blob/master/dual_booting_ubuntu_windows.md) +https://github.com/mountblue/gearup/blob/master/dual_booting_ubuntu_windows.md ## 2. Setup Visual Studio Code -Follow the instructions to install Visual Studio Code from [this website](https://code.visualstudio.com/docs/setup/linux) +Follow the instructions to install Visual Studio Code from this website ### Plugins Install the following VSCode plugins @@ -27,7 +27,7 @@ We use a lot of tools like zoom, discord, gitlab etc. Use the form at the end of 1. Create a zoom account. Install Zoom on both your laptop and mobile. 2. Install Discord on both your laptop and mobile. -3. CREATE A NEW [gitlab account](https://gitlab.com/users/sign_up) using your mountblue.tech account. +3. CREATE A NEW gitlab account using your mountblue.tech account. ## 4. Install git diff --git a/1. dev-basics/2. cli.md b/1. dev-basics/2. cli.md index b96643f..94ab23f 100644 --- a/1. dev-basics/2. cli.md +++ b/1. dev-basics/2. cli.md @@ -63,8 +63,7 @@ The Unix philosophy is a philosophical approach to developing software based on - *Choose portability over efficiency.* - *Keep it Simple, Stupid (KISS).* -To know more, read this [Unix philosophy -](https://en.wikipedia.org/wiki/Unix_philosophy) +To know more, read this Unix philosophy ### Directory Structure and File Hierarchy @@ -111,7 +110,7 @@ The /var directory is the writable counterpart to the /usr directory, which must ## Command Line Basics Crash Course -Video - [https://www.youtube.com/watch?v=cBokz0LTizk](https://www.youtube.com/watch?v=cBokz0LTizk) +Video - https://www.youtube.com/watch?v=cBokz0LTizk Given above is a quick super-fast course in using the command line. It is intended to be done rapidly in about a day, and not meant to teach you advanced shell usage. @@ -150,19 +149,19 @@ Copy and paste the command for each section into a text file with explanation. A ## File Permissions -Overview - [https://www.youtube.com/watch?v=D-VqgvBMV7g](https://www.youtube.com/watch?v=D-VqgvBMV7g) -Binary to Decimal Conversion for File Permissions - [https://www.youtube.com/watch?v=BmVmJi5dR9c](https://www.youtube.com/watch?v=BmVmJi5dR9c) +Overview - https://www.youtube.com/watch?v=D-VqgvBMV7g +Binary to Decimal Conversion for File Permissions - https://www.youtube.com/watch?v=BmVmJi5dR9c ## Pipes and Redirection -Video 1 - [https://www.youtube.com/watch?v=Bzd7XfApxLI](https://www.youtube.com/watch?v=Bzd7XfApxLI) -Video 2 - [https://www.youtube.com/watch?v=VgbnndezHbw](https://www.youtube.com/watch?v=VgbnndezHbw) +Video 1 - https://www.youtube.com/watch?v=Bzd7XfApxLI +Video 2 - https://www.youtube.com/watch?v=VgbnndezHbw ## Practice Drill 2 ### Pipes -1. Download the contents of "Harry Potter and the Goblet of fire" using the command line from [here](https://raw.githubusercontent.com/bobdeng/owlreader/master/ERead/assets/books/Harry%20Potter%20and%20the%20Goblet%20of%20Fire.txt) +1. Download the contents of "Harry Potter and the Goblet of fire" using the command line from here 2. Print the first three lines in the book 3. Print the last 10 lines in the book 4. How many times do the following words occur in the book? @@ -211,7 +210,7 @@ Copy and paste the command for each section into a text file with explanation. A ## How Linux Works -Go through the link here: [https://neilkakkar.com/unix.html](https://neilkakkar.com/unix.html) +Go through the link here: https://neilkakkar.com/unix.html Philosophy: - Processes diff --git a/1. dev-basics/3. git.md b/1. dev-basics/3. git.md index 6060e18..84e49aa 100644 --- a/1. dev-basics/3. git.md +++ b/1. dev-basics/3. git.md @@ -1,6 +1,6 @@ # Git -Git Crash Course - [https://www.youtube.com/watch?v=RGOj5yH7evk](https://www.youtube.com/watch?v=RGOj5yH7evk) +Git Crash Course - https://www.youtube.com/watch?v=RGOj5yH7evk 1 hour 8 minutes 30 seconds ## What is version control? @@ -106,7 +106,7 @@ sudo apt install git For more information, read this -[https://www.digitalocean.com/community/tutorials/how-to-contribute-to-open-source-getting-started-with-git](https://www.digitalocean.com/community/tutorials/how-to-contribute-to-open-source-getting-started-with-git) +https://www.digitalocean.com/community/tutorials/how-to-contribute-to-open-source-getting-started-with-git ## Setting up Git @@ -143,17 +143,17 @@ There are many other options that you can set, but these are the two essential o ## Git Branches -Video - 33 minutes 20 seconds - [https://www.youtube.com/watch?v=e2IbNHi4uCI](https://www.youtube.com/watch?v=e2IbNHi4uCI) +Video - 33 minutes 20 seconds - https://www.youtube.com/watch?v=e2IbNHi4uCI ## Github -Git and GitHub for Beginners - Crash Course - [https://www.youtube.com/watch?v=RGOj5yH7evk&t=176s](https://www.youtube.com/watch?v=RGOj5yH7evk&t=176s) +Git and GitHub for Beginners - Crash Course - https://www.youtube.com/watch?v=RGOj5yH7evk&t=176s ## Optional: Learn Enough git to be dangerous -[Learn enough Git to be dangerous](https://www.learnenough.com/git-tutorial) +Learn enough Git to be dangerous ## Practice Link -[Complete this game](https://learngitbranching.js.org/) at least 3 times. +Complete this game at least 3 times. Main: * First 4 sections @@ -181,11 +181,11 @@ Checking understanding: ### 1. Using .gitignore -[https://www.freecodecamp.org/news/gitignore-what-is-it-and-how-to-add-to-repo/](https://www.freecodecamp.org/news/gitignore-what-is-it-and-how-to-add-to-repo/) +https://www.freecodecamp.org/news/gitignore-what-is-it-and-how-to-add-to-repo/ ### 2. Good Commit Messages -[Git Commit Messages](https://chris.beams.io/posts/git-commit/) +Git Commit Messages ### 3.Making Effective Commits on Git @@ -210,11 +210,11 @@ Committing working code doesn't mean you have to commit a working feature. It ju Before committing anything use your ide's diff tool or the integrated Git Version Control. Both VS Code and IntelliJ IDEA has their own diff tools. Make sure you don't commit debug logs, comments, or anything you wrote for your own convenience or testing changes. -[Learn VS Code's Version Control](https://www.youtube.com/watch?v=AKNYgP0yEOY) +Learn VS Code's Version Control -[Learn IntelliJ's Version Control](https://www.youtube.com/watch?v=MaQnpCaiop0) +Learn IntelliJ's Version Control -[Diff in IntelliJ](https://www.jetbrains.com/help/idea/comparing-files-and-folders.html) +Diff in IntelliJ #### Always Test your code @@ -236,4 +236,4 @@ One common mistake beginner developers do is committing API Keys, secrets, and p - want to undo changes to a file? Answers to all these questions are well explained in -[this good resource](https://ohshitgit.com/). Please go through it and have it as a reference whenever you encounter such cases +this good resource. Please go through it and have it as a reference whenever you encounter such cases diff --git a/1. dev-basics/4. markdown.md b/1. dev-basics/4. markdown.md index 6cd173a..b1ec29d 100644 --- a/1. dev-basics/4. markdown.md +++ b/1. dev-basics/4. markdown.md @@ -2,6 +2,6 @@ Learn markdown from the following link -[Github markdown guide](https://guides.github.com/features/mastering-markdown/) +Github markdown guide Use Markdown in every technical paper, Readme.md and LMS submissions diff --git a/1. dev-basics/5. computer-networks.md b/1. dev-basics/5. computer-networks.md index 7dfd89b..d1dd08e 100644 --- a/1. dev-basics/5. computer-networks.md +++ b/1. dev-basics/5. computer-networks.md @@ -1,3 +1,3 @@ The following YouTube is a simple and clear explanation of computer networks without getting too much into the theory. -[https://www.youtube.com/watch?v=aHJElrgj6UA](https://www.youtube.com/watch?v=aHJElrgj6UA) +https://www.youtube.com/watch?v=aHJElrgj6UA diff --git a/10. searching/searching.md b/10. searching/searching.md index 67f7df4..2c9dcd3 100644 --- a/10. searching/searching.md +++ b/10. searching/searching.md @@ -3,6 +3,6 @@ ## NPM Video - How to choose and use npm modules -[https://www.youtube.com/watch?v=DuyxqG3L7A8](https://www.youtube.com/watch?v=DuyxqG3L7A8) +https://www.youtube.com/watch?v=DuyxqG3L7A8 ## Documentation diff --git a/2. javascript/1. getting-started.md b/2. javascript/1. getting-started.md index 195e256..e423357 100644 --- a/2. javascript/1. getting-started.md +++ b/2. javascript/1. getting-started.md @@ -12,7 +12,7 @@ NVM allows users to: - Easily switch between multiple versions of Node.js, right from the command line. - Set up aliases to switch between different downloaded versions of Node.js with ease. -Learn more about nvm [here](https://github.com/nvm-sh/nvm). +Learn more about nvm here. For Linux and Mac users only #### 1. Installing NVM @@ -53,7 +53,7 @@ nvm use ### What is Node.js? **Official Docs**: -[https://nodejs.org/en/docs/](https://nodejs.org/en/docs/) +https://nodejs.org/en/docs/ Well in 1-line, Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. @@ -62,7 +62,7 @@ Huh? Historically, JavaScript could be executed only in a web browser. Things changed in 2009 when Node.js came into being. Using Node.js we can execute JavaScript outside the browser environment. Go through the videos below to understand more about how it works. -[https://www.youtube.com/watch?v=uVwtVBpw7RQ](https://www.youtube.com/watch?v=uVwtVBpw7RQ) +https://www.youtube.com/watch?v=uVwtVBpw7RQ ### What is Node Package Manager (NPM) ? @@ -70,7 +70,7 @@ Go through the videos below to understand more about how it works. - it is an online repository for the publishing of open-source Node.js projects - and, it is a command-line utility for interacting with said repository that aids in package installation, version management, and dependency management. -A majority of Node.js libraries and applications are published on npm, and many more are added every day. These applications can be searched for on [http://npmjs.org/](http://npmjs.org/). Once you have a package you want to install, it can be installed with a single CLI command. +A majority of Node.js libraries and applications are published on npm, and many more are added every day. These applications can be searched for on http://npmjs.org/. Once you have a package you want to install, it can be installed with a single CLI command. Let's say you're hard at work one day, developing the Next Great Application. You come across a problem, and you decide that it's time to use that cool library you keep hearing about - let's use Caolan McMahon's `async` as an example. Thankfully, npm is very simple to use: you only have to run `npm install async`, and the specified module will be installed in the current directory under `./node_modules/`. Once installed to your node_modules folder, you'll be able to use `require()` on them just like they were built-ins. @@ -87,11 +87,11 @@ npm install ``` After running those commands, you will see a node_modules folder containing all of the project dependencies specified in the package.json. -NPM Crash Course - [https://www.youtube.com/watch?v=jHDhaSSKmB0](https://www.youtube.com/watch?v=jHDhaSSKmB0) +NPM Crash Course - https://www.youtube.com/watch?v=jHDhaSSKmB0 ### Best Practices: Starting a Project Always have a .gitignore file and a README.md when starting a project. -* Use relevant .gitignore templates from [https://github.com/github/gitignore](https://github.com/github/gitignore) +* Use relevant .gitignore templates from https://github.com/github/gitignore * README.md file should have a brief project description and how to run, install and/or deploy the project. diff --git a/2. javascript/2. javascript-basics.md b/2. javascript/2. javascript-basics.md index 3f0f2d0..d0e9f80 100644 --- a/2. javascript/2. javascript-basics.md +++ b/2. javascript/2. javascript-basics.md @@ -1,15 +1,15 @@ # JavaScript Basics ## 1. Introduction -[CodeAcademy Tutorial](https://www.codecademy.com/learn/introduction-to-javascript) +CodeAcademy Tutorial You can also watch a popular JavaScript basics crash course video on Youtube. ## 2. Modules -[Read this article](https://www.freecodecamp.org/news/node-module-exports-explained-with-javascript-export-function-examples/) +Read this article -Video - [https://www.youtube.com/watch?v=hyYbs3SANRo](https://www.youtube.com/watch?v=hyYbs3SANRo) +Video - https://www.youtube.com/watch?v=hyYbs3SANRo ## 3. Best Practices: Indentation @@ -245,8 +245,8 @@ let inventory = [{"id":1,"car_make":"Lincoln","car_model":"Navigator","car_year" Watch the videos and then practice -- [https://www.youtube.com/watch?v=zdp0zrpKzIE](https://www.youtube.com/watch?v=zdp0zrpKzIE) -- [https://www.youtube.com/watch?v=rRgD1yVwIvE](https://www.youtube.com/watch?v=rRgD1yVwIvE) +- https://www.youtube.com/watch?v=zdp0zrpKzIE +- https://www.youtube.com/watch?v=rRgD1yVwIvE ## 8. Best Practices: Higher Order Functions @@ -415,6 +415,6 @@ let inventory = [{"id":1,"car_make":"Lincoln","car_model":"Navigator","car_year" ``` ## 10. Scopes and Closures -- [JavaScript Scope and Closures](https://css-tricks.com/javascript-scope-closures/) +- JavaScript Scope and Closures -- [The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript](https://ui.dev/ultimate-guide-to-execution-contexts-hoisting-scopes-and-closures-in-javascript/) +- The Ultimate Guide to Hoisting, Scopes, and Closures in JavaScript diff --git a/2. javascript/3. javascript-practice.md b/2. javascript/3. javascript-practice.md index a6df12a..54c2887 100644 --- a/2. javascript/3. javascript-practice.md +++ b/2. javascript/3. javascript-practice.md @@ -4,7 +4,7 @@ ### 1. Case -Read: [Case Styles: Camel, Pascal, Snake, and Kebab Case](https://betterprogramming.pub/string-case-styles-camel-pascal-snake-and-kebab-case-981407998841) +Read: Case Styles: Camel, Pascal, Snake, and Kebab Case Read: [What is camelCase, PascalCase, kebab-case and snake_case? ](https://winnercrespo.com/naming-conventions/) @@ -188,7 +188,7 @@ module.exports = problem1; ### 4. Starting NodeJS Projects Best Practices When Starting NodeJS Projects -[https://www.youtube.com/watch?v=X_UQbPnvSx4](https://www.youtube.com/watch?v=X_UQbPnvSx4) +https://www.youtube.com/watch?v=X_UQbPnvSx4 ## JS Drill: Arrays @@ -321,14 +321,14 @@ function defaults(obj, defaultProps) { ``` ## Best Practices When Starting NodeJS Projects -[Watch this video](https://www.youtube.com/watch?v=X_UQbPnvSx4) +Watch this video ## Choosing npm modules -[Watch this video](https://www.youtube.com/watch?v=DuyxqG3L7A8) +Watch this video ## IPL Data Project I -**Download the data from:** [https://www.kaggle.com/manasgarg/ipl](https://www.kaggle.com/manasgarg/ipl) +**Download the data from:** https://www.kaggle.com/manasgarg/ipl There should be 2 files: - deliveries.csv diff --git a/2. javascript/4. js-debugging-and-review.md b/2. javascript/4. js-debugging-and-review.md index ba302a8..502469e 100644 --- a/2. javascript/4. js-debugging-and-review.md +++ b/2. javascript/4. js-debugging-and-review.md @@ -2,9 +2,9 @@ ## Debugging -- How to read a JavaScript Stack Trace - [https://harrymoreno.com/2017/02/25/how-to-read-a-javascript-stack-trace.html](https://harrymoreno.com/2017/02/25/how-to-read-a-javascript-stack-trace.html) -- What is the difference between `throw new Error` and `throw someObject`? - [https://stackoverflow.com/questions/9156176/what-is-the-difference-between-throw-new-error-and-throw-someobject](https://stackoverflow.com/questions/9156176/what-is-the-difference-between-throw-new-error-and-throw-someobject) -- Using console methods - [https://fireship.io/courses/javascript/concepts-console/](https://fireship.io/courses/javascript/concepts-console/) +- How to read a JavaScript Stack Trace - https://harrymoreno.com/2017/02/25/how-to-read-a-javascript-stack-trace.html +- What is the difference between `throw new Error` and `throw someObject`? - https://stackoverflow.com/questions/9156176/what-is-the-difference-between-throw-new-error-and-throw-someobject +- Using console methods - https://fireship.io/courses/javascript/concepts-console/ ## Self Review @@ -64,10 +64,10 @@ Share link of the folder in your private Discord channel when you start. Also ju ## Miscellaneous - History of JavaScript - - [https://ui.dev/ecmascript/](https://ui.dev/ecmascript/) - - [https://auth0.com/blog/a-brief-history-of-javascript/](https://auth0.com/blog/a-brief-history-of-javascript/) + - https://ui.dev/ecmascript/ + - https://auth0.com/blog/a-brief-history-of-javascript/ - Imperative VS Declarative Programming - - [https://ui.dev/imperative-vs-declarative-programming/](https://ui.dev/imperative-vs-declarative-programming/) + - https://ui.dev/imperative-vs-declarative-programming/ - Clean Code - - [https://github.com/ryanmcdermott/clean-code-javascript](https://github.com/ryanmcdermott/clean-code-javascript) + - https://github.com/ryanmcdermott/clean-code-javascript diff --git a/3. asynchronous-javascript/1. callback-functions.md b/3. asynchronous-javascript/1. callback-functions.md index 29288d3..f049a2f 100644 --- a/3. asynchronous-javascript/1. callback-functions.md +++ b/3. asynchronous-javascript/1. callback-functions.md @@ -84,4 +84,4 @@ setTimeout(() => { ``` ## Video -[https://www.youtube.com/watch?v=qtfi4-8dj9c](https://www.youtube.com/watch?v=qtfi4-8dj9c) +https://www.youtube.com/watch?v=qtfi4-8dj9c diff --git a/3. asynchronous-javascript/2. asynchronous-programming.md b/3. asynchronous-javascript/2. asynchronous-programming.md index 2e31c6e..0df440c 100644 --- a/3. asynchronous-javascript/2. asynchronous-programming.md +++ b/3. asynchronous-javascript/2. asynchronous-programming.md @@ -2,13 +2,13 @@ Read this -[https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts) +https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Concepts ## Tutorials -[https://github.com/workshopper/learnyounode](https://github.com/workshopper/learnyounode) +https://github.com/workshopper/learnyounode -Remaining Sections/Topics from [CodeAcademy](https://www.codecademy.com/learn/introduction-to-javascript) Promises, Async/Await, Request +Remaining Sections/Topics from CodeAcademy Promises, Async/Await, Request ## Best Practices: if else @@ -44,9 +44,9 @@ It can be prevented by using `return` inside the `if` but it is easier to just u ## Error First Callback Functions -[Read this article](https://fredkschott.com/post/2014/03/understanding-error-first-callbacks-in-node-js/) +Read this article ## Asynchronous Callbacks Control - Clarification Session -[https://www.youtube.com/watch?v=mZ0FkdIBE2o](https://www.youtube.com/watch?v=mZ0FkdIBE2o) +https://www.youtube.com/watch?v=mZ0FkdIBE2o diff --git a/3. asynchronous-javascript/4. callback-hell-promise-chaining.md b/3. asynchronous-javascript/4. callback-hell-promise-chaining.md index a6a7dad..1517cb6 100644 --- a/3. asynchronous-javascript/4. callback-hell-promise-chaining.md +++ b/3. asynchronous-javascript/4. callback-hell-promise-chaining.md @@ -34,23 +34,23 @@ firstRequest() The code just above shows how multiple callbacks can be chained one after another. Chaining is one of the best features of Promises. ### Video -[https://www.youtube.com/watch?v=OXpZfyVXeI8](https://www.youtube.com/watch?v=OXpZfyVXeI8) +https://www.youtube.com/watch?v=OXpZfyVXeI8 ## Recap Go through the following blog and related video to get an idea of asynchronous JavaScript -[https://ui.dev/async-javascript-from-callbacks-to-promises-to-async-await/](https://ui.dev/async-javascript-from-callbacks-to-promises-to-async-await/) +https://ui.dev/async-javascript-from-callbacks-to-promises-to-async-await/ ### Video -[https://www.youtube.com/watch?v=gB-OmN1egV8](https://www.youtube.com/watch?v=gB-OmN1egV8) +https://www.youtube.com/watch?v=gB-OmN1egV8 ## Event Loop Read this -[https://flaviocopes.com/javascript-event-loop/](https://flaviocopes.com/javascript-event-loop/) +https://flaviocopes.com/javascript-event-loop/ ### Video -[https://www.youtube.com/watch?v=8aGhZQkoFbQ](https://www.youtube.com/watch?v=8aGhZQkoFbQ) +https://www.youtube.com/watch?v=8aGhZQkoFbQ diff --git a/3. asynchronous-javascript/5. project.md b/3. asynchronous-javascript/5. project.md index 6935672..49b246f 100644 --- a/3. asynchronous-javascript/5. project.md +++ b/3. asynchronous-javascript/5. project.md @@ -4,7 +4,7 @@ When you import a module, always name the module the same as the file name or it's installed module name. That way it becomes easier to debug when the code becomes more complex. -If you are using [destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment), this does not apply. +If you are using destructuring, this does not apply. Bad Usage: ```javascript diff --git a/3. asynchronous-javascript/6. es6.md b/3. asynchronous-javascript/6. es6.md index c47cd08..b7ce186 100644 --- a/3. asynchronous-javascript/6. es6.md +++ b/3. asynchronous-javascript/6. es6.md @@ -1,3 +1,3 @@ # ES6 -[https://www.youtube.com/watch?v=NCwa_xi0Uuc](https://www.youtube.com/watch?v=NCwa_xi0Uuc) +https://www.youtube.com/watch?v=NCwa_xi0Uuc diff --git a/4. web-app-architecture/1. web-app-architecture.md b/4. web-app-architecture/1. web-app-architecture.md index f47e446..c37aad2 100644 --- a/4. web-app-architecture/1. web-app-architecture.md +++ b/4. web-app-architecture/1. web-app-architecture.md @@ -43,17 +43,17 @@ The columns below summarize the key differences between the two types of servers ## 3. HTTP Read this article on Mozilla Developer Network. -[https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview](https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview) +https://developer.mozilla.org/en-US/docs/Web/HTTP/Overview ## 4. Choosing a HTTP Response Code -1. [Use this flowchart to decide what status code to use and when](https://www.codetinkerer.com/2015/12/04/choosing-an-http-status-code.html) -2. [Commonly used Response Codes with Discussion](https://www.bigbinary.com/conversation) +1. Use this flowchart to decide what status code to use and when +2. Commonly used Response Codes with Discussion ## 6. HTTP Drills I Go through the following link to learn the basics of the node `http` standard library. -[https://flaviocopes.com/node-module-http/](https://flaviocopes.com/node-module-http/) +https://flaviocopes.com/node-module-http/ Create a new project in Gitlab, the naming format is `-http-server`. Write a program which will start a static server, and which would satisfy the following requests: diff --git a/4. web-app-architecture/2. express-js.md b/4. web-app-architecture/2. express-js.md index 5bb9f1e..476e092 100644 --- a/4. web-app-architecture/2. express-js.md +++ b/4. web-app-architecture/2. express-js.md @@ -1,8 +1,8 @@ # Express JS -- Hello World with ExpressJS - [https://expressjs.com/en/starter/hello-world.html](https://expressjs.com/en/starter/hello-world.html) -- Video - ExpressJS Crash Course - [https://www.youtube.com/watch?v=L72fhGm1tfE](https://www.youtube.com/watch?v=L72fhGm1tfE) -- Writing Middleware - [https://expressjs.com/en/guide/writing-middleware.html](https://expressjs.com/en/guide/writing-middleware.html) +- Hello World with ExpressJS - https://expressjs.com/en/starter/hello-world.html +- Video - ExpressJS Crash Course - https://www.youtube.com/watch?v=L72fhGm1tfE +- Writing Middleware - https://expressjs.com/en/guide/writing-middleware.html ## Project - IPL Project II @@ -11,7 +11,7 @@ Instructions: Use a static webserver to serve your output JSON files. ( Remember your CLI drills on how to start a static server? ) -Build a simple client web app, where you make an HTTP GET request to get the JSON file and display the data as a visualization. The visualization should be done using this library [https://www.highcharts.com/](https://www.highcharts.com/) +Build a simple client web app, where you make an HTTP GET request to get the JSON file and display the data as a visualization. The visualization should be done using this library https://www.highcharts.com/ Directory structure: @@ -50,17 +50,17 @@ Use google and do the following: **DO NOT ATTEMPT THIS BY YOURSELF** -[Ping your mentor and ask about this](https://gitlab.com/mountblue/cohort-js-common/express-merge-conflicts) +Ping your mentor and ask about this ## Authentication ### JWT- JSON Web Token -- [Authentication and Authorization with JWTs in Express.js](https://stackabuse.com/authentication-and-authorization-with-jwts-in-express-js/) -- [Technical Introduction to JSON Web Tokens](https://jwt.io/introduction/) -- [JSON Web Tokens (JWTs) in Express.js](https://www.digitalocean.com/community/tutorials/nodejs-jwt-expressjs) -- Video - [https://www.youtube.com/watch?v=7nafaH9SddU](https://www.youtube.com/watch?v=7nafaH9SddU) +- Authentication and Authorization with JWTs in Express.js +- Technical Introduction to JSON Web Tokens +- JSON Web Tokens (JWTs) in Express.js +- Video - https://www.youtube.com/watch?v=7nafaH9SddU ## Loggers diff --git a/5. databases/1. databases.md b/5. databases/1. databases.md index 2a6adb8..e075020 100644 --- a/5. databases/1. databases.md +++ b/5. databases/1. databases.md @@ -4,18 +4,18 @@ ### Types of Databases -- Flat File Databases - [https://www.youtube.com/watch?v=vAA1VVExV5Q](https://www.youtube.com/watch?v=vAA1VVExV5Q) -- What is a database - [https://www.youtube.com/watch?v=Tk1t3WKK-ZY](https://www.youtube.com/watch?v=Tk1t3WKK-ZY) +- Flat File Databases - https://www.youtube.com/watch?v=vAA1VVExV5Q +- What is a database - https://www.youtube.com/watch?v=Tk1t3WKK-ZY ### Setting up Database in Local Machine -Setting up MySQL 8 +Setting up MySQL 8 -[Installing on Ubuntu](https://linuxize.com/post/how-to-install-mysql-on-ubuntu-18-04/) +Installing on Ubuntu -[Installing on Mac](https://dev.mysql.com/doc/mysql-osx-excerpt/5.7/en/osx-installation-pkg.html) +Installing on Mac -[Installing on Windows](https://www.liquidweb.com/kb/install-mysql-windows/) +Installing on Windows Optional : MySQL Workbench @@ -23,7 +23,7 @@ Optional : MySQL Workbench Let's get started with the syntax of SQL and how to manipulate data in the database. You can start going through the SQL lessons in SQLBolt. -Even if you are already familiar with SQL, we recommend that you go through the following lessons in SQLBolt - [https://sqlbolt.com/](https://sqlbolt.com/) +Even if you are already familiar with SQL, we recommend that you go through the following lessons in SQLBolt - https://sqlbolt.com/ - Fetching data with SELECT - Queries with constraints using WHERE @@ -58,7 +58,7 @@ Because of the differences in standard compliance with different relational data ### Database Design and Data Normalization -[https://www.youtube.com/watch?v=tR_rOJPiEXc](https://www.youtube.com/watch?v=tR_rOJPiEXc) +https://www.youtube.com/watch?v=tR_rOJPiEXc ### Database Design Drills @@ -176,7 +176,7 @@ Common environments that you will be exposed to are as follows: #### Setting Environmental Variables -Learn how to set environmental variables by reading [this article](https://linuxize.com/post/how-to-set-and-list-environment-variables-in-linux/) +Learn how to set environmental variables by reading this article #### How To Manage Configuration For Different Environments? @@ -207,9 +207,9 @@ You can learn how to do both of these methods by following the instructions ment ### What is an ORM? -[What is an ORM and Why You Should Use it](https://blog.bitsrc.io/what-is-an-orm-and-why-you-should-use-it-b2b6f75f5e2a) +What is an ORM and Why You Should Use it -[Popular ORMs for NodeJS](https://www.dunebook.com/best-node-js-orms/) +Popular ORMs for NodeJS ### Advantages & Disadvantages of an ORM @@ -242,4 +242,4 @@ You can learn how to do both of these methods by following the instructions ment ### Sequelize ORM -[https://www.npmjs.com/package/sequelize](https://www.npmjs.com/package/sequelize) +https://www.npmjs.com/package/sequelize diff --git a/5. databases/2. optional-practice.md b/5. databases/2. optional-practice.md index 97accd2..0cbc7af 100644 --- a/5. databases/2. optional-practice.md +++ b/5. databases/2. optional-practice.md @@ -3,17 +3,17 @@ ## 1. Install and get familiar with PostgreSQL Follow the instructions given in this article -[https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart](https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart) +https://www.digitalocean.com/community/tutorials/how-to-install-postgresql-on-ubuntu-20-04-quickstart ## 2. Practice SQL ### 2a. SQLBolt -Complete [SQLBolt](https://sqlbolt.com/) 3 times. +Complete SQLBolt 3 times. ### 2b. PG Exercises -Complete [PostgreSQL Exercises](https://pgexercises.com/) 3 times. (Recursive Queries are optional) +Complete PostgreSQL Exercises 3 times. (Recursive Queries are optional) ## 3. Data Project - SQL Version diff --git a/6. html-css/1. basics.md b/6. html-css/1. basics.md index bcc811d..f4f669b 100644 --- a/6. html-css/1. basics.md +++ b/6. html-css/1. basics.md @@ -2,30 +2,30 @@ ## Do any 1 Tutorial -- [https://www.udacity.com/course/intro-to-html-and-css--ud001](https://www.udacity.com/course/intro-to-html-and-css--ud001) -- [https://dash.generalassemb.ly/](https://dash.generalassemb.ly/) -- [https://learn.shayhowe.com/](https://learn.shayhowe.com/) -- [https://marksheet.io/](https://marksheet.io/) -- [https://www.internetingishard.com/html-and-css/](https://www.internetingishard.com/html-and-css/) +- https://www.udacity.com/course/intro-to-html-and-css--ud001 +- https://dash.generalassemb.ly/ +- https://learn.shayhowe.com/ +- https://marksheet.io/ +- https://www.internetingishard.com/html-and-css/ ## CSS Selectors -- [https://www.educative.io/edpresso/what-are-css-selectors](https://www.educative.io/edpresso/what-are-css-selectors) -- [https://css-tricks.com/how-css-selectors-work/](https://css-tricks.com/how-css-selectors-work/) +- https://www.educative.io/edpresso/what-are-css-selectors +- https://css-tricks.com/how-css-selectors-work/ ## Box Model -[https://css-tricks.com/the-css-box-model/](https://css-tricks.com/the-css-box-model/) +https://css-tricks.com/the-css-box-model/ ## Flexbox Resources: -- [CSS Flex Video](https://www.youtube.com/watch?v=JJSoEo8JSnc) -- [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- CSS Flex Video +- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Play the games to practice: -- [https://flexboxfroggy.com/](https://flexboxfroggy.com/) -- [http://www.flexboxdefense.com/](http://www.flexboxdefense.com/) +- https://flexboxfroggy.com/ +- http://www.flexboxdefense.com/ ## Default Browser Styles @@ -34,9 +34,9 @@ This is a zine by Julia Evans. ## Layout Drills -[https://gitlab.com/mountblue/js/css-layout-drills](https://gitlab.com/mountblue/js/css-layout-drills) +https://gitlab.com/mountblue/js/css-layout-drills -Create a [codepen](https://codepen.io/) collection with solutions for all problems and submit the Codepen collection URL +Create a codepen collection with solutions for all problems and submit the Codepen collection URL NOTE: Each problem can have multiple solutions. Also, ignore the `div` numbers, they have been used for illustrations only. @@ -44,7 +44,7 @@ NOTE: Each problem can have multiple solutions. Also, ignore the `div` numbers, **Instructions** - Fork this repository: -[https://gitlab.com/mountblue/js/pricing-html-css](https://gitlab.com/mountblue/js/pricing-html-css) +https://gitlab.com/mountblue/js/pricing-html-css - Clone it in your local machine - **Make regular commits to your project** diff --git a/6. html-css/2. responsive-web-design.md b/6. html-css/2. responsive-web-design.md index 11eb564..45c5de0 100644 --- a/6. html-css/2. responsive-web-design.md +++ b/6. html-css/2. responsive-web-design.md @@ -2,27 +2,27 @@ ## Live Coding Tutorial -[https://www.youtube.com/watch?v=Wm6CUkswsNw](https://www.youtube.com/watch?v=Wm6CUkswsNw) +https://www.youtube.com/watch?v=Wm6CUkswsNw ## Relative Units -- [https://css-tricks.com/the-lengths-of-css/](https://css-tricks.com/the-lengths-of-css/) -- [https://css-tricks.com/building-resizeable-components-relative-css-units/](https://css-tricks.com/building-resizeable-components-relative-css-units/) +- https://css-tricks.com/the-lengths-of-css/ +- https://css-tricks.com/building-resizeable-components-relative-css-units/ ## CSS Media Queries -- [https://css-tricks.com/css-media-queries/](https://css-tricks.com/css-media-queries/) -- [https://css-tricks.com/logic-in-media-queries/](https://css-tricks.com/logic-in-media-queries/) +- https://css-tricks.com/css-media-queries/ +- https://css-tricks.com/logic-in-media-queries/ ## Responsive Drills -[https://gitlab.com/mountblue/js/responsive-layout-drill](https://gitlab.com/mountblue/js/responsive-layout-drill) +https://gitlab.com/mountblue/js/responsive-layout-drill Create a Codepen collection with solutions and submit the collection URL ## Project - EasyBank Landing Page -Link to project: [https://gitlab.com/mountblue/js/easybank-landing-page](https://gitlab.com/mountblue/js/easybank-landing-page) +Link to project: https://gitlab.com/mountblue/js/easybank-landing-page - Fork the repository - Clone it in your local machine @@ -32,4 +32,4 @@ Link to project: [https://gitlab.com/mountblue/js/easybank-landing-page](https:/ You can use `ngrok` or `localtunnel` -Video - [https://www.youtube.com/watch?v=DCxt9SAnkyc](https://www.youtube.com/watch?v=DCxt9SAnkyc) +Video - https://www.youtube.com/watch?v=DCxt9SAnkyc diff --git a/6. html-css/html-css.md b/6. html-css/html-css.md index 6038b7f..e538ccb 100644 --- a/6. html-css/html-css.md +++ b/6. html-css/html-css.md @@ -2,7 +2,7 @@ ## 1. Basics -Start with [Learn to Code HTML and CSS by Shay Howe](https://learn.shayhowe.com/) +Start with Learn to Code HTML and CSS by Shay Howe In particular read the following sections and complete the exercises. @@ -20,88 +20,88 @@ Advanced HTML & CSS * Lesson 4: Responsive Web Design Resources for Web Development for any Topic: -[Mozilla Web Docs](https://developer.mozilla.org/en-US/) +[Mozilla Web Docs] CSS Reference: -[A Visual Reference to CSS](https://cssreference.io/) +[A Visual Reference to CSS] ### Optional Resources Do any 1, Refer others -[https://www.udacity.com/course/intro-to-html-and-css--ud001](https://www.udacity.com/course/intro-to-html-and-css--ud001) +https://www.udacity.com/course/intro-to-html-and-css--ud001 -[https://dash.generalassemb.ly/](https://dash.generalassemb.ly/) +https://dash.generalassemb.ly/ -[https://learn.shayhowe.com/](https://learn.shayhowe.com/) +https://learn.shayhowe.com/ -[https://marksheet.io/](https://marksheet.io/) +https://marksheet.io/ -[https://www.internetingishard.com/html-and-css/](https://www.internetingishard.com/html-and-css/) +https://www.internetingishard.com/html-and-css/ ## 2. CSS Selectors -[https://www.educative.io/edpresso/what-are-css-selectors](https://www.educative.io/edpresso/what-are-css-selectors) +https://www.educative.io/edpresso/what-are-css-selectors -[https://css-tricks.com/how-css-selectors-work/](https://css-tricks.com/how-css-selectors-work/) +https://css-tricks.com/how-css-selectors-work/ ## 3. Box Model -[https://css-tricks.com/the-css-box-model/](https://css-tricks.com/the-css-box-model/) +https://css-tricks.com/the-css-box-model/ ## 4. Flexbox Resources: -- [CSS Flex Video](https://www.youtube.com/watch?v=JJSoEo8JSnc) -- [https://css-tricks.com/snippets/css/a-guide-to-flexbox/](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) +- CSS Flex Video +- https://css-tricks.com/snippets/css/a-guide-to-flexbox/ Play the games to practice: -- [https://flexboxfroggy.com/](https://flexboxfroggy.com/) -- [http://www.flexboxdefense.com/](http://www.flexboxdefense.com/) +- https://flexboxfroggy.com/ +- http://www.flexboxdefense.com/ ## 5. Grid Resources: -- [CSS Grid Video](https://www.youtube.com/watch?v=jV8B24rSN5o) +- CSS Grid Video Play the game to practice: -- [CSS Grid Garden - Game](https://cssgridgarden.com/) +- CSS Grid Garden - Game ## 6. CSS Units -- [https://css-tricks.com/the-lengths-of-css/](https://css-tricks.com/the-lengths-of-css/) -- [https://css-tricks.com/building-resizeable-components-relative-css-units/](https://css-tricks.com/building-resizeable-components-relative-css-units/) +- https://css-tricks.com/the-lengths-of-css/ +- https://css-tricks.com/building-resizeable-components-relative-css-units/ ## 7. CSS Specificity ## 8. Layout Drills -[https://gitlab.com/mountblue/js/css-layout-drills](https://gitlab.com/mountblue/js/css-layout-drills) +https://gitlab.com/mountblue/js/css-layout-drills -Create a [codepen](https://codepen.io/) collection with solutions for all problems and submit the Codepen collection URL +Create a codepen collection with solutions for all problems and submit the Codepen collection URL NOTE: Each problem can have multiple solutions. Also, ignore the `div` numbers, they have been used for illustrations only. ## 9. CSS Media Queries -- [https://css-tricks.com/css-media-queries/](https://css-tricks.com/css-media-queries/) -- [https://css-tricks.com/logic-in-media-queries/](https://css-tricks.com/logic-in-media-queries/) +- https://css-tricks.com/css-media-queries/ +- https://css-tricks.com/logic-in-media-queries/ ## 10. Responsive Drills -[https://gitlab.com/mountblue/js/responsive-layout-drill](https://gitlab.com/mountblue/js/responsive-layout-drill) +https://gitlab.com/mountblue/js/responsive-layout-drill Create a Codepen collection with solutions and submit the collection URL ## 11. Code Walkthrough of an Entire Project -[https://www.youtube.com/watch?v=Wm6CUkswsNw](https://www.youtube.com/watch?v=Wm6CUkswsNw) +https://www.youtube.com/watch?v=Wm6CUkswsNw ## 12. Project I: Green Tree Initiative -* Project Adobe XD wireframes - [Wireframes](https://xd.adobe.com/spec/a75faa97-2d9f-401c-6140-8fac4a6601aa-d16e/grid/) -* Project assets - [Assets](https://drive.google.com/drive/folders/1raP7YpOF4knQnX7UWOYJYoTU4KSGJAyy?usp=share_link) +* Project Adobe XD wireframes - Wireframes +* Project assets - Assets Build the two pages - home page and donation page. diff --git a/7. javascript-dom/1. dom.md b/7. javascript-dom/1. dom.md index bb20153..6665340 100644 --- a/7. javascript-dom/1. dom.md +++ b/7. javascript-dom/1. dom.md @@ -73,7 +73,7 @@ This object has properties and functions that we use to access our HTML elements Just like *getElementsByTagName*, we get back a special kind of array called an HTMLCollection. - Read more about [HTMLCollection](https://developer.mozilla.org/en-US/docs/Web/API/HTMLCollection) + Read more about HTMLCollection - **querySelector** @@ -110,15 +110,15 @@ It returns **all the elements** that matches the CSS selector passed to the func It’s almost identical to an HTMLCollection except it can include special kinds of nodes. - Read more about [NodeList](https://developer.mozilla.org/en-US/docs/Web/API/NodeList) + Read more about NodeList -[Difference b/w NodeList & HTMLCollection](https://dev.to/jharteaga/difference-between-htmlcollection-and-nodelist-25bp) +Difference b/w NodeList & HTMLCollection #### Crash Course Check out the below playlist. -[https://www.youtube.com/watch?list=PLillGF-RfqbYE6Ik_EuXA2iZFcE082B3s&v=0ik6X4DJKCc](https://www.youtube.com/watch?list=PLillGF-RfqbYE6Ik_EuXA2iZFcE082B3s&v=0ik6X4DJKCc) +https://www.youtube.com/watch?list=PLillGF-RfqbYE6Ik_EuXA2iZFcE082B3s&v=0ik6X4DJKCc ## 2. DOM Manipulation @@ -257,7 +257,7 @@ An attribute either modifies the default functionality of an element type or pro - type - value -Read more about [Attributes](https://www.tutorialrepublic.com/html-tutorial/html-attributes.php#:~:text=Attributes%20define%20additional%20characteristics%20or,be%20enclosed%20in%20quotation%20marks.) +Read more about Attributes #### getAttribute @@ -481,7 +481,7 @@ foundDiv.nextElementSibling //
Here is the second div!
You may come across other methods for finding things in the DOM, we have shown you the most common ones, but as you learn more you may come across something called a ***text node*** -More about [Text Node](https://stackoverflow.com/questions/17195868/what-is-a-text-node-its-uses-document-createtextnode) +More about Text Node ### Nodes VS Elements - With some of these finder methods, you will see that you don’t always get back an HTML element, you sometimes get back what is called a text node @@ -489,9 +489,9 @@ More about [Text Node](https://stackoverflow.com/questions/17195868/what-is-a-te - With most of the common traversal methods, you will not need to worry about text nodes - You will be using other methods less frequently, but know that they exist if you need to see elements near/above/below the element you find. -Know more about [NodeTypes](https://developer.mozilla.org/en-US/docs/Web/API/Node/nodeType) +Know more about NodeTypes -Video - [https://www.youtube.com/watch?v=mPd2aJXCZ2g](https://www.youtube.com/watch?v=mPd2aJXCZ2g) +Video - https://www.youtube.com/watch?v=mPd2aJXCZ2g ## 3. Javascript Events @@ -509,7 +509,7 @@ We can use JavaScript to execute code when these kinds of “events” happen. We write code that listens for events - and react accordingly! -This is commonly called [Event Driven Programming](https://www.valentinog.com/blog/event/) +This is commonly called Event Driven Programming #### How do we do it??? We have three options: @@ -582,7 +582,7 @@ h1.addEventListener("click", function(event){ - target - what element is the target of the event - pageX / pageY - where on the page did this event occur? - key - what key was pressed that triggered this event? -- [preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) - a function used to prevent the default behavior of the event. +- preventDefault() - a function used to prevent the default behavior of the event. - This is **very useful** for stopping form submissions from refreshing the page which is their default behavior ```html @@ -765,7 +765,7 @@ When an event happens on an element, it first runs the handlers on it, then on i This is called **bubbling**. -Read more on [Event Bubbling and Capturing](https://medium.com/@vsvaibhav2016/event-bubbling-and-event-capturing-in-javascript-6ff38bec30e) +Read more on Event Bubbling and Capturing ### Removing Event Listeners Sometimes after you add an event listener, you will want to remove it. @@ -855,23 +855,23 @@ ul.addEventListener("click", function(event) { ```
-Read more about [Data attributes](https://css-tricks.com/a-complete-guide-to-data-attributes/) +Read more about Data attributes ## 4. Web Storage APIs The **Web Storage API** provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies. -Video - [https://www.youtube.com/watch?v=MOd5cTJ6kaA](https://www.youtube.com/watch?v=MOd5cTJ6kaA) +Video - https://www.youtube.com/watch?v=MOd5cTJ6kaA ### Introduction -- [https://flaviocopes.com/web-platform/](https://flaviocopes.com/web-platform/) +- https://flaviocopes.com/web-platform/ ### Web storage -- [https://flaviocopes.com/web-storage-api/](https://flaviocopes.com/web-storage-api/) -- [https://javascript.info/data-storage](https://javascript.info/data-storage) +- https://flaviocopes.com/web-storage-api/ +- https://javascript.info/data-storage ### Cookies vs localStorage vs sessionStorage -- [https://www.youtube.com/watch?v=AwicscsvGLg](https://www.youtube.com/watch?v=AwicscsvGLg) +- https://www.youtube.com/watch?v=AwicscsvGLg ## 5. Important Concepts to Understand - Why using alert and prompt is bad practice -- Difference in Node and Elements in HTML - [https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object](https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object) -- Event lifecycle in JS DOM (Bubbling and Capture) - [https://medium.com/prod-io/javascript-understanding-dom-event-life-cycle-49e1cf62b2ea](https://medium.com/prod-io/javascript-understanding-dom-event-life-cycle-49e1cf62b2ea) +- Difference in Node and Elements in HTML - https://stackoverflow.com/questions/9979172/difference-between-node-object-and-element-object +- Event lifecycle in JS DOM (Bubbling and Capture) - https://medium.com/prod-io/javascript-understanding-dom-event-life-cycle-49e1cf62b2ea diff --git a/7. javascript-dom/2. browser.md b/7. javascript-dom/2. browser.md index 214ff06..018c05b 100644 --- a/7. javascript-dom/2. browser.md +++ b/7. javascript-dom/2. browser.md @@ -5,20 +5,20 @@ How Browser Rendering Works Text: -[https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/](https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/) +https://blog.logrocket.com/how-browser-rendering-works-behind-the-scenes-6782b0e8fb10/ Video: -[https://www.youtube.com/watch?v=0IsQqJ7pwhw](https://www.youtube.com/watch?v=0IsQqJ7pwhw) +https://www.youtube.com/watch?v=0IsQqJ7pwhw ## Developer Tools Google Chrome Developer Tools Crash Course -[https://www.youtube.com/watch?v=x4q86IjJFag](https://www.youtube.com/watch?v=x4q86IjJFag) +https://www.youtube.com/watch?v=x4q86IjJFag ### Debugging Tips -- [The 16 JavaScript debugging tips you probably didn’t know](https://raygun.com/learn/javascript-debugging-tips) -- Debugging in the browser - [https://javascript.info/debugging-chrome](https://javascript.info/debugging-chrome) +- The 16 JavaScript debugging tips you probably didn’t know +- Debugging in the browser - https://javascript.info/debugging-chrome - Understand Client Side VS Server Side Rendering diff --git a/7. javascript-dom/3. negative-testing.md b/7. javascript-dom/3. negative-testing.md index e7d236f..f594dd2 100644 --- a/7. javascript-dom/3. negative-testing.md +++ b/7. javascript-dom/3. negative-testing.md @@ -1,3 +1,3 @@ # Negative Testing Web Apps -Negative Testing - [https://web.archive.org/web/20210305071223/https://crossbrowsertesting.com/blog/manual-testing/negative-testing/](https://web.archive.org/web/20210305071223/https://crossbrowsertesting.com/blog/manual-testing/negative-testing/) +Negative Testing - https://web.archive.org/web/20210305071223/https://crossbrowsertesting.com/blog/manual-testing/negative-testing/ diff --git a/7. javascript-dom/4. client-server-architecture.md b/7. javascript-dom/4. client-server-architecture.md index 51db804..8931d4b 100644 --- a/7. javascript-dom/4. client-server-architecture.md +++ b/7. javascript-dom/4. client-server-architecture.md @@ -1,11 +1,11 @@ # Client Server Architecture Articles -- [https://www.pagecloud.com/blog/website-terminology](https://www.pagecloud.com/blog/website-terminology) -- [https://engineering.videoblocks.com/web-architecture-101-a3224e126947](https://engineering.videoblocks.com/web-architecture-101-a3224e126947) +- https://www.pagecloud.com/blog/website-terminology +- https://engineering.videoblocks.com/web-architecture-101-a3224e126947 -Check the Slides on Slideshare for Client Server Architecture [https://www.slideshare.net/secret/wYOQgHZBO0B1qm](https://www.slideshare.net/secret/wYOQgHZBO0B1qm) +Check the Slides on Slideshare for Client Server Architecture https://www.slideshare.net/secret/wYOQgHZBO0B1qm Watch the video below for the recorded session. (55 minutes 59 seconds) -[https://www.youtube.com/watch?v=h_7XxdbnkAg](https://www.youtube.com/watch?v=h_7XxdbnkAg) +https://www.youtube.com/watch?v=h_7XxdbnkAg diff --git a/8. react/react.md b/8. react/react.md index 6a8008b..c364168 100644 --- a/8. react/react.md +++ b/8. react/react.md @@ -3,40 +3,37 @@ ## Prerequisites - JS Library vs Framework -- Client side frameworks - [https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks) -- Webpack - [https://ui.dev/webpack/](https://ui.dev/webpack/) -- Polyfills - [https://ui.dev/compiling-polyfills/](https://ui.dev/compiling-polyfills/) -- Babel - [https://babeljs.io/repl](https://babeljs.io/repl) +- Client side frameworks - https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks +- Webpack - https://ui.dev/webpack/ +- Polyfills - https://ui.dev/compiling-polyfills/ +- Babel - https://babeljs.io/repl ### Babel & Webpack with React Go through the following articles for a good understanding of the topic. You do not need to implement anything. -- [JavaScript Transpilers: What They Are & Why We Need Them](https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them) -- [Using Vite to create a new React app](https://flaviocopes.com/vite-react-app/) -- [React Developer Tools - ](https://react.dev/learn/react-developer-tools) +- JavaScript Transpilers: What They Are & Why We Need Them +- Using Vite to create a new React app +- React Developer Tools ## ReactJS ### 1. React Crash course -- [Programming with Mosh](https://youtu.be/SqcY0GlETPk?si=PZzD9Mo7SKKEU6OB) - This is a simple introduction to React -- [Traversy Media](https://youtu.be/LDB4uaJ87e0?si=aDVqcrFVw0tzrUuZ) - This includes introduction and more stuff like routing etc. +- Programming with Mosh - This is a simple introduction to React +- Traversy Media - This includes introduction and more stuff like routing etc. ### 2. React Mini Projects (Build any two) -- [Video with 25 projects](https://youtu.be/5ZdHfJVAY-s?si=DgQvMSzLXYTGhrgq) -- [React Official tutorial](https://react.dev/learn/tutorial-tic-tac-toe) +- Video with 25 projects +- React Official tutorial ### 4. Read the following sections from official docs and practice the challenges at the end of each sub-section -- [Describing the UI - ](https://react.dev/learn/describing-the-ui) -- [Adding Interactivity](https://react.dev/learn/adding-interactivity) -- Also go through this [The Interactive Guide to Rendering in React - ](https://ui.dev/why-react-renders) - > This is a good reference for all the react hooks - [Codevolution playlist](https://www.youtube.com/playlist?list=PLC3y8-rFHvwisvxhZ135pogtX7_Oe3Q3A) +- Describing the UI +- Adding Interactivity +- Also go through this The Interactive Guide to Rendering in React + > This is a good reference for all the react hooks - Codevolution playlist ### 5. REST Countries project @@ -51,10 +48,8 @@ Points to focus on when building this project ### 6. Read the following sections from official docs and practice the challenges at the end of each sub-section -- [Managing State - ](https://react.dev/learn/managing-state) -- [Escape Hatches - ](https://react.dev/learn/escape-hatches) +- Managing State +- Escape Hatches ### 7. Trello project diff --git a/9. redux/redux.md b/9. redux/redux.md index 8f64df3..6a1e240 100644 --- a/9. redux/redux.md +++ b/9. redux/redux.md @@ -2,8 +2,8 @@ ## Introduction to Redux -[https://www.youtube.com/watch?v=poQXNp9ItL4](https://www.youtube.com/watch?v=poQXNp9ItL4) +https://www.youtube.com/watch?v=poQXNp9ItL4 ## React-Redux Library -[React-Redux Guide](https://www.valentinog.com/blog/redux/) +React-Redux Guide