CSS practice lab
Please read the instructions carefully!
Every exercise keeps the same HTML shell you use in class: DOCTYPE, html lang="en",
head with meta charset="UTF-8", meta name="viewport" …, and title, then body.
Practice inline CSS (style="…" on elements) and internal CSS (a <style> block inside head).
Use type selectors in normal internal CSS cases (for example p, body, h1). Only the dedicated Class & id selectors topic should use class, id, .class, or #id.
Most of the work is adding or tuning CSS; keep the required shell and the tags each case asks for.
Case ideas follow the same building blocks as lab/4_2a_exercises.html (headings, body copy, lists, links, tables, images) while keeping to type selectors and inline styles only.
Use the exercise type buttons for the topic (skeleton, inline color, responsive image, internal rules in head, tables, combined, …). Most topics list several practice cases below. On the left you see the target preview, on the right you edit your full page source. Use Preview mine and Get feedback.
Next case → moves to the next case, then the next topic.
When you are done, use Finish & report and upload the CSV to FELIX if required. You can stop anytime; you do not have to complete every case.
You can finish and submit anytime you want.
Practice report
For FELIX, download the data from the dashed box below using the export button.
Use the short summary table (one row per topic) to understand about your progress. The long case-by-case list gives more detail.
IBM 2 QM 2 - CSS practice lab
Session started: -
Report generated: -
-
Summary (screenshot this table)
| Topic | Feedback runs (sum) | Cases passed | All cases cleared? |
|---|
Case-by-case detail (optional)
| Exercise | Feedback runs | Best result |
|---|
The summary adds up "Get feedback" clicks per topic and how many individual cases passed at least once. You can download a CSV of the same numbers (machine-readable sections, UTF-8) for spreadsheets or evaluation scripts or for submission to FELIX.