Assignment 3: Bootstrap Company Site

Posted on | by nayeon

Overview

For this assignment, you will create a mobile-first, responsive fake company website (two pages) using the Bootstrap CSS framework. You must create the site using Bootstrap components and Bootstrap’s Grid framework with some customization as needed.

Requirements

Setup
  1. Create two brand new HTML files.
    1. Name one home.htmland the other team.html
    2. Add in the required bootstrap meta tags and the bootstrap CSS file (either relative or absolute link).
  2. Create one brand new CSS file.
    1. Write CSS in this file.
    2. Link this CSS file to both home.html and team.html.
  3. Gather text and images for this assignment. Come up with a fake company name and some text that can describe the company’s product or services. Have fun with it — make up any company you ever wanted to create.
    1. Get free beautiful images at https://unsplash.com/ 
  4. Your site needs to be built using the mobile-first approach (already built in with Bootstrap but any extra CSS you add must follow the mobile-first approach).
  5. Most of the site can be built using what Bootstrap comes with, plus a few customizations. Refer to the Bootstrap documentation and hints listed below.
  6. Check your HTML and CSS syntax. You will be deducted points for any syntax errors, tags not closed/not used, etc.
Homepage (home.html)
  1. Navigation Bar
    1. Displays name of company and at least three links: Home, Team, and one other link.
    2. Clicking on the name of company goes to home.html. Clicking on “Home” goes to home.html. Clicking on “Team” goes to team.html. Third link does not need to go anywhere.
    3. “Home” link is a different color than other three links to indicate user is viewing the Home page.
    4. Nav bar must have a background color that is not the default color. You must overwrite the default background color that comes with Bootstrap.
    5. Hint: Refer to Bootstrap documentation on the Navbar component.
  2. Header at the top includes:
    1. Background image
      1. Use CSS property background-image to include a background image on the header.
      2. You may use background-size: cover; to make the image look good across all screen sizes.
      3. Play around with background-position to position the background image if you’d like.
    2. Company name
    3. Company slogan
  3. Below the header, a featured section that displays text and pictures that showcase at least two features of the company’s product or services.
    1. Each feature has some heading text, a paragraph, and an image.
    2. A line between each feature.
    3. Must use Bootstrap’s Grid system to create the rows and columns in this section (for all screen sizes).
      1. Hint: use .container, .row, and various .col classes (refer to Bootstrap documentation)
  4. Footer on the bottom of the page.
  5. Mobile Devices (0 – 767px):
    1. Single-column layout,
    2. Navbar collapses into a hamburger menu (refer to Bootstrap documentation on how to easily implement this).
    3. Featured section’s order from top to bottom must be Feature 1 heading, Feature 1 description, Feature 1 image, Feature 2 heading, Feature 2 description, and Feature 2 image.
    4. Some spacing around each feature (not edge to edge)
  6. Tablet Devices(768px – 991px):
    1. Navbar expands to show all nav links.
    2. One feature per row.
      1. Alternate order of picture and text per row.
      2. Column that contains feature’s text must not be the same width as the column that contains the feature’s image.
    3. Leave whitespace around each feature (not edge to edge)
  7. Desktop Devices (992px and above):
    1. Layout remains the same. Adjust as necessary.
  8. For each device, adjust font sizes, images sizes, etc. as necessary.
  9. All elements and content need to be readable.
  10.  Feel free to play around with Bootstrap and get familiar with it. Bootstrap is extremely useful and is used widely in industry. You are welcome to add additional features, as long as all requirements above are satisfied.
Team (team.html)
  1. Navigation Bar requirements the same as home.html. Navigation bar must look exactly the same in both home.html and team.html.
    1. “Team” link is a different color than other three links to indicate user is viewing the Team page.
  2. Header remains the same, except the heading must read “Our Team” or similar.
  3. Below the header, display at least three team members. Display each team member’s:
    1. Image
    2. Name
    3. Job title
    4. Short bio
    5. A colored “View more” button (that does not need to link anywhere)
  4. Mobile Devices (0 – 767px):
    1. Navbar and header follow the same requirements as Home page.
    2. One team member per row.
  5. Tablet Devices(768px – 991px):
    1. Navbar and header follow the same requirements as Home page.
    2. Three team members per row.
  6. Desktop Devices (992px and above):
    1. Layout remains the same. Adjust as necessary.
Submission/Upload to the server

Until the server is fixed, submit all files to Blackboard. Follow the below steps:

  1. Rename the folder that contains all your A3 files to: ITP303_Assignment3_[usc username]
  2. Compress this folder to a .zip file.
  3. On Blackboard, go to Assignments -> Assignment 3: Bootstrap Company Site and upload the .zip file here.
  4. You will be able to make unlimited submissions. Only the last submission will be graded.

Sample

Note: Samples below don’t always meet all the requirements. Make sure to follow the requirements rather than solely relying on the samples.