Your first deployment

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, we 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!

Requirements

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

Structure

The structure of this project looks something like this:

├── README.md
├── css
│   ├── css style sheets
├── assets
|   |__ fonts
|   |   ├── some fonts
├── index.html
└── students
    └── student-name.html
    └── profile.html

Files you will need to alter:

index.html
css/styles.css
students/student-name.html

Getting Started

Fork and clone this lab.

Add your images

The first thing you'll need to do is add your image assets.

Since we have tons of awesome students on Learn, adding all the images to our project would result in a behemoth sized repository. So instead of adding them 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.

Upload your cover and profile pictures to imgur (they should be jpg or png files):
- Head to imgur.com
- click on the blue 'Upload images' button on the top of the page
- You can then drag and drop the cover, and profile images to that page, or use the 'browse your computer option to find them manually'
- Click on the 'Start Upload' button to upload the images
- If you hover over the top right of each image, you should see a link with 3 little dots on the left, hover over those dots and copy the direct link URL and paste that somewhere safe. You will need to use these links in the css/styles.css file to be able to display the images in your profile.
Now we're ready to create the CSS rules that we can use to display our pictures in the HTML later on.
Head to the css/styles.css file.
check out some students css in the file to see what you'll need to do.

It should look something like these

  #firstname-lastname-cover {
    background-image: url("link to my imgur cover photo");
  }

  #firstname-lastname-card {
    background-image: url("link to my imgur card photo");
  }

Add your Profile page

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).

Add To The Index

Open up index.html
Copy one of the existing divs 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

Taking stock

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.

Submit!

Easy, just submit a Pull Request back to us. We'll take a look ASAP and get your change merged and deployed.

lpassamano/learn-deploy-on-day-one-v-000