| Section |
|---|
| History |
| Assignment |
| Requirements |
| File Structure |
| Getting Started |
| Next Steps |
| Final Steps |
| Resources |
| Issues |
Welcome to Flatiron! Every semester, we create student index pages to help in the process of getting to know each other! 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 sitting at your table. 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're sitting at a table of four, it might be easiest to pair up. If you're sitting at a table of three, it might be easiest to create the profile of the student clockwise to you. If you're sitting at a...well you get the picture.
Now if you're anything like me, you might be freaking out and wondering, "Am I making a webapp?!?!" The answer is no. You're just working with HTML and file structures. You don't need to know Rails, JavaScript, or even Ruby for this project. No need to freak out. Calm down! Seriously, you're making the rest of us nervous!!!
You'll have about three hours to complete the first section of this lab. Use that time to get to know your table, get familiar with git workflows, and re-familiarizing yourself with HTML. If you feel stuck, ask any instructor for help. Keep in mind everyone in your table 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. They'll be using this content as the project evolves for their resume and other profiles online.
- Name
- Github Username
- Blog Url (if they don't already have a blog it will be their-github-username.github.io)
- Tagline
- Profile Picture (something normal, a headshot, of a good reusable size that can be easily cropped)
- Background Picture
- Treehouse Account
- CoderWall Account
- CodeSchool Account
- Favorite Websites
- Previous Work Experience
- Short Bio
- Twitter URL
- LinkedIn URL
- Education
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/studentsfolder (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. Use thestudent_name.htmlfor reference. In fact, feel free to copy as much of the HTML fromstudent_name.htmlinto the new file you've created (just don't rename / override that file, as that will cause you some git headaches).
-
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 (surrounded by the 'begin student' and 'end student' comments) as you have persons on your team. 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 count is accurate, the person who forked the repo must git add, commit, and push to your remote master.
-
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 fork to everyone sitting at their table.
-
-
Everyone at the table should then clone this forked repo.
Now that you have the repo, you'll want to get into it. Remember cd? When you type pwd into your terminal and the last part of the text that gets returned is deploy-on-day-1... you're in the right place. NOTE In all the hypothetical examples, we're writing a profile for Zoe Perez.
Take a look at index.html and students/student_name.html in the browser. You can do this many ways but one is by opening 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, the branch would be titled
zoe-perez. - Note: The
masterbranch of a project is NEVER a place to do any work.masteris considered the build and you never break the build. So make sure you are not working or committing to themasterbranch.
- For instance, the branch would be titled
-
If you haven't already, switch to the branch you created. To make sure you're where you need to be, type
git branchin your terminal. It should return the name of your assigned student emphazised with an asterisk and master.- For instance, typing
pwdin 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.htmlto see an example of what a profile's HTML could look like.- For instance, we would create a file
zoe_perez.htmlin the mainstudentsfolder.
- For instance, we would create a file
-
Still in this branch you created, add the three photos detailed above to the
img/studentsfolder. 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.jpgto thestudentsfolder that is inside theimgfolder. - File endings are case senstive. 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 "Tracked Files" section and the files you've created should appear in the "Untracked Files" section.
-
You'll want to add then commit these changes with a message.
-
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 a remote branch. This remote branch doesn't exist yet, you're going to create it by pushing.
- 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 to zoe-perez.
-
To confirm this push worked you can do two things:
- Type
git branch -awhich 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
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!
Think about the best way to merge all the branches together. Should one person do it? Should everyone do it in order? Should you merge into a prexisting branch, like master, or create a totally new branch? You might be wondering what the best answer is but there isn't a "best answer", just decide on a strategy and go for it!
When merging, merge conflicts 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, in this case index.html, 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 main github repo for your table.
- At the top of the page, click on the
Settingstab (the one with the gear symbol) - Once on the Settings page, scroll down to the
GitHub Pagessection - Under "Source," choose "master branch" and click "Save."
- Navigate to
http://username.github.io/repository_name, and have a look at your page!
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.