-
Notifications
You must be signed in to change notification settings - Fork 2
HW 2 | Web Development 101
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 andcd
to it. - In the
hackyale
folder, you should have at least two folders, calledweek0
andweek1
(verify this withls
). From now on,weekX
will be for classwork, andhwX
will be for homework. - Make a directory called
hw2
(mkdir hw2
). DON'Tcd
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
- Example:
-
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.
- You should have a
Now if you visit your Github repo, it should look something like this.
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
- 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
notAbout.html
) - Put all your images in a folder called
images
; link to them in your html file with<img src="./images/filename.jpg" >
- Your home page should be called
- Lastly, in your
hackyale
folder (the parent ofhw2
) 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, rungit add .
,git commit -m "a message about what you changed (for example, 'added css')"
, thengit 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
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
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 rafi@hackyale.com for help.