Pre-apprenticeship

Wednesday Week 3

Welcome back

Programme Structure

Each week these workshops will give a brief introduction to the topic for the next two weeks

You’ll work on a project for each topic, initally on your own and then in pairs

  • Weeks 3 & 4: CSS layouts, architecture and variables
  • Weeks 5 & 6: Git pairing, code review, estimation, objects and advanced DOM
  • Weeks 7 & 8: Higher order functions, promises and fetch
  • Weeks 9 & 10: Testing
  • Weeks 11 & 12: Final project

Along the way, you’ll get experience:

  • Working with someone else asynchronously
  • Estimating how long it will take to build features
  • Handling user stories
  • Reviewing code

CSS Layouts

There are different methods for controlling layouts of web pages

  • Tables
  • Box model
  • CSS: Flex box
  • CSS: Grid

The box model

As Rachel Andrew has reminded us, everything in web design is a box, or the absence of a box… Layout is inevitably, therefore, the arrangement of boxes.

—Heydon Pickering & Andy Bell on Every Layout

box model showing sizes of padding, border and margin

CSS Grid

A two-dimensional layout composed of rows and columns separated by gutters.

row
column
👈 gutter 👉

Demo

Workshop

Work together on Grid Garden. Practice some of the pairing techniques from last week.

🏓

and remember to take a break!

For next week…

Keep working every day and logging your learning on GitHub

Deploy your learning site and add the URL to your README

Have a look at what others have been up to

Share responsibility and accountability for everyone’s learning

Work through this week’s project

  • Look into ARIA labels and use them in your project where needed
  • Work through Playing with CSS Variables and JS && Array Cardio 1 on JavaScript30
  • Continue with Modern JavaScript and Arrays on Execute Program. Started working on Concurrency.
  • Share your learnings on Discord