CCT360: Web Development and Design II - Updated November 25

Project 2: Bootstrap 5.x Professional Portfolio Website

Project 2: Professional Portfolio Website

Description

Students are required to create a professional portfolio website. The site must be created primarily with Bootstrap 5.x. HTML/CSS3 can be used for additional styling. Bootstrap can be embedded directly or referenced via the CDN link.

Requirements – HTML

The website should consist of the following 5 HTML pages. Students also have the option of creating a single page with all of the entries.

Home Page

Portfolio/Gallery

Resume/CV

Contact

Time-Based Page (Example: News, Blog, Events)

Students also have the option of creating additional pages as they see fit

Requirements – Bootstrap

The website must also incorporate the following Bootstrap Components:

NavBar

Grid

Table

Typography

Cards

Requirements – Bootstrap Dynamic Visual Components

The website must also incorporate the following Bootstrap Visual Components:

Carousel/Slideshow

Tooltips or Collapse

Dropdowns or Popups or Modal

Local Video

Progress Bars

Requirements – Rich Media

Students are required to create their own media assets. The use of media assets from the Internet is not permissible.

Requirements – Responsive Design

Where suitable, students should employ the use of at least one breakpoint, ideally for a small mobile screen. Students can also include additional breakpoints if they choose to do so.

Requirements – File Size Limitations

A compressed zip file of a maximum file size of 35MB.

Process Documentation (approx.10 – 15 pages with images double spaced)

In a PDF file address the following:

 An explanation of the process that you undertook in planning and designing the Bootstrap Website. Be sure to explain any components or templates used, along with any sketches or IA diagrams

 Include 1 desktop wireframe. and 1 small mobile wireframe. ≥576px

 A discussion of any usability and accessibility principles that you included on your website: how your website is adherent to usability and WCAG 2.0 standards; ARIA labels and HTML labels are properly edited

 A brief discussion of any Small Responsive Design Breakpoints that were included in your website

 References to any relevant readings along with website components and templates utilized from the Internet