├── .github ├── FUNDING.yml └── workflows │ └── markdownlint.yml ├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── README.md └── docs ├── javascript-notes.md └── web-notes.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: freeCodeCamp 4 | patreon: freecodecamp 5 | custom: https://www.freecodecamp.org/donate 6 | -------------------------------------------------------------------------------- /.github/workflows/markdownlint.yml: -------------------------------------------------------------------------------- 1 | name: Markdown Lint 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | paths: 8 | - '**.md' 9 | pull_request: 10 | branches: 11 | - main 12 | paths: 13 | - '**.md' 14 | 15 | jobs: 16 | lint: 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: markdownlint-cli 20 | uses: nosborn/github-action-markdown-cli@v3.0.1 21 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS generated files # 2 | .DS_Store 3 | .DS_Store? 4 | ehthumbs.db 5 | Icon? 6 | Thumbs.db 7 | 8 | # VS Code # 9 | .vscode/* 10 | !.vscode/settings.json 11 | !.vscode/tasks.json 12 | !.vscode/launch.json 13 | !.vscode/extensions.json 14 | !.vscode/*.code-snippets 15 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | We as members, contributors, and leaders pledge to make participation in our 6 | community a harassment-free experience for everyone, regardless of age, body 7 | size, visible or invisible disability, ethnicity, sex characteristics, gender 8 | identity and expression, level of experience, education, socio-economic status, 9 | nationality, personal appearance, race, religion, or sexual identity 10 | and orientation. 11 | 12 | We pledge to act and interact in ways that contribute to an open, welcoming, 13 | diverse, inclusive, and healthy community. 14 | 15 | ## Our Standards 16 | 17 | Examples of behavior that contributes to a positive environment for our 18 | community include: 19 | 20 | * Demonstrating empathy and kindness toward other people 21 | * Being respectful of differing opinions, viewpoints, and experiences 22 | * Giving and gracefully accepting constructive feedback 23 | * Accepting responsibility and apologizing to those affected by our mistakes, 24 | and learning from the experience 25 | * Focusing on what is best not just for us as individuals, but for the 26 | overall community 27 | 28 | Examples of unacceptable behavior include: 29 | 30 | * The use of sexualized language or imagery, and sexual attention or 31 | advances of any kind 32 | * Trolling, insulting or derogatory comments, and personal or political attacks 33 | * Public or private harassment 34 | * Publishing others' private information, such as a physical or email 35 | address, without their explicit permission 36 | * Other conduct which could reasonably be considered inappropriate in a 37 | professional setting 38 | 39 | ## Enforcement Responsibilities 40 | 41 | Community leaders are responsible for clarifying and enforcing our standards of 42 | acceptable behavior and will take appropriate and fair corrective action in 43 | response to any behavior that they deem inappropriate, threatening, offensive, 44 | or harmful. 45 | 46 | Community leaders have the right and responsibility to remove, edit, or reject 47 | comments, commits, code, wiki edits, issues, and other contributions that are 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation 49 | decisions when appropriate. 50 | 51 | ## Scope 52 | 53 | This Code of Conduct applies within all community spaces, and also applies when 54 | an individual is officially representing the community in public spaces. 55 | Examples of representing our community include using an official e-mail address, 56 | posting via an official social media account, or acting as an appointed 57 | representative at an online or offline event. 58 | 59 | ## Enforcement 60 | 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 62 | reported to the community leaders responsible for enforcement at 63 | nikkehtine@int.pl. 64 | All complaints will be reviewed and investigated promptly and fairly. 65 | 66 | All community leaders are obligated to respect the privacy and security of the 67 | reporter of any incident. 68 | 69 | ## Enforcement Guidelines 70 | 71 | Community leaders will follow these Community Impact Guidelines in determining 72 | the consequences for any action they deem in violation of this Code of Conduct: 73 | 74 | ### 1. Correction 75 | 76 | **Community Impact**: Use of inappropriate language or other behavior deemed 77 | unprofessional or unwelcome in the community. 78 | 79 | **Consequence**: A private, written warning from community leaders, providing 80 | clarity around the nature of the violation and an explanation of why the 81 | behavior was inappropriate. A public apology may be requested. 82 | 83 | ### 2. Warning 84 | 85 | **Community Impact**: A violation through a single incident or series 86 | of actions. 87 | 88 | **Consequence**: A warning with consequences for continued behavior. No 89 | interaction with the people involved, including unsolicited interaction with 90 | those enforcing the Code of Conduct, for a specified period of time. This 91 | includes avoiding interactions in community spaces as well as external channels 92 | like social media. Violating these terms may lead to a temporary or 93 | permanent ban. 94 | 95 | ### 3. Temporary Ban 96 | 97 | **Community Impact**: A serious violation of community standards, including 98 | sustained inappropriate behavior. 99 | 100 | **Consequence**: A temporary ban from any sort of interaction or public 101 | communication with the community for a specified period of time. No public or 102 | private interaction with the people involved, including unsolicited interaction 103 | with those enforcing the Code of Conduct, is allowed during this period. 104 | Violating these terms may lead to a permanent ban. 105 | 106 | ### 4. Permanent Ban 107 | 108 | **Community Impact**: Demonstrating a pattern of violation of community 109 | standards, including sustained inappropriate behavior, harassment of an 110 | individual, or aggression toward or disparagement of classes of individuals. 111 | 112 | **Consequence**: A permanent ban from any sort of public interaction within 113 | the community. 114 | 115 | ## Attribution 116 | 117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], 118 | version 2.0, available at 119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html. 120 | 121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct 122 | enforcement ladder](https://github.com/mozilla/diversity). 123 | 124 | [homepage]: https://www.contributor-covenant.org 125 | 126 | For answers to common questions about this code of conduct, see the FAQ at 127 | https://www.contributor-covenant.org/faq. Translations are available at 128 | https://www.contributor-covenant.org/translations. 129 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | Here are a few ways you can contribute to this project: 4 | 5 | ## Merge requests 6 | 7 | You are more than welcome to contribute to our notes page. Fork the project, commit your changes, and then send a pull request. 8 | 9 | There are a few guidelines to be followed: 10 | 11 | * English language only (preferably American English for consistency) 12 | * Notes should be written in Markdown and follow the Markdown language specification 13 | * Try to follow the current structure of the documents as much as possible, for maximum clarity and readability 14 | * Order of content should follow the order of lessons on the freeCodeCamp courses (and the livestreams) as closely as possible 15 | * No content outside of the course's progress, such as: 16 | * current freeCodeCamp course content that we haven't yet reached on the livestreams 17 | * content from freeCodeCamp courses other than the one you are contributing notes to (such as the *Front End Development Libraries Certification*, or JavaScript bootcamp content being added to WebDev bootcamp notes) 18 | * content from resources outside of freeCodeCamp or the current bootcamp's livestreams (including StackOverflow or MDN) 19 | * Content mentioned on livestreams that doesn't appear in the freeCodeCamp courses (or hasn't appeared *yet*) is allowed 20 | * No spam or advertising and no content that might be considered harmful 21 | * No misleading content, even as a joke 22 | * Repository managers reserve a right to edit any pull requests to conform them to the contributing guidelines and document structure 23 | 24 | ## Donations 25 | 26 | We are thankful to the [Class Central](https://www.classcentral.com/) and [freeCodeCamp](https://www.freecodecamp.org/) communities for organizing these courses without any profit incentive and letting all of us take part and learn for free. Therefore, this project will not ask for any financial support. 27 | 28 | Consider donating to freeCodeCamp instead. freeCodeCamp provides quality tutorials and courses for free. By supporting them, you're supporting not only a group of volunteers that dedicate their time to share their expertise without a price tag attached, but also a large and diverse community of learners (and, by extension, us). 29 | 30 | * [freeCodeCamp website](https://www.freecodecamp.org/donate) 31 | * [GitHub Sponsors](https://github.com/sponsors/freeCodeCamp) 32 | * [Patreon](https://www.patreon.com/freecodecamp) 33 | 34 | ## Spread the word 35 | 36 | Sharing is caring. Share this resource with fellow learners, as well as friends, family, other people who want to learn WebDev or JavaScript, complete strangers, or your grandma's dog. We all profit from Class Central and freeCodeCamp becoming more popular. 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Class Central 2022 WebDev & JS Bootcamp Notes 2 | 3 | ## Disclaimer 4 | 5 | **This is a community effort and we are not affiliated with Class Central, freeCodeCamp, nor any of the personnel involved with making of the 2022 bootcamp.** 6 | 7 | Therefore they are not liable for anything that happens neither in this repository nor group, and any issues that arise in this repository or group should be resolved privately or within this repository/group. 8 | 9 | ## Check out the notes 10 | 11 | [JavaScript 2022 Bootcamp](docs/javascript-notes.md#freecodecamp-javascript-course-notes) 12 | 13 | [Web Development 2022 Bootcamp](docs/web-notes.md#freecodecamp-web-development-bootcamp-course-notes) 14 | 15 | ## Help wanted! 16 | 17 | We currently don't have a document for the *Responsive Web Design Certification*. We would appreciate it if you could make one and add notes from your course so far. Make sure to name it `webdev-notes.md` and put it into the `docs` folder. Also follow our [contributing guidelines](CONTRIBUTING.md). 18 | 19 | ## Important links 20 | 21 | * [Code of Conduct](CODE_OF_CONDUCT.md) | [Contributing](CONTRIBUTING.md) 22 | * [Official Cohorts Discord](https://discord.gg/Fg9NfUpA) 23 | * [freeCodeCamp](https://www.freecodecamp.org/) 24 | * [WebDev course](https://www.freecodecamp.org/learn/responsive-web-design/) 25 | * [JavaScript course](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) 26 | * [Class Central](https://www.classcentral.com/) 27 | * [WebDev Bootcamp page](https://www.classcentral.com/cohorts/webdev-bootcamp-spring-2022) 28 | * [JavaScript Bootcamp page](https://www.classcentral.com/cohort/js-bootcamp-spring-2022) 29 | * [Class Central YouTube channel](https://www.youtube.com/c/ClassCentral/featured) 30 | * [WebDev Bootcamp Playlist](https://www.youtube.com/playlist?list=PLU3RKvMpgrSEswU7f9pg6EYaO1s944CDI) 31 | * [JavaScript Bootcamp Playlist](https://www.youtube.com/playlist?list=PLU3RKvMpgrSEswU7f9pg6EYaO1s944CDI) 32 | * Twitter 33 | * [freeCodeCamp](https://twitter.com/freeCodeCamp) 34 | * [Class Central](https://twitter.com/classcentral) 35 | * [Jessica Rose (WebDev teacher)](https://twitter.com/jesslynnrose) 36 | * [Ramón Huidobro (JavaScript teacher)](https://twitter.com/hola_soy_milk) 37 | -------------------------------------------------------------------------------- /docs/javascript-notes.md: -------------------------------------------------------------------------------- 1 | # freeCodeCamp JavaScript Course Notes 2 | 3 | ## **Read me first** 4 | 5 | [JavaScript course on freeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) | [JavaScript Bootcamp playlist](https://www.youtube.com/playlist?list=PLU3RKvMpgrSEswU7f9pg6EYaO1s944CDI) | [JavaScript on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript) 6 | 7 | While it is not strictly necessary, it is a good practice to type the semicolon `;` at the end of each line. 8 | 9 | ## Comments 10 | 11 | [Comments on MDN](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics#comments) 12 | 13 | ```js 14 | // This is a single-line comment 15 | 16 | let variableName; // This is also a single-line comment, next to some code 17 | 18 | /* And this is a multi-line comment. 19 | let variableName 20 | See? You can even comment out code 21 | so that it doesn't execute! */ 22 | ``` 23 | 24 | ## Variables, Constants 25 | 26 | [Variables on MDN](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Variables#content) 27 | 28 | - `var` - **variable**; you can declare (create) it multiple times 29 | - `let` - **variable**; you can declare it only once, but you can change its value later 30 | - `const` - **constant**; you can declare it only once, its value will not change 31 | 32 | It is recommended to use `let` for variables, since you won't be able to accidentally declare it multiple times. 33 | 34 | ```js 35 | let myVariable; // Declare a variable 36 | // Use what's called a "camelCase" to name your variables 37 | myVariable = "Hello World"; // Assign a value to a variable 38 | myVariable = 12; // You can assign numbers without quotation marks 39 | let decimalValue = 3.59; // You can assign a decimal value to your variable as well 40 | ``` 41 | 42 | ```js 43 | var myName = "Andrew"; // Declare a variable 44 | var myName = "Barbara"; // You can declare a "var" multiple times 45 | // Note that you can't do the same with a "let" 46 | ``` 47 | 48 | ```js 49 | const MY_CONSTANT; 50 | /* It is a good practice to name constants using 51 | what is called a "SCREAMING_SNAKE_CASE", so that 52 | you can easily tell them apart from variables */ 53 | ``` 54 | 55 | ```js 56 | myName = myVariable; // You can assign the value of one variable to another 57 | ``` 58 | 59 | ## Console Logging 60 | 61 | [console.log on MDN](https://developer.mozilla.org/en-US/docs/Web/API/console/log#content) 62 | 63 | You can print out anything you want to the JavaScript console - a string, a number, a variable, a constant, a mathematical equation, etc. 64 | 65 | Very useful for checking the value of a variable 66 | 67 | ```js 68 | console.log("Hello World"); // Prints "Hello World" to the console 69 | console.log(myVariable); // Prints the (declared above) number 12 to the console 70 | console.log(5 + 6); // Prints the number 11 71 | ``` 72 | 73 | ## Mathematical Operations 74 | 75 | [Arithmetic operators on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#arithmetic_operators) 76 | 77 | ```js 78 | let addVar = 5 + 10; // Value is 15 79 | let subVar = 16 - 9; // Value is 7 80 | let mulVar = 2 * 12; // Value is 24 81 | let divVar = 21 / 7; // Value is 3 82 | 83 | addVar++; // Increment the "addVar" variable - same as adding 1 to it 84 | subVar--; // Same as above, but we are decrementing - subtracting 1 85 | 86 | let myVar = subVar * 5; // Multiply the value of subVar by 5 - we get 35 87 | 88 | let remainder = 11 % 3; // Gives the remainder of the division of two numbers 89 | // Value is 2 (3 * 3 = 9; 11 - 9 = 2) 90 | ``` 91 | 92 | ### Prefix and Postfix (increment/decrement) 93 | 94 | [Increment and decrement on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#increment_and_decrement) 95 | 96 | ```js 97 | let a = 1; 98 | 99 | // Postfix 100 | console.log(a++); // First, 'a' is used to print to console, and THEN incremented 101 | // Above statement prints 1 102 | 103 | console.log(a); // This statement prints 2 (because we incremented it above) 104 | 105 | // Prefix 106 | console.log(++a); // 'a' is incremented first, then the new value of 'a' is printed 107 | // Above statement prints 3 108 | ``` 109 | 110 | ### Compound Assignment 111 | 112 | [Assignment operators on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators#assignment_operators) 113 | 114 | ```js 115 | let myVar = 1; 116 | 117 | myVar += 5; /* Value is 6 118 | This is the same as: 119 | myVar = myVar + 5 120 | */ 121 | 122 | myVar -= 2; // Value is 4 123 | // myVar = myVar - 2 124 | 125 | myVar *= 2; // Value is 8 126 | // myVar = myVar * 2 127 | 128 | myVar /= 4; // Value is 2 129 | // myVar = myVar / 2 130 | ``` 131 | 132 | ## Strings 133 | 134 | [Strings on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#contents) 135 | 136 | ### Quotation Marks 137 | 138 | [Text formatting on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Text_formatting#content) 139 | 140 | ```js 141 | // You can escape literal quotes inside your string using a backslash 142 | let myVar = "This is a \"JavaScript\" course."; 143 | console.log(myVar); // This is a "JavaScript" course. 144 | 145 | // You can also use single quotes 146 | let doubleQuoteStr = "This is a string"; 147 | let singleQuoteStr = 'This is also a string'; 148 | 149 | myVar = 'Adam said, "Hi, Barbara!"'; 150 | console.log(myVar); // Adam said, "Hi, Barbara!" 151 | ``` 152 | 153 | ### Escape Sequences 154 | 155 | [Escape sequences on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String#escape_sequences) 156 | 157 | | Code | Output | 158 | | ---- | --------------- | 159 | | `\'` | single quote | 160 | | `\"` | double quote | 161 | | `\\` | backslash | 162 | | `\n` | new line | 163 | | `\r` | carriage return | 164 | | `\t` | tab | 165 | | `\b` | word boundary | 166 | | `\f` | form feed | 167 | 168 | ```js 169 | let myStr = "FirstLine\n\t\\SecondLine\nThirdLine"; 170 | 171 | console.log(myStr); 172 | 173 | /* Output: 174 | FirstLine 175 | \SecondLine 176 | ThirdLine 177 | */ 178 | ``` 179 | 180 | ### Concatenation 181 | 182 | [Addition on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Addition#content) 183 | 184 | ```js 185 | let myStr = "I come first. " + "I come second."; 186 | // Notice the space at the end of the first string 187 | 188 | console.log(myStr); // I come first. I come second. 189 | ``` 190 | 191 | ```js 192 | let myStr = "I come first. "; 193 | myStr += "I come second."; 194 | 195 | console.log(myStr); // I come first. I come second. 196 | ``` 197 | 198 | ### Constructing Strings with Variables 199 | 200 | ```js 201 | const ourName = "freeCodeCamp"; 202 | const ourStr = "Hello, our name is " + ourName + ", how are you?"; 203 | 204 | console.log(ourStr); // Hello, our name is freeCodeCamp, how are you? 205 | ``` 206 | 207 | ```js 208 | const anAdjective = "awesome!"; 209 | let ourStr = "freeCodeCamp is "; 210 | ourStr += anAdjective; 211 | 212 | console.log(ourStr); // freeCodeCamp is awesome! 213 | ``` 214 | 215 | ### Operations on Strings 216 | 217 | [String objects on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Text_formatting#string_objects) 218 | 219 | ```js 220 | const lastName = "Lovelace"; 221 | 222 | // Find the length of a string 223 | let lastNameLength = lastName.length; 224 | console.log(lastNameLength); // Value is 8 - word "Lovelace" is 8 characters long 225 | 226 | // Use bracket notation to find the first character in a string 227 | let firstLetterOfLastName = lastName[0]; // Index 0 is our first letter 228 | console.log(firstLetterOfLastName); // Value is "L" 229 | ``` 230 | 231 | **_IMPORTANT!_** In bracket notation we start counting from zero (_Zero-based indexing_; this is common for most modern programming languages). That means, for example: 232 | 233 | - 1st character is at `[0]` 234 | - 2nd character is at `[1]` 235 | - 3rd character is at `[2]` 236 | - 7th character is at `[6]` 237 | - 30th character is at `[29]` 238 | 239 | ```js 240 | // Use bracket notation to find the Nth character in a string 241 | let thirdLetterOfLastName = lastName[2]; // Index 2 is our third letter 242 | console.log(thirdLetterOfLastName); // Value is "v" 243 | 244 | // Use bracket notation to find the last character in a string 245 | let lastLetterOfLastName = lastName[lastName.length - 1]; 246 | // Remember to subtract 1 since we are counting from 0! 247 | console.log(lastLetterOfLastName); // Value is "e" 248 | ``` 249 | 250 | #### String Mutability 251 | 252 | In JavaScript, `String` values are immutable, which means that they cannot be altered once created. 253 | 254 | ```js 255 | // This code will throw an error 256 | let myStr = "Bob"; 257 | myStr[0] = "J"; 258 | // TypeError: 0 is read-only 259 | ``` 260 | 261 | This does _not_ mean that `myStr` cannot be changed, just that the individual characters of a _string literal_ cannot be changed. The only way to change `myStr` would be to assign it with a new string. 262 | 263 | ```js 264 | // This code is correct 265 | let myStr = "Bob"; 266 | myStr = "Job"; 267 | // Value is "Job" 268 | ``` 269 | 270 | ## Arrays 271 | 272 | [Arrays on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 273 | 274 | Arrays can be thought of as lists in JavaScript; an array can hold multiple values, even if they are not the same data type (string, integer, boolean, etc.) within that array. 275 | 276 | ```js 277 | const sandwich = ["peanut butter", "jelly", "bread", 2, false]; 278 | ``` 279 | 280 | ### Multi-dimensional Arrays 281 | 282 | ```js 283 | // Arrays can be nested within other arrays 284 | const teams = [ 285 | ["Bulls", 23], 286 | ["White Sox", 45], 287 | ]; 288 | ``` 289 | 290 | ### Access Array Data 291 | 292 | Much like getting the value of a single character in a string, accessing the full values within an array use square brackets and an index number 293 | 294 | ```js 295 | const months = ["January", "February", "March"]; 296 | console.log(months[0]); // Zero-indexing applies here as well. This will print "January" in the console. 297 | ``` 298 | 299 | We can access values in a multi-dimensional array as well: 300 | 301 | ```js 302 | const daysInMonth = [["January", 31], ["February", 28], ["March", 31]]; 303 | console.log(daysInMonth[2][0]); // This will print "March" in the console. 304 | console.log(daysInMonth[1][1]); // This will print 28 in the console. 305 | ``` 306 | 307 | ### Modify Array Data 308 | 309 | ```js 310 | let myArray = [2, 3, 4]; 311 | console.log(myArray); // Will print the array in console [ 2, 3, 4 ] 312 | 313 | // Add element to the end of the array 314 | myArray.push(5); 315 | console.log(myArray); // Will print the new array in console [ 2, 3, 4, 5 ] 316 | 317 | // Remove last element of the array 318 | myArray.pop(); 319 | console.log(myArray); // Will print the new array in console [ 2, 3, 4 ] 320 | 321 | // Remove element at the beginning of the array 322 | myArray.shift(); 323 | console.log(myArray); // Will print the new array in console [ 3, 4 ] 324 | 325 | // Add element at the beginning of the array 326 | myArray.unshift(2); 327 | console.log(myArray); // Will print the new array in console [ 2, 3, 4 ] 328 | ``` 329 | 330 | ## Data Types 331 | 332 | - `number` - represents both integers and decimals 333 | 334 | ```js 335 | let integer = 2; 336 | let decimal = 2.0; 337 | ``` 338 | 339 | - `string` - represents a sequence of characters enclosed in `""` or `''` 340 | 341 | ```js 342 | let name = "John Doe"; 343 | let country = 'United States'; 344 | ``` 345 | 346 | - `boolean` - represents only 2 values, `true` and `false`, which are not enclosed in quotes (`"true"` and `"false"` are strings) 347 | 348 | ```js 349 | const adult = true; 350 | ``` 351 | 352 | - `null` - represents nothing; normally used to specify explicitly that a variable currently doesn't have any value 353 | 354 | - `undefined` - is automatically assigned to a variable when it is declared but not assigned any value 355 | 356 | Use `typeof` to know the type of variable or literal. 357 | 358 | ```js 359 | let a; // declared but not initialized with any value 360 | console.log(typeof a); // undefined 361 | 362 | a = 1; 363 | console.log(typeof a); // number 364 | 365 | a = 1.11; 366 | console.log(typeof a); // number 367 | 368 | a = false; 369 | console.log(typeof a); // boolean 370 | 371 | a = "hello"; 372 | console.log(typeof a); // string 373 | ``` 374 | 375 | ## ES6 376 | 377 | ### Modify Array Data (ES6) 378 | 379 | #### Rest parameter in function parameters 380 | 381 | With the rest parameter, it does not matter how many arguments are given in an array, the function will accept it; arguments are "condensed" into one element 382 | 383 | ```js 384 | function addToArr(...args) { 385 | 386 | return args.filter(arg=>arg>=4); // filter out all elements greater than or equal to 4 387 | } 388 | 389 | 390 | console.log(addToArr(1,2,3,4,5)) // the result will be [4,5] 391 | 392 | ``` 393 | 394 | #### Spread operator 395 | 396 | [Spread syntax on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 397 | 398 | Expands an array into its individual elements. 399 | 400 | ```js 401 | 402 | const mySpreadArray = [54,2,30,41,5]; 403 | 404 | console.log(Math.min(...mySpreadArray)) // this example gives back the min of the array, without the ... it would result in NaN. 405 | 406 | ``` 407 | 408 | #### Destructuring arrays 409 | 410 | Exctract data from an array and assign it to variables. 411 | 412 | ```js 413 | 414 | const myArr = [1,2,3,4,5,6,7,8,9]; 415 | 416 | // assign the first four elements of the array to the variables a b c and d. 417 | 418 | let [a,b,c,d] = myArr; 419 | 420 | console.log(a,b,c,d) // result is 1, 2, 3, 4. 421 | 422 | // asign the fifth element to the variable e 423 | 424 | let [,,,,e] = myArr; // use commas until desired index. 425 | 426 | console.log(e); // result is number 5. 427 | 428 | ``` 429 | 430 | ### Scopes 431 | 432 | ```js 433 | function checkScope() { 434 | let i = 'function scope'; 435 | if (true) { 436 | let i = 'block scope'; 437 | console.log('Block scope i is:', i); 438 | } 439 | console.log('Function scope i is:', i); 440 | return i; 441 | } 442 | 443 | checkScope(); 444 | 445 | /* 446 | Block scope i is: block scope 447 | Function scope i is: function scope 448 | */ 449 | ``` 450 | 451 | ### Prevent object mutation 452 | 453 | `const` is not enough to protect data from mutation; you can freeze an object to reject any attempts at changing the object 454 | 455 | ```js 456 | Object.freeze(obj); 457 | ``` 458 | 459 | ### Default parameters for functions 460 | 461 | ```js 462 | const increment = (number, value = 1) => number + value; 463 | 464 | console.log(increment(5, 2)); // 7 465 | console.log(increment(5)); // 6 466 | ``` 467 | 468 | ### Arrow functions 469 | 470 | ```js 471 | const myFunc = function() { 472 | const myVar = "value"; 473 | return myVar; 474 | } 475 | ``` 476 | 477 | We can use the _arrow function syntax_ instead of having to write anonymous functions this way: 478 | 479 | ```js 480 | const myFunc = () => { 481 | const myVar = "value"; 482 | return myVar; 483 | } 484 | ``` 485 | 486 | When there is no function body, and only a return value, arrow function syntax allows you to omit the keyword `return` (as well as the brackets): 487 | 488 | ```js 489 | const myFunc = () => "value"; 490 | ``` 491 | 492 | ### Template literals 493 | 494 | ```js 495 | const myDog = { 496 | name: "Gustavo", 497 | legs: 4, 498 | tails: 1 499 | }; 500 | 501 | console.log(`My dog is called ${myDog.name}, and he has ${myDog.legs} legs and ${myDog.tails} tail`) 502 | ``` 503 | 504 | ### Classes 505 | 506 | ```js 507 | class SpaceShuttle { 508 | constructor(targetPlanet) { 509 | this.targetPlanet = targetPlanet; 510 | } 511 | } 512 | const zeus = new SpaceShuttle('Jupiter'); 513 | ``` 514 | 515 | ### Modules 516 | 517 | ```html 518 | 519 | ``` 520 | 521 | A script that uses this `module` type can now use the `import` and `export` features 522 | 523 | #### Export 524 | 525 | ```js 526 | export const add = (x, y) => { 527 | return x + y; 528 | }d 529 | ``` 530 | 531 | ```js 532 | const add = (x, y) => { 533 | return x + y; 534 | } 535 | 536 | export { add }; 537 | ``` 538 | 539 | ##### Export fallback 540 | 541 | Usually, you will use this syntax if only one value is being exported from a file, or to create a fallback value for a file or module 542 | 543 | ```js 544 | export default function add(x, y) { 545 | return x + y; 546 | } 547 | ``` 548 | 549 | ```js 550 | export default function(x, y) { 551 | return x + y; 552 | } 553 | ``` 554 | 555 | | Note | 556 | | ------------------------------------------------------------ | 557 | | You cannot use `export default` with `var`, `let` or `const` | 558 | 559 | #### Import 560 | 561 | ```js 562 | import { add, subtract } from './math_functions.js'; 563 | ``` 564 | 565 | Import everything from a file into an object: 566 | 567 | ```js 568 | import * as myMathModule from "./math_functions.js"; 569 | ``` 570 | 571 | ##### Import a default export 572 | 573 | ```js 574 | import add from "./math_functions.js"; 575 | ``` 576 | 577 | ## Regular Expressions 578 | 579 | [Regex on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions) 580 | 581 | ```js 582 | let testStr = "JavaScript"; 583 | let testRegex = /Script/; 584 | testRegex.test(testStr); // returns true 585 | 586 | // Other forms of "Script" will not match 587 | testRegex = /script/; 588 | testRegex.test(testStr); // returns false 589 | ``` 590 | 591 | ```js 592 | // Multiple possibilities using OR | operator 593 | let testStr = "Today we are learning JavaScript."; 594 | let testRegex = /HTML|CSS|JavaScript|Ruby/; 595 | testRegex.test(testStr); // returns true 596 | ``` 597 | 598 | ### Regex Flags 599 | 600 | [Advanced searching with flags on MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions#advanced_searching_with_flags) 601 | 602 | ```js 603 | let testStr = "Repeat, Repeat, Repeat"; 604 | let ourRegex = /Repeat/; 605 | testStr.match(ourRegex); 606 | // returns ["Repeat"] 607 | 608 | let repeatRegex = /Repeat/g; 609 | testStr.match(repeatRegex); 610 | // returns ["Repeat", "Repeat", "Repeat"] 611 | ``` 612 | 613 | ```js 614 | let testStr = "JavaScript, javascript, javaScript, JAVASCRIPT, jAVasCrIPt, JAvAScrIpT"; 615 | let ourRegex = /JavaScript/gi; 616 | testStr.match(ourRegex); 617 | // returns all the occurences of the word "javascript" in the string regardless of their cases 618 | ``` 619 | -------------------------------------------------------------------------------- /docs/web-notes.md: -------------------------------------------------------------------------------- 1 | # freeCodeCamp Web Development Bootcamp course notes 2 | 3 | ## Read me first 4 | 5 | [Responsive Web Design course on freeCodeCamp](https://www.freecodecamp.org/learn/2022/responsive-web-design/) | [Responsive Web Design (Beta)](https://www.youtube.com/playlist?list=PLU3RKvMpgrSEswU7f9pg6EYaO1s944CDI) | [HTML on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML) | [CSS on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS) 6 | 7 | ## HTML Introduction 8 | 9 | ### Parts of an HTML Element 10 | 11 | [MDN - Getting Started with HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) 12 | 13 | HTML elements are the building blocks of displaying information on a web page. Often referred to as 'tags', many HTML elements will have an open tag and closing tag: 14 | 15 | Most html elements, are structured as follows: 16 | Open the tag with `<` and then the tag identifier is inside, and the tag is closed out with `>`. Then you want to close out the tag but adding a `/` in the `>`. So: 17 | 18 | ```html 19 |

Here is the element content

20 | ``` 21 | 22 | #### Types of HTML elements 23 | 24 | When working with HTML elements, there is types that require open and closing tags. However, there are elements that are considered to be **self-closing**. These tags do not need to have a second closing tag, some examples include: 25 | 26 | | HTML element | Use | 27 | |--------------|-----------------| 28 | | `
` | Horizontal Rule | 29 | | `
` | Line Break | 30 | | `` | Image | 31 | 32 | ### Starting structure of a HTML page (called a boiler plate) 33 | 34 | ```HTML 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | ``` 49 | 50 | [Explanation of HTML5 boiler plate elements](https://www.freecodecamp.org/news/basic-html5-template-boilerplate-code-example/) 51 | 52 | ### Adding a comment in HTML 53 | 54 | [Comments on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Comment#content) 55 | 56 | Commenting in HTML (or any language) is helpful for two reasons: 57 | 58 | + Make notes on what the code does both for yourself but also if you are working on a team 59 | + To help with troubleshooting code that is not working as intended. 60 | 61 | #### Comment in HTML 62 | 63 | ```html 64 | 65 | ``` 66 | --------------------------------------------------------------------------------