Service Health Checks with HTML and CSS: A 2027 Project Guide

A convincing HTML and CSS portfolio project explains the result as well as showing it. Here, a student operations learner asks: What is the average latency among healthy probes? You will build an accessible responsive interface and follow the relevant records from a small fixture to an independently checked answer.

This is a 2027 study-edition project brief. All example records and operational situations are fictional. Start with basic HTML and CSS knowledge, the ability to inspect structured data and a local practice environment. The complete first version should answer the stated question before adding accounts, real integrations or additional screens.

Define the project rule

Healthy-probe latency describes a subset of observations. It must not be presented as uptime percentage, because that requires a defined observation window and a different denominator. For this exercise, one row represents one probe. The stable key is record_id; service_name is the grouping or filtering label. The numeric latency_ms field uses milliseconds. Accepted states are scheduled, healthy, unhealthy.

The summary selects status healthy and applies mean to the selected numeric values. Keep this definition visible in the interface, response or report so another learner can reproduce it. Use positive finite values in the starter fixture and define any future zero or missing-value policy explicitly.

Choose the HTML and CSS approach

Start with semantic headings, a labelled form and a genuine data table or list. Use layout rules to adapt the interface rather than rearranging the meaning of the information. This version can be a static prototype: annotate interactions that require JavaScript or a backend instead of implying that a visual button saves data.

The three design decisions to explain in your project notes are:

• Semantic document structure. Apply this choice to probe records and explain its effect on latency_ms.
• Flexible grid and spacing. Apply this choice to probe records and explain its effect on latency_ms.
• Visible keyboard focus. Apply this choice to probe records and explain its effect on latency_ms.

Work through a small sample

The three records below are deliberately small enough to inspect by hand. They are a compact specification for the data shape and expected result, and can later be expanded into a larger synthetic fixture.

[
  {
    "record_id": "uptime-checks-01",
    "service_name": "Web Frontend",
    "latency_ms": 120,
    "status": "healthy",
    "recorded_on": "2027-01-04"
  },
  {
    "record_id": "uptime-checks-02",
    "service_name": "Record API",
    "latency_ms": 300,
    "status": "scheduled",
    "recorded_on": "2027-01-05"
  },
  {
    "record_id": "uptime-checks-03",
    "service_name": "Summary Worker",
    "latency_ms": 180,
    "status": "healthy",
    "recorded_on": "2027-01-06"
  }
]

Only the first and third records match healthy. Their latency_ms values are 120 and 180; the full-fixture result is 150 milliseconds, with 2 matching records. Selecting service_name = Web Frontend leaves the first record, so the result becomes 120 milliseconds, with 1 match. This provides two independent checks for the filter and aggregation.

The full-fixture output contract is:

{
  "matching_count": 2,
  "operation": "mean",
  "value": 150,
  "unit": "milliseconds"
}

Check the result by service_name

The overall figure answers the all-records version of the question. Grouping by service_name produces the following separate expectations, using the same healthy rule. The middle group has a record in the source fixture but no qualifying observation.

Use this breakdown when answering the group-level question. Compare like-for-like units and keep the matching count visible, especially for averages. A different filter changes which records enter the calculation; it does not change the meaning of the metric.

The code blocks describe sample data and an expected result. Implement the surrounding feature using the installed version of your chosen tools, then save the actual run evidence separately from these expectations.

Build the feature in three passes

1. Build the information hierarchy

Show the service_name, latency_ms and status of each probe with visible labels. Place the service_name filter beside the summary it controls. A reader should understand the unit, milliseconds, without needing to inspect the fixture.

2. Connect the filter to one source of data

Derive the selected probe records and their mean from the same collection. Keep the healthy rule explicit. Render an empty-match explanation with the applied filter rather than showing a blank chart that looks broken.

3. Demonstrate an interaction and recovery

Use the first sample label as a filter, reset it, and try a value with no match. If this feature includes saving, provide a pending state and an error state. A static prototype should identify the interaction that still needs implementation.

Find the mistake before polishing the result

A useful defect to introduce deliberately is: Healthy-only latency is incorrectly labelled service availability. First reproduce it against the fixture, then identify the smallest rule or state transition that explains the mismatch. Fix that boundary and rerun the full-fixture and selected-label examples. This creates a stronger explanation than changing several unrelated parts until the screen looks right.

The scenario-specific acceptance check is: Use an explicit latency label and preserve unhealthy probe counts. Preserve before-and-after evidence. Add a missing service_name, a negative latency_ms, an unrecognised status and a duplicate record_id as separate invalid cases. Define the rejection or duplicate-handling policy before testing, and verify that invalid input does not silently change valid existing records.

Check the HTML and CSS concerns as well:

• Labels must remain visible on a narrow screen.
• A table needs understandable headers.
• A static control must not claim to persist changes.

For an empty filter match, the expected mean value is undefined (no matching observations). Keep matching_count at zero. This distinction prevents an empty dataset from being interpreted as a measured observation.

Explain the finished work in a portfolio

Show the student operations learner question, the record definition and the expected calculation first. Then demonstrate a service_name filter and the acceptance check. Include the fixture, setup instructions, chosen tool versions, actual test output and one remaining limitation in the repository. If you show a screenshot, pair it with the input that produced it. Another learner should be able to repeat the same result from a clean checkout.

For a focused extension, add a second service_name selection and compare the two groups using the same rule. Specify how missing groups appear and keep the original fixture as a regression case. Expand scope only after the current calculation, state handling and recovery path remain understandable.

Questions learners often ask

Which probe records belong in the result?

Select records whose status is exactly healthy and that satisfy the chosen service_name filter. Other states remain in the source data and can have separate summaries. Follow the domain rule above when a record changes state.

What should happen when no records match?

Treat the empty result as undefined and show a clear no-observations message. Keep the applied filter visible so the user can change it. Avoid using a loading indicator for a completed request that simply has no matching data.

How can I prove the latency_ms result is correct?

Reconcile the first and third sample records, then repeat the calculation for Web Frontend alone. Save both expected and actual outputs, and rerun the scenario-specific acceptance check after making a change.

Continue learning with Groot Academy

Use this exercise as a concrete discussion point when choosing a learning path. Explore the related Groot Academy course and ask about the current syllabus, learning mode and project practice. Course availability and batch details should be confirmed directly with the academy.

For implementation details, consult the official HTML and CSS documentation matching the tools you install. This project defines an original practice brief; it does not depend on a forecast about 2027 software releases.

Continue with Build Pipeline Run using HTML and CSS, or compare Service Health Checks using React. These companion practice guides are part of the 2027 learning collection.