ah teaches web design & development (Like Building Blocks lecture)

In preparation for lecture...

Please close up any laptops, cellphones, Steamdecks, Walkmans and other 'beep-boop' devices.

Questions answered

Going through (most) of your questions!

Some questions will be answered in this week's course materials and tutorial.

How do you do editable code in your slides?

Custom styled CodePen embeds.

How do I take Figma to HTML?

I don't know, but I can't recommend using 'dev mode'. Let's take a look.

Can I build reusable components in HTML?

Yes and no.

You could look into web components but I am guessing what you are moreso hoping to do is build a template, which HTML does not allow for.

Later in the term we will introduce pre-processing which can allow for templating.

What is actually new in HTML?

Where do I learn the elements?

Generally I recommend the Mozilla Developer Network or the HTML5 Doctor a good resources for reviewing the elements.

Are images inline by default?

Yes and no.

The <img> element is inline until the image source is loaded. Then the browser typically applies displays it as inline-block.

One CSS file or multiple?

This is up to you.

What is 'minimum' font-size and 'standard' scaling?

I would recommend that your smallest text be no smaller than 1rem.

As for scaling, there are patterns that you can follow from design libraries/style guides but I would not recommend seeing them as 'standard', as what each font/typeface may require could differ.

vh, vw, dvh and dvw units

Viewport units allow us to specify a size based on the viewport size. vh and vw specify a percentage of the viewport height and width.

Except when an mobile device pops up some interface elements. Then 100vh may mean that content is covered up by the mobile device's interface.

In this case dvh and dvw come into play, allowing you to set a percentage of the viewport's usable size (size excluding mobile interface elements).

More of an explanation available at CSS Tricks.

word-break

CSS does not understand how to break-up long URLs by default. So we need to tell it that it is allowed to do so:

The box model

content-box vs border-box

Oops, this code did not quite load. Please view it at https://codepen.io/andrewhaw/pen/a63b4e018122c1404ed8ff7999cafc1f

How has CSS or HTML replaced JS?

There are a number of ways in which CSS and HTML have evolved to replace what used to be JS-only functionality:

• Animation can now be achieved with CSS animation
• Showing/hiding content can now be done with HTML <details> and <summary> elements
• Smooth scrolling can be achieved with the CSS scroll-behaviour property.
• Lazyloading can be done by the browser using the loading="lazy" attribute.
• Transitions between pages of a website can be achieved using @view-transition.

Answers I will get to

We will either cover these later in the course or I will answer these over the coming weeks:

• More on CSS selectors
• What is clamp for?
• When do I use aspect-ratio?
• How to correctly size images for websites?
• How do I crop images in a container?
• How do I do CSS animation?

Style Guide Component

At minimum, each component in your style guide should include:

• A title for the element: Default Button Style
• A CSS selector for the item: .button-default
• The component rendered out:
  Default Button

Show, Don't Tell

It is very important that when we start talking about brands, colours, layouts, (etc) that you show us what you intend.

"I'm thinking a sky blue" vs.

P1 Code Reviews

In out October 14th class I will have a print-out which includes a question from code in your P1 submission (specific to you). You will be expected to respond to the question in class by hand with no external support. If preferred, we can arrange a time to meet and discuss the question instead.

Flexbox

If you need support for flexbox, I recommend The Flexbox Cheatsheet Cheatsheet (Joni Trythall).

Grids help

If you need support for grids, I recommend A Complete Guide to Grid (CSS Tricks).

Flexbox or grids?

Do you want to let your content control the way it is displayed, on a row by row or column by column basis? That's flexbox.

Or, do you want to define a grid, and either allow items to be auto-placed into the cells defined by that grid, or control their positioning using line-based positioning or grid template areas. That's grid.

— Rachel Andrew

Starter kit

Today's tutorial starter kit (available at 339.ah.link/t03)

Bring P1 to next lecture

Please make sure to bring P1 to next week's lecture.

There is no class on September 30

We will reconvene next in two weeks time (Oct 7).

Additional office hours

In addition to existing office hours, further office hours will be available:

• Thursday, Sept. 25 from 7:30-8:30pm
• Friday, Sept. 26 from 9:30-10:30am
• Thursday, Oct. 2 from 9:30-10am, 11-12pm
• Friday, Oct. 3 from 12-1pm

In two weeks

We will be covering git as part of the next lecture. Please read the next announcement for instructions.

Next lecture

The Utility Belt

Approaches for debugging code and an introduction to git.

Code tutorial recordings will typically become available the day after the lecture.