├── .eslintrc.js ├── .gitignore ├── .travis.yml ├── Lesson01-Git └── README.md ├── Lesson02-HTML-CSS ├── README.md ├── boxModel.gif └── homework │ ├── homework-readme.txt │ └── homework.html ├── Lesson03-CSS-Positioning ├── README.md └── homework │ ├── assets │ ├── dontTouch.css │ ├── lambdawhite.png │ └── tiger.jpeg │ ├── homework.css │ └── homework.html ├── Lesson04-JS-I ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSI.test.js ├── Lesson05-JS-II ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSII.test.js ├── Lesson06-JS-III ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSIII.test.js ├── Lesson07-JS-IV ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSIV.test.js ├── Lesson08-JS-V ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSV.test.js ├── Lesson09-JS-VI ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSVI.test.js ├── Lesson10-JS-VII ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSVII.test.js ├── Lesson11-JS-VIII ├── README.md └── homework │ ├── README.md │ ├── homework.js │ └── tests │ └── JSVIII.test.js ├── Lesson12-DOM ├── README.md └── homework │ ├── DOMhomework.js │ ├── README.md │ ├── __tests__ │ └── DOM.test.js │ ├── assets │ ├── lambdawhite.png │ └── style.css │ └── index.html ├── README.md └── package.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | commonjs: true, 5 | es6: true 6 | }, 7 | extends: "eslint:recommended", 8 | rules: { 9 | quotes: ["error", "single"], 10 | "no-unused-vars": ["error", { vars: "all", args: "none" }], 11 | semi: ["error", "always"] 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (http://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # Typescript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | .DS_Store 61 | 62 | package-lock.json 63 | 64 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: "node" 3 | notifications: 4 | email: 5 | recipients: 6 | - dan@lambdaschool.com 7 | - karen@lambdaschool.com 8 | on_success: always 9 | on_failure: never -------------------------------------------------------------------------------- /Lesson01-Git/README.md: -------------------------------------------------------------------------------- 1 | # Lesson 1: Git fundamentals 2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class) 3 | 4 | In this lesson we will cover: 5 | 6 | * Description of version control and Git. 7 | * Basic terminal commands. 8 | * Forking and cloning an existing Github.com repo. 9 | * Basic Git commands (status, add, commit, push). 10 | * Submitting a Pull Request. 11 | 12 | ### Prerequisites: 13 | * Create a [Github.com](https://www.github.com/) account. 14 | * If you are or have applied to Lambda School then set your account email to public in settings. 15 | * If you are on a Windows computer you can install the [git-bash command terminal here](https://git-for-windows.github.io/) 16 | * If you are on a Mac, git is preinstalled and you can access it from your terminal. By pressing ⌘+space and entering "terminal". (You can make sure you have git installed by typing "which git" and pressing enter, if a file path appears on your screen you are go to go. In some cases you may be directed to download the Xcode command line developer tools, follow the instructions) 17 | * If you are on a Linux machine, you may need to install git by accessing your terminal and entering "apt-get install git" 18 | * If you are having trouble installing Git, this resource will help: [https://git-scm.com/book/en/v2/Getting-Started-Installing-Git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git) 19 | 20 | ## Description of version control and Git 21 | 22 | Version control is a concept in software engineering which applies to the management of source code. There are many systems for applying version control practices to source code. We will be focusing on one of the most popular, "Git". 23 | 24 | ### Git 25 | 26 | Git was created in 2005 by Linus Torvalds. Git allows a team to work concurrently on a single project, or "repository", all while staying current and up to date. This is done through branching, each member, or feature, can have a branch from the master branch. That branch can be edited as needed without interfering with the "master". When the time comes to merge the branches back together, git will evaluate where the changes were made and will correct the master to reflect those changes without interfering with other changes. Git also acts as a sort of time machine, allowing a team to revert ANY changes made to the source code throughout the history of the code. 27 | 28 | ### Github.com 29 | 30 | [Github.com](https://github.com) is a network to store your repositories, essentially it is a repository of repositories. It is one of many available on the internet, and the most popular. Git != Github, although they work very well together. Github is a place for you to store your code or find other projects. It also acts as a portfolio for any code you've worked on. If you plan on being a developer you should have a Github account. We will be using Github extensively throughout your time at Lambda School. 31 | 32 | ## Basic terminal commands: 33 | 34 | > We will be using the "terminal" or "command line" throughout your time at Lambda school. If you are on a Mac or Linux machine, you should have the terminal and git installed already, if you are on a Windows machine I recommend installing ["git-bash"](https://git-for-windows.github.io/). 35 | 36 | Within our terminal we can: traverse our file structure, add files, remove files, update files, and tons more! The terminal is a very powerful tool for developers and you will be using it a lot in your professional development career. It might look scary at first, but in time you will enjoy using it. It is best to get accustomed to it now. To begin we will learn the 'basic' commands: 37 | 38 | "List": Allows us to view the contents of the current folder we are in. 39 | ```bash 40 | $ ls 41 | ``` 42 | 43 | "Change Directory": Allows us to move to a new folder or 'directory'. 44 | ```bash 45 | $ cd [folder] 46 | ``` 47 | 48 | "Make Directory": Makes a new folder in the directory you are currently in. 49 | ```bash 50 | $ mkdir [folder name] 51 | ``` 52 | "Touch" will create a new file. 53 | ```bash 54 | $ touch [file] 55 | ``` 56 | 57 | "Remove": permanently deletes a file. (WARNING! This bypasses any "trashcan" or recycling can you may have and PERMANENTLY deletes the file) (also of note: This will not remove folders, we need a special command for that, that we will learn later.) 58 | ```bash 59 | $ rm [file] 60 | ``` 61 | 62 | ## Exercise 63 | 64 | In this exercise we will create a new folder titled: "LambdaSchool" 65 | 66 | To get to your top level folder type: 67 | 68 | ```bash 69 | cd ~ 70 | ``` 71 | 72 | and press enter. Once in your top level type: 73 | 74 | ```bash 75 | mkdir LambdaSchool 76 | ``` 77 | 78 | and press enter. Congratulations you have created a directory! 79 | 80 | ## Github 81 | 82 | As mentioned before, Github is a central place to store, view, and download repositories, it is not synonymous with "git". You need to have a Github account in order to complete this exercise. 83 | 84 | ### Forking 85 | 86 | Github.com allows users to create their own copy of an repository (as long as it is public) and do whatever work you would like to that on under your own account. This is called "Forking". Essentially this will create a new branch of the repo, and at a future time you may be able to reincorporate("pull") the changes you have made to this branch with the master branch you forked from. 87 | 88 | In order to fork a repo, you will visit the Github repo of your choosing (for this exercise we will be using [this](http://github.com/lambdaschool/precourse) repo). Anywhere within the repo you will see a "Fork" button in the upper right hand corner, click this. Github will take a moment and copy all of the data to your account and it is now available to you to work on. 89 | 90 | ### Cloning 91 | 92 | In order to work on a project you must clone (download) it to your local machine. To do this, visit the top level of the forked repo on your own account, and click on the green button in the upper right hand side of the page that says: "Clone or Download" a dropdown should appear and will can click on the clipboard icon to copy the address. (Note: you can download the entire repo, but this is not advised as cloning will do quite a few steps for you behind the scenes that will make your life much easier.) 93 | 94 | Once you have the address copied, return to your terminal window and enter the following: 95 | 96 | ```bash 97 | $ cd LambdaSchool 98 | 99 | $ git clone [copied address] 100 | ``` 101 | 102 | This will download the repo and you now have a local copy of the repo saved to your machine! 103 | 104 | ## Git commands: 105 | 106 | Throughout these lessons, we will interact with git through our terminal. In the future you may wish to use a Git GUI interface, but during these lessons we will need to use the terminal for all git functions. 107 | 108 | In this exercise, we will add a file to our project and then commit this change to memory in git. 109 | 110 | In your terminal, cd into the LambdaSchool/Precourse folder 111 | 112 | Then enter the following in your terminal: 113 | ```bash 114 | $ touch Lesson01-Git/newFile.js 115 | ``` 116 | 117 | This will add a new file your your project titled "newFile.js" 118 | 119 | at this time we can use the git command "status". Status will read back the status of all changes made to your repo. Use status often, if you’re not sure if something worked, using status will tell you. 120 | 121 | ```bash 122 | $ git status 123 | ``` 124 | 125 | You should see something along these lines: 126 | 127 | ```bash 128 | Changes not staged for commit: 129 | (use "git add ..." to update what will be committed) 130 | (use "git checkout -- ..." to discard changes in working directory) 131 | 132 |    modified: Lesson01-Git/README.md 133 | 134 | Untracked files: 135 | (use "git add ..." to include in what will be committed) 136 | 137 |    Lesson01-Git/newFile.js 138 | 139 | no changes added to commit (use "git add" and/or "git commit -a") 140 | ``` 141 | 142 | This tells us that we have a file that has been changed, but is not saved into the git history yet. 143 | 144 | To do this we will use the 'add' command: 145 | 146 | ```bash 147 | git add Lesson01-Git/newFile.js 148 | ``` 149 | 150 | This has added our changes to the history, now to save that history, we will use "commit". Commit will take all of our added changes and save it to git history. For future reference you will be able to leave a message about the changes, this will make it easier to go back and find the changes you(or anyone) are looking for in the future ,if you should need to. It is always a good idea to leave a concise description of the changes in your commit. A shorthand way of leaving an inline message is using the '-m' flag and writing your message directly after, in quotes. 151 | 152 | ```bash 153 | git commit -m 'added new file, newFile.js' 154 | ``` 155 | 156 | Now that we have our changes saved locally, we want to share those changes in our Github. To do this we will "push" 157 | 158 | ```bash 159 | git push 160 | ``` 161 | 162 | You will be prompted for your username and password. Enter these and then you will receive a message if your changes were pushed successfully: 163 | 164 | ```bash 165 | Counting objects: 5, done. 166 | Delta compression using up to 8 threads. 167 | Compressing objects: 100% (4/4), done. 168 | Writing objects: 100% (5/5), 2.97 KiB | 0 bytes/s, done. 169 | Total 5 (delta 1), reused 0 (delta 0) 170 | remote: Resolving deltas: 100% (1/1), completed with 1 local object. 171 | To git@github.com:[your username]/Precourse.git 172 | cccc682..283b9dd master -> master 173 | ``` 174 | 175 | Congratulations! You just pushed your first git commit! 176 | 177 | ## Pull Requests 178 | 179 | Once you have completed the changes you intend to make, it will be time to merge those changes with the master branch. If you are not making changes directly to your own repository, you will need to submit a "Pull Request" or "PR" as we will refer to it. This allows to owner(or manager/supervisor/lead/senior) of the original repo to look over the changes and decide if they want to include these changes in their master. We will do this through Github. 180 | 181 | In this exercise, we will submit a pull request through github.com 182 | 183 | 184 | ## Further reading and tutorials: 185 | 186 | * [Git: official site](https://git-scm.com/) 187 | * [Github: official tutorial](https://try.github.io/levels/1/challenges/1) 188 | * [Codecademy: Learn Git](https://www.codecademy.com/learn/learn-git) 189 | * [Git: official tutorial](https://git-scm.com/docs/gittutorial) 190 | * [Termianl turorial](https://www.davidbaumgold.com/tutorials/command-line/) 191 | -------------------------------------------------------------------------------- /Lesson02-HTML-CSS/README.md: -------------------------------------------------------------------------------- 1 | # Lesson 2: HTML/CSS fundamentals 2 | (Attention: These are the class notes for the [Lambda School](http://www.lambdaschool.com) pre-course instruction workshop. This is meant to serve as an accompaniment to the class) 3 | 4 | In this lesson we will cover: 5 | 6 | * Introduction to HTML. 7 | * Basic HTML elements. 8 | * Introduction to CSS. 9 | * CSS selectors and the \ 141 | 142 | 143 | 144 | 145 | ``` 146 | 147 | ### selectors 148 | 149 | In order for us to apply styling rules to html elements, we have to know which elements to apply the rules to, in come selectors. 150 | You can select all elements of a certain type: p, div, body, etc. or you can apply a class or id to each individual element. We apply these selectors to the HTML tags themselves in the form of a flag: 151 | 152 | ```html 153 |
154 |
155 | ``` 156 | 157 | Ids: are titles that can only appear on a single element, think of it as you would your drivers license number ONLY you have that one number. 158 | 159 | Classes: on the other hand can apply to multiple elements. Think of it like a class room, usually you aren't the only person in a class, although you might be, the class is big enough for lots of people. 160 | 161 | We do not need to add anything to use every element of a certain type as a selector, CSS does that for us already. 162 | 163 | ### Anatomy of styling rules 164 | 165 | Now that we have our selectors in place we need to tell the browser what to do with those selectors. Inside of our style tags, we will insert the rules. Classes will always begin with ".", and Ids will always begin with "#", elements will begin with neither and just have the element name. After the name of the selector we will use braces ("{}") to hold our rules to that one selector. 166 | 167 | ```html 168 | 175 | ``` 176 | 177 | ## Basic CSS styling 178 | 179 | Now that we have some HTML elements selected we can begin to add styling. There are a LOT of different ways you can style an object, you can control how big or small it is, what color it is, where it is placed on the screen, or even if it is visible or not. We will go over some of the most common styling properties and how to use them. 180 | 181 | ### Styling rules rules 182 | Styling rules will need to adhere to a certain syntax in our CSS so that the browser knows how to read them properly. Within the braces, we will then have the name of the property, a colon(":") and the value of the rule, this will be followed by a semicolon(";") 183 | 184 | ```css 185 | div { 186 | styling_property: value of rule; 187 | } 188 | ``` 189 | 190 | 191 | ## Introduction to the Box Model 192 | 193 | We can consider all html elements to be boxes, the make up of each box is the content, padding, border and margin. This is known as the Box Model. 194 | 195 | ![Image](./boxModel.gif) 196 | 197 | ### height and width 198 | 199 | We can tell the browser exactly how wide and how tall we want our element(content) to be, this is used in divs, imgs, and other height based elements( in order to determine the size of text, we will need to use a different styling property ). Size values can be in lots of different measures, but the most common is the pixel "px". 200 | 201 | ```css 202 | div { 203 | height: 400px; 204 | width: 400px; 205 | } 206 | ``` 207 | ### margin 208 | 209 | The margin is the transparent area around the element that you want to leave open. It is the outermost layer in the Box Model. 210 | 211 | 212 | ### border 213 | 214 | Border will set a border around your element, you can determine the size color and style of the border. It will be set up in this order: width style color (a list of border styles can be found here: https://developer.mozilla.org/en-US/docs/Web/CSS/border). The border is outside the padding, but inside the margin. 215 | 216 | ```css 217 | div { 218 | border: 1px solid black; 219 | } 220 | ``` 221 | ### padding 222 | 223 | The padding is the transparent area between the border and the content. It is very similar to the margin. 224 | 225 | ### Box Model Calculation 226 | 227 | When we set the height and width of an element, we are only setting the content. In order to calculate the true height and width we have to factor in the padding, border and margin. 228 | 229 | * Padding is a transparent area around the content. 230 | * Border will wrap around the padding 231 | * Margin is the outermost transparent area wrapping around the entire box. 232 | 233 | Eg. If we set the height of the content to 20px and the width to 20px, the padding to 5px, border to 1px, and the margin to 10 px. 234 | 235 | Actual height = 25px(content) + 2*5px(padding, each side) + 2 * 1(border each side) + 2 * 10(margin, each side) = 57px 236 | 237 | Actual width = 25px(content) + 2*5px(padding, each side) + 2 * 1(border each side) + 2 * 10(margin, each side) = 57px 238 | 239 | Knowing this will help us size and position our elements correctly. 240 | 241 | ## A Couple of Other CSS Properties 242 | 243 | ### background 244 | 245 | Background can be set to a variety of rules, most common would be setting the background to a color or an image. Both are displayed below. 246 | 247 | ```css 248 | .divClass { 249 | background: red; 250 | } 251 | #divId { 252 | background: url('http://imageurl.com/image.jpg'); 253 | } 254 | ``` 255 | 256 | ### color 257 | 258 | Color is used for text only. It will set the color of your text 259 | 260 | ### font-size 261 | 262 | We cant use width or height for text, but we can determine the size of the font used. You can use any size unit here that you would use with a font in a word processor (px, em, in, etc) most popular is px 263 | 264 | 265 | 266 | ## External Stylesheets and the \ element 267 | 268 | We have gone over how to use the \