There is no better way to feel like a developer than by actually becoming one, which you do by shipping code. With everything you've learned thus far, with think you're ready for the challenge. In this lab, you'll make a change to the Learn website: you will be asked to add your information to our public student directory (visible to the world at http://students.learn.co) and put in motion the sequence of events to have your change go live in production.
We have already created a template, but you need to use your Git, HTML and CSS skills to submit an updated version of the site with your information. Here we go!
You'll need the following information about yourself:
- Name
- Blog Url (if you have one)
- Twitter URL
- LinkedIn URL
- Github URL
- Tagline
- Profile Picture (something normal, a headshot, of a good reusable size that can be easily cropped)
- Background Picture (like your cover picture from Twitter)
- Previous Work Experience
- Short Bio
- Education
The structure of this project looks something like this:
├── README.md
├── css
│ ├── css style sheets
├── assets
| |__ img
| | ├── lots of images
| |__ fonts
| | ├── some fonts
├── index.html
└── students
└── student-name.html
└── profile.html
index.html
css/styles.css
students/student-name.html
Fork and clone this lab.
The first thing you'll need to do is add your image assets.
- Add two pictures to the
assets/img
folder (they can be jpg or png files):- A cover picture (named
student-name-cover.jpg
orstudent-name-cover.png
) - A profile picture (name
student-name.jpg
orstudent-name.png
)
- A cover picture (named
- Copy another students
student-name.html
file and rename it to your name. - Double-check that you added your cover and profile photo to the
img
directory - Open up
your-name.html
and modify it with your information (links, bio etc).- Adding the images is a bit tricky! Take a look at the
css/styles.css
or use inspect element for an idea of where those images come from.
- Adding the images is a bit tricky! Take a look at the
- Open up
index.html
- Copy one of the existing
div
s to make a new slot for you. Add in your information - Re-use the profile image from your profile page and link to your profile page
Now that you have everything locally, let's take stock of what we have. Take a look at index.html
and profile.html
in the browser. To do this:
- If you're working on a Mac, you can just find the file locally using Finder and click to view the webpage in Chrome.
- If you're working on Nitrous, it's a bit more involved: first push your changes to your GitHub fork, then download your GitHub repo to your computer as a zip file, unzip it and open up the HTML files locally.
You may need to cycle a few times until everything looks good. Once you're happy with it, you're ready to submit.
- Easy, just submit a Pull Request back to us. We'll take a look ASAP and get your change merged and deployed.
Once we merge in your Pull Request, your profile will be viewable on http://students.learn.co, but we want you to be able to show all your friends your new website RIGHT NOW. Thankfully, GitHub makes this easy.
- Delete the
CNAME
file and commit that change. Reminder: you can delete a file withrm CNAME
. Make sure yougit add .
, thengit commit -m "removing CNAME"
, thengit push
. - Create a new branch called
gh-pages
. Reminder: you can do this withgit co -b gh-pages
- Due to the process involved with forking, you will need to force push to GitHub. Force push
gh-pages
to GitHub. Reminder: after staging and commiting your changes, you can do this withgit push -f
- Go to GitHub and go to the Settings for your repository (on the right side bar)
- Scroll down to the Github Pages Section. Take a look! You have a URL. For me (because my username is
jmburges
) it's http://jmburges.github.io/learn-deploy-on-day-one-1