CodeYourFuture · SULAIMAN-100 · Feb 21, 2020 · Feb 22, 2020 · Oct 26, 2020 · Oct 26, 2020
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -0,0 +1,36 @@
+<!--
+
+The title for your pull request should be made in this format
+
+CITY CLASS_NO - FIRST_NAME LAST_NAME - MODULE - WEEK_NO
+
+For example,
+
+London Class 7 - Chris Owen - HTML/CSS - Week 1
+
+Please complete the details below this message
+
+-->
+
+**Volunteers: Are you marking this coursework?** _You can find a guide on how to mark this coursework in `HOW_TO_MARK.md` in the root of this repository_
+
+# Your Details
+
+- Your Name:
+- Your City:
+- Your Slack Name:
+
+# Homework Details
+
+- Module:
+- Week:
+
+# Notes
+
+- What did you find easy?
+
+- What did you find hard?
+
+- What do you still not understand?
+
+- Any other notes?
diff --git a/.github/workflows/close.yml b/.github/workflows/close.yml
@@ -0,0 +1,17 @@
+name: "Close stale issues and PRs"
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "30 1 * * *"
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v3
+        with:
+          stale-pr-message: "Your coursework submission has been closed because nobody has interacted with it in six weeks. You are welcome to re-open it to get more feedback."
+          days-before-stale: 42
+          days-before-close: 0
+          days-before-issue-stale: -1
+          days-before-issue-close: -1
diff --git a/GRADING.md b/GRADING.md
@@ -0,0 +1,19 @@
+<!--
+Do not edit this file.
+Make a change to the template and then pull changes
+https://github.com/CodeYourFuture/CYF-Coursework-Template
+-->
+
+# Grading
+
+All coursework is graded using the Marking Guide found on the Syllabus.
+
+http://syllabus.codeyourfuture.io/guides/marking-guide
+
+If you have any questions on these guidelines - please ask.
+
+## Coding Standards
+
+Your code should follow our Coding Standards or it will be marked poorly.
+
+https://syllabus.codeyourfuture.io/guides/code-style-guide
diff --git a/HOW-TO-GET-HELP.md b/HOW-TO-GET-HELP.md
@@ -0,0 +1,37 @@
+<!--
+Do not edit this file.
+Make a change to the template and then pull changes.
+https://github.com/CodeYourFuture/CYF-Coursework-Template
+-->
+
+# How To Get Help
+
+When you get stuck it's important that you ask for help at the right time and in the right way - this means you will be able to solve you problem as quickly as possible!
+
+## Guide
+
+Please review our guide on the Syllabus for how to get help
+
+https://syllabus.codeyourfuture.io/guides/escalation-policy/
+
+You should complete all of the steps in the order listed to get help
+
+## Reporting Issues in Coursework
+
+Is there a problem with this coursework? 
+Have you noticed a bug? 
+Does something not make sense?
+
+Post in the relevent channel on Slack depending on the module you are completing:
+
+- Git - `cyf-module-git`
+- HTML/CSS - `cyf-module-html-css`
+- JavaScript Core 1 - `cyf-module-js1`
+- JavaScript Core 2 - `cyf-module-js2`
+- JavaScript Core 2 - `cyf-module-js3`
+- React - `cyf-module-react`
+- Node - `cyf-module-node`
+- SQL - `cyf-module-sql`
+- MongoDB - `cyf-module-mongodb`
+
+None of these? Post in #cyf-syllabus.
diff --git a/HOW-TO-SUBMIT.md b/HOW-TO-SUBMIT.md
@@ -0,0 +1,23 @@
+<!--
+Do not edit this file.
+Make a change to the template and then pull changes.
+https://github.com/CodeYourFuture/CYF-Coursework-Template
+-->
+
+# How To Submit Your Coursework
+
+You should use Git & Github to submit your coursework as a pull request.
+
+You can use the Github Desktop cheatsheet here to help you do this.
+
+[Github Desktop Cheatsheet](http://syllabus.codeyourfuture.io/git/cheatsheet)
+
+You can also use this lesson to help you submit your coursework.
+
+[Git Lesson](http://syllabus.codeyourfuture.io/git/index)
+
+## Questions & Help
+
+Not being able to submit your coursework is not an excuse for not doing it.
+
+If you cannot submit your coursework you **must** message us on Slack to get help.
diff --git a/HOW_TO_MARK.md b/HOW_TO_MARK.md
@@ -0,0 +1,64 @@
+<!--
+Do not edit this file.
+Make a change to the template and then pull changes.
+https://github.com/CodeYourFuture/CYF-Coursework-Template
+-->
+
+_This file is useful for Volunteers only_
+
+## 1) Solutions
+
+### 1.1) Where to find solutions?
+
+You can find the solution to this coursework in a repository with the same name as this but with `-Solution` after the name.
+
+For example, for this repo:
+
+https://github.com/CodeYourFuture/JavaScript-Core-1-Coursework-Week1
+
+The solutions would be found in:
+
+https://github.com/CodeYourFuture/JavaScript-Core-1-Coursework-Week1-Solution
+
+**If you do not have access to these repositories** then please contact your City Coordinator to get access to our Github Team.
+
+### 1.2) Using the Solutions Repo
+
+In these repositories you will find solutions to each weeks coursework. These solutions are example answers and will not be the exact solution that students give. You should use it to inform your feedback of the coursework.
+
+Additionally, you will find marking guides in these places
+
+- The `marking` folder - Used to store multiple guides on marking
+- `marking.md` file - Used to store notes on common problems we're trying to address
+- `solutions.md` - A file used by students for notes on best practice
+
+## 2) Before You Start
+
+### 2.1) Feedback Guide
+
+A guide for marking coursework can be found here. Please read it before you start.
+
+https://docs.codeyourfuture.io/teams/education/homework-feedback
+
+### 2.2) Marking Guide
+
+Here is a useful resources you can direct students to when you see them have common mistakes
+
+https://syllabus.codeyourfuture.io/guides/marking-guide
+
+This guide should be used when you see a student making a common mistake so instead of writing out a reply you can send them to the a good resource.
+
+For example, if the student is leaving in lots of comments out code you could write
+
+```txt
+Great work so far!
+
+It's best if you remove code that you're not using, you can read more about this here
+https://syllabus.codeyourfuture.io/guides/marking-guide#commented-out-code
+```
+
+### 3.3) Style Guide
+
+All code at CYF should follow this Style Guide
+
+https://syllabus.codeyourfuture.io/guides/code-style-guide/
diff --git a/design/cakes wireframe - desktop.png b/design/cakes wireframe - desktop.png
diff --git a/design/cakes wireframe - mobile.png b/design/cakes wireframe - mobile.png
diff --git a/images/mums-w-frame.jpg b/images/mums-w-frame.jpg
diff --git a/readme.md b/readme.md
@@ -1,21 +1,72 @@
-Create a responsive webpage showcasing your cake business
+# Cakes Co
 
-## Set up
-1) Fork this repository (so you have a copy of it in your own Github account)
-2) Clone the repository to your computer (so you can access it locally and can add code to it!)
---
-3) Once you've started coding (folllowing the instructions below), remember to commit and push your code frequently.
-4) When you're ready to share something (even if it's unfinished!), open a Pull Request so a teacher can review your work.
+The aim of this exercise is to create a **responsive webpage** showcasing your cake business.
 
+Two wireframes are provided down below (scroll to the bottom).
 
-## Exercise
 
-### Start with your mobile design
-- Draw a wireframe of how the website will look like on mobile
-- Write the HTML following this mobile design
+## Task
+
+ - **Fork and clone** this repo.
+   - To fork, hit the 'fork' button in the top right corner of this page on Github. 
+  Now you should be on your own Github repository - you'll know this because your name should now be in the repo name at the top of the Github page. 
+   - To clone, click the green button that says 'Code' on that page.
+  Now the code is on your own machine (this happened when you cloned), AND it's linked to your own Cakes repository on Github (which was created when you forked).
+
+ - Before you start coding, **create a new branch** following this format `your-class-name/your-name`, for example: `london-class-7/adam-smith`. Your branch name should be all lowercase, with no spaces. 
+
+When you're ready to start coding:
+
+### Start with mobile
+- Write the HTML following the mobile design
 - Then write your CSS for everything to look great on mobile
+- Remember to link your CSS file to your HTML file inside the `<head>` in `index.html`
+- You don't need to use any media queries yet, because we're following a [Mobile First](https://www.invisionapp.com/inside-design/mobile-first-design/) approach!
+
+### Then adapt the page for larger screens
+- Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen (see the desktop wireframe design below).
+- To follow Mobile First principles, we will only be using `min-width` in our media queries (no max-width!)
+- You should **use 2 different breakpoints**, meaning you should have **3** different variants of your layout. Here's an example.  
+
+
+  If we have the following **2 breakpoints**:  
+  > - breakpoint 1 --> 540px  
+  > - breakpoint 2 --> 900px  
+
+  Then our CSS code will be split into **3**:  
+  > 1. **"default"**: default styles, should implement the mobile design (no media query used for these). These styles will apply to all screen sizes by default.  
+  > 2. **"medium"**: Our first media query `@media (min-width: 540px) {...}` **will overwrite our default styles** for screens at least 540px wide. Screens *below* 540px will apply the styles from the "default".  
+  > 3. **"large"**: Our second media query `@media (min-width: 900px) {...}` **will overwrite our default AND medium styles** for screens at least 900px wide (no upper limit).  
+
+### Define your own style
+  - Choose 1-2 fonts to use (lots of [free fonts here](https://fonts.google.com/))
+  - Choose 2-3 colours that you think go together well, and try to limit yourself to those in your CSS ([look here](https://coolors.co/palettes/trending) for inspiration)
+  - Select some nice cake pictures to replace the placeholders in the wireframes (good [photo source here](https://unsplash.com/images/food/cake)).
+  - Get creative! Can you add some cool hover effects to buttons and [images](https://www.wix.com/website-template/view/html/1911?siteId=c1c72d26-c040-41f2-80ce-0b0f8aef01b4&metaSiteId=5d77fab8-f068-4228-8b61-4181af054ca6&originUrl=https%3A%2F%2Fwww.wix.com%2Fwebsite%2Ftemplates&tpClick=view_button)?
+
+### Also
+- It's up to you to find a solution for any elements that are visible in desktop and not on mobile - and vice versa.
+
+
+## Remember
+ - **Commit and push your code often** so you get into the habit and you avoid losing any code that you write if your machine crashes for example. 
+ - Once you're ready to submit your homework for review, do a final push and **create a Pull Request**. If you're unsure how to do this, [have a look here](https://syllabus.codeyourfuture.io/git/cheatsheet/#i-want-to-send-my-code-to-volunteers-pushing).  
+  Your PR should be named following this format: `Class name - Your name`, for example: `London class 7 - Adam Smith`.
+
+
+## Deployment (optional)
+
+[Deploy your work to Netlify!](https://syllabus.codeyourfuture.io/workshops/deployment/workshop/instructions/)
+Remember to follow this naming convention when creating your custom URL in Netlify: `https://cyf-[your-Github-username]-cakes.netlify.app/`
+
+
+## Wireframes
+
+Build the mobile wireframe first, then adapt it for larger screens.  
+
+*Mobile wireframe:*  
+![alt text](./design/cakes%20wireframe%20-%20mobile.png "Cakes Co mobile design")
 
-### Then adapt the page to look good on desktop
-- Now add media queries to your CSS, and change the layout and sizing of elements so they make better use of a wider screen
+*Desktop wireframe:*  
+![alt text](./design/cakes%20wireframe%20-%20desktop.png "Cakes Co desktop design")
 
-![Wireframe for inspiration:](./images/mums-w-frame.jpg)