|
1 |
| -# Bootstrap Portfolio |
| 1 | +# Build a Portfolio Using Bootstrap |
2 | 2 |
|
3 | 3 | Welcome to the Bootstrap Portfolio Project! For this project, you'll be creating a personal web page to show off your work. We will test your HTML knowledge and then it will be up to you to use CSS to style your own page and make it unique.
|
4 | 4 |
|
5 |
| -Please follow the instructions below to complete the project. Be sure to run tests to make sure your tests are passing before submitting your code. |
| 5 | +You’ll build a personal web page using Bootstrap, which should look similar to this one: |
6 | 6 |
|
7 |
| -## Getting Started |
| 7 | + |
8 | 8 |
|
9 |
| -To get started with this project, head over to the [HTML Bootstrap](#) project on Code School, and begin! |
| 9 | +## What You’ll Use |
10 | 10 |
|
11 |
| -For further instructions on how to get the app setup locally, visit our wiki: |
| 11 | +- HTML |
| 12 | +- Bootstrap |
12 | 13 |
|
13 |
| -1. [Welcome](https://github.com/codeschool/project-bootstrap-portfolio/wiki) |
14 |
| -2. [Prerequisites](https://github.com/codeschool/project-bootstrap-portfolio/wiki/Prerequisites) |
15 |
| -3. [Setup](https://github.com/codeschool/project-bootstrap-portfolio/wiki/Setup) |
16 |
| -4. [What we'll build](https://github.com/codeschool/project-bootstrap-portfolio/wiki/What-we'll-build) |
17 |
| -5. [Step by step](https://github.com/codeschool/project-bootstrap-portfolio/wiki/Step-by-step) |
| 14 | +We'll start you off with a few CSS styles that you can build on that should help get things started. |
| 15 | + |
| 16 | +## What You’ll Learn |
| 17 | + |
| 18 | +You will further your Bootstrap skills, feel more comfortable writing Bootstrap code in a real-world scenario, and have the option of using this project as your real portfolio page. |
| 19 | + |
| 20 | +## Live Demo |
| 21 | + |
| 22 | +[Check out this link](https://codeschool-project-demos.github.io/BootstrapPortfolioProject/) to see a working version of this project. Feel free to customize your project even further by adding more custom CSS styles to it once you've completed the steps. |
| 23 | + |
| 24 | +## Setup |
| 25 | + |
| 26 | +Open this project’s directory in a text editor to complete this project. A text editor like [Atom](https://atom.io/) or [Sublime Text](https://www.sublimetext.com/) will do the job. You will make changes to the `src/index.html` file to satisfy the requirements. |
| 27 | + |
| 28 | +## Tasks |
| 29 | + |
| 30 | +Complete the following tasks to finish this project. |
| 31 | + |
| 32 | +### Create the Navigation Bar |
| 33 | + |
| 34 | +At the top of our page, we'll want to create a `navbar`. Here is a [sample navbar](https://github.com/codeschool/BootstrapPortfolioProject/wiki/Sample-Navigation-Bar) to help you get set up. Also feel free to check out Twitter Bootstrap's [documentation on navbars](http://getbootstrap.com/components/#navbar). MENU |
| 35 | + |
| 36 | +### Name in Navbar |
| 37 | + |
| 38 | +Change the contents of the `<a>` tag that has the `navbar-brand` CSS class to include your name instead of "Brand". MENU |
| 39 | + |
| 40 | +### Menu in Navbar |
| 41 | + |
| 42 | +Change the contents of the `<a>` tags that are within the `<li>` menu elements. One tag should read "Home", and the other "About". MENU |
| 43 | + |
| 44 | +### Create the Carousel |
| 45 | + |
| 46 | +Let's place a Bootstrap Carousel under our navbar. Here is a [sample carousel](https://github.com/codeschool/BootstrapPortfolioProject/wiki/Sample-Carousel) to help you get set up. You can always learn more about Bootstrap's Carousel in their [official documentation](http://getbootstrap.com/javascript/#carousel). MENU |
| 47 | + |
| 48 | +### Carousel Items |
| 49 | + |
| 50 | +Change the three `<h1>` and `<p>` tags that are found under each `.item` element within our carousel to include three tag-lines. You can either use similar content that was already available in the page _(under "Who I am", "What I do", etc)_ or come up with original content for yourself. MENU |
| 51 | + |
| 52 | +### Using Bootstrap's Grid System |
| 53 | + |
| 54 | +Let's display some elements side-by-side using the Grid System. To do so, under our carousel, let's create three nested `<div>` tags. One should have the `marketing` CSS class, the next should have the `container` CSS class, and the third should have the `row` CSS class. MENU |
| 55 | + |
| 56 | +### Creating the Marketing Columns |
| 57 | + |
| 58 | +Inside of `.row`, add three `div` elements with the `col-md-4` CSS class. Each of these elements should have a: - `span` tag with the `glyphicon` class, plus another class indicating [which icon you'd like to use](http://getbootstrap.com/components/#glyphicons-glyphs) _(ie. "glyphicon-music", or "glyphicon-camera", etc)_. - `h2` tag with a skill in it _(ie. "HTML & CSS", or "JavaScript", or "Design", etc)_. - `p` tag describing why you enjoy using each skill _(ie. "I enjoy making the web come to life with Angular", etc)_. MENU |
| 59 | + |
| 60 | +### Create the Footer |
| 61 | + |
| 62 | +Under `.marketing`, let's create a `footer` element. Our footer needs to have a `div` inside it with the `container` CSS class. _You'll see the footer stick to the bottom of the page, which happens because of some styling code we made available._ MENU |
| 63 | + |
| 64 | +### The Elements Inside our Footer |
| 65 | + |
| 66 | +Inside our footer container, let's create two elements: an `h3` tag with a title inviting your visitors to get in touch with you, and a `p` tag describing how your visitors can get in touch. MENU |
| 67 | + |
| 68 | +### Cleaning Things Up |
| 69 | + |
| 70 | +Let's remove the `.header`, `.tagline`, `.skills` and `.contact` elements as the same information should all be part of the carousel, marketing and footer elements now. |
| 71 | + |
| 72 | +## Next Steps |
| 73 | + |
| 74 | +Now that you’re done, we highly encourage you to open the `src/main.css` file and customize things as much as you’d like! |
| 75 | + |
| 76 | +You should also make your completed project available online so you can share your progress with others! One way of doing this is by using GitHub Pages. |
| 77 | + |
| 78 | +To deploy your `/src` directory to GitHub Pages, be sure to commit all of your changes and make a new branch called `gh-pages`. Once you are checked into the `gh-pages` branch, run the following command: |
| 79 | + |
| 80 | +``` |
| 81 | +git subtree push --prefix src origin gh-pages |
| 82 | +``` |
| 83 | + |
| 84 | +This will push the `src` folder up to GitHub on the `gh-pages` branch. After that, you should be able to open up `http://username.github.io/BootstrapPortfolioProject`, where `username` is your GitHub username. |
0 commit comments