This is a guide to what you should be doing for homework each week. Please reach out to your CFs if you are unsure of what to prioritise between sessions.

• Complete the Git, CSS, Semantic HTML, Accessibility and HTML forms workshops ahead of Week 1

• Complete the Asynchronous JS, Promises & fetch, Real-world fetch and Promise practice workshops ahead of Week 2

• Complete your user manual

• Complete your Week01 progress log

• Complete github profiles

• Project work

• Create a presentation on HackMD

Your challenge is to build an agency website for your team.

Your website should give potential clients:

• An introduction to your agency

• Information about each member of your team

• A way to get in touch if they are interested in working with you

User Stories

A user story is a description of one or more features of a piece of software.

Core Stories

As a potential client, I want to:

• See information about each member of your team so that I can know who you are

• Browse your website on mobile, tablet, and desktop devices

• Click to navigate to different sections of your webpage

• Contact you to enquire about working with you

• Visit your website at a publicly accessible domain name

Additionally, as a visually impaired user, I want to:

• Navigate your website using keyboard controls

• Hear my screen reader describe the content on your website

Repository naming convention

Please name your repo following this template: PRO01_Name1_Name2_Name3_Name4

Acceptance Criteria

User stories come with acceptance criteria - a detailed scope of a user’s requirements.

• Navigation menu

• ‘About us’ section

• Contact form

• A user cannot submit a form without filling out all of the mandatory fields (name, company name, email address)

• Information from the form doesn’t get submitted until the user clicks a button

Stretch Goal

Use the automatic trigger functionality of your GitHub project board.

Finally, feel free to get creative with the content of your website! Good luck!

• Introduce the software developer labour market landscape

• Introduce the Employer Engagement function

• Introduce employability curriculum

• Explore multi-modal strategies for finding employment

Project

• Quickstart for Projects

Async

• Async JavaScript Youtube tutorial

• JavaScript Promises Youtube tutorial

• Async Await vs Promises Youtube tutorial

• Introducing asynchronous JS

• Codecademy JavaScript Async Course (Free. 3 hours)

CSS

• Units - Every Layout

• The lengths of CSS

• How To Write Mobile-first CSS

• Flex children examples An explanation of how flex-grow, flex-shrink and flex-basis work for elements inside a flexbox container.

• CSS Guidelines

• BEM Methodology

• Composition - Every Layout

• Boxes - Every Layout

• CSS Layout - MDN

Accessibility

• What a Year of Learning and Teaching Accessibility Taught Me

• Why, How, and When to Use Semantic HTML and ARIA

GIT

• Intearctive tool to learn Git branching

This week is focused on the fundamental building blocks of web pages—accessible, semantic HTML, and well-organised CSS.

Workshops

To be completed AHEAD of Week01

• CSS Layout workshop

• Semantic HTML workshop

• Accessibility workshop

• HTML Forms workshop

To be completed on Induction day

• Git workflow workshop. Repo name: Work01_Git_YourName

• GitHub Projects workshop. Repo name: Work02_GitHubProjects_YourName

To be completed on Week01

• Asynchronous JS workshop. Repo name: Work03_Async_YourName

• Promises & fetch workshop. Repo name: Work04_FetchAndPromises_YourName

• Real-world fetch workshop. Repo name: Work05_Fetch_YourName

• Promise practice workshop. Repo name: Work06_Promises_YourName

• Pokemon promises vs async/await. Repo name: Work07_PromisesVSAsync_YourName

Execute Program

• Execute Program Javascript Concurrency

Topics

• Safeguarding and Prevent

• Safeguarding Quiz

• Dev machine setup

• Project planning and development (GitHub Projects)

• User Manuals

• Progress Logs

• Introduction to GitHub profiles. GitHub Profile Generator https://rahuldkjain.github.io/gh-profile-readme-generator/

• Project introduction

• Live code session: project code review

• HackMD

• Project presentations

CSS architecture

How should you write CSS to ensure it's easy to read, maintain and scale as a website grows?

Questions to consider

1. Why are CSS naming conventions useful?

2. When might specificity become a problem?

3. How can composition help us build UIs?

CSS layout

How does CSS decide where to put elements on the page?

Questions to consider

1. What is the box model?

2. How does the display property affect layout?

3. How does the position property affect layout?

Responsive design

How do you design and build a webpage that looks good on any device?

Questions to consider

1. What CSS units should we use for dimensions? What are absolute and relative units?

2. When should you use a media query? Are they only for screen size?

3. How can mobile-first CSS make responsive styling easier?

Github projects

Questions to consider

1. How can we leverage Github projects to help us plan and track work?

Accessibility

How do you write markup so that your page is accessible to as many users as possible?

Questions to consider

1. Who does semantic HTML benefit?

2. How does ARIA relate to HTML?

3. What's the difference between accessible and inclusive?

Accessibility

• Structure a site using semantic HTML to aid accessibility

• Ensure a web page is readable for screen readers

• Ensure our UI has sufficient colour contrast so that everyone can perceive it comfortably

• Use various tools to check that our website meets accessibility criteria

Design

• Use CSS media queries to ensure our content is always presented effectively on screens of different sizes

• Demonstrate a mobile-first approach to building a website

• Use CSS variables to apply repeated colours to HTML elements

• Use CSS Flexbox to style children in a single-direction layout (ie a row or a column)

• Use CSS Grid to style children in two-direction layout

Workflow

• Ensure our Git commit history tells a coherent story

HTML Forms

• Use the appropriate input types in HTML forms for gathering different types of information

• Ensure that forms are accessible and include appropriate labeling for screen readers