Step by Step
To complete this project, open this project's directory in a text editor. A text editor like Atom or Sublime Text will do that job.
The file you'll be making changes to is called index.html and is located inside the /src directory in the root of our repository. Within the <body> of our document complete the steps:
You can learn more about Bootstrap's Nav Bar in the official documentation. We made a sample nav bar available if you would like to copy, paste and make modifications to complete this step.
- Place the navbar immediately under
<body>tag - Modify the contents of the
<a>element that has thenavbar-brandCSS class to include your name instead of "Brand" - Modify the contents of the
<a>tags that are within the<li>menu elements. One should read "Home", and the other "About"
You can learn more about Bootstrap's Carousel in the official documentation. We made a sample carousel available so you can also copy, paste and make modifications to complete this step.
- Place the carousel immediately under the navbar from Step 1
- Modify the three
<h1>and<p>tags that are found under each.itemelement within the carousel to include three taglines. 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.
In this step we will be taking advantage of Bootstrap's Grid System to place items next to each other.
- Create a new
<div>immediately under the carousel code, and give it the "marketing" CSS class - Inside the marketing
<div>, add another<div>and give it the "container" CSS class. - Inside the container
<div>, add another<div>and give it the "row" CSS class. - Inside the row
<div>, add three<div>elements with thecol-md-4class, which will create three columns that stack next to each other. - Inside each of these column div elements, add three elements:
- a
<span>tag with the "glyphicon" class, plus another class indicating which icon you'd like to use. Pick an icon from Bootstrap's documentation. This icon should be related to be skill you're about to describe. (ie. "glyphicon-music", or "glyphicon-camera", etc). - an
<h2>tag with the name of a skill (ie. "HTML & CSS", or "JavaScript", or "Design", etc) - a
<p>tag describing why you enjoy using this tech skill (ie. "I enjoy making the web come to life with Angular", etc)
- a
In this step we will add a footer element that contains your contact information. This footer element should be placed immediately after the ".marketing" element we just created.
- Add a
<div>element and give it the "footer" CSS class. - Inside the footer, add a
<div>element give it the "container" CSS class. - Inside the container, add an
<h3>tag with the same title we had before for our contact element - After the
<h3>tag, add a<p>tag with the same description we had under our former contact element
Let's make sure we get rid of any other elements that were left from our previous version of this page.
- Remove the
.header,.tagline,.skillsand.contactelements as the same information should all be part of the carousel, marketing and footer elements
By now your page should look similar to this one:
For this optional step, open the src/main.css file and customize things as much as you'd like!