├── README.md ├── week-1 ├── .bash_profile ├── README.md └── sed.md ├── week-2 ├── README.md └── sublime_from_cygwin.md ├── week-3 └── README.md ├── week-4 └── README.md ├── week-5 ├── README.md └── cygwin-learners │ ├── .bash_profile │ ├── img │ ├── bart.gif │ ├── cygwin-1-interpreters.png │ ├── cygwin-2-choose-ruby.png │ ├── cygwin-3-accept-dependencies.png │ ├── cygwin-4-install.png │ ├── cygwin-5-verify-install.png │ ├── cygwin-6-allow-sass.png │ ├── cygwin-6-gem-install-sass.png │ ├── cygwin-bash-script.png │ ├── cygwin-gem-verify-install.png │ ├── cygwin-open-bashprofile.png │ ├── cygwin-setup-x86.png │ └── lisa.gif │ ├── install-ruby.md │ └── install-sass.md ├── week-6 └── README.md ├── week-7 └── README.md └── week-8 ├── API-calls ├── jQuery-AJAX │ ├── jquery_example.js │ ├── main.css │ ├── newsapi.html │ ├── newsapi.js │ └── robot.png └── vanilla-js-AJAX │ ├── jquery_example.js │ ├── main.css │ ├── newsapi.html │ ├── newsapi.js │ └── robot.png └── README.md /README.md: -------------------------------------------------------------------------------- 1 | # learn-to-code-resources 2 | 3 | In this repository, you'll find a series of links to resources that will help you learn to code and level up your coding skills. Each week's directory contains a README.md file with links to help supplement your learning. 4 | 5 | [Week 1](https://github.com/msteffan/learn-to-code-resources/tree/master/week-1) 6 | 7 | [Week 2](https://github.com/msteffan/learn-to-code-resources/tree/master/week-2) 8 | 9 | [Week 3](https://github.com/msteffan/learn-to-code-resources/tree/master/week-3) 10 | 11 | [Week 4](https://github.com/msteffan/learn-to-code-resources/tree/master/week-4) 12 | 13 | [Week 5](https://github.com/msteffan/learn-to-code-resources/tree/master/week-5) 14 | 15 | [Week 6](https://github.com/msteffan/learn-to-code-resources/tree/master/week-6) 16 | 17 | [Week 7](https://github.com/msteffan/learn-to-code-resources/tree/master/week-7) 18 | 19 | [Week 8](https://github.com/msteffan/learn-to-code-resources/tree/master/week-8) 20 | 21 | 22 | ## Want to tackle some other skills? Check out these resources. 23 | 24 | https://gumroad.com/l/beyondcode 25 | -------------------------------------------------------------------------------- /week-1/.bash_profile: -------------------------------------------------------------------------------- 1 | # Set a greeting! 2 | echo "Loading ~/.bash_profile a shell script that runs in every new terminal you open" 3 | 4 | # $USER = YOU! 5 | echo "Logged in as $USER" 6 | 7 | # Colors ls: should use for folders, files, symlinks etc, see `man ls` and 8 | # search for LSCOLORS 9 | export LSCOLORS=CxGxFxdxCxDxDxaccxaeex 10 | # Force ls to use colors (G) and use humanized file sizes (h) 11 | alias ls='ls -Gh' 12 | 13 | # Force grep to always use the color option and show line numbers 14 | export GREP_OPTIONS='--color=always' 15 | -------------------------------------------------------------------------------- /week-1/README.md: -------------------------------------------------------------------------------- 1 | ## atom/text editor packages: 2 | 3 | [Atom Text Editor Documentation](http://flight-manual.atom.io/) 4 | 5 | [CSS Tricks Video on Installing Emmet and How It Helps](https://css-tricks.com/video-screencasts/129-emmet-awesome/) 6 | 7 | ## sublime text: 8 | 9 | [Sublime Text Book, $36-$45](https://sublimetextbook.com/) 10 | 11 | [Wes Bos Blog Entries on Sublime Text](http://wesbos.com/category/sublime-text/) 12 | 13 | ## command line/bash: 14 | 15 | [Command Line Power User](http://commandlinepoweruser.com/) -- A free video course to help you level up your command line skills using ZSH. 16 | 17 | [Bash Cheat Sheet](http://cli.learncodethehardway.org/bash_cheat_sheet.pdf) 18 | 19 | [How to install a package that will let you print the file tree in your terminal](http://askubuntu.com/questions/431251/how-to-print-the-directory-tree-in-terminal) 20 | 21 | [All of the Terminal/Bash Commands you could ever run](http://ss64.com/bash/) 22 | -------------------------------------------------------------------------------- /week-1/sed.md: -------------------------------------------------------------------------------- 1 | # Sed 2 | 3 | `sed` is short for **S**tream **Ed**iting... 4 | 5 | ## For Substitutions 6 | 7 | The `sed` command can be used to make substitutions 8 | 9 | **pets.txt**: 10 | 11 | ``` 12 | I like cats! Now I like dogs! Scratch that, I like cats! 13 | ``` 14 | 15 | From the command line: 16 | 17 | ``` 18 | $ sed 's/cats/guinnea pigs/' < pets.txt > new-pets.txt 19 | ``` 20 | Then: 21 | 22 | ``` 23 | $ cat new-pets.txt 24 | ``` 25 | **Output**: 26 | 27 | ``` 28 | I like guinnea pigs! I like dogs! Scratch that, I like cats! 29 | ``` 30 | 31 | **Explanation**: 32 | 33 | - `sed 's///'`: this excepts standard regex pattern matches 34 | - `< pets.txt`: search the file **pet.txt** 35 | - `> new-pets.txt`: output the result in **new-pets.txt** 36 | 37 | ## global option 38 | 39 | Notice that `sed` only changed the first occurence of "cats" to "guinnea pigs". Add the "global" option `g` after the final delimiter `/` to replace all instances of the regex search pattern instead of just the first one: 40 | 41 | **pets.txt**: 42 | 43 | ``` 44 | I like cats! Now I like dogs! Scratch that, I like cats! 45 | ``` 46 | 47 | From the command line: 48 | 49 | ``` 50 | $ sed 's/cats/guinnea pigs/g' < pets.txt > no-cats.txt 51 | ``` 52 | Then: 53 | 54 | ``` 55 | $ cat no-cats.txt 56 | ``` 57 | **Output**: 58 | 59 | ``` 60 | I like guinnea pigs! I like dogs! Scratch that, I like guinnea pigs! 61 | ``` 62 | 63 | ## Sed reads every line 64 | 65 | `sed` will run your match/replace on each line in a file: 66 | 67 | **multi-pets.txt** 68 | 69 | ``` 70 | I like dogs AND I like cats! 71 | I like cats AND I like dogs! 72 | I like guinnea pigs and I like cats (and I like dogs)! 73 | ``` 74 | 75 | From the command line: 76 | 77 | ``` 78 | $ sed 's/cats/common house foxes/g' < multi-pets.txt > foxes.txt 79 | ``` 80 | 81 | Then: 82 | 83 | ``` 84 | $ echo foxes.txt 85 | ``` 86 | 87 | **Output:** 88 | 89 | ``` 90 | I like dogs AND I like common house foxes! 91 | I like common house foxes AND I like dogs! 92 | I like guinnea pigs and I like common house foxes (and I like dogs)! 93 | ``` 94 | 95 | 96 | 97 | reference: [super weird grymoire blog](http://www.grymoire.com/Unix/Sed.html#uh-0) 98 | 99 | -------------------------------------------------------------------------------- /week-2/README.md: -------------------------------------------------------------------------------- 1 | ## Announcement! 2 | 3 | Git commands covered in [this project](https://www.codecademy.com/en/courses/learn-git/projects/js-homework) (part of the week 2 curriculum) 4 | 5 | `git clone` 6 | `git push` 7 | 8 | Are _not_ taught in the interactive lessons listed on the curriculum page. 9 | 10 | To learn about these commands, as well as a few others that will be useful this week, put aside ~30 minutes to go through [Learn Git - Git Teamwork](https://www.codecademy.com/en/courses/learn-git/lessons/git-teamwork/exercises/remotes?action=lesson_resume) 11 | 12 | ## git it: 13 | 14 | [Git Cheatsheet from GitHub](https://services.github.com/kit/downloads/github-git-cheat-sheet.pdf) 15 | 16 | [An awesome, highly recommended tutorial on git—especially helpful if you're really struggling to visualize what's happening in git](http://learngitbranching.js.org/) 17 | 18 | [An in-depth explainer on version control and why we use it](https://www.atlassian.com/git/tutorials/what-is-version-control/benefits-of-version-control) 19 | 20 | [A very simple, straight-forward guide to Git](http://rogerdudler.github.io/git-guide/) 21 | 22 | [Another Git cheat sheet, this one by the same guy who put together the guide in the link above ^^](http://rogerdudler.github.io/git-guide/files/git_cheat_sheet.pdf) 23 | 24 | When in doubt: ask GitHub. Here's GitHub's list of its [best Git resources](https://help.github.com/articles/good-resources-for-learning-git-and-github/) 25 | 26 | [Git basics I Video](https://www.youtube.com/watch?v=8oRjP8yj2Wo) 27 | 28 | [Git basics II Video](https://www.youtube.com/watch?v=uhtzxPU7Bz0) 29 | 30 | [GitRef — an official git reference; kind of like the documentation for basic git commands](http://gitref.org/) 31 | 32 | If you want to understand what's going on "under the hood" with git, check out this [well-written article](https://codewords.recurse.com/issues/two/git-from-the-inside-out). It's technical, but well worth the read. 33 | 34 | ["Aha Moments When Learning Git"](https://betterexplained.com/articles/aha-moments-when-learning-git/) 35 | -------------------------------------------------------------------------------- /week-2/sublime_from_cygwin.md: -------------------------------------------------------------------------------- 1 | # Open Sublime Text From Cygwin 2 | 3 | If you're using Sublime Text as your text editor, you _may_ not be able to open it from Cygwin without a custom _bash_ script. Use the instructions below to create one, which will give you access to a new command that opens Sublime Text from the Cygwin command line. 4 | 5 | ## STEPS 6 | 7 | ### Step 1: Find the Path to sublime_text.exe 8 | Your Sublime Text 2 or Sublime Text 3 application should have installed in the following location on your Windows OS: 9 | 10 | Sublime Text 2 11 | ```bash 12 | /cygdrive/c/Program\ Files/Sublime\ Text\ 2/sublime_text.exe 13 | ``` 14 | 15 | Sublime Text 3 16 | ```bash 17 | /cygdrive/c/Program\ Files/Sublime\ Text\ 3/sublime_text.exe 18 | ``` 19 | 20 | **NOTE** the backslashes, `\` are _escape characters_. You need them because bash scripts will not accept whitespace characters in paths. 21 | 22 | ### Step 2: Create a New File for Your Bash Script 23 | 24 | Open Sublime Text, create a new file and select "Save" to save the file. You will be prompted to name your file. Name it **sublime**. No file extension is needed. For save location, use the file explorer to navigate to: `C/cygwin/usr/local/bin`. 25 | 26 | ### Step 3: Write Your Bash scripts 27 | 28 | In your **sublime** file, we'll now add our Bash script. If you're using Sublime Text 2, copy the first code snippet. If you're using Sublime Text 3, copy the second script. 29 | 30 | For Sublime Text 2 31 | ```bash 32 | #!/bin/sh 33 | /cygdrive/c/Program\ Files/Sublime\ Text\ 2/sublime_text.exe $1 & 34 | ``` 35 | 36 | For Sublime Text 3 37 | ```bash 38 | #!/bin/sh 39 | /cygdrive/c/Program\ Files/Sublime\ Text\ 3/sublime_text.exe $1 & 40 | ``` 41 | 42 | Remember to save the file after you've added the code. 43 | 44 | ### Step 4: Turn `sublime` into an Executable File 45 | 46 | We need to turn our **sublime** script into an executable file, so that it will run from the Cygwin command line. 47 | 48 | Launch your Cygwin application, and enter the following command: 49 | 50 | ```bash 51 | chmod +x usr/local/bin/sublime 52 | ``` 53 | Press enter to make the file executable. 54 | 55 | ### Step 5: Test it out! 56 | 57 | Test out `sublime` command. From Cygwin, create a new file: 58 | 59 | ```bash 60 | touch test.txt 61 | ``` 62 | 63 | Hit enter to create the file. Next, open it with your new command: 64 | 65 | ```bash 66 | sublime test.txt 67 | ``` 68 | 69 | That should launch Sublime Text! 70 | 71 | ### Step 6: Troubleshooting 72 | 73 | If following these instructions results in an error, it may be that your Sublime Text application installed in a location other than `/cygdrive/c/Program\ Files/Sublime\ Text\ 2/sublime_text.exe`. If you suspect that's the case, you may need to do a little investigation work to find the exact filepath that leads to Sublime. Once you find it, substitute that filepath for `/cygdrive/c/Program\ Files/Sublime\ Text\ 2/sublime_text.exe` and you should be good to go! 74 | 75 | If you're still hitting snags, tag `@dan-a` in Slack! 76 | -------------------------------------------------------------------------------- /week-3/README.md: -------------------------------------------------------------------------------- 1 | # HTML & Bootstrap basics 2 | 3 | ## HTML Elements 4 | 5 | A comprehensive list of every HTML element and how to use it, via [HTML Dog](http://www.htmldog.com/references/html/tags/) 6 | 7 | Additional HTML tutorials to help advance your learning, also via [HTML Dog](http://htmldog.com/guides/html/) 8 | 9 | Mozilla Developer Network's [Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) 10 | 11 | ## HTML Attributes 12 | 13 | A comprehensive list of all HTML attributes, via [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes) 14 | 15 | The difference between classes and IDs, via [CSS Tricks](https://css-tricks.com/the-difference-between-id-and-class/) 16 | 17 | Classes & IDs explainer: [When to use a class vs an ID](https://appendto.com/2016/04/css-class-vs-id-which-one-to-use/) 18 | 19 | ## HTML Cheatsheets 20 | 21 | It can be hard to remember all of the HTML elements—but never fear! We've compiled a cheatsheet of all of the best HTML cheatsheets out there; you'll never forget another element again! 22 | 23 | [MozTeach HTML Cheatsheet](https://mozteach.makes.org/thimble/html-cheatsheet) 24 | 25 | [HTML for Beginners Cheatsheet](http://theblogstylist.com/cheat/html/) 26 | 27 | [Wired Magazine's HTML Cheatsheet](http://www.wired.com/2010/02/html_cheatsheet/) 28 | 29 | ## Bootstrap 30 | 31 | [Bootstrap documentation](http://getbootstrap.com/getting-started/) 32 | 33 | [Bootply](http://www.bootply.com/) — Get familiar with Bootstrap by playing with this interactive editor. You won't write much code, but it may help you get the hang of how the built-in classes work. 34 | 35 | [Built With Bootstrap](http://builtwithbootstrap.com/) — When we say Bootstrap is flexible, _we mean it!_ Check out these examples of real-world sites that all are built with Bootstrap. 36 | 37 | [Bootstrap Cheatsheet by Hacker Themes](https://hackerthemes.com/bootstrap-cheatsheet/) — An interactive cheatsheet. 38 | 39 | [Single-page PDF Bootstrap Cheatsheet](https://dresssed.s3.amazonaws.com/bootstrap_cheatsheet.pdf) 40 | 41 | [What Is Bootstrap and How Do I Use It?](https://www.taniarascia.com/what-is-bootstrap-and-how-do-i-use-it/) 42 | 43 | An in-depth look at the [boostrap grid system](http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works) 44 | -------------------------------------------------------------------------------- /week-4/README.md: -------------------------------------------------------------------------------- 1 | # General CSS resources 2 | 3 | http://devdocs.io/css/ 4 | 5 | ## CSS Layouts: 6 | 7 | ### How can we position elements with CSS? 8 | 9 | *Static* — When you add an element to the page without modifying its position, the element still has a default value: static, which is to say, its position has no special properties. If something has “static” position, we call it “non-positioned.” 10 | 11 | *Relative* — The first of the positions we’ll talk about isn’t particularly exciting; in fact, if you add position: relative nothing will happen—yet. That’s because relative position is calculated relative to its normal (static) position, so we have to offset the element some amount in order to see change. We can add offset on any side using the top, right, bottom, and left properties. The offset will be applied calculated from the element’s original position, and it leaves a gap in the page when it is moved. 12 | 13 | *Fixed* — It’s possible to position elements so that they appear not to move at all. We do this with fixed position. When an element’s position is fixed, it receives position coordinates relative to the viewport. As with relative, we’ll need to specify top, right, bottom, and left properties; once we do, though, we can achieve cool effects like a header element that seems to stick to the top of the page. 14 | 15 | *Absolute* — We’ve saved the best for last—and by best I mean “most likely to trip up even a senior developer.” Absolute position is like a blend of relative and fixed. An element that receives position: absolute will be positioned relative to its nearest positioned ancestor, rather than to the viewport. 16 | 17 | ### Whoa, whoa, whoa. Now that we can position elements, this means elements could get stacked on top of each other. How can I modify that? 18 | 19 | We can modify the stacking context of our divs using a property called *z-index*, which only works on elements that are positioned. An element’s z-index is a number that determines how high in the stack an element should be; a higher z-index means that the element will be rendered above those elements with lower z-indexes. 20 | 21 | ### Tutorials & Links 22 | 23 | A list of all named CSS colors and their hexidecimal equivalents, [via CSS Tricks](https://css-tricks.com/snippets/css/named-colors-and-hex-equivalents/) 24 | 25 | Need a cool color scheme? We recommend checking out [Coolors.co](https://coolors.co/app) Generate a color scheme, lock any colors you like, and then press the space bar to generate other coordinating colors. 26 | 27 | Free fonts available from [Google Fonts](https://fonts.google.com/). To learn how to use a Google font, re-watch the first seminar on CSS; the process is covered there in detail. 28 | 29 | Highly recommend this tutorial on layouts, called [Learn Layout.](http://learnlayout.com/) It will help clarify each of the different CSS positions, how to use them, and how they cause elements to interact with each other. There's also a section on Flexbox if you want to get more advanced. 30 | 31 | An introductory CSS tutorial, from [Mozilla Developer Nework](https://developer.mozilla.org/en-US/docs/Web/CSS/Tutorials) 32 | 33 | To take things a step further, checkout this [intermediate CSS tutorial.](http://learn.shayhowe.com/advanced-html-css/) 34 | 35 | As with HTML, HTML Dog is a great resource for [intermediate & advanced CSS.](http://www.htmldog.com/guides/css/intermediate/layout/) 36 | 37 | ### Flexbox 38 | 39 | [CSS Tricks' "Guide to Flexbox"](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is one of the most authoritative resources out there explaining what flexbox is and how to use it. 40 | 41 | CSS Tricks also offers [this helpful screencast](https://css-tricks.com/video-screencasts/131-tinkering-flexbox/) if you prefer to learn via video tutorials. 42 | 43 | [Flexbox In 5](http://flexboxin5.com/) 44 | 45 | #### Codepen Visuals 46 | These examples are visual aids for understanding how flex properties behave differently depending on how `flex-direction` is set on the flex container. 47 | 48 | [flex-direction: row](http://codepen.io/danasselin/full/JRYKxN/) 49 | 50 | [flex-direction: column](http://codepen.io/danasselin/full/KgdgaV/) 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /week-5/README.md: -------------------------------------------------------------------------------- 1 | # Sass Resources 2 | 3 | ## Seminar Stretch Resources 4 | 5 | - [Learn about Mixins!](http://sass-lang.com/guide#topic-6) 6 | - [Learn about Placeholders!](http://thesassway.com/intermediate/understanding-placeholder-selectors) 7 | - [Compile Sass to CSS in Real Time!](http://www.sassmeister.com/) 8 | 9 | ## Sass Beginner 10 | - [List of Sass Beginner Articles](http://thesassway.com/beginner) 11 | -------------------------------------------------------------------------------- /week-5/cygwin-learners/.bash_profile: -------------------------------------------------------------------------------- 1 | # To the extent possible under law, the author(s) have dedicated all 2 | # copyright and related and neighboring rights to this software to the 3 | # public domain worldwide. This software is distributed without any warranty. 4 | # You should have received a copy of the CC0 Public Domain Dedication along 5 | # with this software. 6 | # If not, see . 7 | 8 | # base-files version 4.2-4 9 | 10 | # ~/.bash_profile: executed by bash(1) for login shells. 11 | 12 | # The latest version as installed by the Cygwin Setup program can 13 | # always be found at /etc/defaults/etc/skel/.bash_profile 14 | 15 | # Modifying /etc/skel/.bash_profile directly will prevent 16 | # setup from updating it. 17 | 18 | # The copy in your home directory (~/.bash_profile) is yours, please 19 | # feel free to customise it to create a shell 20 | # environment to your liking. If you feel a change 21 | # would be benifitial to all, please feel free to send 22 | # a patch to the cygwin mailing list. 23 | 24 | # User dependent .bash_profile file 25 | 26 | # enables sass commands 27 | PATH=~/bin:$PATH 28 | # source the users bashrc if it exists 29 | if [ -f "${HOME}/.bashrc" ] ; then 30 | source "${HOME}/.bashrc" 31 | fi 32 | 33 | # Set PATH so it includes user's private bin if it exists 34 | # if [ -d "${HOME}/bin" ] ; then 35 | # PATH="${HOME}/bin:${PATH}" 36 | # fi 37 | 38 | # Set MANPATH so it includes users' private man if it exists 39 | # if [ -d "${HOME}/man" ]; then 40 | # MANPATH="${HOME}/man:${MANPATH}" 41 | # fi 42 | 43 | # Set INFOPATH so it includes users' private info if it exists 44 | # if [ -d "${HOME}/info" ]; then 45 | # INFOPATH="${HOME}/info:${INFOPATH}" 46 | # fi 47 | -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/bart.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/bart.gif -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-1-interpreters.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-1-interpreters.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-2-choose-ruby.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-2-choose-ruby.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-3-accept-dependencies.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-3-accept-dependencies.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-4-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-4-install.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-5-verify-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-5-verify-install.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-6-allow-sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-6-allow-sass.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-6-gem-install-sass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-6-gem-install-sass.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-bash-script.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-bash-script.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-gem-verify-install.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-gem-verify-install.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-open-bashprofile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-open-bashprofile.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/cygwin-setup-x86.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/cygwin-setup-x86.png -------------------------------------------------------------------------------- /week-5/cygwin-learners/img/lisa.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-5/cygwin-learners/img/lisa.gif -------------------------------------------------------------------------------- /week-5/cygwin-learners/install-ruby.md: -------------------------------------------------------------------------------- 1 | # Install Ruby on Cygwin 2 | 3 | ### STEP 1: Run **setup-x86** 4 | Go to **downloads** and find **setup-x86** and double-click to run. 5 | 6 | ![cygwin-setup-x86.png](img/cygwin-setup-x86.png) 7 | 8 | When prompted to _allow this app to make changes_, choose _Yes_. 9 | 10 | ### STEP 2: 11 | Continue through each window prompt ... 12 | 13 | 1. Choose a Download Source: _Install from Internet_ 14 | 2. Select Root Install Directory: **C:\cygwin** 15 | 3. Select Local Package Directory: **C:\Users\\Downloads** 16 | 4. Select Your Internet Connection: _Direct Connection_ 17 | 5. Choose a Download Site: **http://cygwin.mirror.constant.com** 18 | 19 | ... until you hit _Select Packages._ Here search for _ruby_ and then select _Interpreters_. 20 | 21 | ![cygwin-interpreters-ruby](img/cygwin-1-interpreters.png) 22 | 23 | ### STEP 3: Select newest ruby version 24 | Select the Ruby package at the top: _ruby: Interpreted object-oriented scripting language_ 25 | 26 | ![cygwin-choose-latest-ruby](img/cygwin-2-choose-ruby.png) 27 | 28 | ### STEP 4: Accept Ruby Dependencies 29 | 30 | The next prompt will ask if you'd like to resolve ruby dependencies. Yes, yes you would. 31 | 32 | ![resolve-ruby-dependencies](img/cygwin-3-accept-dependencies.png) 33 | 34 | ### STEP 5: Install Ruby 35 | 36 | Let Cygwin do its thing and install ruby ... 37 | 38 | ![ruby-installing](img/cygwin-4-install.png) 39 | 40 | **NOTE**: if Cygwin is open, the installer may prompt you to _kill_ or _stop_ processes which are interfering with the installation. Choose _Yes_. 41 | 42 | ### STEP 6: Verify that Ruby is in fact installed 43 | 44 | Launch your Cygwin application and enter `ruby -v` on the command line. Your output should look like this: 45 | 46 | ```bash 47 | ruby 2.2.5p319 (2016-04-26 revision 54774) [i386-cygwin] 48 | ``` 49 | 50 | ![verify-ruby-install](img/cygwin-5-verify-install.png) 51 | 52 | ### STEP 7: Rejoice 53 | 54 | ![rejoicing-bart](img/bart.gif) 55 | -------------------------------------------------------------------------------- /week-5/cygwin-learners/install-sass.md: -------------------------------------------------------------------------------- 1 | # Install Sass with Cygwin 2 | 3 | ### STEP 1: Verify that you have Ruby Gems 4 | 5 | From your Cygwin command line, enter: 6 | 7 | ```bash 8 | gem -v 9 | ``` 10 | 11 | You should see the following output: 12 | 13 | ![verify-gem-install](img/cygwin-gem-verify-install.png) 14 | 15 | ### STEP 2: Install the Sass Gem 16 | 17 | Make sure you are in your Cygwin home directory (this is the directory that Cygwin opens in by default when you launch the Cygwin app). From the command line, enter: 18 | 19 | ```bash 20 | gem install sass 21 | ``` 22 | Your computer will ask you if you want to allow this installation. _Yes_, you do. 23 | 24 | ![Cygwin-allow-sass](img/cygwin-6-allow-sass.png) 25 | 26 | Cygwin will start installing Sass ... 27 | 28 | ![cygwin-installing-sass](img/cygwin-6-gem-install-sass.png) 29 | 30 | When the install is complete, Cygwin will output something like: 31 | 32 | `1 gem installed` 33 | 34 | ### STEP 3: Add the new **bin** directory to your `PATH` environment variable 35 | 36 | When we installed Sass, the Sass commands were all written to a new directory called **bin**. This directory is located in your Cygwin **home** directory. You can see this location by typing `pwd` on the Cygwin command line. The output will be: 37 | 38 | ```bash 39 | //home 40 | ``` 41 | This is where you are when you first launch the Cygwin application. 42 | 43 | Type `ls -a` and you will see a _hidden_ file called **.bash_profile**. We need to add some code to this file now to make sure that when we type Sass commands, Cygwin and your Windows operating system will recognize them. 44 | 45 | Using your code editor, open **C:cygwin\home\\.bash_profile**: 46 | 47 | ![cygwin-open-bashprofile](img/cygwin-open-bashprofile.png) 48 | 49 | Your **.bash_profile** file looks something like this . . . 50 | 51 | ```bash 52 | # To the extent possible under law, the author(s) have dedicated all 53 | # copyright and related and neighboring rights to this software to the 54 | # public domain worldwide. This software is distributed without any warranty. 55 | # You should have received a copy of the CC0 Public Domain Dedication along 56 | # with this software. 57 | # If not, see . 58 | ... 59 | ``` 60 | Lines beginning with `#` are comments. 61 | 62 | At about line 26 in your **.bash_profile**, add this code: 63 | 64 | ```bash 65 | PATH=~/bin:$PATH 66 | ``` 67 | 68 | Then save your **.bash_profile**, close your Cygwin application and relaunch it. When you relaunch Cygwin, the new code will be executed and you will have access to Sass commands from the command line. If you'd like to see a complete copy of the **.bash_profile** file for reference, [click here](.bash_profile). 69 | 70 | ### STEP 4: Verify that Sass Commands are Working 71 | 72 | From your command line, enter the following command to verify that Sass is ready to go: 73 | 74 | ```bash 75 | sass -v 76 | ``` 77 | The output should be: 78 | 79 | ```bash 80 | Sass 3.4.22 (Selective Steve) 81 | ``` 82 | ### STEP 5: Follow the week 5 project instructions as before! 83 | 84 | Nice work! 85 | 86 | ![lisa-at-computer](img/lisa.gif) 87 | -------------------------------------------------------------------------------- /week-6/README.md: -------------------------------------------------------------------------------- 1 | # Week 6 Resources 2 | 3 | ### AWS Route 53 Video 4 | 5 | [Introduction to Route 53](https://www.youtube.com/watch?v=Nm69KMWwH7s) 6 | 7 | *NOTE*: Just watch the first 3 minutes. After that, instructions vary from our curriculum and include additional Route 53 features that we're not using. 8 | 9 | ### Week 6 Seminar Slide Deck 10 | 11 | [Deploying Your Project](https://goo.gl/kcHZAI) 12 | -------------------------------------------------------------------------------- /week-7/README.md: -------------------------------------------------------------------------------- 1 | # Intro to JS Resources 2 | 3 | ## Terminology 4 | 5 | This week we'll introduce you to some new terms. Here's an overview of what they mean: 6 | 7 | **Vanilla JS**: Vanilla JS or even just "vanilla" refers to regular, plain ol' JavaScript (as opposed to jQuery, which we'll get to in a second). JavaScript is a programming language that is built into your browser, so it can interpret your programs and run the code when the user loads a page. Vanilla JS is just JavaScript. 8 | 9 | **jQuery**: jQuery is a JavaScript library that lets us "do more and write less" JavaScript. It needs to be included as an external script in your HTML file in order to run. When you include it in your project code, jQuery provides a "wrapper" around vanilla JS, giving you access to different jQuery methods that simplify their vanilla counterparts. 10 | 11 | **DOM**: DOM stands for Document Object Model. The DOM is the way that your browser interprets HTML and makes it available to JavaScript. The DOM is not its own programming language, but rather just refers to a standardized way for JavaScript to interact with HTML in browsers. 12 | 13 | **Node**: In the DOM, each HTML element is referred to as a node. 14 | 15 | **NodeJS**: This is different from a DOM node! NodeJS is a JavaScript framework that lets you write server-side code in JavaScript. We won't be covering it in this class, but it's worth mentioning here just for the sake of distinguishing NodeJS from DOM nodes. 16 | 17 | ## Resources 18 | 19 | For a thorough introduction to vanilla JavaScript, checkout the [JavaScript Basics explainer/tutorial, via Mozilla](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/JavaScript_basics) 20 | 21 | A list of all of your common (and even some uncommon) [HTML Events](http://www.w3schools.com/jsref/dom_obj_event.asp) 22 | 23 | Get the link to [jQuery on a CDN](https://code.jquery.com/) or download it [here](https://jquery.com/download/). 24 | 25 | jQuery Docs: A great resource for all of the [basic jQuery methods](https://api.jquery.com/). 26 | 27 | jQuery Docs: [Events Tutorial](http://learn.jquery.com/events/) 28 | 29 | jQuery is a library that sits on top of JavaScript and gives you access to many different methods that streamline the process of writing JavaScript. But there are some cases where jQuery could actually detract from the performance of your site, and it would behoove you to "go vanilla." [You Might Not Need jQuery](http://youmightnotneedjquery.com/) has a list of the basic jQuery methods and their vanilla counterparts; looking at it side by side, you realize that vanilla JS isn't so scary after all! 30 | 31 | It's fine to be more comfortable with jQuery than with vanilla JS, but if you need to go vanilla for one reason or another, definitely check out Chris Ferdinandi's awesome explainer about [how he ditched jQuery](https://gomakethings.com/ditching-jquery/). 32 | -------------------------------------------------------------------------------- /week-8/API-calls/jQuery-AJAX/jquery_example.js: -------------------------------------------------------------------------------- 1 | $( document ).ready( function(){ 2 | var URL = "https://newsapi.org/v1/articles?source=associated-press&sortBy=latest&apiKey=9f5d59f500ea4ddb8bc1ba9fab55c64e"; 3 | $.ajax({ 4 | url: URL, 5 | method: "GET", 6 | success: function( data ){ 7 | var articles = data.articles; 8 | for(var i = 0; i < articles.length; i ++){ 9 | var articleTitle = $('

').text( articles[i].title ); 10 | var description = $('

').text( articles[i].description ); 11 | var readMoreLink = $('Read More').attr('href', articles[i].url); 12 | $('#stories').append(articleTitle, description, readMoreLink); 13 | } 14 | }, 15 | fail: function( error ){ 16 | console.error( error ); 17 | } 18 | }); 19 | }); 20 | -------------------------------------------------------------------------------- /week-8/API-calls/jQuery-AJAX/main.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Baloo+Bhaina'; 2 | html, body { 3 | font-family: 'Baloo Bhaina', cursive; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | header { 9 | background-color: #FFF77D; 10 | display: flex; 11 | justify-content: space-between; 12 | } 13 | 14 | header h1 { 15 | font-size: 1.5em; 16 | } 17 | 18 | .logo { 19 | margin-left: 2%; 20 | } 21 | 22 | header nav { 23 | display: flex; 24 | align-items: center; 25 | min-width: 20%; 26 | } 27 | 28 | header nav p { 29 | min-width: 50%; 30 | } 31 | 32 | .main { 33 | background: url(robot.png) center; 34 | background-size: contain; 35 | height: 350px; 36 | } 37 | 38 | #stories { 39 | min-height: 300px; 40 | background-color: #6bf2d5; 41 | padding: 20px 40px; 42 | } 43 | 44 | #stories p, #stories h4, #stories h3 { 45 | margin: 0; 46 | } 47 | 48 | #stories .stories-heading { 49 | color: white; 50 | font-size: 3em; 51 | text-shadow: 2px 2px gray; 52 | text-transform: capitalize; 53 | } 54 | 55 | #stories p { 56 | font-family: monospace; 57 | } 58 | 59 | 60 | footer { 61 | color: white; 62 | background: black; 63 | text-align: center; 64 | height: 150px; 65 | display: flex; 66 | flex-direction: column; 67 | justify-content: center; 68 | } 69 | -------------------------------------------------------------------------------- /week-8/API-calls/jQuery-AJAX/newsapi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 12 | 16 |
17 |
18 |
19 |
20 |

What's in the News?

21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /week-8/API-calls/jQuery-AJAX/newsapi.js: -------------------------------------------------------------------------------- 1 | var API_KEY = "9f5d59f500ea4ddb8bc1ba9fab55c64e"; 2 | var URL = "https://newsapi.org/v1/articles?source=associated-press&sortBy=latest&apiKey=9f5d59f500ea4ddb8bc1ba9fab55c64e"; 3 | 4 | var request = new XMLHttpRequest(); 5 | 6 | request.addEventListener('load', function(){ 7 | document.getElementById('stories') 8 | .innerHTML = this.response; 9 | 10 | }); 11 | 12 | request.open('GET', URL); 13 | request.send( ); 14 | -------------------------------------------------------------------------------- /week-8/API-calls/jQuery-AJAX/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-8/API-calls/jQuery-AJAX/robot.png -------------------------------------------------------------------------------- /week-8/API-calls/vanilla-js-AJAX/jquery_example.js: -------------------------------------------------------------------------------- 1 | $( document ).ready( function(){ 2 | $.ajax({ 3 | url: URL, 4 | method: "GET", 5 | success: function( data ){ 6 | 7 | }, 8 | fail: function( error ){ 9 | 10 | } 11 | }); 12 | }); 13 | -------------------------------------------------------------------------------- /week-8/API-calls/vanilla-js-AJAX/main.css: -------------------------------------------------------------------------------- 1 | @import 'https://fonts.googleapis.com/css?family=Baloo+Bhaina'; 2 | html, body { 3 | font-family: 'Baloo Bhaina', cursive; 4 | margin: 0; 5 | padding: 0; 6 | } 7 | 8 | header { 9 | background-color: #FFF77D; 10 | display: flex; 11 | justify-content: space-between; 12 | } 13 | 14 | header h1 { 15 | font-size: 1.5em; 16 | } 17 | 18 | .logo { 19 | margin-left: 2%; 20 | } 21 | 22 | header nav { 23 | display: flex; 24 | align-items: center; 25 | min-width: 20%; 26 | } 27 | 28 | header nav p { 29 | min-width: 50%; 30 | } 31 | 32 | .main { 33 | background: url(robot.png) center; 34 | background-size: contain; 35 | height: 350px; 36 | } 37 | 38 | #stories { 39 | min-height: 300px; 40 | background-color: #6bf2d5; 41 | padding: 20px 40px; 42 | } 43 | 44 | #stories p, #stories h4, #stories h3 { 45 | margin: 0; 46 | } 47 | #stories .stories-heading { 48 | color: white; 49 | font-size: 3em; 50 | text-shadow: 2px 2px gray; 51 | text-transform: capitalize; 52 | } 53 | 54 | 55 | #stories p { 56 | font-family: monospace; 57 | } 58 | 59 | footer { 60 | color: white; 61 | background: black; 62 | text-align: center; 63 | height: 150px; 64 | display: flex; 65 | flex-direction: column; 66 | justify-content: center; 67 | } 68 | -------------------------------------------------------------------------------- /week-8/API-calls/vanilla-js-AJAX/newsapi.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 11 | 15 |
16 |
17 |
18 |
19 |

What's in the News?

20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /week-8/API-calls/vanilla-js-AJAX/newsapi.js: -------------------------------------------------------------------------------- 1 | var API_KEY = "9f5d59f500ea4ddb8bc1ba9fab55c64e"; 2 | var URL = "https://newsapi.org/v1/articles?source=associated-press&sortBy=latest&apiKey=9f5d59f500ea4ddb8bc1ba9fab55c64e"; 3 | 4 | var request = new XMLHttpRequest(); 5 | 6 | request.addEventListener('load', function(){ 7 | var jsonObject = JSON.parse( this.response ); 8 | var articles = jsonObject.articles; 9 | var storiesDiv = document.getElementById('stories'); 10 | for(var i = 0; i < articles.length; i ++){ 11 | storiesDiv.innerHTML += "

" + articles[i].title + "

"; 12 | storiesDiv.innerHTML += "

" + articles[i].description + "

"; 13 | storiesDiv.innerHTML += "Read more"; 14 | } 15 | }); 16 | 17 | request.open('GET', URL); 18 | request.send( ); 19 | -------------------------------------------------------------------------------- /week-8/API-calls/vanilla-js-AJAX/robot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/msteffan/learn-to-code-resources/33e27b8ee03d6730602a8e920af544d7e0720c83/week-8/API-calls/vanilla-js-AJAX/robot.png -------------------------------------------------------------------------------- /week-8/README.md: -------------------------------------------------------------------------------- 1 | # Week 8 Resources 2 | 3 | ### JavaScript Objects and Working with APIs 4 | 5 | [Link to Dan's Seminar Slides](https://goo.gl/bk6Q3j) 6 | --------------------------------------------------------------------------------