CPNT-262 Assignment 2 - Vue/Nuxt Landing Page

  • Due: Sunday April 3st @ 11:59pm
  • Weight: 15% of the final mark

Overview

For this assignment, you will create a landing page in nuxt or vue. Your landing page must be designed using reusable components. It can be on any topic.

This assignment is meant to be cumulative, so while your javascript and vue code is the priority for most marks, style, layout, and application of conventions are also considered for your overall grade.

Instructions

  • Create a nuxt 2, nuxt 3, or vue 3 project
  • Use any nuxt modules that will improve your site (note that they must be properly used and points will be deducted for modules added but not used)
  • Create components that could be reused on other pages. Use props and slots where applicable
  • Style the site with your preferred css approach
  • Deploy your site to Netlify

Page Size and Content Requirements

  • Your page should either be either:
    • short but heavy in content/style (2-3 screens of content) or
    • longer but can be less content or style heavy (4-6 screens of content)
  • Make use of layout conventions covered throughout the course

Rubric

Components 5pts

  • ui components
  • layout components
  • utilities
  • main content components

Vue Syntax and Javascript 5pts

  • v-for
  • props
  • moustache syntax
  • v-bind
  • v-slot
  • computed properties
  • objects, and arrays

General Requirements 5pts

  • Your page makes use of all your components
  • README
    • Course Title
    • Author name
    • Links to:
      • Github Repo
      • Netlify Site
    • Personal Reflection and Debugging Journal
    • Attributions for code or assets that are not your own

Submission

  1. Create a GitHub repo of your project;
  2. Download a ZIP of the project;
  3. In Brightspace, submit your ZIP and include the following as a comment in your submission:
    • a link to your GitHub repo;
    • a link to the Netlify site;