πŸ“… backlog

Module-HTML-CSS πŸ”—

[PD] Review you Plan to build a Life as a Developer πŸ”—

Coursework content

As mentioned in the beginning, this is not an exercise that can be done once.

So write down:

  • Did you manage to implement any changes? Why?

Also, reflect and write down:

  • How are these changes affecting your weekly hours?
  • Do you now have more or less energy?
  • More or less time?
  • Do you feel happier or not?
  • Are you feeling more or less anxious?
  • Can you sleep and rest better or not?
  • Do you feel your focus level has changed?

Estimated time in hours

0.1

What is the purpose of this assignment?

Review your Build your Life plan, to ensure you are thinking about it and acting to make changes.

How to submit

Add a comment with the updated links, if applicable, or just say you haven’t made any changes.

  • πŸ• Priority Mandatory
  • πŸ¦” Size Tiny
  • πŸ“… Week 3
[PD] Feeling, behaving and acting like a professional in the software industry πŸ”—

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

Add a comment to this issue with:

  • The link to this document is a comment on this issue. Make sure anyone can comment on it.
  • An explanation of what was discussed with your pair.
  • πŸ‚ Size Medium
  • πŸ”‘ Priority Key
  • πŸ“… Week 2
[PD] Reflect on your plan to live as a developer πŸ”—

Coursework content

Go back to your reflection about your life as a developer.

Read it a few times aloud and ensure you haven’t missed anything. Ask yourself if this is what you had planned or a realistic description of what happens. Make any changes and iterations to it.

Now look at the number of hours you dedicate to each activity per week.

Ensure you include your energy and concentration levels when studying or CYF training.

Read the updated sample and iterate again on it, ensuring it has the expected level of detail.

Share your reflection with your pair.
Ask them to ask you questions about the accuracy of it.
Get them to help you to refine it.

Estimated time in hours

1

What is the purpose of this assignment?

Observing your week and reflecting on your real availability will be key to ensure you have a clear plan to achieve your ultimate goal, which is a job as a developer.

Be transparent in all what you are writing and thinking about, to ensure you have a reliable plan. Remember: the plan doesn’t end when the CYF course ends.

How to submit

Add the following as a comment on this issue:

  • Link to the updated Google Docs with your statement. Make sure anyone with this link can comment on it.
  • Add a comment about your discussion with your pair (up to 100 words). Remember to check the grammar and spelling before posting it.
  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… Week 1
[TECH ED] Prepare for the Devtools workshop πŸ”—

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

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:

Make sure you come to class with Chrome installed, a ChatGPT account, and 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

  • :brain: Prep work
  • πŸ• Priority Mandatory
  • πŸ¦” Size Tiny
  • πŸ“… HTML-CSS
  • πŸ“… Week 1
[PD] Update your Development plan πŸ”—

Coursework content

Your Development plan is a valuable tool for your career and helps you define what you want to develop.

Open the Development Plan you created previously and use the below information to update it:

  • My skills and strengths: describe your technical and non-technical skills (it should be 50%-50%) . Think about your personal statement and your transferrable skills
  • My goal: e.g. I will develop {LISTED COMPETENCIES} to target {SPECIFIC JOB}. You have learned to create SMART goals, so practice it.
  • My structured plan: consider the following questions when working on this
    • Where am I going?
    • What do I need to get there?
    • What do I have already?
    • How will I get the rest?
    • When do I want it to be done?

Estimated time in hours

1

What is the purpose of this assignment?

Create the habit of reviewing your development plan and updating it, closing goals you have achieved and adding new ones.
Also, use the knowledge you learn during the course, for example, writing goals in a SMART way.

How to submit

  1. Update your Development Plan
  2. Share your Development Plan with a peer for them to give you feedback
  3. Give feedback on your peer’s Development Plan
  4. Add a comment on this issue with the link to your development plan (make sure it is a link anyone can view)
  5. Add a comment about what feedback you received and gave. You can add screenshots for these comments.

Anything else?

  • πŸ‡ Size Small
  • πŸ“… Week 4
[PD] Presenting your time practical management ideas πŸ”—

Coursework content

You will build and present your key findings of the Udemy course as well as what you are going to try in your personal life.

Estimated time in hours

1

What is the purpose of this assignment?

Practice building and presenting information using Google Slides

How to submit

  • Build a presentation that has 5 to 10 slides
  • The content should cover:
    - What are the main tips of the Udemy course you think are very important
    - Which tips you will trial in your life and how will you do it
  • Add the link to the presentation on this ticket
  • Present this to your pair and anyone else you would like to get feedback on the presentation and your skills. Ask them to add a comment on this ticket with their feedback.
  • πŸ‡ Size Small
  • πŸ”‘ Priority Key
  • πŸ“… Week 3
[PD] How to build Google Slides πŸ”—

Coursework content

In the corporate world, knowing how to build presentations is really important. As a developer you might build presentations to demo your product, for example. At CYF we use Google Suite, so this short video explains how you can learn the basics.

Estimated time in hours

0.2

What is the purpose of this assignment?

Understand how Google Slides works and be able to build a presentation

How to submit

  • Do this short Udemy course
  • Once you have done that, move this ticket to Done.
  • πŸ• Priority Mandatory
  • πŸ¦” Size Tiny
  • πŸ“… HTML-CSS
  • πŸ“… Week 3
[PD] Practical time management course πŸ”—

Coursework content

This Udemy course has many practical ideas of how to manage your time. As you probably have noticed already, juggling the prep work for the Saturday lessons; doing the coursework; doing all other non-CYF related tasks such as work, studies and family is a lot at once. And you also need to think about your physical and mental health. To organise all of this, time management is crucial to ensure you can achieve everything.

Estimated time in hours

1.5

What is the purpose of this assignment?

With this course you should have some practical tips that you can try. You might have to try more than one until you find the one that works best for you.

How to submit

  1. Go to the Practical time Management course on Udemy
  2. Do the course in your own time
  3. Add a screenshot of the evidence of the finished course on this ticket.
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… Week 3
[PD] Reflect on your development so far πŸ”—

Coursework content

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

Estimated time in hours

1

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
  • πŸ‡ Size Small
  • πŸ“… Week 4
[PD] Check your HTML/CSS knowledge πŸ”—

Coursework content

Previous CYF trainees built this course checklist to self-assess their understanding.

Reflect on what you have learned so far and fill in the course checklist for HTML/CSS

Take the results to your assigned group and 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 the checklist for HTML/CSS on this ticket on your coursework board.

Anything else?

You can use this checklist throughout the course.

  • πŸ‡ Size Small
  • πŸ“… Week 4
[PD] Create your Development Plan πŸ”—

Coursework content

You will create your own Development Plan, starting with these questions:

  1. What are your blockers?
  2. How can you plan your time so that you can do your developer work?
  3. Is this plan sustainable until you find a job (which might not be straight after graduation)?
  4. How can you be a developer every day?

Work with your pair to ask and give feedback on your development plan

  • The feedback can be discussed in person or in a Slack huddle first
  • Then add your feedback for your pair and their feedback for you on this ticket

Estimated time in hours

1

What is the purpose of this assignment?

To practice active listening by developing and sharing a Development Plan. To practice effective listening behaviours and see the benefits of active listening and how it makes us better communicators.

How to submit

Add the following to this ticket:

  • The link to your development plan. Use this template.
  • The screenshot of your feedback for your pair
  • The screenshot of your pair’s feedback for you

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. Search for “development plan template” online and choose the one that fits you best.

  • 🎯 Topic Problem-Solving
  • 🎯 Topic Time Management
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
  • πŸ“… Week 2
[PD] Use Slack huddle πŸ”—

Coursework content

At Code Your Future and in the Tech industry, most communication and collaboration happen in Slack.

The Huddle function is a simple and informal way to communicate with someone on Slack for quick conversations. A lot of the time, cameras need to be turned on. This is used for pair programming, for example

Use Slack huddle to book some time to talk to your pair. During the call, share your screen and go through your coursework planner.
Then you can just let your pair show theirs.

Estimated time in hours

1

What is the purpose of this assignment?

This assignment will help you start using the Slack huddle function, which is an easy way to talk to the community or team members.

How to submit

The trainee attended a Slack huddle.
Share a screenshot of your huddle with your pair on the ticket on your coursework board.

Anything else?

How does Slack huddle work

  • πŸ‡ Size Small
  • πŸ“… Week 1
[PD] Manage time with your calendar πŸ”—

Coursework content

Set up your Google calendar to show your weekly availability for calls with your peers. Share your calendar with your pair of the week. If you prefer, you can use Calendly instead of Google calendar.

Estimated time in hours

0.5

What is the purpose of this assignment?

This assignment aims to help you start using calendar software effectively to manage your time and to collaborate with your peers and volunteers.

How to submit

Share the link of your calendar or a screenshot on the ticket on your coursework board.

Anything else?

Stretch
You can also set-up a Calendly page, which you can share with people, so they can book time with you. Just make sure your calendar is up-to-date with your avaiability, or you might get invitations for times you cannot make.

  • πŸ”‘ Priority Key
  • πŸ¦” Size Tiny
  • πŸ“… Week 1
[PD] Active listening techniques πŸ”—

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.

  • 🎯 Topic Communication
  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… HTML-CSS
  • πŸ“… Week 2
[TECH ED] Play the CLI Treasure Hunt πŸ”—

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

  • 🎯 Topic Communication
  • 🎯 Topic Programming Fundamentals
  • 🎯 Topic Structuring Data
  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… HTML-CSS
  • πŸ“… Week 2
[TECH ED] Portfolio πŸ”—

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.

  • 🎯 Topic Iteration
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
[TECH ED] Prep work for live session πŸ”—

https://www.youtube.com/playlist?list=PLozA7cloMbPgM0Cra4IhDg_HvhP727Abo

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.

Find this week’s blockers thread in your cohort channel and add your question to it. This week we are thinking a lot about thinking responsively: or, ways to make your layouts work on any size screen and any device.

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

  • 🎯 Topic Programming Fundamentals
  • 🎯 Topic Requirements
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
[TECH ED] Prep work for live session πŸ”—

https://www.youtube.com/playlist?list=PLozA7cloMbPgM0Cra4IhDg_HvhP727Abo

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.

Find this week’s blockers thread in your cohort channel and add your question to it. This week we are thinking a lot about thinking responsively: or, ways to make your layouts work on any size screen and any device.

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.

How to submit

No submission step

  • 🎯 Topic Programming Fundamentals
  • 🎯 Topic Requirements
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
  • πŸ“… Week 3
[TECH ED] Prep work for live session πŸ”—

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.

  • 🎯 Topic Programming Fundamentals
  • 🎯 Topic Requirements
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
  • πŸ“… Week 2
[TECH ED] Module Project: Respond to Review πŸ”—

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.

  • 🎯 Topic Code Review
  • 🎯 Topic Communication
  • 🎯 Topic Iteration
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
  • πŸ“… Week 4
[TECH ED] Module Project: Code Review πŸ”—

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.

  • 🎯 Topic Code Review
  • 🎯 Topic Communication
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
  • πŸ“… Week 3
[TECH ED] Module Project: Store Page πŸ”—

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

  • 🎯 Topic Iteration
  • 🎯 Topic Requirements
  • πŸ• Priority Mandatory
  • πŸ¦‘ Size Large
  • πŸ“… HTML-CSS
  • πŸ“… Week 2
[TECH ED] Take your Codility test πŸ”—

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.

  • 🎯 Topic Problem-Solving
  • 🎯 Topic Programming Fundamentals
  • 🎯 Topic Requirements
  • 🎯 Topic Testing
  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… HTML-CSS
  • πŸ“… Week 4
[TECH ED] Multipage Clone πŸ”—

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
  • 🎯 Topic Iteration
  • 🎯 Topic Requirements
  • 🎯 Topic Structuring Data
  • 🎯 Topic Time Management
  • πŸ‹ Size X-Large
  • πŸ”‘ Priority Key
  • πŸ“… HTML-CSS
  • πŸ“… Week 4
[TECH ED] Record a Goose πŸ”—

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/

  • 🎯 Topic Code Review
  • 🎯 Topic Testing
  • πŸ• Priority Mandatory
  • πŸ‚ Size Medium
  • πŸ“… HTML-CSS
  • πŸ“… Week 3
[TECH ED] Cakes Co πŸ”—

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.

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.

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.

  • 🎯 Topic Iteration
  • 🎯 Topic Problem-Solving
  • 🎯 Topic Requirements
  • πŸ• Priority Mandatory
  • πŸ¦‘ Size Large
  • πŸ“… HTML-CSS
[TECH ED] Design Basics πŸ”—

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

  • 🎯 Topic Problem-Solving
  • 🎯 Topic Requirements
  • 🏝️ Priority Stretch
  • πŸ‚ Size Medium
  • πŸ“… Week 2
[TECH ED] Join Codewars πŸ”—

https://www.codewars.com/join

Why are we doing this?

When you begin JS1 you will also begin Codewars, if you have not done so already. Prepare now by signing up to Codewars.

You will complete at least three kata a week for the rest of the course. A kata is a short coding workout and you should aim to spend twenty minutes, three times a week, doing kata.

  1. Read the CYF tutorial and code along with the example kata.
  2. Link your account with Github, and join the CodeYourFuture clan, so we can find you on the clan board here: https://www.codewars.com/users/CodeYourFuture/following
  3. Add your Codewars username to the trainee tracker, so you can start building your milestone. If you don’t add your username to the tracker, it can’t track your progress.

By the end of JS1, you need to have completed nine kata to meet your milestone. Codewars is not just to practice JavaScript, it’s to practice time management and study skills.

All the CYF collections are on the CYF account. Here’s a beginner collection of kata to practice on for now: https://www.codewars.com/collections/cyf-fundamentals

This has to be completed by the end of this module.

Maximum time in hours

1

How to submit

Add your username to your trainee tracker.

  • 🎯 Topic Problem-Solving
  • 🎯 Topic Programming Fundamentals
  • πŸ• Priority Mandatory
  • πŸ‡ Size Small
  • πŸ“… HTML-CSS
  • πŸ“… Week 1
[TECH ED] CSS Grid Puzzles πŸ”—

https://codepen.io/collection/rxxWQJ

Why are we doing this?

This set of puzzles and exercises focuses on CSS Grid named areas. If you can understand this layout technique, you can become incredibly fast at writing layout code in CSS.

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

  • 🎯 Topic Problem-Solving
  • 🎯 Topic Programming Fundamentals
  • 🏝️ Priority Stretch
  • πŸ‡ Size Small
  • πŸ“… HTML-CSS
  • πŸ“… Week 1
[TECH ED] Bikes for Refugees πŸ”—

https://github.com/CodeYourFuture/bikes-for-refugees

Why are we doing this?

Bring this to class and work through it in groups!

Maximum time in hours

1

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 next week

Anything else?

Why do semantics matter?

  • :brain: Prep work
  • 🎯 Topic Requirements
  • 🎯 Topic Structuring Data
  • 🎯 Topic Teamwork
  • 🏝️ Priority Stretch
  • πŸ‡ Size Small
  • πŸ“… HTML-CSS
  • πŸ“… Week 1