├── .github ├── pull_request_template.md └── workflows │ └── close.yml ├── GRADING.md ├── HOW-TO-GET-HELP.md ├── HOW-TO-SUBMIT.md ├── HOW_TO_MARK.md ├── design ├── cakes wireframe - desktop.png └── cakes wireframe - mobile.png ├── index.html ├── readme.md └── style.css /.github/pull_request_template.md: -------------------------------------------------------------------------------- 1 | 14 | 15 | **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_ 16 | 17 | # Your Details 18 | 19 | - Your Name: 20 | - Your City: 21 | - Your Slack Name: 22 | 23 | # Homework Details 24 | 25 | - Module: 26 | - Week: 27 | 28 | # Notes 29 | 30 | - What did you find easy? 31 | 32 | - What did you find hard? 33 | 34 | - What do you still not understand? 35 | 36 | - Any other notes? 37 | -------------------------------------------------------------------------------- /.github/workflows/close.yml: -------------------------------------------------------------------------------- 1 | name: "Close stale issues and PRs" 2 | on: 3 | workflow_dispatch: 4 | schedule: 5 | - cron: "30 1 * * *" 6 | 7 | jobs: 8 | stale: 9 | runs-on: ubuntu-latest 10 | steps: 11 | - uses: actions/stale@v3 12 | with: 13 | 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." 14 | days-before-stale: 42 15 | days-before-close: 0 16 | days-before-issue-stale: -1 17 | days-before-issue-close: -1 18 | -------------------------------------------------------------------------------- /GRADING.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # Grading 8 | 9 | All coursework is graded using the Marking Guide found on the Syllabus. 10 | 11 | http://syllabus.codeyourfuture.io/guides/marking-guide 12 | 13 | If you have any questions on these guidelines - please ask. 14 | 15 | ## Coding Standards 16 | 17 | Your code should follow our Coding Standards or it will be marked poorly. 18 | 19 | https://syllabus.codeyourfuture.io/guides/code-style-guide 20 | -------------------------------------------------------------------------------- /HOW-TO-GET-HELP.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # How To Get Help 8 | 9 | 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! 10 | 11 | ## Guide 12 | 13 | Please review our guide on the Syllabus for how to get help 14 | 15 | https://syllabus.codeyourfuture.io/guides/escalation-policy/ 16 | 17 | You should complete all of the steps in the order listed to get help 18 | 19 | ## Reporting Issues in Coursework 20 | 21 | Is there a problem with this coursework? 22 | Have you noticed a bug? 23 | Does something not make sense? 24 | 25 | Post in the relevent channel on Slack depending on the module you are completing: 26 | 27 | - Git - `cyf-module-git` 28 | - HTML/CSS - `cyf-module-html-css` 29 | - JavaScript Core 1 - `cyf-module-js1` 30 | - JavaScript Core 2 - `cyf-module-js2` 31 | - JavaScript Core 2 - `cyf-module-js3` 32 | - React - `cyf-module-react` 33 | - Node - `cyf-module-node` 34 | - SQL - `cyf-module-sql` 35 | - MongoDB - `cyf-module-mongodb` 36 | 37 | None of these? Post in #cyf-syllabus. 38 | -------------------------------------------------------------------------------- /HOW-TO-SUBMIT.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | # How To Submit Your Coursework 8 | 9 | You should use Git & Github to submit your coursework as a pull request. 10 | 11 | You can use the Github Desktop cheatsheet here to help you do this. 12 | 13 | [Github Desktop Cheatsheet](http://syllabus.codeyourfuture.io/git/cheatsheet) 14 | 15 | You can also use this lesson to help you submit your coursework. 16 | 17 | [Git Lesson](http://syllabus.codeyourfuture.io/git/index) 18 | 19 | ## Questions & Help 20 | 21 | Not being able to submit your coursework is not an excuse for not doing it. 22 | 23 | If you cannot submit your coursework you **must** message us on Slack to get help. 24 | -------------------------------------------------------------------------------- /HOW_TO_MARK.md: -------------------------------------------------------------------------------- 1 | 6 | 7 | _This file is useful for Volunteers only_ 8 | 9 | ## 1) Solutions 10 | 11 | ### 1.1) Where to find solutions? 12 | 13 | You can find the solution to this coursework in a repository with the same name as this but with `-Solution` after the name. 14 | 15 | For example, for this repo: 16 | 17 | https://github.com/CodeYourFuture/JavaScript-Core-1-Coursework-Week1 18 | 19 | The solutions would be found in: 20 | 21 | https://github.com/CodeYourFuture/JavaScript-Core-1-Coursework-Week1-Solution 22 | 23 | **If you do not have access to these repositories** then please contact your City Coordinator to get access to our Github Team. 24 | 25 | ### 1.2) Using the Solutions Repo 26 | 27 | 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. 28 | 29 | Additionally, you will find marking guides in these places 30 | 31 | - The `marking` folder - Used to store multiple guides on marking 32 | - `marking.md` file - Used to store notes on common problems we're trying to address 33 | - `solutions.md` - A file used by students for notes on best practice 34 | 35 | ## 2) Before You Start 36 | 37 | ### 2.1) Feedback Guide 38 | 39 | A guide for marking coursework can be found here. Please read it before you start. 40 | 41 | https://docs.codeyourfuture.io/teams/education/homework-feedback 42 | 43 | ### 2.2) Marking Guide 44 | 45 | Here is a useful resources you can direct students to when you see them have common mistakes 46 | 47 | https://syllabus.codeyourfuture.io/guides/marking-guide 48 | 49 | 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. 50 | 51 | For example, if the student is leaving in lots of comments out code you could write 52 | 53 | ```txt 54 | Great work so far! 55 | 56 | It's best if you remove code that you're not using, you can read more about this here 57 | https://syllabus.codeyourfuture.io/guides/marking-guide#commented-out-code 58 | ``` 59 | 60 | ### 3.3) Style Guide 61 | 62 | All code at CYF should follow this Style Guide 63 | 64 | https://syllabus.codeyourfuture.io/guides/code-style-guide/ 65 | -------------------------------------------------------------------------------- /design/cakes wireframe - desktop.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Coursework-Week3/cda863a9220efe89e3bd5c5cc2fc5ff2fdbedb60/design/cakes wireframe - desktop.png -------------------------------------------------------------------------------- /design/cakes wireframe - mobile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodeYourFuture/HTML-CSS-Coursework-Week3/cda863a9220efe89e3bd5c5cc2fc5ff2fdbedb60/design/cakes wireframe - mobile.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Responsive Cake webpage 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Cakes Co 2 | 3 | The aim of this exercise is to create a **responsive webpage** showcasing your cake business. 4 | 5 | Two wireframes are provided down below (scroll to the bottom). 6 | 7 | 8 | ## Task 9 | 10 | - **Fork and clone** this repo. 11 | - To fork, hit the 'fork' button in the top right corner of this page on Github. 12 | 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. 13 | - To clone, click the green button that says 'Code' on that page. 14 | 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). 15 | 16 | - 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. 17 | 18 | When you're ready to start coding: 19 | 20 | ### Start with mobile 21 | - Write the HTML following the mobile design 22 | - Then write your CSS for everything to look great on mobile 23 | - Remember to link your CSS file to your HTML file inside the `` in `index.html` 24 | - 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! 25 | 26 | ### Then adapt the page for larger screens 27 | - 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). 28 | - To follow Mobile First principles, we will only be using `min-width` in our media queries (no max-width!) 29 | - You should **use 2 different breakpoints**, meaning you should have **3** different variants of your layout. Here's an example. 30 | 31 | 32 | If we have the following **2 breakpoints**: 33 | > - breakpoint 1 --> 540px 34 | > - breakpoint 2 --> 900px 35 | 36 | Then our CSS code will be split into **3**: 37 | > 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. 38 | > 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". 39 | > 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). 40 | 41 | ### Define your own style 42 | - Choose 1-2 fonts to use (lots of [free fonts here](https://fonts.google.com/)) 43 | - 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) 44 | - Select some nice cake pictures to replace the placeholders in the wireframes (good [photo source here](https://unsplash.com/images/food/cake)). 45 | - 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)? 46 | 47 | ### Also 48 | - It's up to you to find a solution for any elements that are visible in desktop and not on mobile - and vice versa. 49 | 50 | 51 | ## Remember 52 | - **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. 53 | - 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). 54 | Your PR should be named following this format: `Class name - Your name`, for example: `London class 7 - Adam Smith`. 55 | 56 | 57 | ## Deployment (optional) 58 | 59 | [Deploy your work to Netlify!](https://syllabus.codeyourfuture.io/workshops/deployment/workshop/instructions/) 60 | Remember to follow this naming convention when creating your custom URL in Netlify: `https://cyf-[your-Github-username]-cakes.netlify.app/` 61 | 62 | 63 | ## Wireframes 64 | 65 | Build the mobile wireframe first, then adapt it for larger screens. 66 | 67 | *Mobile wireframe:* 68 | ![alt text](./design/cakes%20wireframe%20-%20mobile.png "Cakes Co mobile design") 69 | 70 | *Desktop wireframe:* 71 | ![alt text](./design/cakes%20wireframe%20-%20desktop.png "Cakes Co desktop design") 72 | 73 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* Add your styling here */ 2 | --------------------------------------------------------------------------------