MAD9013

# Project List

# 1. Portfolio Website

Introduction

You will build a 3-page responsive portfolio website using the Bootstrap framework. You will customize the basic Bootstrap system to create your own design, colour scheme, and type styles.

# Project Requirements

# General

  • You must use the Bootstrap Framework
  • The design and layout of your website must be original. You cannot use one of the free Bootstrap web themes, doing so will result in a zero.
  • You must include a Google Font
  • Website must be fully responsive
  • Website must have real, original content. No placeholder text. Properly sourced and credited stock photography is allowed.
  • You will be marked on both the quality of your code and the quality of the design.
  • Your website must be live on GitHub Pages

# Elements required on each page

  • Every page must have the same navigation menu at the top
  • The nav menu lets the user navigate between Home, Portfolio, and Contact page.
  • The colour scheme needs to be the same on every page.
  • A consistent container should be used across the website.
  • Consistent transitions on all hover/focus states

# Page 1: Home Page

  • A large hero banner used as a welcome to your website. It should be 100% of the viewport width and 60 - 90% of the viewport height.
  • The home page will contain a list of at least 6 technologies that you have learned to use this semester. Each technology (eg HTML, CSS, or JS) needs an icon and at least one paragraph detailing what you can do with that technology.
  • The title on the home page will be your name.

# Page 2: Portfolio

  • The portfolio page will contain a list of 3 or more projects that you have created and stored on Github or can be linked to in another way (for example a link to an Xd preview).
    • More projects is not necessarily better. Display only projects you are proud of and feel properly represent your skills.
  • The projects will be displayed as Bootstrap Card elements.
    • Each card should be the same width.
    • As the width of the page adjusts so will the number of cards shown in each row.
    • Each card needs to have a image at the top of the Card
    • Card sizes can be adjusted as well as the page resizes. Try to always make the best use of the available width.
    • Include a link to the project if available.
  • The title on this page will be Portfolio

# Page 3: Contact

  • The third page is a form that the visitor would fill out to request that you work on a job.
  • They will need to provide their own contact info - name, email, phone
  • They will also need to provide a time frame for the work and details about the job.
  • The title on this page will be Contact
  • The form should be responsive to take proper advantage of each screen size.

# Frequently Asked Questions

Q: Is Javascript required?

A: As this is an HTML & CSS course, JS is technically not required. However, many of the Bootstrap components require the base bootstrap.js file. Therefore, I suggest you include it just to be safe. You will not lose marks for not using JS, however if you include a component that requires JS and you did not include it creating an issue with your site, you will lose marks. If you wish to add your own custom JS you can, however the same rules apply. If your JS works, that's great it will not affect your mark. However, if you write JS that causes bugs in your site taking away from the usability, you will lose marks.

Q: I want to add different/more content than is listed. Is that ok?

A: You must include all of the required elements and content listed above. Focus on completing the requirements above well first. Once you have included all of it and feel it cannot be improved, you may then add more content if you wish.

Q: Does my form need to have a submit action?

A: No, I will only be marking HTML semantics and CSS styling. However, if you decide to use this site to try and get work you should add a Formspree (opens new window) or similar service to the submission so that a potential employer could use your form.

# Submission

WARNING

Due December 17th at 11:59pm (See BS LMS for exact due date)

You will need to have a private GitHub Repo of this project.

You will need to set the main branch of the repo as the GitHub Pages branch.

You must invite your instructor arobillard to collaborate on the repo through the settings page.

Open BS LMS and go to the Activities > Assignments page. Go to the Portfolio exercise and submit the URL to your Private Repo.

Last Updated: 8/26/2021, 11:01:07 PM

←