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

Remember from last week’s coursework that you should switch to the main branch before creating a new branch.

1. Fork to your Github account.
2. Switch to the main branch
3. Make a branch for this project
4. Make regular small commits in this branch with clear messages.
5. 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://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

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.

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.

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.

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 OR explain why you haven’t made any changes.

Link to the coursework

CYF VS Code extension pack

Why are we doing this?

You must have the CYF VS Code extension pack installed and Prettier enabled. Don’t use another formatter.

🧹 Formatting with Prettier

Using a shared formatting convention makes sure your “diffs” ( differences between the codebase and your changes) only show the code you intentionally wrote, and not a bunch of spaces or tabs. It will also help you read your own code as you work on it.

Maximum time in hours

.15

How to get help

Ask for help on Slack if you are having trouble with Prettier. We will work together on the same code in our components workshop, so if you don’t have this set up, you will be blocked and unable to participate.

How to submit

It will be entirely obvious if you don’t do this. 😜