Skip to main content

HTML/CSS - 3

Contents​

Learning Objectives​

Learning objectives for this lesson can be found here

Coursework review (45 minutes)​

We open our class with live coding and group debugging using trainees' work as material. This session is an opportunity to work through common problems with coursework and also to demonstrate productive code review and debugging strategies. Use Devtools and live code.

Responsive Web Design​

When we build for the web, we're making websites that can be viewed in a phone, a laptop, a tablet and more. To ensure we're presenting a website that's easy to use on any device, we use Responsive Web Design techniques to modify how content is displayed depending on the viewport.

See how much variety there is in viewport sizes.

Exercise (5 minutes)

As a group, let's brainstorm as many devices as we can think of which might access the websites we build.

Media Queries​

As you learned in your homework assignment, media queries help us change the display of our content depending on the size of the viewport. Let's review what you learned and break down a media query:

@media screen and (min-width: 900px) {
  body {
    background: red;
  }
}

In this media query, we're assigning a red background color to the <body> element whenever the viewport is larger than 900px, and we're viewing on a screen.

  • @media starts the media query
  • screen tells it to apply these styles to screen displays. Other displays might be print, for when a webpage is being printed.
  • (min-width: 900px) tells it to apply these styles when the viewport is larger than 900px

Finally, we wrap all of our styles for this media query in brackets ({ and }), just like a CSS rule.

Exercise (10 minutes)

Working in pairs, reduce the size of the "Bikes for Refugees" text so that it fits on a small screen (320px). But make sure it increases in size on larger screens.

Exercise (10 minutes)

The two buttons in the jumbotron don't fit on the same line on small screens around 320px wide. Can you adjust their size so that they fit on the same line?

CSS Grid​

Exercise (5 minutes)

Open a web page. Everyone point to the grid. Now everyone circle a card component. You can use the annotations tool in Zoom or an extension like Annotate in person.

Go around the room -- each person must circle a smaller component until you have reached single html tags.

What is CSS Grid?​

CSS grid is a way to lay out both components and whole pages with CSS. We can define a layout grid, then slot child components into the grid wherever we want them, regardless of the HTML structure. It's a display property, so first we turn on the grid:

display: grid;

Then we define the layout of the grid as a template. There are lots of ways to do this, but the simplest way is to do this with named areas so it's really clear what should go where. Let's imagine in our semantic html page we have a header, some navigation, some main content, a sidebar and a footer. We can describe that with grid:

grid-template-areas:
  "header header header"
  "nav    nav    sidebar"
  "main   main   sidebar"
  "footer footer footer";
tip

CSS Grid areas, like all HTML elements, are always rectangles. To make more complicated shapes you must overlap areas.

Exercise (1min)

Draw around the words to create a wireframe layout. When you are designing your CSS grid, it helps to sketch the boxes first.

The words make a layout template - a little map of where things will be placed on the page. This is a different kind of semantics. Instead of describing our code to a computer, we are describing it to our fellow coders. The computer doesn't understand these words at all.

Exercise (10 minutes)

Unlike the semantic HTML elements we discussed, where different tags are parsed in different ways by the browser, you could use any string of characters as a name in CSS Grid. But should you? What is the value and purpose of naming things clearly? Discuss your ideas in small groups.

=======

PD (Delivering tutorials)​

Session objective: In this section we'll continue exploring how to use the technical language to communicate to different audiences.

Exercise (20 min)

Exercise objective: To explain concepts to different audiences

In small groups. Prepare a 3 min tutorial based on what you have learned so far to one of the four different audiences:

  1. A group of 10 year olds
  2. People who are new internet users
  3. Your boss
  4. A team of new developers

The tutorial should explain the following:

  1. What are HTML forms used for?
  2. How do form control labels benefit users?
  3. Why are forms useful for different types of users?
Exercise (30 min)

Exercise objective: To practice public speaking skills

Volunteer to present back to the class.

Exercise (10 min)

Exercise objective: To reflect on tasks and identify strengths

Reflect on what you found challenging and share one positive feedback to the wider group.

Coursework​

Click here to view the coursework for this lesson.

Further Learning​

There are other CSS layout techniques not covered in this lesson. To learn more about these other techniques, visit the following MDN pages.

  • CSS positioning — this is still commonly used across the web.
  • CSS grids — this is a recent addition to CSS. Flexbox is used for creating 1-dimensional layout; grid is used for creating 2-dimensional layout.
  • CSS floats — this is not really used anymore, so it's not essential to know it.

Table of Contents