• Introduce the software developer labour market landscape

• Introduce the Employer Engagement function

• Introduce employability curriculum

• Explore multi-modal strategies for finding employment

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

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?

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 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

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 - 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)

Stretch Goal

Use the automatic trigger functionality of your .

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

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

To be completed on Induction day

• . Repo name: Work01_Git_YourName

• . Repo name: Work02_GitHubProjects_YourName

To be completed on Week01

• . Repo name: Work03_Async_YourName

• . Repo name: Work04_FetchAndPromises_YourName

• . Repo name: Work05_Fetch_YourName

Execute Program

Topics

• Safeguarding Quiz

• Dev machine setup

• Project planning and development (GitHub Projects)

Project

• Quickstart for Projects

Async

CSS

Accessibility

GIT

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)

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