π backlog
Module-HTML-CSS π
[PD] Improve Your Programming Problem Solving π
Coursework content
Read the article 6 Ways to Improve your Programming Problem Solving. Write a reflection on what you learned from this article.
- Which of these tips do you already do?
- Which ones will you start doing?
- What action will you take to start?
Estimated time in hours
1
What is the purpose of this assignment?
This exercise aims to help to improve your problem solving skills while programming.
How to submit
Share your reflection on the ticket on your coursework board.
- π― Topic Problem-Solving
- ποΈ Priority Stretch
- π Size Small
- π HTML-CSS
- π Week 1
[PD] Learn how to use Google Doc and Slides π
Coursework content
- Go to g.co/AppliedDigitalSkills
- Click “Sign in” in the top right
- Sign in with your Google account, or create a new one
- Click “I am a student”
- Click “Join a class” and enter class code: qchyyg
- Start the Communicate Effectively at Work course
- Do lessons “4 - Communicate Ideas in a Proposal” and “5. Present Information About Your Job”
Estimated time in hours
1
What is the purpose of this assignment?
The goal is for you to be comfortable using Google Docs and Google Slides, which you will use a lot in your professional life.
How to submit
Share the results to the exercises of both lessons on your coursework board.
- π Priority Mandatory
- π Size Small
- π HTML-CSS
- π Week 1
[PD] Create a study schedule π
Coursework content
Over the next months you will have lots of coursework to complete! How will you manage it all? Go to the link and do the course.
Estimated time in hours
1.5
What is the purpose of this assignment?
This activity will give you practice using Google sheets to create and maintain a schedule.
How to submit
Complete the quiz at the end of the course. Share the screenshot of your results in your coursework board.
- π Priority Mandatory
- π Size Medium
- π Priority Key
- π HTML-CSS
- π Week 1
[TECH ED] Join Codewars π
Link to the coursework
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.
- Read the CYF tutorial and code along with the example kata.
- 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
- 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 π
Link to the coursework
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] Portfolio π
Link to the coursework
https://github.com/CodeYourFuture/Portfolio
Why are we doing this?
At Code Your Future, we expect everyone to graduate with a unique professional portfolio. You will begin building this portfolio as soon as you begin our Software Development Course. At first, your portfolio will be a simple HTML/CSS page deployed to Github Pages or Netlify. This is your MVP.
Every module, you will iterate on your portfolio, adding a new project and improving your design and presentation. By the time you apply to Final Projects, your portfolio will help you show you are ready to be accepted on to a development team.
Maximum time in hours
1
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
- Fork to your Github account.
- Check out the branch for the module you are on.
- Make regular small commits with clear messages.
- 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
- Complete your PR template
- Ask for review from a classmate or mentor
- Make changes based on their feedback
- 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:
- a well written CV
- a solid portfolio of junior level work that makes you memorable to a recruiter
- to be able to plan, build, and ship a working product in an Agile team
- to be able to score reasonably well in a timed technical test
- to be able to do an interview in fluent English
Keep this in mind.
- π― Topic Iteration
- π Priority Mandatory
- π Size Small
- π HTML-CSS
- π Week 1
[TECH ED] Prep work for live session π
Link to the coursework
https://www.youtube.com/playlist?list=PLozA7cloMbPgk5gK8His2CeuJTKofypbV
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
- π― Topic Programming Fundamentals
- π― Topic Requirements
- π Priority Mandatory
- π Size Medium
- π HTML-CSS
- π Week 1
[TECH ED] Module Project π
Link to the coursework
https://github.com/CodeYourFuture/HTML-CSS-Module-Project
Why are we doing this?
Each module you should produce something substantial that takes multiple weeks for your professional portfolio. This project starts fairly simply and gets more complicated as you iterate, which is how websites are built in real life too.
Unlike the wireframe projects, this project uses mockups. Mockups are pixel-finished pictures of how websites should look, and getting the look exactly right is the goal here, as well as maintaining correctness in your underlying code.
Maximum time in hours
6
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
- Fork to your Github account.
- Make regular small commits with clear messages.
- When you are ready, open a PR to the CYF repo, following the instructions in the PR template.
How to review
- Complete your PR template
- Ask for review from a classmate or mentor
- Make changes based on their feedback
- Review and refactor again once the coursework solutions are released.
Anything else?
Mockups only ever show a few snapshots of pages, but websites must work at all the sizes in between. It’s a challenge, but it’s one everyone else faces too. How do they solve it? Research will help you, as will collaboration.
- π― Topic Code Review
- π― Topic Delivery
- π― Topic Iteration
- π― Topic Problem-Solving
- π― Topic Requirements
- π― Topic Testing
- π― Topic Time Management
- π Priority Key
- π¦ Size Large
- π HTML-CSS
- π Week 1
[TECH ED] Wireframe to Web Code π
Link to the coursework
https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/Wireframe
Why are we doing this?
A wireframe is a simple line diagram representing the skeleton of a website or an application’s user interface (UI) and core functionality. It shows where components should be in relationship to each other and what, roughly, they should do.
A common task for a web developer is to take a wireframe and express it in web code. Websites are made up of regular, repeating component pieces, so before you start coding, identify each component on the wireframe and write that out as your skeleton.
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.
You can also open draft PRs and link to the actual code you are working on.
How to submit
- Fork to your Github account.
- Make a branch for this project called feature/wireframe
- Make regular small commits in this branch with clear messages.
- When you are ready, open a PR to the CYF repo, following the instructions in the PR template.
Mermaid .Page.File.Path = _index.md
Mermaid page.File.Path = html-css/sprints/1/backlog/index.md
Mermaid page store = true
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
- Complete your PR template
- Ask for review from a classmate or mentor
- Make changes based on their feedback
- Review and refactor again once the coursework solutions are released.
Anything else?
A really good habit to get into is to look at existing web pages and turn them into wireframe sketches. You can do this with pen and paper. You don’t have to be good at drawing: it’s just lines and boxes. Start to look at the internet like a web developer: break it down and understand how it was made.
A good place to start is Youtube. What components make up those views? Can you sketch them? What about GitHub? Somebody made everything you see.
- π― Topic Problem-Solving
- π― Topic Requirements
- π― Topic Structuring Data
- π― Topic Testing
- π Priority Mandatory
- π Size Medium
- π Priority Key
- π HTML-CSS
- π Week 1
[TECH ED] CSS Grid π
Link to the coursework
https://scrimba.com/learn/cssgrid
Why are we doing this?
CSS Grid is the best way to write modern layouts, so it’s better to start off with Grid than with older layout concepts.
Don’t just watch the videos! You won’t really learn anything that way. Interact with the code and type it out.
Skip the “Pro” level and just do the free levels.
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
There’s no submission step. However, if you skip this, you will struggle to complete upcoming coursework.
Anything else?
This Scrimba course on CSS Grid has a runtime of 1 hour 6 minutes. This is a good one to do in small pieces when you have a spare 5-10 minutes.
- π― Topic Programming Fundamentals
- ποΈ Priority Stretch
- π Size Medium
- π HTML-CSS
- π Week 1