Lab 3: PM Tools and Web Development Solution

Description

In this lab, you will explore a project management tool called Pivotal Tracker. Then, you will practice HTML and CSS.

What To Do

Part 1: Pivotal Tracker

For this part of the lab, you will be working with your project team to explore Pivotal Tracker.

You will be using this tool to track the progress of your project throughout the course.

Step 1.​All members of your team should create an account on ​Pivotal Tracker.

Step 2.​​One member​of your team should create a new Project. Use the green “Create project” button at the top of the page. Enter a project name and a new account name. Make sure you project is set to public.

Step 3. ​Add your team members to the project under the “MEMBERS” tab.

Step 4.​Watch ​this quick introductory video​for Pivotal Tracker to understand how Pivotal Tracker tracks the Scrum process.

Step 5. ​Now create 1 – 2 user stories in your backlog. Note that a “Features” are the default story type. A “Feature” is from the perspective of the user and adds customer value. A “Chore” is a task that needs to be completed but does not add customer value (e.g., installing an API, setting up GitHub).

Make sure to rate the difficulty of each story by giving it points.

Part 2: HTML and CSS

For the second part of the lab, you will create a website using some template files. You will practice writing HTML and CSS. All students must create their own web site.

Step 1.​First, ​download the .zip containing the template files​and place them in a directory on your computer.

Step 2.​Make sure you have the following directory structure:

|–Website

|–views

|–login.html

|–register.html

|–home.html

|–team_stats.html

|–player_info.html

|–resources

|–css

|–signin.css

|–my_style.css

|–img

|–beproudcapaabanner.jpg

|–cu_boulder_logo.jpg

|–favicon.ico

|–temp_image.svg

Step 3.​Explore each of the pages (.html) provided to you. First, open the page in your browser to inspect what it looks like. Then, open the page in your favorite editor to inspect the HTML. Make sure to also inspect the CSS files provided to you. Open these in your editor. Using ​Atom or ​Visual Studio​is highly recommended.

Step 4.​You will use these pages as a template to create a webpage for your favorite sports team.

You should edit the Home Page (home.html) to include the following content:

1. Replace the image in the navigation bar. If you don’t know which line of HTML to edit, open the page in your browser, right-click, and inspect the page.

2. A header tag with a message welcoming users to your website

3. An image related to the sport you chose for your website.

4. A short description of your website (2 sentences).

5. A hyperlink to a related page.

6. Style the above content in any way you like. Put your styles into the “my_styles.css” file provided to you. You ​must use at least 1 Bootstrap class​to style your content.

Then, add to your Player Information Page (player_info.html):

1. A ​Bootstrap Card​to hold the player image and some information about the player information (e.g., name, games played, jersey number)

Similarly, add to your Statistics Page (team_stats.html):

1. A ​Bootstrap JumboTron​announcing the upcoming game.

2. A table listing 3 previous matches against different teams

3. A second table listing the Win/Loss ratio for your team.

Next, edit the Registration Page (register.html). Create a ​form​with the following fields:

1. Name text field

2. Email text field

3. Password text field

4. Password confirmation field

5. A “I want to receive news about this team” radio button

6. A submit button

7. (Optional) Replace the banner image with something that relates to your sport. If you are not sure which line of HTML to edit, open the page in your browser, right-click, and inspect the page.

Finally, create a new page to add to your website. This can be anything you want such as a place for blog posts, a place for pictures, an online shop for fan gear, etc.. Add the following:

1. Create a link on your Home Page that links to your new page

2. Put some content on your page

3. Include a Bootstrap component of your choice (e.g., ​Modal​, ​Tooltip​, ​Carousel​, etc.)

What To Turn In

Create a .zip with all of the files for your website. Submit the .zip on Canvas.