π backlog
Module-HTML-CSS π
[PD] Using critical thinking to remain inclusive as a developer π
Coursework content
Apply Magic Sauce is an alternative machine interpretation of oneβs personality based on the analysis of how a person writes a sentence in an email or the types of content they like on social media. This is great when it gets the personality traits 99% accurate. But what if it goes horribly wrong and ruins lives? Choose one thing that Apply Magic Sauce can do that you don’t like (or like the least). Describe what it is and say why you don’t like it in 250 words. Below are three scenarios for you to contemplate:
- What if the software wrongfully judges and jeopardises a personβs career without their knowledge?
- Are humans unable to think for themselves and do they have to rely on machines to form a non-holistic opinion?
- Are civilians expected to be on guard at all times and be careful of what they say and how they comment a post or tweet in a censored cyber world where everything is traceable and nothing is ever really erased?
Estimated time in hours
1.5
What is the purpose of this assignment?
This assignment encourages you to critically think about machine interpretation and its potential implications.
How to submit
Share the link to your Google doc on your ticket on your coursework board.
- π Priority Mandatory
- π Size Medium
- π HTML-CSS
- π Week 4
[PD] Developing a growth mindset π
Coursework content
Watch this and this video. Write your reflections on why it is important to have a growth mindset as a developer and how a growth mindset will positively impact you in your career in the long term. Try to answer the following questions:
- When did I have a closed mindset this week, and why?
- When did I have an open mindset this week, and why?
- What have I learnt about myself, as a result?
- What will I do differently next time?
Estimated time in hours
1
What is the purpose of this assignment?
This assignment supports developing a growth mindset while learning new skills and facing barriers.
How to submit
Write in your cohort’s Slack channel what actions you will take in order to overcome your barriers to participating in live coding and write a supportive message to one of your peers who have shared their barriers in the channel. Share the screenshot of your post on your ticket.
- π Priority Mandatory
- π Size Small
- π HTML-CSS
- π Week 3
[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
[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] Play the CLI Treasure Hunt π
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
- Clone the repo git@github.com:CodeYourFuture/CLI-Treasure-Hunt.git
- Open the folder in VSCode
- Open the terminal inside VSCode
- 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 π
Link to the coursework
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
- 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(and show you are 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 Medium
- π HTML-CSS
[TECH ED] Prep work for live session π
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
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 π
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
- π― Topic Programming Fundamentals
- π― Topic Requirements
- π Priority Mandatory
- π Size Medium
- π HTML-CSS
- π Week 3
[TECH ED] Prep work for live session π
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
- π― Topic Programming Fundamentals
- π― Topic Requirements
- π Priority Mandatory
- π Size Medium
- π HTML-CSS
- π Week 2
[TECH ED] Module Project: Respond to Review π
Link to the coursework
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 π
Link to the coursework
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!).
- Do the Github Skills course in reviewing pull requests
- Ask for a code review from a colleague on your Karma project.
- 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 π
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:
- extending the homepage by adding a new block to it.
- adding a new store page that allows users to buy a Karma device using an order form.
- 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
- Ask for review from a classmate or mentor, clearly describing what you are looking for
- Make changes based on their feedback
- 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 π
Link to the coursework
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 π
Link to the coursework
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.
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
- Fork to your Github account.
- Make a branch for this project.
- 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.
There are several projects in this repo. Make a new branch for each project.
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 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 π
Link to the coursework
https://github.com/CodeYourFuture/CYF-Record-A-Goose-Project
Why are we doing this?
A mission of discovery for you.
- Go to https://github.com/CodeYourFuture/CYF-Record-A-Goose-Project
- Using Devtools, Lighthouse, and the WAVE accessibility plugin, find all the ways this app is broken
- 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 π
Link to the coursework
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
- Fork to your Github account.
- Make a branch for this project.
- 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.
There are several projects in this repo. Make a new branch for each project.
Mermaid .Page.File.Path = _index.md
Mermaid page.File.Path = html-css/backlog/index.md
Mermaid page store = true
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 week
Anything else?
https://css-tricks.com/how-to-develop-and-test-a-mobile-first-design-in-2021/
https://codepen.io/LucyMac/pen/MWvNBLo
- π― Topic Iteration
- π― Topic Problem-Solving
- π― Topic Requirements
- π Priority Mandatory
- π¦ Size Large
- π HTML-CSS
[TECH ED] Design Basics π
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
- π― Topic Problem-Solving
- π― Topic Requirements
- ποΈ Priority Stretch
- π Size Medium
- π Week 2
[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] Bikes for Refugees π
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
- 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 next week
Anything else?
- π― Topic Requirements
- π― Topic Structuring Data
- π― Topic Teamwork
- ποΈ Priority Stretch
- π Size Small
- π HTML-CSS
- π Week 2
[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] Front End Practice π
Link to the coursework
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
[TECH ED] Form Controls π
Link to the coursework
https://github.com/CodeYourFuture/Module-HTML-CSS/tree/main/Form-Controls
Why are we doing this?
Aims
- Interpret requirements
- Write a valid form
- Style form controls
- Test with Devtools
- 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
- Fork to your Github account.
- Make a branch for this project.
- 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.
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 next week
Anything else?
There are a couple of useful ideas in this project that you can explore further:
- 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.
- 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.
- π― Topic Requirements
- π― Topic Structuring Data
- π― Topic Testing
- π Size Medium
- π Priority Key
- π Week 2
[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/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] Flexbox Froggy π
Link to the coursework
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.
- π― Topic Problem-Solving
- π― Topic Programming Fundamentals
- ποΈ Priority Stretch
- π Size Small
- π Week 2
[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