| Section |
|---|
| History |
| Assignment |
| Requirements |
| File Structure |
| Getting Started |
| Next Steps |
| Final Steps |
| Resources |
| Issues |
Welcome to VFA Training with Flatiron School! At Flatiron School, every semester, we create student index pages to help in the process of getting to know each other. You will be making and deploying an index page that contains info for all of the fellows at your current table.
Your assignment is to create a profile page for someone sitting at your table. By the end of this project, every fellow should have a profile for themselves that was created by someone else and every fellow 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 fellow 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 the whole workshop to complete this lab. Use that time to get to know your table, get familiar with git workflows, and re-familiarize yourself with HTML. If you feel stuck, ask your Flatiron School trainer or any of the TAs 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 partner 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, we'll set one up at their-github-username.github.io)
- Tagline
- Profile Picture (something semi-professional, a headshot, of a good reusable size that can be easily cropped)
- Background Picture
- Favorite Websites
- Previous Work Experience
- Short Bio
- Twitter URL
- LinkedIn URL
- Education
Instead of manually adding image files to our project, we will be uploading our images to imgur.com (a free image hosting site), and linking to the images respective URLs in our css file.
- Select your cover and profile pictures
- Upload your cover and profile pictures to imgur (they should be jpg or png files):
- Head to imgur.com/upload and upload your profile and cover images
- After you upload each image, copy the direct link URL and paste that somewhere safe. You will need to use these links in the
css/styles.cssfile to be able to display the images in your profile.
- Share links to your cover and profile images with your partner
The structure of this project looks something like this:
├── assets
│ └── fonts
│ └── font files
├── css
│ ├── fonts.css
│ ├── normalize.css
│ └── style.css
├── students
│ ├── student_name1.html
│ └── student_name2.html
├── index.html
└── README.md
index.htmlcss/styles.css
- You'll be adding one HTML file to the
studentsdirectory
- Partner up! Figure out who is going to write whose profile.
- Designate one person at your table as the Team Lead. This person's repo will serve as the main repo for your group, and at the end, all of your work will be merged into this repo.
- The Team Lead should open up this lesson in their Learn IDE and open the
index.htmlfile. You'll see a number of example<div class="student-card">elements. Replace each one of these blocks with a comment marking where each person should add their partner's profile:
<!-- TODO: Add Ryan Atwood -->
<div class="student-card" id="firstname-lastname-card">
<a href="students/firstname-lastname.html">
<div class="view-profile-div">
<h3 class="view-profile-text">View Profile</h3>
</div>
<div class="card-text-container">
<h4 class="student-name">Name</h4>
<p class="student-location">Location</p>
</div>
</a>
</div>
<!-- TODO: Add Seth Cohen -->
<div class="student-card" id="firstname-lastname-card">
<a href="students/firstname-lastname.html">
<div class="view-profile-div">
<h3 class="view-profile-text">View Profile</h3>
</div>
<div class="card-text-container">
<h4 class="student-name">Name</h4>
<p class="student-location">Location</p>
</div>
</a>
</div>
<!-- etc -->- Once you've added a section for each member of your team, the Team Lead should git add, commit, and push to master. You can run these commands individually, or run
learn save. - Next, the Team Lead must add all team members as collaborators on the GitHub repo. Learn more about that here.
- Following, the Team Lead should then send the url to clone their fork to everyone sitting at their table. This url will look something like
git@github.com:TEAM-LEAD-GITHUB-USERNAME/vfa-deploy-on-day-1.git. - Now every team member except their team lead should update their git
remoteurl to the team lead's url.- Open this lesson in your Learn IDE
- In the terminal, run the following command:
git remote set-url origin https://github.com/TEAM-LEAD-GITHUB-USERNAME/vfa-deploy-on-day-1.git(note: the URL there is the clone link your team lead just shared with you) - Confirm that you've updated your remote by running
git remote -v. You should see something like the following:
// ♥ git remote -v
origin https://github.com/TEAM-LEAD-GITHUB-USERNAME/vfa-deploy-on-day-1.git (fetch)
origin https://github.com/TEAM-LEAD-GITHUB-USERNAME/vfa-deploy-on-day-1.git (push)
- Finally, every team member should pull down the latest changes from the team lead's repo by running
git pull origin masterin their terminal.
Note: In all the hypothetical examples, we're writing a profile for fictional fellow Ryan Atwood.
Take a look at index.html and students/example-name.html in the browser. You can do this by running httpserver in your Learn IDE terminal, then navigating to the IP address that's outputted. For example:
// ♥ httpserver
Serving "/home/ktravers/vfa-deploy-on-day-1-vfa-2018" at http://67.205.130.239:33142
Ready for changes
You can CTRL+c to exit.
Note: You may want to run the httpserver process as a background job, so you can continue running other commands in your terminal. See these docs for more information.
-
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, our example branch would be titled
ryan-atwood. Note: Themasterbranch 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. -
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:
// ♥ git branch
master
* ryan-atwood
- In this new branch, make a new HTML file in the
studentsdirectory. The file name should be the name of the fellow you're creating the profile for. For instance, we would create a fileryan-atwood.htmlin the mainstudentsdirectory. - Add all the collected information about your partner (links, bio, etc). Use any of the example
students/student-name.htmlfiles for reference. In fact, feel free to copy as much of the HTML from one of the examples into the new file you've created
- Still in this branch you created, open the
css/styles.cssfile - Check out the student profile and cover image css in the file to see what you'll need to do.
- Still in this branch you created, open up
index.html - Find the
<div class="student-card">element for your partner. Add in your partner's information. - Re-use the profile image from the profile page and link to the profile page
-
Once you're happy with the profile you've created and the changes you've made to the index page, type git status. The files you've altered,
index.htmlandcss/styles.css, should appear in the "Tracked Files" section and the file you've created should appear in the "Untracked Files" section. -
You'll want to add then commit these changes with a message.
-
Type
git status, and 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/TEAM-LEAD-GITHUB-USERNAME/vfa-deploy-on-day-1.git | (fetch) |
| origin | https://github.com/TEAM-LEAD-GITHUB-USERNAME/vfa-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
ryan-atwood, we're going to push toryan-atwood.
-
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? Should each team member open a PR, review together, and then merge those PRs? 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 ryan-atwood
└── 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
>>>>>>> ryan-atwood
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 httpserver from your command line and navigate to the outputted url 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://team-lead-username.github.io/vfa-deploy-on-day-1, 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 the workshop!
- 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: