├── LICENSE ├── images ├── shibe.png ├── box_model.png ├── cats_demo.png ├── grumpy_cat.png ├── breaks_html.png ├── colonel_meow.jpg ├── gallery_demo.png ├── github_signup.png ├── magenta_header.png ├── paragraphs_demo.png ├── paragraphs_html.png ├── two_cat_gallery.png ├── github_free_plan.png ├── visited_link_demo.png ├── github_public_repo.png ├── green_gallery_links.png ├── gallery_with_link_demo.png ├── github_new_repository.png ├── floated_two_cat_gallery.png ├── bolded_and_italicized_demo.png ├── github_new_repository_name.png ├── gallery_with_grumpy_cat_demo.png ├── gallery_with_linked_list_demo.png └── github_create_repository_instructions.jpg ├── typing.md ├── learn_vim.md ├── personal_website.md ├── dotfiles.md ├── README.md ├── learn_ruby.md ├── campfire.md ├── learn_more.md ├── the_terminal.md ├── git.md ├── basic_html.md ├── intermediate_css.md ├── basic_css.md └── intermediate_html.md /LICENSE: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /images/shibe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/shibe.png -------------------------------------------------------------------------------- /images/box_model.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/box_model.png -------------------------------------------------------------------------------- /images/cats_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/cats_demo.png -------------------------------------------------------------------------------- /images/grumpy_cat.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/grumpy_cat.png -------------------------------------------------------------------------------- /images/breaks_html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/breaks_html.png -------------------------------------------------------------------------------- /images/colonel_meow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/colonel_meow.jpg -------------------------------------------------------------------------------- /images/gallery_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/gallery_demo.png -------------------------------------------------------------------------------- /images/github_signup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/github_signup.png -------------------------------------------------------------------------------- /images/magenta_header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/magenta_header.png -------------------------------------------------------------------------------- /images/paragraphs_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/paragraphs_demo.png -------------------------------------------------------------------------------- /images/paragraphs_html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/paragraphs_html.png -------------------------------------------------------------------------------- /images/two_cat_gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/two_cat_gallery.png -------------------------------------------------------------------------------- /images/github_free_plan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/github_free_plan.png -------------------------------------------------------------------------------- /images/visited_link_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/visited_link_demo.png -------------------------------------------------------------------------------- /images/github_public_repo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/github_public_repo.png -------------------------------------------------------------------------------- /images/green_gallery_links.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/green_gallery_links.png -------------------------------------------------------------------------------- /images/gallery_with_link_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/gallery_with_link_demo.png -------------------------------------------------------------------------------- /images/github_new_repository.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/github_new_repository.png -------------------------------------------------------------------------------- /images/floated_two_cat_gallery.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/floated_two_cat_gallery.png -------------------------------------------------------------------------------- /images/bolded_and_italicized_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/bolded_and_italicized_demo.png -------------------------------------------------------------------------------- /images/github_new_repository_name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/github_new_repository_name.png -------------------------------------------------------------------------------- /images/gallery_with_grumpy_cat_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/gallery_with_grumpy_cat_demo.png -------------------------------------------------------------------------------- /images/gallery_with_linked_list_demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/gallery_with_linked_list_demo.png -------------------------------------------------------------------------------- /images/github_create_repository_instructions.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/house/prework/master/images/github_create_repository_instructions.jpg -------------------------------------------------------------------------------- /typing.md: -------------------------------------------------------------------------------- 1 | # Typing 2 | 3 | You are going to be doing a lot of typing in this class and beyond. We expect 4 | everybody coming into the class to be able to type at least 50 words/minute 5 | without looking at the keyboard. Please [test your typing 6 | speed](http://typeonline.co.uk/typingspeed.php). If you are below 50 wpm, 7 | practice touch typing with [keybr](http://www.keybr.com/), 8 | [typeracer](http://play.typeracer.com/), or 9 | [typing.io](http://typing.io/lesson/ruby/rails/relation.rb/1) until you can type 10 | at least 50 wpm. 11 | -------------------------------------------------------------------------------- /learn_vim.md: -------------------------------------------------------------------------------- 1 | # Learn Vim 2 | 3 | Vim is a popular text editor for programming. While it is not required by any 4 | means, we find that once you get over the hurdle of learning it, you will be 5 | much more efficient when using it. If you want to start getting familiar with 6 | it before class starts, we recommend running `vimtutor` from the command line. 7 | It will take about 30 minutes to go through. 8 | 9 | Then read [Movin' and Shakin'](http://robots.thoughtbot.com/movin-and-shakin). 10 | 11 | Please use Vim to complete assignments in the rest of the prework. Reference the 12 | [Vim Cheatsheet](http://www.fprintf.net/vimCheatSheet.html) or the [graphical 13 | version](http://www.viemu.com/vi-vim-cheat-sheet.gif) if you forget a command. 14 | 15 | As always, hit us up in Campfire if you need assistance with anything. 16 | -------------------------------------------------------------------------------- /personal_website.md: -------------------------------------------------------------------------------- 1 | ## Personal Website 2 | 3 | Using what you have learned, you are now going to create a personal website for 4 | yourself. Your website should have a paragraph about yourself as well as a 5 | picture and some ways of contacting you either via email or social network 6 | links. Use some CSS in an external file to make the page look nice. Make sure to 7 | validate your website. 8 | 9 | To begin, create a git repository called `username.github.io`, where `username` 10 | is your GitHub username. Consistently commit and push your code to GitHub to 11 | ensure you do not lose your work. When you are done, you'll have a live website 12 | at `username.github.io` that you can share with your friends and family thanks 13 | to [GitHub Pages]! 14 | 15 | Please drop us the link in Campfire when you are done so we can take a peek and 16 | give you feedback. 17 | 18 | [GitHub Pages]: https://pages.github.com/ 19 | -------------------------------------------------------------------------------- /dotfiles.md: -------------------------------------------------------------------------------- 1 | # Dotfiles 2 | 3 | Dotfiles are files who's names begin with a `.` and are used to configure 4 | various programs such as Git, the Terminal shell, and Vim (a text editor you'll 5 | learn about soon). Many developers maintain their own set of dotfiles to 6 | customize the way they interact with these programs, but to keep things simple 7 | you are going to use the dotfiles maintained by the fine folks at thoughtbot. 8 | Once you set them up, your environment will be much easier to use and attractive 9 | to look at. 10 | 11 | First, read and follow the instructions for installing thoughtbot's [laptop 12 | script](https://github.com/thoughtbot/laptop). This will install various 13 | programs that you will need for the dotfiles and general Ruby development. 14 | 15 | Next, read and follow the instructions for installing thoughtbot's 16 | [dotfiles](https://github.com/thoughtbot/dotfiles). Before cloning (the first 17 | step in the instructions), `cd` into your home directory: 18 | 19 | cd ~ 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Metis Prework 2 | 3 | Congratulations, and welcome to Metis! There is some work to be done before the 4 | first day of class. Over the course of the prework, you'll build an HTML page, 5 | read a book about Ruby, and write some Ruby programs. Please keep the 6 | instructors up to date with your progress in Campfire, and let us know if you 7 | have any questions. 8 | 9 | 1. [Campfire](campfire.md): about 5 minutes 10 | 1. [Typing](typing.md): 2 minutes or more (depends on your typing proficiency) 11 | 1. [The Terminal](the_terminal.md): about 1 hour 12 | 1. [Git](git.md): about 1 hour 13 | 1. [Dotfiles](dotfiles.md): about 30 minutes 14 | 1. [Learn Vim](learn_vim.md): about 30 minutes 15 | 1. [Basic HTML](basic_html.md): about 1 hour 16 | 1. [Intermediate HTML](intermediate_html.md): about 1 hour 17 | 1. [Basic CSS](basic_css.md): about 1 hour 18 | 1. [Intermediate CSS](intermediate_css.md): about 1 hour 19 | 1. [Personal Website](personal_website.md): about 4 hours 20 | 1. [Learn Ruby](learn_ruby.md): about 20 hours 21 | 1. [Learn more](learn_more.md): optional 22 | -------------------------------------------------------------------------------- /learn_ruby.md: -------------------------------------------------------------------------------- 1 | # Learn Ruby 2 | 3 | Work through the [Learn to Program Book][learn_to_program] by Chris Pine (use 4 | the free online version) and complete all of the example programs. It is worth 5 | noting that this book was originally written around 2002 and references an older 6 | version of Ruby. No worries though as the current version of Ruby is backwards 7 | compatible and you will be able to use your modern version of Ruby and follow 8 | along with the book. 9 | 10 | As you work through the [Learn to Program Book][learn_to_program] please commit 11 | your work to GitHub and ask questions in Campfire if you run into any problems. 12 | 13 | [cpu]: http://en.wikipedia.org/wiki/Central_processing_unit 14 | [instructions]: http://en.wikipedia.org/wiki/Instruction_(computer_science) 15 | [interpreted_language]: http://en.wikipedia.org/wiki/Interpreted_language 16 | [oo]: http://en.wikipedia.org/wiki/Object-oriented_programming 17 | [matsumotosan]: http://en.wikipedia.org/wiki/Yukihiro_Matsumoto 18 | [dhh]: http://david.heinemeierhansson.com/ 19 | [hello_world_program]: http://en.wikipedia.org/wiki/Hello_world_program 20 | [string]: http://en.wikipedia.org/wiki/String_(computer_science) 21 | [learn_to_program]: https://pine.fm/LearnToProgram/ 22 | -------------------------------------------------------------------------------- /campfire.md: -------------------------------------------------------------------------------- 1 | # Campfire 2 | 3 | We will be using Campfire extensively throughout the class. While you are 4 | welcome to use the web interface, we prefer using native OS X clients to get the 5 | most out of Campfire. Download one of the following and say "hello". Be sure to 6 | [upload an avatar] so it's easy to see who everyone is at a glance. 7 | 8 | ## Clients 9 | 10 | [Flint] is our favorite. It's $8 in the Mac App store. 11 | 12 | [Propane] is free to try, but will prompt you to buy it regularly unless you pay 13 | $20. You can continue using the free version if you don't want to pay. 14 | 15 | [Kindling] is an extension for Chrome. If you are not on OS X you should try this. 16 | 17 | ## Rooms 18 | 19 | You will have access to a few rooms, each serving a different purpose: 20 | 21 | 1. Your cohort's private room. Used for class specific discussions. 22 | 1. Code. The best place to get answers to any code related questions. This room 23 | hosts current and past instructors and students, all eager to help you out 24 | with any questions you have. No question is too basic. Many students were in 25 | your shoes months/weeks ago. If you know the answer to something, don't hesitate 26 | to give advice. Please keep all discussion related to code. Tangential 27 | conversations should quickly move to Watercooler. 28 | 1. Watercooler. A place for gifs, discussion between cohorts, and other 29 | shenanigans. Please keep all conversation work safe. 30 | 31 | [upload an avatar]: https://metis7.campfirenow.com/identity/edit 32 | [Flint]: http://giantcomet.com/flint/mac/ 33 | [Propane]: http://propaneapp.com/ 34 | [Kindling]: https://chrome.google.com/webstore/detail/kindling-for-campfire/abnakpmgckdkcpgbcejajjbllagggcif?hl=en-US 35 | -------------------------------------------------------------------------------- /learn_more.md: -------------------------------------------------------------------------------- 1 | # Learn more 2 | 3 | If you would like to further your learning before class begins, here are some of 4 | our favorite resources around the web: 5 | 6 | ## HTML & CSS 7 | 8 | * [CSS Vocabulary]: An interactive CSS vocab cheat sheet 9 | * [A Beginner’s Guide To HTML & CSS]: A more in depth guide to 10 | learning HTML & CSS. Covers many subjects we did not cover in the pre-work 11 | * [CSS Diner]: An interactive tutorial on CSS selectors 12 | * [Learn CSS Layout]: A guide to laying out elements with CSS 13 | * [W3Schools CSS Properties]: A list of available CSS properties 14 | * [W3Schools CSS Selectors]: A list of CSS selector patterns 15 | 16 | [CSS Vocabulary]: http://pumpula.net/p/apps/css-vocabulary/ 17 | [A Beginner’s Guide To HTML & CSS]: http://learn.shayhowe.com/html-css/ 18 | [CSS Diner]: http://flukeout.github.io/ 19 | [Learn CSS Layout]: http://learnlayout.com/ 20 | [W3Schools CSS Properties]: http://www.w3schools.com/cssref/default.asp 21 | [W3Schools CSS Selectors]: http://www.w3schools.com/cssref/css_selectors.asp 22 | 23 | ## Ruby 24 | 25 | * [Codecademy]: Students love this interactive guide to Ruby 26 | * [Eloquent Ruby]: This is our favorite book on Ruby, and we recommend everyone 27 | read it by the time class is over. Why not start now? 28 | 29 | [Codecademy]: http://www.codecademy.com/tracks/ruby 30 | [Eloquent Ruby]: http://www.amazon.com/Eloquent-Ruby-Addison-Wesley-Professional-Series/dp/0321584104 31 | 32 | ## Vim 33 | 34 | * [Vim Introduction and Tutorial]: A good overview of Vim 35 | * [Vim Tutorial Videos]: Comprehensive video tutorials on Vim 36 | * [Vim Cheat Sheet]: Covers the most commonly used Vim commands 37 | 38 | [Vim Introduction and Tutorial]: http://blog.interlinked.org/tutorials/vim_tutorial.html 39 | [Vim Tutorial Videos]: http://derekwyatt.org/vim/tutorials/ 40 | [Vim Cheat Sheet]: http://www.worldtimzone.com/res/vi.html 41 | -------------------------------------------------------------------------------- /the_terminal.md: -------------------------------------------------------------------------------- 1 | # The Terminal 2 | 3 | The terminal provides you with quick access to things normally provided by your 4 | file manager, like Finder.app, and will allow us to manage both directories 5 | (folders) and files. 6 | 7 | On OSX, you can find your terminal at `Applications > Utilities > Terminal`. 8 | 9 | On Ubuntu, you can find your terminal at `Applications > Accessories > Terminal`. 10 | 11 | It might be worth pinning it to your dock, as you will be using it frequently 12 | over the course of this class. 13 | 14 | When you run a terminal program, you’ll typically be provided with a prompt 15 | followed by a cursor where you can type different commands. Here are some of the 16 | commands you should familiarize yourself with: 17 | 18 | `pwd`: “print working directory” displays the name of the current directory 19 | terminal is running under. Try it out by opening a terminal and typing: 20 | 21 | pwd 22 | 23 | `mkdir`: “make directory” creates a new directory under the current directory. Try 24 | it out by creating a directory named “test”: 25 | 26 | mkdir test 27 | 28 | `ls`: “list” displays the names of all the files and directories under the current 29 | directory. Try it out by typing: 30 | 31 | ls 32 | 33 | You should see our `test` directory as well as any other files and directories 34 | that were in your current directory. 35 | 36 | `cd`: “change directory” allows you to change the current directory. Try it out by 37 | typing: 38 | 39 | cd test 40 | 41 | followed by: 42 | 43 | pwd 44 | 45 | You should now be inside the test directory. Now let’s go back up a directory by 46 | typing: 47 | 48 | cd .. 49 | 50 | The `..` is used to specify the directory above the current directory. `..` is 51 | also known as a relative path. A relative path is any path that you reference 52 | without putting a `/` at the beginning of the directory name. When you add the 53 | `/` at the beginning of a directory name you’re telling your terminal to use an 54 | absolute path. An absolute path starts from the “root” directory. The “root” 55 | directory is the top most directory that will contain every other file and 56 | directory inside of it or one of it’s directories. You’ll typically find that 57 | you’ll use relative paths far more often than absolute paths. 58 | 59 | `mv`: “move” will change the name of a file or directory. Try it out by typing: 60 | 61 | mv test testing 62 | 63 | followed by: 64 | 65 | ls 66 | 67 | You should see that the `test` directory has been renamed to `testing` 68 | 69 | `rm`: “remove” will delete a file or directory. Try it out by typing: 70 | 71 | rm testing 72 | 73 | Whoops, you should see `rm: testing: is a directory`. In order to delete 74 | directories we need to tell `rm` to delete recursively. In other words, for 75 | directories it needs to make sure to delete everything inside the directory. 76 | While our directory is currently empty we’ll still need to delete recursively. 77 | We can do this by using the `-r` flag. Flags are usually prefixed with a `-` and 78 | they change the way a program will run. In this case the `-r` flag allows `rm` 79 | to remove a directory. 80 | 81 | rm -r testing 82 | 83 | Then if you type: 84 | 85 | ls 86 | 87 | you’ll see that the testing directory has been removed. 88 | -------------------------------------------------------------------------------- /git.md: -------------------------------------------------------------------------------- 1 | # Git 2 | 3 | Git is a source content management (or SCM) tool that allows you to do revision 4 | control. In short, it allows you to keep track of changes you make to your files 5 | and easily share them with other developers. Revision control is essential to 6 | managing and collaborating on code and Git is one of the most popular tools for 7 | handling it. 8 | 9 | We’ll be using Git for both the prework and class itself. We’ll be storing our 10 | code using the online service [GitHub][github]. GitHub is a free platform for creating 11 | Git repositories and sharing them with other developers. 12 | 13 | To get started, you will need to install Git which you can download 14 | from http://git-scm.com/downloads if you are using OSX. If you are using Ubuntu, 15 | Git can be installed by running 16 | 17 | sudo apt-get install git-core 18 | 19 | After you have installed Git, you should run the following commands to set up 20 | your Git user: 21 | 22 | git config --global user.email "Your email address" 23 | git config --global user.name "Your Name" 24 | 25 | This step is necessary because Git will need to record who made changes to the 26 | files. 27 | 28 | ## GitHub 29 | 30 | After installing Git you will need to create a GitHub account. If you don’t 31 | already have an account, visit https://github.com/ and sign up. 32 | 33 | ![GitHub Sign Up][github_signup] 34 | 35 | Make sure you select the free plan and leave “Help me setup an organization 36 | next” unchecked. 37 | 38 | ![GitHub Free Plan][github_free_plan] 39 | 40 | Once you’ve finished signing up, click the “New repository button” 41 | 42 | ![GitHub New Repository][github_new_repository] 43 | 44 | Fill in the repository name with Metis Prework. 45 | 46 | ![GitHub New Repository Name][github_new_repository_name] 47 | 48 | Make sure it’s public. 49 | 50 | ![GitHub Public Repo][github_public_repo] 51 | 52 | Make sure “Initialize this respository with a README” is unchecked and click 53 | “Create repository” 54 | 55 | You’ll need to open “Terminal.app” on OSX or “Terminal” on Ubuntu to 56 | perform the following steps. It is suggested you perform these steps in a 57 | specific directory. In your terminal, run: 58 | 59 | cd ~ 60 | mkdir metis_prework 61 | cd metis_prework 62 | 63 | and then follow the instruction listed under: 64 | 65 | ![GitHub Create Repository Instructions][github_create_repository_instructions] 66 | 67 | When using git you will typically type `git` followed by the command you want to 68 | run. Let’s briefly review the commands GitHub had us run: 69 | 70 | `init`: Sets up the current directory to be useable by Git. You will always need 71 | to perform this first when you create your own git repository. If you are 72 | “cloning” someone elses repository you will not need to run “init”. 73 | 74 | `add`: “Stages” files. Running this command tells Git which files you want to 75 | commit. Only committed models will be pushed to GitHub when we call push later. 76 | 77 | `commit -m "first commit"`: Commits the files we’ve staged. We use the “-m” which 78 | is called a flag followed by “first commit” to provide a message with the 79 | commit. Messages are a good way of telling why you’ve made a change. 80 | 81 | `remote add origin URL`: Sets up our repository to be able to push to GitHub. 82 | We’ve called the remote repository “origin” which is located at the URL, but we 83 | could have named this anything. You will only need to do this once. 84 | 85 | `push -u origin master`: Sends our code to GitHub. Origin is the name of the 86 | remote and master is the branch we want to push to. You can think of the master 87 | branch as the “main” branch. While you can have additional branches let’s just 88 | focus on master for now. Also you can ignore the “-u” flag for now. 89 | 90 | [github]: https://github.com/ 91 | [github_signup]: images/github_signup.png 92 | [github_free_plan]: images/github_free_plan.png 93 | [github_new_repository]: images/github_new_repository.png 94 | [github_new_repository_name]: images/github_new_repository_name.png 95 | [github_public_repo]: images/github_public_repo.png 96 | [github_create_repository_instructions]: images/github_create_repository_instructions.jpg 97 | -------------------------------------------------------------------------------- /basic_html.md: -------------------------------------------------------------------------------- 1 | # Basic HTML 2 | 3 | Your first step into learning web development is to learn HTML. HTML stands for 4 | HyperText Markup Language and while this sounds like a complicated term it’s a 5 | very simple way for you to create web pages. The term HyperText means that you 6 | have a collection of documents with “hyperlinks” between the documents. When 7 | talking about web pages, these “hyperlinks” are the links you click on a page to 8 | get to a different page. A markup language is a way to annotate a document to 9 | provide it with formatting like bold or italic text. So altogether we have pages 10 | or “documents” that we can markup and link together. Here is a very simple HTML 11 | example. 12 | 13 |

A paragraph with bold and italic text

14 | 15 | The first thing to notice in the HTML above are the tags. A tag in HTML starts 16 | with `<` and ends with `>`. At the beginning of our HTML we have `

` which is 17 | known as a paragraph tag. We know this because it has a `p` between the `<` and 18 | `>`. A tag’s type is always determined by the text at the start of the tag - for 19 | instance we also have a `` or “bold” tag and a `` or “italic” tag. 20 | 21 | Aside from the tags we’ve mentioned, you’ll note that there are tags that 22 | include a `/` at the beginning of the tag. These are known as closing tags and 23 | they tell the browser to stop formatting the text according to that tag. This 24 | allows us to stop bolding the text after the word “bold”. Similarly we do the 25 | same thing with the italic tag and paragraph tag. 26 | 27 | You will find that while most HTML tags contain both an open and close tag, some 28 | tags will not: 29 | 30 |

This paragraph has a newline or “break”
Inside of it

31 | 32 | Tags that only have an open tag typically are used for creating one-off elements 33 | on the page, like the `
` tag which will break up lines of text. 34 | 35 | Let’s create a simple page using what we’ve learned so far. Within the 36 | `metis_prework` directory you created in [Part 1][part_1], create a file called 37 | `index.html` and add the following text to it: 38 | 39 |

A photo gallery application

40 | 41 | When you open this in the browser, either by double-clicking on the `index.html` 42 | file or dragging it on top of your browser, you should see a paragraph with the 43 | text “photo” bolded. Now that you’ve written an HTML page see if you can 44 | recreate the following pages within the `metis_prework` directory: 45 | 46 | filename: paragraphs.html 47 | requirements: Do not use a break tag. 48 | 49 | ![paragraphs.html][paragraphs_html] 50 | 51 | filename: breaks.html 52 | requirements: Only use one paragraph tag 53 | 54 | ![breaks.html][breaks_html] 55 | 56 | Congratulations on making your first HTML pages! Take a look in a browser to 57 | make sure everything came out as expected. If everything looks good, ensure you 58 | are in the correct directory, and commit these to GitHub: 59 | 60 | git add index.html paragraphs.html breaks.html 61 | git commit -m "My first pages." 62 | git push origin master 63 | 64 | ## Structuring an HTML document 65 | 66 | While the browser has rendered our pages correctly, our HTML pages are actually 67 | incomplete. The browser will typically try to “fix” our pages for us which is 68 | why we’re able to see the content. If we want to make valid pages, we need to 69 | add a bit more information about our document. Looking back at our first 70 | example, a valid HTML page might look something like this: 71 | 72 | 73 | 74 | 75 | 76 | 77 | My Web Gallery 78 | 79 | 80 |

A photo gallery application

81 | 82 | 83 | 84 | Let’s review this line by line: 85 | 86 | ``: This is a special tag. The `!` at the beginning of the tag tells 87 | our browser that it is not part of the document, but is instead a special 88 | instruction to the browser. The instruction we’re providing is the `DOCTYPE`. The 89 | `DOCTYPE` tells the browser which version of HTML we are using. We’re only 90 | concerned with HTML5 which is the latest version of HTML and in order to use 91 | HTML5 we just add the word “html” after the `DOCTYPE`. 92 | 93 | ` 58 | Learn about me! 59 | 60 | 61 | 62 | 63 | You can also link to email addresses, which will force the browser to open the 64 | link with the specified email address in the computer's default email client. To do 65 | so the href value should start with ‘mailto:’ and be followed by the receiving 66 | email address. 67 | 68 | Email me 69 | 70 | Now that we know how to create a link, let’s add one to the page we created in 71 | [Part 1][part_1]. Before we create a link, let’s be sure we have something to link to. 72 | Since we are creating a photo gallery application, let’s link to a gallery of 73 | cat pictures. In the same directory that you created the file index.html, create 74 | a new file called `cats.html`. Be sure to create the file with the necessary 75 | ``, ``, and `` tags, and a descriptive `

` tag. 76 | 77 | Now create a link from `index.html` to `cats.html`. If you click on the link, you 78 | should see the cat page. Your pages should look like: 79 | 80 | ![Gallery With Link Demo][gallery_with_link_demo] 81 | 82 | and 83 | 84 | ![Cats Demo][cats_demo] 85 | 86 | You’ll notice after visiting the cats page the link on the index page will 87 | have turned purple. This is because your browser keeps track of which links you 88 | have visited and makes them purple by default to represent they have been 89 | visited: 90 | 91 | ![Visited Link Demo][visited_link_demo] 92 | 93 | Commit your work and push to GitHub: 94 | 95 | git add index.html cats.html 96 | git commit -m "Link to cat gallery" 97 | git push origin master 98 | 99 | ## Adding Images 100 | 101 | In addition to text, HTML allows you to add images to your webpage with the 102 | tag ``. For the `` tag to work, you must specify a `src` attribute 103 | (referred to as the “source”), which tells the browser where it can find your 104 | image. The `src` attribute’s value must be a path. Much like an anchor tag, the 105 | path can be relative to the HTML document or absolute. 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | Be sure that you are using the same file extension as your image. Common image 114 | file types are: 115 | 116 | `jpg`: for detailed pictures with lots of colors 117 | `png`: for images with transparent backgrounds 118 | `gif`: for quick loading images with few colors 119 | 120 | In addition to the `src` attribute, you should always add `alt` attributes to your 121 | `img` tags. `alt`, which stands for ‘alternative text’, is useful for the following 122 | purposes: 123 | 124 | * The image is not available 125 | * Search engines know what the image is 126 | * Browsers for the blind 127 | 128 | Let’s add an image to our existing cats gallery page. Download the following 129 | image into the directory you saved image.html to by right clicking it and 130 | selecting `Save as...`. You should be able to use what you’ve learned to get the 131 | image to display on the HTML page. If the image does not display, be sure you 132 | saved the image to the correct folder. 133 | 134 | ![Grumpy Cat][grumpy_cat] 135 | 136 | Your page should now look like: 137 | 138 | ![Gallery With Grumpy Cat Demo][gallery_with_grumpy_cat_demo] 139 | 140 | Commit your work and push to GitHub: 141 | 142 | git add cats.html grumpy-cat.png 143 | git commit -m "Add image to cat gallery" 144 | git push origin master 145 | 146 | ## Viewing Source HTML 147 | 148 | It is often useful to inspect your own source code as well as the HTML structure 149 | of other websites. If you are using Chrome, you can right click on any webpage 150 | and click `View Page Source` or find the same menu under `View > Developer > 151 | View Page Source`. Other browsers have similar features that you can find 152 | yourself. Now you can look at the HTML of any webpage on the internet! 153 | 154 | ## Lists 155 | 156 | We now have two pages; an index page and a gallery for cats. Unfortunately, this 157 | leaves our website unbalanced in regards to domestic pets. Let’s make a gallery 158 | for dog images to make everything right. Go ahead and make a dog gallery page 159 | similar to the one for cats for the following image. 160 | 161 | ![Shibe][shibe] 162 | 163 | Now, let’s create a link to this page from `index.html`. At this point, we seem to 164 | be creating a list of image galleries. Lucky for us, HTML has built in support 165 | for creating multiple kinds of lists. 166 | 167 | ### Unordered lists 168 | 169 | Unordered lists are collections of related items, where their order does not 170 | matter. These are typically formatted with bullet points, but you may see them 171 | with squares, circles, or nothing to the left of each item. You can create an 172 | unordered list with the `
    ` tag, and `
  • ` tags for each item. 173 | 174 |
      175 |
    • Cats
      • 176 |
    • Dogs
      • 177 |
    • Turtles
      • 178 |
    179 | 180 | ### Ordered lists 181 | 182 | Ordered lists are just like unordered lists, but, as implied, order does matter. 183 | List items in an ordered list can be prefixed with integers, letters, or roman 184 | numerals. The tag for an ordered list is `
      `: 185 | 186 |
        187 |
      1. Ruby
        2. 188 |
      2. Python
        3. 189 |
      3. PHP
        4. 190 |
      191 | 192 | On the index page, organize your links to the dog and cat galleries into an 193 | unordered list. Your page should look like this: 194 | 195 | ![Gallery With Linked List Demo][gallery_with_linked_list_demo] 196 | 197 | Stage all of your changed files with `git add`, commit them, and push to GitHub. 198 | To see all of the files that you have changed, use `git status`. 199 | 200 | [paragraphs_demo]: images/paragraphs_demo.png 201 | [bolded_and_italicized_demo]: images/bolded_and_italicized_demo.png 202 | [gallery_demo]: images/gallery_demo.png 203 | [part_1]: part_1.md 204 | [gallery_with_link_demo]: images/gallery_with_link_demo.png 205 | [cats_demo]: images/cats_demo.png 206 | [visited_link_demo]: images/visited_link_demo.png 207 | [grumpy_cat]: images/grumpy_cat.png 208 | [gallery_with_grumpy_cat_demo]: images/gallery_with_grumpy_cat_demo.png 209 | [shibe]: images/shibe.png 210 | [gallery_with_linked_list_demo]: images/gallery_with_linked_list_demo.png 211 | --------------------------------------------------------------------------------