Why are we doing this?

Code review is an essential part of self-evaluation. Get a code review for a piece of work; then reply and iterate on this feedback.

We’re using GitHub Labels in our Code Review process. In order for a volunteer to review your pull request, you will need to add a “Needs Review” label to it.

• Open your pull request
• In the right sidebar, click Labels, then select “Needs Review”

Take a look at our code review process from beginning to end. Let us know if you have any questions or need help!

🖼️

You can also use any solutions to review your code independently.

Maximum time in hours

1

Instructions

1. Pair up with a volunteer and work on a kata together
2. As a trainee, you will need to explain your thought process, plan out what to do, write the code and check it works
3. Volunteers will need to ask questions to check your understanding, provide guidance if you stuck, give honest and meaningful feedback

🧭 Guidance for volunteers

• Don’t take over! It’s important trainees get used to figuring things out. Provide guidance and assistance but trainees need to struggle to overcome any obstacles with understanding and technical communication
• Give honest feedback. Trainees can’t develop if they don’t receive honest feedback about their progress.
• Ask questions. Sometimes asking a clarifying question can help learners discover errors and often promotes more thoughtful responses.
• Encourage best practices. Reinforce good practices like reading error messages carefully sessions and checking documentation.

Why are we doing this?

Pair programming is an excellent way to develop programming and communication skills. It is often much easier to work through something when working on something 1 to 1. It is also helps our trainees to prepare for technical interviews when they’ll need to code in front of other people.

Acceptance criteria

• You have pair programmed on a kata with a volunteer for at least one hour

Link to the coursework

https://www.codewars.com/users/CodeYourFuture/authored_collections

Why are we doing this?

Every week you need to complete at least three kata. Spend at least 20 minutes, three times a week, on your kata workout.

Find the Collection for this module on the CodeYourFuture account.

You should be able to complete level 7 kata fairly easily now. Make sure to start trying some 6kyus.

Maximum time in hours (Tech has max 16 per week total)

1

How to get help

• Join the #cyf-codewars Slack channel
• Read the CYF Codewars docs
• Read Codewars advice from CYFers
• Read Codewars advice from mentors

Remember, after 20 minutes, take a break.

How to submit

Your codewars progress is tracked automatically and is available on the public API. You don’t need to submit it.

How to review

Once you have completed your kata, look at the other solutions in the solutions view. Consider how many different approaches there are. Is there something you would adopt for yourself? Revise your own solution.

Link to the coursework

https://github.com/CodeYourFuture/Module-Data-Groups/tree/main/Sprint-3

Why are we doing this?

These challenges are designed to develop your problem-solving skills.

Acceptance criteria

• Given the user has entered a number in the input field When the user clicks the “Set Alarm” button Then the “Time Remaining” title should update to show the entered number in mm:ss format

• Given the alarm is set with a valid time When one second passes Then the “Time Remaining” title should decrement by 1 second

• Given the alarm is set with a time of 00:00 When the timer reaches 00:00 Then the alarm sound should play continuously

• Given the alarm sound is currently playing When the user clicks the “Stop Alarm” button Then the alarm sound should stop playing

• Given the alarm is set with a time of 00:10 When the timer reaches 00:00 Then the background color should change And the alarm sound should play

• Given the user has not set an alarm When the page first loads Then the “Time Remaining” title should show 00:00 And no alarm sound should play

Maximum time in hours

4

How to get help

Share your blockers in your class channel https://syllabus.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
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.

Link to the coursework

https://code.visualstudio.com/docs/introvideos/debugging

Why are we doing this?

For months now we have been building a toolkit to help us write great software. In our toolkit we have:

Specifications, like user stories, acceptance criteria, and Given/When/Then Help us understand what to write and check we’ve written the right thing.

Tests, like unit tests and assertions Help us break down our problems and check our solutions work even when we change things.

Asking questions Help us formally reason through our problems and identify gaps in our mental models.

Playing computer Helps us reason about code with a mental model.

Audits, like Lighthouse Help us identify performance and quality improvements we can make to our code.

And now we can add debuggers to our toolkit.

Debuggers are tools that help us find and fix problems, or “bugs”, in our JavaScript code. They let us step through our code line-by-line while it runs to see what is happening. This helps us find the place where our mental model of the code is different from our implementation. Your browser has a debugger and so does VSCode. You have used a similar program to “step through” code in your prep work.

Key reasons we use debuggers:

• See what’s happening inside functions
• Check if variables have expected values
• Pause execution and step through slowly
• Find exactly where mistakes happen

JavaScript debuggers give control over execution flow to methodically test and fix bugs. Watch the first four minutes of the video and then explore the VSCode Debugger on your machine.

Maximum time in hours

.25

How to get help

AI can help you here. Code along with AI so it has the context and ask it when you get stuck. Use this starting prompt:

Act as a friendly, supportive, knowledgeable programming mentor. I am learning the debugger in VSCode.Talk me through the interface step by step. Provide a simple example of a Node script with a bug in it and walk me through finding the bug by setting breakpoints with the debugger. Don’t tell me what the bug is. When I get stuck, answer my questions in CEFR B2 English meant for an adult professional speaking in a second language. When I ask for hints, give me useful pointers. Say okee dokee if you understand and begin your walkthrough.

Remember to use careful prompting when you don’t understand, so you get real learning out of the exchange. Say things like:

The execution is paused and it shows me that i is undefined and this is undefined, but I don’t understand why it says that. Can you explain this to me?

And remember you should always ask your friendly humans in Slack when you get really stuck.

Link to the coursework

http://blog.cleancoder.com/uncle-bob/2014/12/17/TheCyclesOfTDD.html

Why are we doing this?

It is essential that you continue to use your TDD skills throughout the course. It is only through continual practice that you’re able to master all the steps in TDD. The best way to master TDD is by solving katas with this method in a strict time-bound fashion.

Maximum time in hours (Tech has max 16 per week total)

.5

How to get help

https://curriculum.codeyourfuture.io/guides/asking-questions

How to submit

No submission step. When you’ve completed your kata, mark this step as done.

Link to the coursework

https://github.com/CodeYourFuture/Module-Data-Groups/tree/main/Sprint-3

Why are we doing this?

These challenges are designed to develop your problem-solving skills.

Acceptance criteria

• Given a user visits the quote generator web page When the page loads Then a random quote from the quotes array should be displayed on the screen And the name of the person who said the quote should be displayed

• Given a user is viewing a random quote on the quote generator page When the user clicks the ‘New Quote’ button Then a new random quote from the quotes array should be displayed on the screen And the name of the new quote’s author should be displayed

• Given a user is viewing a quote on the quote generator page When the user clicks the ‘New Quote’ button multiple times Then a different random quote from the quotes array should be displayed each time And the name of the new quote’s author should be displayed each time

Maximum time in hours

3

How to get help

Share your blockers in your class channel https://syllabus.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
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.

Link to the coursework

https://github.com/CodeYourFuture/Module-Data-Groups/tree/main/Sprint-3

Why are we doing this?

These challenges are designed to develop your problem-solving skills. Check out the file contents in the directory to familiarise yourself with the starting code.

Acceptance criteria

Here are some checklist-style acceptance criteria for the reading list problem:

• A element is created to contain the list of books

For each book object in the books array:

• A element is created
• The book title is displayed in a element
• The book author is displayed in a element
• An element is added with the source set to the book’s cover image URL
• The containing the book list is added to the DOM inside the element with id content
• Books that have already been read have a green background
• Books that have not yet been read have a red background
• The completed list matches the provided design example
• No errors occur when iterating through the books array
• The page is visually appealing

The goal is to break down the problem into specific, testable elements that can easily be checked off to verify the acceptance criteria are met.

Maximum time in hours

3

How to get help

Share your blockers in your class channel https://curriculum.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
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.

Link to the coursework

https://applymagicsauce.com/demo

Why are we doing this?

Companies are very interested in the data provided by software like Apply Magic Sauce. Automated language analysis is already being used in the hiring of personnel. Applicant Tracking Systems (ATS) are used in 97% of Fortune 500 companies.

Apply Magic Sauce is a machine interpretation of personality based on how a person writes a sentence in an email or the types of content they like on social media. This is great when it gets the personality traits 99% accurate. But what if it goes horribly wrong and ruins lives?

Choose one thing that Apply Magic Sauce can do that you don’t like (or like the least). Describe what it is and say why you don’t like it. (250 words)

Below are some starting points for you to think about:

1. What happens when human beings rely on software to make consequential judgments about human beings?
2. Are algorithms more or less biased than people?
3. What are the consequences of surveilling people in this way? How does this affect how people talk and act online?

Maximum time in hours

1.5

How to get help

Undertake the demo at home and then discuss this in class. Developers should be literate citizens of the internet, and understand the consequences of gathering and analysing personal data. You may also like to look into some short courses on GDPR on Udemy.

How to submit

Post your analysis in your class channel thread, and join the discussion. Post a link to the thread on this ticket.

Coursework content

• Watch this video by Gargi Sharma (26 mins) where she discusses the importance of ‘bragging’ about yourself and celebrating your achievements.
• Next, think about your work now and training to become a developer. How can you start to make your work visible? What has happened over the past week, 2 weeks, 3 weeks, 4 weeks- 8 weeks since you started the course that you are proud of?
• Create a Brag doc/diary in template in Google Doc and write about your past achievements in the course. Below is an example of a past trainee’s brag diary.
• Update this diary at least once a month.

Estimated time in hours

1

What is the purpose of this assignment?

This assignment will help you reflect on your achievements in this course and prepare you to answer situational-based interview questions in the future. This is also a great way for you to keep track of your development, have clear examples you can use in interviews - and when you have your job, help you in your annual reviews and salary negotiations.

How to submit

Since it is quite personal, you can choose to either post it on the board for anyone to see or share it with the ones you trust and want to share this with.

Anything else?

Coursework content

• Have you come across any useful resources lately that you think will benefit the community? This can be anything from Tech, to PD, to a book you have read etc.
• Share this in the appropriate Slack channel. When you post, write 1-2 sentences on why you think it is a useful resource.
• Read someone else’s post and comment in their thread, saying why you liked their resource and how you think you will benefit from it.

Estimated time in hours

0.5

What is the purpose of this assignment?

This will assist you in fostering a habit of sharing useful resources and content with the community.

How to submit

• Share the link and a screenshot to your post on your coursework board.

• Share the link and a screenshot to the post you commented on.

Anything else?

Link to the coursework

https://github.com/CodeYourFuture/Module-Data-Groups/tree/main/Sprint-3

Why are we doing this?

These challenges are designed to develop your problem-solving skills.

Acceptance criteria

• Given a todo list web application When the page loads Then the populateTodoList() function should create todo list items for each hardcoded todo When a todo list item is created Then it should contain: ☑ 🗑 todo text When the checkbox icon is clicked Then the todo text should have strikethrough And the checkbox should be ticked ✅ 🗑 todo text

• Given a todo list item on the page When the trash icon is clicked Then the todo list item should be deleted

• Given a button to add new todos When the button is clicked Then a new todo should be added to the list with the checkbox and trash icons

• Given a button to mass delete completed todos When the button is clicked Then any todos that have been checked off should be deleted

• Given the ability to set a deadline when creating a todo When a deadline is set Then the deadline should be displayed next to the todo text

Maximum time in hours

4

How to get help

Share your blockers in your class channel https://syllabus.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
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.

Link to the coursework

https://github.com/CodeYourFuture/Module-Data-Groups/tree/main/Sprint-3

Why are we doing this?

These challenges are designed to develop your problem-solving skills.

Acceptance criteria

• Given a web page with a carousel of images When the page loads Then the first image in the carousel should be displayed

• Given forward and back buttons When the forward button is clicked Then the next image in the carousel should be displayed And When the back button is clicked Then the previous image in the carousel should be displayed

• Given at least 4 images in the carousel When the user reaches the end of the carousel in either direction Then the carousel should loop back to the first/last image

Advanced stretch functionality

• Given auto-forward and auto-back buttons When the auto-forward button is clicked Then the images should automatically advance every 5 seconds

When the auto-back button is clicked Then the images should automatically go back every 5 seconds When the stop button is clicked Then the auto-advance/go back should stop

• Given the carousel is auto-advancing When either the forward or back button is clicked Then the auto-advance should stop

Maximum time in hours

4

How to get help

Share your blockers in your class channel https://syllabus.codeyourfuture.io/guides/asking-questions

How to submit

1. Fork to your Github account.
2. Make a branch for this project.
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.

Link to the coursework

https://developer.chrome.com/docs/devtools/javascript/

Why are we doing this?

For months now we have been building a toolkit to help us write great software. In our toolkit we have:

Specifications, like user stories, acceptance criteria, and Given/When/Then Help us understand what to write and check we’ve written the right thing.

Tests, like unit tests and assertions Help us break down our problems and check our solutions work even when we change things.

Asking questions Help us formally reason through our problems and identify gaps in our mental models.

Playing computer Helps us reason about code with a mental model.

Audits, like Lighthouse Help us identify performance and quality improvements we can make to our code.

And now we can add debuggers to our toolkit.

Debuggers are tools that help us find and fix problems, or bugs, in our JavaScript code. They let us step through our code line-by-line while it runs to see what is happening. This helps us find the place where our mental model of the code is different from our implementation. Your browser has a debugger and so does VSCode.

Key reasons we use debuggers:

• See what’s happening inside functions
• Check if variables have expected values
• Pause execution and step through slowly
• Find exactly where mistakes happen

JavaScript debuggers give control over execution flow to methodically test and fix bugs. Complete this tutorial (it’s a 7 minute video plus tasks) to explore the Chrome Debugger.

Maximum time in hours

.5

How to get help

AI can help you here. Code along with AI so it has the context and ask it when you get stuck. Use this starting prompt:

Act as a friendly, supportive, knowledgeable programming mentor. I am learning the debugger in Chrome Devtools. I’m doing this tutorial https://developer.chrome.com/docs/devtools/javascript/

Talk me through the tutorial step by step. Wait for me to confirm I’ve completed the step before going on to the next step. When I get stuck, answer my questions in CEFR B2 English meant for an adult professional speaking in a second language. Do not rephrase the tutorial text, just explain it when I ask you. Say okee dokee if you understand, and begin with step 1.