πŸ“… backlog

Module-HTML-CSS πŸ”—

[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] 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
[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] 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] Front End Practice πŸ”—

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.

  • 🎯 Topic Communication
  • 🎯 Topic Delivery
  • 🎯 Topic Iteration
  • 🎯 Topic Problem-Solving
  • 🎯 Topic Programming Fundamentals
  • 🎯 Topic Requirements
  • 🏝️ Priority Stretch
  • πŸ‚ Size Medium
  • πŸ‹ Size X-Large
  • πŸ“… HTML-CSS
  • πŸ“… Week 4