1. CSS: syntax, selectors, positioning »
  2. CSS1: Attendance and activity

CSS1: Attendance and activity

During this session, students shows the sample solution of the exercise and the instructor checks the attendance. The instructor also gives feedback on the exercise. Teams are going through the following questions:

SWOT

  1. box model: which are the properties?

  2. If you ask the width and height of an element what do you get?

  3. box-sizing: which are the valid options for a value?

  4. Why is box-sizing relevant in SWOT?

  5. What are the benefits of flex and grid compared with traditional positioning? In SWOT?

Semantic markup

  1. Why does W3C promote semantic markup?

  2. What is semantic web and which other technologies are involved than HTML5 semantic tagging?

  3. Why is semantic markup good for accessibility?

  4. Which other means ensure good accessibility besides semantic tagging?

Names

  1. Tables are not for formatting the page but to represent, e.g., statistics. Why is that?

  2. Including a mass of data statically in the HTML document is not a good practise. How would you improve?

  3. List the CSS properties that you used or could use to style the <nav> element and its children in the assignment, and explain the purpose of these properties in styling.

  4. What is CSS specificity and how can we calculate it? Why is it important?

CSS diner

The students complete a few of the levels as a group, then should explain to their classmates which CSS properties and values were used, how they solved the level, and what they learned from the experience. Dont take the “easiest” levels- be brave and challenge yourself! Also be prepared to answer any questions their classmates may have about the level. Here are some questions to help you prepare:

  1. What are CSS selectors and how are they used?

  2. What is the difference between the following selectors: div.class, div#id, div.class#id, div#id.class?

  3. What is the difference between the :first-child and :first-of-type pseudo-classes in CSS?

  4. How do you select an element based on its attribute value using CSS selectors?

  5. What is the :not pseudo-class in CSS and how can it be used to select elements?

  6. What is the difference between the + and ~ selectors in CSS and when would you use each one?

General CSS trivia:

  1. What is a CSS selector, and how are they used, i.e., what are their benefits? Can you think of any benefits of knowing selector syntax outside CSS?

  2. What is margin? What is padding? What is border?

  3. What is the difference between border and outline?

  4. List different ways to hide the element in CSS

A+ presents the exercise submission form here.