[TECH ED] Cakes Co #13

Link to the coursework

https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/Cakes-Co

Why are we doing this?

This project is thinking about "mobile first" design. Developers build sites on computers/laptops, but most users are on phones. So we should make our designs work first on a phone, and then expand them for larger screens.

https://explodingtopics.com/blog/mobile-internet-traffic

(In some sectors this is more like 90%. Your company will track their own statistics on this with a tool like Google Analytics.)

Maximum time in hours

8

How to get help

Share your blockers in your class channel. Use the opportunity to refine your skill in Asking Questions like a developer.

Creating a Week 2 branch in Git

We previously learned about using branches in Git. To recap, branches are useful to "test" a set of commits. The main branch is treated as a special branch, where it only contains commits that all of your colleagues have agreed on.

To allow us to easily understand what has changed on your branch, it should always start from the main branch, not another branch. In other words, your branch should only contain commits for that one branch, not any other branches.

In your coursework, we want you to practice using Git in the way that you will when working as a developer. Because of this, when starting the Week 2 (or Week 3, Week 4, etc) coursework you should switch to the main branch before creating a new branch.

To do this:

1. Using this clip, switch to the main branch 👉 https://youtube.com/clip/Ugkx2OzD279ry4XKFNpeyqJTeBqtrbGJfgRq
2. Create a new branch as you learned previously

How to submit

1. Fork to your Github account.
2. Make a branch for this project. Make sure you have switched to the main branch first!
3. Make regular small commits in this branch with clear messages.
4. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

There are several projects in this repo. Make a new branch for each project.

gitGraph
    commit id: "start"
    branch feature/cakes-co
    commit id: "skeleton page code"
    commit id: "Fonts and colours"
    commit id: "mobile layout"
    commit id: "lighthouse audit revisions mobile"
    commit id: "desktop layout"
    commit id: "lighthouse audit revisions desktop"
    checkout main
    merge feature/cakes-co

How to review

1. Complete your PR template
2. Ask for review from a classmate or mentor
3. Make changes based on their feedback
4. Review and refactor again next week

Anything else?

https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/
https://codepen.io/LucyMac/pen/MWvNBLo

Stretch: If you are already familiar with media queries, try using container queries to develop your learning.