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