Proposed changes to HTML/CSS tickets to add Git branching strategy

cakes-co.md

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

Loading

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.

form-control.md

Link to the coursework

https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/Form-Controls

Why are we doing this?

Aims

1. Interpret requirements
2. Write a valid form
3. Style form controls
4. Test with Devtools
5. Refactor using Devtools

For this project, you will need to make decisions yourself and explore your own code with Devtools. What blockers will you encounter? How will you get help to solve them? Come to class with questions.

Maximum time in hours

4

How to get help

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

How to submit

Remember from last week's coursework that you should switch to the main branch before creating a new branch.

1. Fork to your Github account.
2. Switch to the main branch
3. Make a branch for this project
4. Make regular small commits in this branch with clear messages.
5. 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. This might feel challenging at first, so this is a good problem to bring to class to work on in groups with mentors.

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?

There are a couple of useful ideas in this project that you can explore further:

1. Learning HTML properly. Many web developers skip straight to JavaScript and don't take the time to learn and properly understand HTML or CSS. This can lead them to writing elaborate and pointless JS code to recreate things that exist already in native HTML. These JS components usually don't have as many features as native HTML and often don't work well with other APIs. Many web developers don't really know that there are other APIs interacting with API, not just the DOM.

Properly understanding HTML and the DOM will make you a powerful and unusual web developer.

2. Refactoring your code every single time. Many developers just add more and more code, especially with CSS, until they have a giant, frightening code mountain that they do not understand and cannot change. But requirements can and do change all the time. So making sure every time you write something you check you need it, and you remove everything you don't need will make your code simple, powerful, precise, and clear.

Finding the simplest thing that can possibly work will make you a powerful and unusual web developer.

Could someone please create a YouTube "clip" on the CYF account for the Cakes Co coursework, for this video https://www.youtube.com/clip/UgkxvXsnm_98Rx0NUZq25apQWA6POccRoQzw for the timestamps 1:37 - 1:55? I can then update the link in the coursework to point to that clip.

https://youtube.com/clip/Ugkx2OzD279ry4XKFNpeyqJTeBqtrbGJfgRq