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.

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

From Module-HTML-CSS created by SallyMcGrath: CodeYourFuture/Module-HTML-CSS#5

Link to the coursework

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

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.

How to submit

No submission step

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

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/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?

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

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. 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.

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.