Link to the coursework

https://www.frontendpractice.com/

Why are we doing this?

This useful site has a series of projects you can do to keep your front end skills in shape all the way through the course. Use all the skills you’ve developed in wireframing, decomposition (breaking down websites into components), testing and iteration to produce some great looks for your portfolio.

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. Put good ones in your portfolio.

Link to the coursework

https://github.com/CodeYourFuture/CYF-Record-A-Goose-Project

Why are we doing this?

A mission of discovery for you.

1. Go to https://github.com/CodeYourFuture/CYF-Record-A-Goose-Project
2. Using Devtools, Lighthouse, and the WAVE accessibility plugin, find all the ways this app is broken
3. How would you fix the problems? Discuss in a thread in your channel.

This is also a fun in-person workshop, so you could choose to do it in class together during independent study time.

https://record-a-goose.onrender.com/

Maximum time in hours

2

How to get help

You could choose to do this in class together during independent study time.

How to submit

Write up your findings in a thread in your class channel.

Don’t make a new post each. Discuss in a thread.

How to review

It is a review! ;)

Anything else?

https://developer.chrome.com/docs/lighthouse/overview/
https://wave.webaim.org/extension/
https://accessibilityinsights.io/docs/web/overview/
https://design-system.service.gov.uk/

Link to the coursework

https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/MultiPage-Clone

Why are we doing this?

You’re recreating a design again, this time the designs are a lot more complicated. The deployed code on Wix won’t help you much, as the code is obfuscated and also really badly written. Gnarly! How will you handle this challenge?

Use all the skills you’ve built so far, especially in your Module Project.

Remember, be organised and professional in how you approach this:

1. Identify the components on the pages and sketch a wireframe
2. Define the fonts, colours, and spacing you will use and store them in clearly named variables <== open a PR now
3. Write general rules for elements like text, headings, images, icons, buttons etc <== update your PR (just keep pushing to your branch)
4. Write a page layout with CSS grid
5. Write each component separately, and assign them to your grid layout

Prioritise your work and don’t jump around. You may need to cut your scope to maintain your quality. For this project, it’s better to deliver one, complete, working page than multiple partly-done broken pages.

Maximum time in hours

10

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

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.

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

Link to the coursework

https://docs.codeyourfuture.io/leaders/running-the-course/assessment

Why are we doing this?

Read more about assessment and tech testing here.

Codility is one of your milestone factors. You will be sent an invitation by email. The invitation expires after 7 days, so if you ignore it you will fail the test.

Take the test! Taking the test is the test. The only way to fail is not to try.

Maximum time in hours

1

How to get help

You must take this test on your own. Next week, come to class and share your experience and strategies with each other. There will be lots of chances to practice these tests on the course.

Lots of employers use timed technical test to choose who to invite to interview, so it’s a good idea to get familiar with them.

How to submit

The test platform will record your test.

Link to the coursework

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

Why are we doing this?

Learning to read and review other people’s code is a key skill for a developer. When you join a new team, you will usually also join an existing codebase, and you will need to be able to read it. If you’ve never looked at code written by other people, you will find this really challenging (it’s already hard!).

1. Do the Github Skills course in reviewing pull requests
2. Ask for a code review from a colleague on your Karma project.
3. Complete a code review for a colleague on their Karma project.

Maximum time in hours

3

How to submit

Link the PR you reviewed on your copy of this ticket. Paste the url in comment on your ticket.

Link to the coursework

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

Why are we doing this?

Code review is an iterative process. Once you’ve got feedback, you need to implement changes based on this information.

Push your changes to the same pull request you got reviewed.

https://phauer.com/2018/code-review-guidelines/

Read more about code review, with some great advice about how to manage your feelings. At first, getting code review can feel bad, which is normal. Over time, you will find it more and more useful and motivating.

Maximum time in hours

2

How to get help

Come to the Code Review hangouts, where CYFers review code and trade tips on how to improve code literacy.

How to submit

Push your changes to the same pull request you got reviewed.

Link to the coursework

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

Why are we doing this?

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. We suggest you use study time this week to wrap up your Module Project and get feedback in person.

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

Maximum time in hours

2

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/Portfolio/tree/Module-HTML-CSS

Why are we doing this?

Now you’ve built plenty of static sites, you should pick one for your portfolio, write it up, and get it deployed.

The challenge for HTML-CSS is stored in a branch. You need to checkout this branch and follow the README.

Maximum time in hours

1.5

How to get help

Share your blockers in #cyf-portfolios.

Use the opportunity to refine your skill in Asking Questions like a developer.

How to submit

1. Fork to your Github account.
2. Check out the branch for the module you are on.
3. Make regular small commits with clear messages.
4. When you are ready, open a PR to the CYF repo, to the matching branch, 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 next time

Anything else?

To get a job in tech you need a minimum set of tools that you need to acquire or build over the course of this year. You need:

1. a well written CV
2. a solid portfolio of junior level work that makes you memorable to a recruiter
3. to be able(and show you are able) to plan, build, and ship a working product in an Agile team
4. to be able to score reasonably well in a timed technical test
5. to be able to do an interview in fluent English

Keep this in mind.

Coursework content

You should have analysed your weekly patterns and started identifying improvement areas by now. In this exercise, we’ll create a few positive areas for your performance and well-being and convert those into a plan.

Areas that matter most:

• Time to learn: You reserve enough time and energy to learn
• Start of the day: You start the day with a clear mind
• Income: You create a stable financial income (if possible)
• Boundaries: You set clear boundaries between work, study, family and other responsibilities
• Distractions: You minimise distractions from the internet
• Teamwork: You learn to work with others and ask for help
• Food: You eat food that enhances energy and concentration
• Daily Learning: you manage to concentrate and work on your training daily, even if for a short amount of time

Considering these areas, which are the 2-3 you struggle with most? Choose them and add them to your “Development Career Plan” spreadsheet as a “Theme”.

Now, read this text about your area so that you can define your goals for each theme. Be as SMART as possible with your goals.

Example of learning/development needs:

• Daily 20 min walk to reduce my anxiety
• Make sure I finish my shift on time so I can study
• Sleep by X so I can get up early and study
• Make notes of the number of hours I am studying so that I can have evidence of my development
• Practice mindfulness 5 minutes a day to enhance my focus

The next step is to define your actions to achieve that goal. Remember to challenge yourself, but at the same time, be realistic. Thinking about small steps to reach your bigger goal is also good. With every little (maybe daily, weekly) achievement, you get closer to it.

Write these actions on the same spreadsheet so you can assess them regularly.

If you have some time, share this with your pair so that you can give each other insights.

Estimated time in hours

1

What is the purpose of this assignment?

We all have to make changes and adapt our routines to achieve goals. But we cannot change everything at once and will change different things according to our reality. This exercise is for you to take the first step to planning these actions. It’s not about size but about the impact it will have in your life as a developer.

How to submit

Add the following to this ticket:

• The link to your development plan. Make a copy of this template. Make sure anyone can comment on it.

Anything else?

The Development Plan is not a one-off exercise. It is a plan you should review constantly with your new knowledge and when you have developed new skills.

Coursework content

Look at the success view for this week:

https://curriculum.codeyourfuture.io/html-css/sprints/1/success/

These are learning objectives. Check off the things you have achieved and feel confident in. ✅

Take a minute to congratulate yourself. You have done so much and come so far. 🎉

Now take the things you still need to work on to your study group. Work on the areas you have identified. You can help explaining things you know, and getting help on the ones you aren’t sure yet.

Estimated time in hours

1

What is the purpose of this assignment?

This assignment will help you to track your progress during the software development course. If anything is still not clear, think about adding it to your Development Plan

How to submit

Share the screenshot of your success view on this ticket on your coursework board.

Anything else?

You can use this process throughout the course.

Coursework content

You have now learned many new things: tools, skills, and programming language. Considering this, reflect on your development.

Estimated time in hours

0.5

What is the purpose of this assignment?

Reflect and celebrate how much you have developed your knowledge so far.

How to submit

1. Think about 1 achievement you had and 1 professional skill (not technical skill) you still want to develop.
2. Write a paragraph about these two: what are they AND why do you think you did well OR still have to learn them?
3. Share this with your class on the thread about this coursework. If the thread doesn’t exist yet, you are the first and can create it
4. Read your fellow trainees’ messages and react to them with emojis that support them or are relevant to their content.
5. Copy the link to the Slack message you posted on this ticket
6. Copy a screenshot of the message you posted on this ticket

Link to the coursework

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

Why are we doing this?

We’re going to work with components a lot, so it’s important you begin understanding user interfaces in this way. Front end developers break down complex interfaces into small, understandable pieces and you must practice decoding interfaces in this way yourself.

1. On BBC News, find the card component.
2. On YouTube, find the card component.
3. On Moneysavingexpert, find the card component.
4. Now find an example of a header, a nav, a hero, and breadcrumbs on sites of your choosing.

Maximum time in hours

.5

How to get help

1. Use the component gallery to help you identify components.
2. Look over the upcoming component workshop.

How to submit

Take a screenshot of each component and attach to this ticket. Don’t share anything private or not safe for work.

Next, join (or begin if you are the first) the thread in your class channel. Find a component not in the list above and share it.

In your comment include:

• the name of the component
• a link to the site you are looking at
• a screenshot of the site with the component identified (circle it, crop the image, whatever)
• anything else you find interesting about this