Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/quackness/phaser-game


https://github.com/quackness/phaser-game

javascript phaser tailwind

Last synced: 4 days ago
JSON representation

Awesome Lists containing this project

README 

        
[![Open in Codespaces](https://classroom.github.com/assets/launch-codespace-7f7980b617ed060a017424585567c406b6ee15c891e84e1186181d67ecf80aa0.svg)](https://classroom.github.com/open-in-codespaces?assignment_repo_id=13039459)

   

  



# PROG 5010 - Assignment 2 



##  Interactive Website built with Advanced CSS Tools



**Due as posted in Brightspace**

 

### Instructions:  



- Open this repository in the default GitHub Codespace as shown in class.

- Add the Live Server extension to VS Code as shown in class.

- You must ensure that your solution has been pushed to GitHub in order to get credit for the assignment.  

- This is to be an individual assignment (i.e. not group work).

- The **rubric/checklist** on Brightspace **should act as your guide of what to demonstrate in the video**. The video file (or link) should be submitted to **Brightspace** before the deadline.



###  Important Note: 



You must **ensure that your solution has been committed & pushed to GitHub at least three times** while working on the assignment (i.e. at different stages of completion) in order to get credit for the assignment.  



##  Overview



The task is to create a vibrant, single-page website for the **After School Program at ACME Childcare**, a fictional daycare. The site design will demonstrate your skills in web design and development, employing either *SASS/SCSS*, the *Bootstrap CSS Framework*, or *Tailwind CSS*, or some combination of these. The objective is to craft an engaging and colorful platform that appeals to young children, featuring captivating content, images, and an interactive game built using HTML Canvas.



## General Requirements



**REQ-001 Design Concept**



Students must create a single-page website for the After School Program at ACME Childcare. The site should reflect a welcoming atmosphere for children using vibrant colors, playful fonts, and engaging visuals.



**REQ-002 Content and Imagery**



Incorporate lively content and engaging imagery related to the After School Program. Utilize placeholder text (Lorem Ipsum) for paragraphs if necessary, but ensure headers are meaningful and descriptive. Have at least some engaging images as well.



**REQ-003 HTML Canvas Game**



- Integrate an interactive game using HTML Canvas. 

- You are encouraged to follow an **online tutorial** for game development, and may even choose one using a popular JS gaming library such as *Phaser*, but you must clearly cite the tutorial in the code.



**REQ-004 Adding an Innovative Feature**



Add an innovative feature not included in the tutorial from the above requirement to enhance the game's appeal or functionality. Creativity is encouraged in this aspect.



## Architecture Requirements



**REQ-005 Advanced CSS Techniques**



You must choose and apply one or more of the following techniques: SASS/SCSS, the Bootstrap CSS Framework, or Tailwind CSS, to structure and style the website.



## Instructions



**1.**  **Don’t forget that a Code Review demonstration of your code is a necessary part of this assignment. You MUST complete the code explanation/code review part of the video submission checklist to get credit for the assignment. Part of the assessment will include your ability to speak about the code you wrote, even if it doesn’t completely work or do what you expect. You do not need audio or to speak during the rest of the video, but it is required for the code review section as indicated in the checklist.**



**2.** **Late submissions will be subject to the late penalties laid out in the course outline.**



## Submission Instructions

### Video Recording Submission:



You will demonstrate the completion of this project via a **video screen-capture recording** of you navigating your completed Website in the **browser** (e.g. Chrome) and viewing your **code** in the text editor (e.g. VS Code within your GitHub Codespace) to show completion of the rubric/checklist. You will post **either your video file or a link to it** (e,g, a Microsoft Stream recording, make sure to give the instructor permissions to watch it), to the Brightspace Assignment 2 Dropbox prior to the deadline. If you are not sure of how best to capture such a video, seek advice from the instructor prior to the deadline.



NOTE: UNLIKE WEBD5000 **YOU WILL NEED TO SPEAK** DURING THE VIDEO. THERE IS A CODE REVIEW REQUIREMENT IN THE CHECKLIST THAT INVOLVES YOU EXPLAINING AT LEAST A PART OF YOUR CODE THROROUGHLY AND YOU MUST HAVE AUDIO FOR THAT.



> Written with [StackEdit](https://stackedit.io/).