HW 2 | Web Development 101

Part 1: Background

Note that this week's classwork can be found here—this will be the same every week

• Now that that you know about git and have it installed, you can make your first repository (called a "repo") on Github. Follow the instructions here up to but not including "Create a README". Name your repo "HackYale Homework" and make it public (private ones cost money).
• The way you submit your homework will be different from now on: instead of zipping up your file submitting it to Lore, you'll just upload your code to this repo. To make grading easy for the teachers, we want students to follow these instructions very carefully:
  • You should have a hackyale folder you created the first class. Open up your shell and cd to it.
  • In the hackyale folder, you should have at least two folders, called week0 and week1 (verify this with ls). From now on, weekX will be for classwork, and hwX will be for homework.
  • Make a directory called hw2 (mkdir hw2). DON'T cd into it.
  • Type git init into the command prompt (Initialize a git repository)
  • git add . (Add .—that's shorthand for the current directory—to the repo)
  • git remote add origin <your github repo URL> (tell git about your remote on Github; more about this later. This URL can be found in the bottom right of your Github repo page, in the box that says 'HTTPS clone URL'. Don't type the <``>. )
    • Example: git remote add origin https://github.com/rafi-khan/HackYale-Homework.git
  • git commit -m "homework 2" (Make your first commit)
  • git push -u origin master (Send your code to Github!)
    • Note that if you have to type your username and password, your password won't show up even though you're actually typing it.

Now if you visit your Github repo, it should look something like this.

Troubleshooting

My password won't show up on the Terminal
It's registering, but for security doesn't show how many letters it is.

I've typed in the wrong URL as my remote
You'll have to remove your old remote and re-add it.
git remote rm origin
git remote add <new url>
Note that you can find your 'remote url' at the bottom right corner of your Github repo page. It should look something like https://github.com/rafi-khan/HackYale-Homework.git
So all together: git remote add origin https://github.com/rafi-khan/HackYale-Homework.git.

Total time for Part 1: 5-15 minutes

Part 2: Implementation

• You now know enough HTML and CSS to design most web pages on the internet. To prove that to yourself, you'll build a webpage wireframe, according to some specifications, which can be found here. We hope it looks familiar—lots of web sites follow this very layout (maybe inspecting those pages will give you a hint as to how to do the assignment...).
• You already made a hw2 folder in Part 1; put all your code there. Things to remember:
  • Your home page should be called index.html
  • All filenames should be lowercase (about.html not About.html)
  • Put all your images in a folder called images; link to them in your html file with <img src="./images/filename.jpg" >
• Lastly, in your hackyale folder (the parent of hw2) create a file called README (not README.txt or README.rtf). Write your name in it so we know whose repository it is.
• When you're ready to submit, make sure you're in the hackyale directory, run git add ., git commit -m "a message about what you changed (for example, 'added css')", then git push to send your code! After all is said and done, make sure it looks like https://github.com/rafi-khan/HackYale-Homework
• In Lore, don't submit the actual files, just a link to your new Github repo. Now you're officially a part of the open source community!

Total time: 1-3 hours, depending on your thirst to claim the next HY Oscar

If you've still got time...

Make your page beautiful! Check out some design blogs, on the class page under 'for designers' to make your site some of the following:

• Have icons and other images
• Have hover states: colors change when the mouse overs over an element
• Look good on mobile

A part of good design is theft: see what your favorite sites do and imitate! But don't just copy—make sure to add your own personal touch as well :)

Total time: Probably a lifetime to truly master

Help!!

If you need help, first consult your best friend, Google (or Bing, or Yahoo! search...)
Then check out the class page or the lore.com site for information.
If you're still stuck, ask [email protected] for help.