For our first class project, we will be creating a student directory with profiles for everyone in the class.
Fork and clone this project to get started. We'll walk through the code together as a class.
The structure of this project looks something like this:
├── README.md
├── css
│ ├── css style sheets
│ └── fonts
│ └── font files
├── img
│ ├── lots of images here
│ └── students
│ ├── student_name_background.jpg
│ ├── student_name_index.jpg
│ └── student_name_profile.jpg
├── index.html
├── js
│ └── javascipt files
└── students
└── student_name.html
- The only file you'll alter is
index.html
.
- Add three pictures to the
img/students
folder (they can be jpg or png files):- A background picture
- A picture for the index page
- A picture for the profile page
- Add one HTML file to the
students/
folder. Copy the HTML fromstudent_name.html
into the new file you've created - you'll be using it as a template for your profile.
Fork and clone this repo.
Take a look at index.html
and students/student_name.html
in the browser. You can do this by entering in terminal e
-
Make a new HTML file in the
students/
folder. The file name should be the name of the student you're creating the profile for.- For instance, we would create a file
zoe_perez.html
in the mainstudents
folder.
- For instance, we would create a file
-
Add the three photos detailed above to the
img/students
folder. The student you're writing the profile for may have to email you their desired pictures or send you links to them, etc.- For instance, we would add the pictures titled
zoe_perez_background.jpg
,zoe_perez_index.jpg
, andzoe_perez_profile.jpg
to thestudents
folder that is inside theimg
folder. - File endings are case sensitive. When adding an
<image\>
tag, make sure that the image source is identical to the name of the image file.
- For instance, we would add the pictures titled
-
Once you've completed the profile, open up
index.html
. Use the preexisting template as a model and add a section for your profile.
Once you've finished all the text and image changes to your own student page, feel free to make the page your own. Think about how you can add other HTML elements to your page.
Already familiar with HTML and CSS? Take a stab at the styling of the page. Try changing the background colors, fonts, and text colors. This is your chance to make your mark, so make it bold!
-
Once you're happy with the profile you've created and the changes you've made to the index page, enter
git status
in terminal. The the files you've altered,index.html
, should appear in the "Tracked Files" section and the files you've created (like the images) should appear in the "Untracked Files" section. -
Next, you'll need to enter
git add .
in terminal to add the files. -
Last, you need to commit your work by entering in terminal
git commit -m "enter a description of your work here"
-
If you type
git status
, you should see "nothing to commit, working directory clean". If you typegit remote -v
, it should display something like:
remote | url | |
---|---|---|
origin | https://github.com/table-member's-github-name/deploy-on-day-1...git | (fetch) |
origin | https://github.com/table-member's-github-name/deploy-on-day-1...git | (push) |
-
Now it's time to push to push up the changes to your repo. Enter in terminal
git push origin branch-name
-
To confirm this push worked you can do two things:
- Type
git branch -a
which will show the remote branch on github.com you just created when you pushed. - You could also go to the url of the forked repo. Notice the section that looks like
. You should be able to click on that arrow and to see a dropdown. From this dropdown, select the name of the branch you've been working on.
- Type
It's time to submit a pull request on the original repo.
- The first step is to go to the forked repo on your account.
- From this new view, click on
on the right-hand menu. The green button with two arrows that looks like this
will also work.
- On this new page, click the green button that says "New pull request". This will take you to a form. Fill out the form and click "Submit".
Congratulations, you've completed your first assignment!
- Git Step Resources
- Git Workflow Resources
A common issue is not being able to authenticate with GitHub. You need to use HTTPS/SSH correctly when cloning the repository in order to be authenticated with GitHub. Checkout and follow:
View Getting to Know You... on Learn.co and start learning to code for free.