├── .travis.yml ├── README.md ├── images ├── atom.png ├── clone.png ├── cloneterminal.png ├── fork.png ├── ruleset.png ├── terminal.png ├── voila.png └── website1.png ├── site1 └── index.html ├── site2 └── index.html └── site3 └── index.html /.travis.yml: -------------------------------------------------------------------------------- 1 | deploy: 2 | provider: pages 3 | skip-cleanup: true 4 | github-token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variable 5 | keep-history: true 6 | on: 7 | branch: master -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sdr-code-camp 2 | learn you some code! 3 | 4 | ## Build and deploy a website 5 | 6 | ### Setup 7 | 8 | Before you can begin, make sure you go download the following: 9 | 10 | * [GitHub Desktop](https://desktop.github.com/) 11 | * [Atom IDE](https://ide.atom.io/) 12 | 13 | Once you’ve done that, you’ll need to fork the [sdr-code-camp](https://github.com/pravipati/sdr-code-camp) repo. Be sure to fork it under your username! 14 | 15 | ![](images/fork.png) 16 | 17 | ### Getting to know your Terminal 18 | 19 | Great! You’re all set up now. 20 | 21 | ![](images/terminal.png) 22 | 23 | Have you seen this before? If not have no fear! It’s just your friendly computer terminal. 24 | 25 | > Peeling back the onion: most of the time when you use your computer, you’re clicking around on different menus, icons, or applications; all of these are a part of the GUI, or the _graphical user interface_. The terminal has what is known as a CLI, or a _command-line interface_. There’s tradeoffs with using either interface—the GUI makes it really easy to run a bunch of different tasks in parallel and, generally speaking, keeps you within the confines of how a particular application was designed. Conversely, a CLI is trickier when it comes to running multiple tasks at the same time, but you can re-imagine how apps function and customize the inputs or outputs to suite your specific needs. A great analogy for GUI vs. CLI would be automatic vs. manual mode on a camera. A good amount of the time automatic mode will help you get a decent photograph and while it’s very rare that you will get a totally unusable photo, you often might find that the final photo didn’t match what you were going for. With manual mode, there’s more of a learning curve so in the beginning your photo quality will suffer. With a little practice though, you’ll be able to take pictures that truly surpass what you were able to do with full Auto. 26 | 27 | To find your terminal, hold the `⌘` button and press your spacebar. Once the spotlight search comes up, type in `Terminal` and press `Enter`. 28 | 29 | Great! Now you have access to your Terminal’s prompt. At this point you can run commands in your terminal to do things. 30 | 31 | **Definition**: **Commands**: A command is an instruction given by a user telling a computer to do something, such as run a single program or a group of linked programs. 32 | 33 | > Protip: if you’re curious to learn more about what a command in this tutorial means, type in `man [COMMAND]` swapping about `[COMMAND]` with the name of the command you want to learn more, i.e. `man ls`. The terminal will take you into the manual page for that command which you can scroll through using `j` and `k`. Once you’re done, type `q`. 34 | 35 | #### Command Cheat Sheet 36 | 37 | **Core Commands** 38 | 39 | | Command | Description| 40 | |---------|-------------| 41 | | cd | Home directory | 42 | | cd [folder] | Change directory | 43 | | cd ~ | Home directory, e.g. 'cd ~/folder/' | 44 | | cd / | Root of drive | 45 | | ls | Short listing | 46 | | ls -l | Long listing | 47 | | ls -a | Listing incl. hidden files | 48 | | ls -lh | Long listing with Human readable file sizes | 49 | | ls -R | Entire content of folder recursively | 50 | | sudo [command] | Run command with the security privileges of the superuser (Super User DO) | 51 | | open [file] | Opens a file | 52 | | open . | Opens the directory | 53 | | top | Displays active processes. Press q to quit | 54 | | nano [file] | Opens the Terminal it's editor | 55 | | pico [file] | Opens the Terminal it's editor | 56 | | q | Exit | 57 | | clear | Clear screen | 58 | 59 | **File Management** 60 | 61 | | Command | Description| 62 | |---------|-------------| 63 | | touch [file] | Create new file | 64 | | pwd | Full path to working directory | 65 | | .. | Parent/enclosing directory, e.g. | 66 | | ls -l .. | Long listing of parent directory | 67 | | cd ../../ | Move 2 levels up | 68 | | . | Current folder | 69 | | cat | Concatenate to screen | 70 | | rm [file] | Remove a file, e.g. rm [file] [file] | 71 | | rm -i [file] | Remove with confirmation | 72 | | rm -r [dir] | Remove a directory and contents | 73 | | rm -f [file] | Force removal without confirmation | 74 | | rm -i [file] | Will display prompt before | 75 | | cp [file] [newfile] | Copy file to file | 76 | | cp [file] [dir] | Copy file to directory | 77 | | mv [file] [new filename] | Move/Rename, e.g. mv -v [file] [dir] | 78 | 79 | **Directory Management** 80 | 81 | | Command | Description| 82 | |---------|-------------| 83 | | mkdir [dir] | Create new directory | 84 | | mkdir -p [dir]/[dir] | Create nested directories | 85 | | rmdir [dir] | Remove directory ( only operates on empty directories ) | 86 | | rm -R [dir] | Remove directory and contents | 87 | 88 | Got all that? Great! Let’s build something now. 89 | 90 | Type in `cd ~/Desktop`. This will take you to the Desktop of your computer. If you type in `ls` you can get of everything on your Desktop (if there is anything there). 91 | 92 | Now that we’re there, let’s go ahead and clone the repository we forked locally to our computer. Go to the repository you forked in GitHub and click on the “Clone or Download” button to grab the clone link. _Note_: be sure that you click on “Use HTTPS”. 93 | 94 | ![](images/clone.png) 95 | 96 | Next, you’ll need to run the `git clone` command and paste the link as such: 97 | 98 | ![](images/cloneterminal.png) 99 | 100 | You should now have a folder titled `sdr-code-camp` on your Desktop. You could find it on your Desktop via your GUI but since we’re already in the CLI…try running `ls`. Depending on what’s in `~/Desktop` you may see several different things or you may just have the `sdr-code-camp` folder. If you have a lot of stuff on your Desktop (we’ve all been there) try running `ls | grep sdr`. Now you should be able to see that the `sdr-code-camp` folder does in fact live on your Desktop. For the curious: run `man grep` and ask me what `|` does. 101 | 102 | ### Opening your code in Atom 103 | 104 | Now that our code is in place (on our desktops) we can begin to interact with it and modify the existing codebase. In theory we just could use Notepad or any plain ol' text editor...so why bother with learning an entire new text editor? Well, the reasons are: 1) it's fun! 2) as you grow your skill level in programming, you'll find that any good text editor includes tools to help a developer with their day-to-day programming tasks. That's why text editors built for programmers are commonly known as _Integrated Development Environments_. It's also one of the reasons that choosing an IDE is such a personal event. 105 | 106 | Make sure that you're in the root directory for `sdr-code-camp` and run `atom .`. You should see: 107 | 108 | ![](images/atom.png) 109 | 110 | Use the menu on the left hand side to navigate around different files. The first file we're working with is the `index.html` file inside of the `site1` folder. Click on that file and you'll notice one of the first benefits of using an IDE: syntax highlighting. Atom is smart enough to recognize the language that you're programming in and highlights its syntax to make reading and checking for syntax errors a little bit easier. 111 | 112 | _Why `index.html`?_: this is just a convention—historically the root website that you want to show people is titled `index.html` 113 | 114 | ### What you're going to build 115 | 116 | You can really experiment with that you build for your website. Inside of the codebase, you'll find a template for adding information about 3 of your top targets, as well as some areas where you can add your strategy for how you will approach those top targets. Here's what it looks like at first: 117 | 118 | ![](images/website1.png) 119 | 120 | While the template already has a structure in place, feel free to add or subtract more detail by adding or subtracting more HTML elements. Here's a cheat sheet of other elements you can add, but remember, Google is also your friend. 121 | 122 | > Peeling the Onion: what exactly is HTML? HTML is more of a markup language that you can use to describe the structure of a "web document", or a page that you'd like to share over the web, to someone who is using a browser or other html-reader to view your document. For more information, check out the [HTML wiki page](https://en.wikipedia.org/wiki/HTML) 123 | 124 | When you're at a point where you'd like to see what your website looks like, go back to your terminal and type `open -a 'Google Chrome' site1/index.html`. As you make changes to your index.html page, you can just refresh your Chrome browser to see the updates in real time. 125 | 126 | 127 | ### HTML Cheat Sheet 128 | 129 | > Challenge: try adding a list, whether that is an `
    ` or `