Skip to content

Commit 30cad53

Browse files
committed
Added tasks to readme
1 parent e5249d3 commit 30cad53

File tree

1 file changed

+77
-10
lines changed

1 file changed

+77
-10
lines changed

README.md

Lines changed: 77 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,84 @@
1-
# Bootstrap Portfolio
1+
# Build a Portfolio Using Bootstrap
22

33
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.
44

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:
66

7-
## Getting Started
7+
![Bootstrap Portfolio](http://courseware.codeschool.com.s3.amazonaws.com/projects/build-a-portfolio-using-bootstrap.png)
88

9-
To get started with this project, head over to the [HTML Bootstrap](#) project on Code School, and begin!
9+
## What You’ll Use
1010

11-
For further instructions on how to get the app setup locally, visit our wiki:
11+
- HTML
12+
- Bootstrap
1213

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

Comments
 (0)