Link to the coursework

https://flexboxfroggy.com/

Why are we doing this?

Flexbox Froggy is a fun way to understand CSS Flexbox. You will use flexbox mainly to layout flexible lists in modern codebases, and you will encounter it a lot in legacy codebases as a professional developer.

So jump the froggy today!

Maximum time in hours

0

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

No submission step.

Link to the coursework

https://github.com/CodeYourFuture/HTML-CSS-Module-Project

Why are we doing this?

Each module you should produce something substantial that takes multiple weeks for your professional portfolio. This project starts fairly simply and gets more complicated as you iterate, which is how websites are built in real life too.

Unlike the wireframe projects, this project uses mockups. Mockups are pixel-finished pictures of how websites should look, and getting the look exactly right is the goal here, as well as maintaining correctness in your underlying code.

Maximum time in hours

6

How to get help

Share your blockers in your class channel. Use the opportunity to refine your skill in Asking Questions like a developer. Bring your work to class and use study time to work on problems with other developers.

How to submit

1. Fork to your Github account.
2. Make regular small commits with clear messages.
3. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

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 once the coursework solutions are released.

Anything else?

Mockups only ever show a few snapshots of pages, but websites must work at all the sizes in between. It’s a challenge, but it’s one everyone else faces too. How do they solve it? Research will help you, as will collaboration.

Link to the coursework

https://scrimba.com/learn/design

Why are we doing this?

Runtime 1 hour 8 minutes.

This course will help you with your Cake project, and give you some fundamentals of design to help you interpret and express design as code.

Maximum time in hours

1.5

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

No submission step

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.

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.

Link to the coursework

https://github.com/CodeYourFuture/HTML-CSS-Module-Project/tree/master/level-2

Why are we doing this?

Thinking back to Fundamentals, we develop products through iteration. We don’t build everything all at once, we add features over time. So let’s embed that practice now by:

1. extending the homepage by adding a new block to it.
2. adding a new store page that allows users to buy a Karma device using an order form.
3. connecting the 2 pages together by adding navigation

You are NOT required to make this page work on mobile devices! ;)

Stretch goals

The radio buttons and checkbox in the design require some advanced CSS to follow the design while still using the native functionality of these inputs. Try and give it a go, but don’t lose sleep over it if you don’t manage! This is challenging and will require some research.

Maximum time in hours

8

How to submit

• Remember to commit and push your code often. Don’t git add . Make sure you know what you are putting in your codebase.
• Once you’re ready for review, do a final push and create a Pull Request.

Note: If you’ve added your code to the same branch you were using last week, then it will just update your original Pull Request and you won’t need a new PR.

How to review

1. Ask for review from a classmate or mentor, clearly describing what you are looking for
2. Make changes based on their feedback
3. Review and refactor again next week

Anything else?

You’ll find the designs at the following Figma links:
HOMEPAGE - New section: https://www.figma.com/file/BPtLAPr1HhwQdNfxGyFouo/Karma-design?node-id=23%3A0
STORE - New page: https://www.figma.com/file/BPtLAPr1HhwQdNfxGyFouo/Karma-design?node-id=858%3A3

You can apply for a free Figma for Education account using your trainee subdomain email.

Link to the coursework

https://curriculum.codeyourfuture.io/html-css/sprints/2/prep/

Why are we doing this?

You might be used to school environments where you attend a lecture or class and then are given homework or tests to show you heard or understood the lecture. We don’t do that at CYF as we have found it doesn’t prepare people well for a good job in tech.

As a tech professional, you won’t be told a series of answers and then asked just to demonstrate your understanding/recollection of them! That will never happen! There’s no business value there at all. As a tech professional, your job will be to ask good questions, research new ideas, and figure out solutions to unsolved problems. So let’s start this now.

The prep work here will introduce you to new concepts for the week. If you already have all these concepts, you need to identify something else in your coursework to bring because everyone is expected to come to class with questions.

Find this week’s blockers thread in your cohort channel and add your question to it.

Maximum time in hours

3

How to get help

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

Link to the coursework

https://github.com/CodeYourFuture/CLI-Treasure-Hunt

Why are we doing this?

Alongside learning web development, you need to become familiar with the basics of the command line. The command line is how you talk directly to your computer, instead of pointing and clicking at areas on a screen to trigger actions.

All interfaces are limited sets of possible interactions with data, arranged in ways (with words, colours, pictures, pixels) to guide the user towards the information they want. Clicking a link on a screen is really no different to typing cd Clues/Where . In both cases you are changing to a new directory. The difference is only in the interface you use to issue the command. Do not confuse the method with the goal.

I really want you all to understand this deeply and think about it many times over the course of your career. Do not decide you are “front end” or “back end” or limit your understanding in these ways. A CLI is an interface. An API is an interface. A GUI is an interface. All interfaces are maps. It’s how we travel around data to find what we need.

The map is not the territory.

Maximum time in hours

1

How to get help

Share your blockers in your class channel.

How to submit

1. Clone the repo git@github.com:CodeYourFuture/CLI-Treasure-Hunt.git
2. Open the folder in VSCode
3. Open the terminal inside VSCode
4. Type node clue.js to start

The submission clue is inside the treasure hunt.

Anything else?

In the Beginning was the Command Line ~ Neal Stephenson, 1999

Coursework content

Read the active listening techniques article and reflect. Write a 250-word essay on your own listening habits, challenges and improvement goals.

Estimated time in hours

1

What is the purpose of this assignment?

This assignment will improve your listening and writing skills.

How to submit

Share the link to your Google doc on the ticket on your coursework board.

Coursework content

You are back to your Plan your Life as a Developer.

This plan is not something that you can finalise in a short period. You’ll need to go back to it a few more times if you’d like to find an honest description of your current week and identify the necessary changes to it.

As a week will have passed since you did it, you can compare what you wrote with the reality of the week that passed.

Reflections on your current plan.

• How much energy did you have when you sat down to study and work on CYF projects?
• How tired or distracted were you?
• How many interruptions did you get?

Other areas to reflect:

• On your work (or other studies), did you work longer hours than what you planned? What happened?
• Were there any activities that you dedicated more time to it than what you expected?
• How is your sleep?
• Do you manage to feel rested in the morning?
• How do you start your day?

Reflecting on this, think about these two topics:

1. What changes you might need to bring to your life.
2. Define their short/medium/long-term goals.

Then:

• Add these two items to your existing Google Doc. (Reminder: minimum 50 words each and reviewed with an automated grammar tool)
• Share them with your pair.
• Discuss with them, so you can identify anything that is missing, if what you are planning is realistic, or if it is just right.

Estimated time in hours

1.5

What is the purpose of this assignment?

You are getting a deeper understanding of what blockers and distractions that hold you up. But now, you also have to start thinking about what can you do to change this situation and what goals can you start putting in place.

How to submit

• Create a document with the following titles and add your reflections to it:
  - Summary of my current situation
  - My current plan
  - What distractions do I have / My energy levels during the study
  - Original plans I had after I finished the training
• Share your document with 1-2 people with similar situations or experiences
• Discuss your document with them to get some input
• Add the link to this document as a comment on this issue. Make sure it can be commented on by anyone.

Link to the coursework

https://github.com/CodeYourFuture/CYF-Workshops/tree/main/asking-questions

Why are we doing this?

Before you come to class, you need to make sure you are ready to participate in the workshop.

For this workshop you will need:

• Chrome with Devtools
• A ChatGPT account
• This Asking Questions Workshop page
• To read this article about Mental Models
• And bookmark this one: thinking better

Make sure you come to class having looked over what you will be doing.

Maximum time in hours

0.15

How to get help

Share your blockers in your class channel. Practice asking good questions, with links and context.

How to submit

no submission step

Coursework content

In a Google sheet, make a budget of how much money you make on average on your shift work, including the hours you work and all the expenses related to it (transportation, fuel, repair costs).

Is your shift work worthwhile doing compared to other types of work?
Check out this link to understand the differences.

Reflect on what changes you might need to bring to your life.
- Summary of my current situation
- My current plan
- What distractions do I have / My energy levels during the study
- Original plans I had after I finished the training
- Define them in short/medium/long-term goals

Estimated time in hours

0.5

What is the purpose of this assignment?

This exercise is for you to get a job in tech, whilst focussing on the right things and still having enough money to pay your bills.

How to submit

Optional: you can discuss it with a peer or volunteer to get their feedback and insights.

Anything else?

n/a