Section |
---|
History |
Assignment |
Requirements |
File Structure |
Getting Started |
Next Steps |
Final Steps |
Resources |
Issues |
Welcome to Flatiron! One of the first tasks we do together as a cohort is create student info pages to help in the process of getting to know each other. You and your peers will be filling in these pages, which will be linked together through an index page displaying all students.
An index page looks something like this. Links from this page go to individual profiles, which look like this. You will be making and deploying an index page that contains info for all of the people at your current table.
Your assignment is to create a student profile for someone in your group. By the end of this project, every student should have a profile for themselves that was created by someone else and every student should have created a profile for someone else. If you are sitting at a table of four, it might be easiest to pair up. If you are sitting at a table of three, it might be easiest to create the profile of the student clockwise to you.
You'll have about two hours to complete this lab. Use
that time to get to know your group members, get familiar with git workflows, and
re-familiarize yourself with HTML. If you feel stuck, ask any instructor for
help. Keep in mind everyone in your group will be pushing to the same repository.
Think about using a workflow with your teammates that will
minimize conflicts.
Please collect the following content from your assigned student for their profile. This content doesn't have to be finalized, but you need something to get started. They'll be using this content as the project evolves for their resume and other profiles online.
- Name
- Short Bio
- Profile Picture (something normal, a headshot, of a good reusable size that can be easily cropped)
- Background Picture
- Previous Education and/or Work Experience
- Their Favorite quote
- Favorite cites, foods, and websites
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
.
While working on this project, you will need to add the following files:
- Add two pictures to the
img/students
folder (they can be jpg or png files):- A background picture
- A picture both the index page and profile page
- Add one HTML file to the
students/
folder. Use thestudent_name.html
for reference. In fact, feel free to copy as much of the HTML fromstudent_name.html
into the new file you've created.
-
Figure out who is going to write whose profile.
-
Have one person at your table fork this repo.
- Git clone the forked repo to that person's machine.
-
Ensure that your
index.html
file has the same amount of<li></li>
elements as you have persons on your team (the HTML sections in question are each surrounded by<!-- Begin Student -->
and '' comments). We have provided four by default, but you should either remove these or copy/paste to reflect the correct amount of people on your team. Assign individuals to specific<li></li>
elements (order matters!). -
Once the
index.html
has the correct numbers of students as in your group, the person who forked the repo must git add, commit, and push to your remote master. You can do all these steps in the terminal.git add .
will track all new or updated files since you first cloned down the repo.git commit -m "git message here"
will save all your altered file and group them together as single change. However, you should actually write a descriptive message describing the change you made.git push
will upload your change to GitHub.
-
Next, the person who forked the repo must add all team members as collaborators. Learn more about that here.
-
Following, this person should then send the link to their forked repo to everyone in the group.
-
Everyone at the table should clone the the forked repo using this link. Do not clone directly from learn-co-curriculum.
Now that you have the repo, you'll want to get into it. Remember cd? To check
if you've done it correctly, type pwd
into your terminal and if the last part of the text that gets
returned is immersive-mod1-deploy-on-day-1...
you're in the right place.
NOTE In all the hypothetical examples, we're writing a profile for Zoe Perez.
Open the files index.html
and students/student_name.html
in the browser. You
can do this many ways but one is by opening your project in Finder and right-clicking on
index.html. Then click on "Open with" then the name of your favorite browser.
-
From the root directory, checkout a new branch. This new branch's name should be the name of the student whose profile you're going to create.
- For instance, if you are making a profile for Zoe Perez, you should create a new branch
git checkout -b zoe-perez
- Note: The
master
branch of a project is NEVER a place to do any work.master
is considered the build and you never break the build. So make sure you are not working or committing to themaster
branch.
-
If you haven't already, switch to the branch you created. To make sure you're where you need to be, type
git branch
in your terminal. It should return the name of your assigned student emphasized with an asterisk and master. The asterisk indicates which branch you're on. It should not bemaster
.- For instance, typing
git branch
in the terminal would return:
- For instance, typing
master
* zoe-perez
-
In this new branch, 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. Use the filestudent_name.html
to see an example of what a profile's HTML could look like.- For instance, we would create a file
zoe_perez.html
in thestudents
folder.
- For instance, we would create a file
-
Still in this branch you created, add the two 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
, 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 assigned<li></li>
element as a template and fill it out for your fellow classmate.
-
Once you're happy with the profile you've created and the changes you've made to the index page, type
git status
. The file you've altered, index.html, should appear in the "Changes not staged for commit" section and the files you've created should appear in the "Untracked files" section. -
If you type
git remote -v
, it should display something like:
origin https://github.com/table-member-github-name/immersive-mod1-deploy-on-day-1...git (fetch)
origin https://github.com/table-member-github-name/immersive-mod1-deploy-on-day-1...git (push)
git add .
git commit -m "updated index page and added zoe perez page"
-
Now it's time to push to a remote branch. This remote branch doesn't exist yet, you're going to create it by
git push
.- NOTE: Do not push to master. Do not type anything that contains the word master!
- You're going to push to a branch that is the same name as your local branch.
- For instance, if we're on the branch
zoe-perez
, we're going to push tozoe-perez
.
- For instance, if we're on the branch
-
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
- Type
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.
Since your table is going to be deploying a single web page with all of your
tables profiles, you'll need to merge every branch that your table created
into a single branch. This branch will contain every profile from your table.
The process of merging these branches may result in merge conflicts in
index.html
and possibly elsewhere. That's totally okay and expected!
In order to merge the zoe-perez
branch into master
, we must first checkout master git checkout master
. You should see a message that says Switched to branch 'master'
. In addition, you can run the command git branch
and you should be an asterisk by the master.
* master
zoe-perez
Next, merge the code from zoe-perez
into the master branch with git merge zoe-perez
. Once you're ready, push the newly merged master branch up to Github. Run git status
to see your changes, then git add .
to stage those changes for a commit, git commit -m "your message here"
to commit your changes, then finally git push
to push those changes up to Github.
When merging, a merge conflict can happen. Generally they look like:
> git branch
└── master
> git merge zoe-perez
└── Auto-merging index.html
└── CONFLICT (content): Merge conflict in index.html
└── Automatic merge failed; fix conflicts and then commit the result.
This just means that you will have to open the files where there are merge conflicts, and find the part that looks like:
<<<<<<< HEAD
content here
=======
other content here
>>>>>>> zoe-perez
Just decide which one you want to keep or if you want to keep both. Then delete
the parts you don't want and delete the <<<<HEAD
, ======
, and >>>>>
parts.
In the process of trying to merge two files, you may notice that chunks of html
end up in the wrong place on the page, and there is a chance you may need to
move things around to be in the proper order again. If you'd like a visual
reference of what your index page looks like, you can also run open index.html
from your command line, in order to view the current state of your page in the
browser.
Remember, if you have multiple files with merge conflicts, you'll have to repeat
this process with each file. Once you're done selecting which code to retain,
git add
and git commit
these changes. Now when you type git status
, your
terminal should not display "You have unmerged paths."
Once every profile is on a single branch that is hosted remotely, it's time to deploy your table's profile page! This will look like the sample link at the top of this lesson, but with the cards/profiles for your group only.
- In your browser, navigate to the forked github repo for your table.
- At the top of the page, click on the
Settings
tab (the one with the gear symbol) - Once on the Settings page, scroll down to the
GitHub Pages
section - Under "Source," choose "master branch" and click "Save."
- Navigate to
http://username.github.io/repository_name
, and have a look at your page! - Slack this URL out to the rest of your class so you can learn about each other!
When you have fixed any errors and are ready to share, post your link in Slack so the rest of the class can read who you are!
Congratulations, you've completed your first assignment!
Note: From now on, most assignments will be completed in a group but submitted individually. This means that instead of having a table fork an assignment, each student will fork the assignment, minimizing the merge conflicts you'll encounter in the future.
- Git Step Resources
- Git Workflow Resources
- Deploying to GitHub Pages
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 Deploy on Day One on Learn.co and start learning to code for free.