Chapter 48 — Capstone Build Part 1: Structure and Style

Section 1 — The capstone project: MyDay Dashboard

This section covers the capstone project: myday dashboard. MyDay Dashboard is a small personal dashboard for tasks and notes, built with only HTML, CSS and JavaScript, with no framework and no server. It has a tasks panel, a notes panel, and an overview panel that counts tasks and shows progress.

Thinking about the capstone project: myday dashboard in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat the capstone project: myday dashboard as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through the capstone project: myday dashboard in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with the capstone project: myday dashboard for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When the capstone project: myday dashboard feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects the capstone project: myday dashboard to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with the capstone project: myday dashboard is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on the capstone project: myday dashboard, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

A clear structure makes styling easier, because every visual panel already has a sensible container to target.

Check: What is one thing you would check about the capstone project: myday dashboard in your own MyDay Dashboard before moving on?

Section 2 — Planning the folder and files

This section covers planning the folder and files. The project uses one folder with three files: index.html for structure, styles.css for presentation, and app.js for behaviour. Keeping exactly three files makes the project easy to open, explain, and move, and it matches the separation of languages.

Thinking about planning the folder and files in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat planning the folder and files as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through planning the folder and files in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with planning the folder and files for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When planning the folder and files feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects planning the folder and files to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with planning the folder and files is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on planning the folder and files, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Keep class names honest: a class should describe the job of the element, not only how it happens to look today.

Check: What is one thing you would check about planning the folder and files in your own MyDay Dashboard before moving on?

Section 3 — A single page, not many pages

This section covers a single page, not many pages. MyDay Dashboard is a single page because all of its work happens in one view: tasks, notes, and the overview are visible together. A single page avoids navigation, routing, and duplicated headers, which keeps a first capstone achievable.

Thinking about a single page, not many pages in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat a single page, not many pages as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through a single page, not many pages in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with a single page, not many pages for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When a single page, not many pages feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects a single page, not many pages to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with a single page, not many pages is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on a single page, not many pages, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

When a layout breaks, check the markup first, because a missing closing tag or a wrongly nested element can move everything that follows it.

Check: What is one thing you would check about a single page, not many pages in your own MyDay Dashboard before moving on?

Section 4 — The semantic header

This section covers the semantic header. The header contains the dashboard title, a short purpose line, and the current date shown as text. It uses a header element so the top of the page is a real landmark, not just a styled division at the top.

Thinking about the semantic header in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat the semantic header as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through the semantic header in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with the semantic header for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When the semantic header feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects the semantic header to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with the semantic header is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on the semantic header, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about the semantic header in your own MyDay Dashboard before moving on?

Section 5 — Main landmark and page regions

This section covers main landmark and page regions. Everything after the header belongs in one main element, divided into labelled sections for tasks, notes, and the overview. Landmarks help keyboard and screen reader users jump to a region without reading through the whole page.

Thinking about main landmark and page regions in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat main landmark and page regions as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through main landmark and page regions in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with main landmark and page regions for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When main landmark and page regions feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects main landmark and page regions to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with main landmark and page regions is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on main landmark and page regions, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Small, consistent choices compound: the same spacing, the same radius and the same button style make a page feel designed rather than assembled.

Check: What is one thing you would check about main landmark and page regions in your own MyDay Dashboard before moving on?

Section 6 — Marking up the tasks panel

This section covers marking up the tasks panel. The tasks panel has a heading, an add-task form, a filter bar, a search box, and a list for tasks. Each part has its own container, so styling and behaviour can target one part without disturbing the others.

Thinking about marking up the tasks panel in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat marking up the tasks panel as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through marking up the tasks panel in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with marking up the tasks panel for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When marking up the tasks panel feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects marking up the tasks panel to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with marking up the tasks panel is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on marking up the tasks panel, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Write markup that still makes sense with styles switched off, because that outline is what assistive technology and search tools work from. Avoid inventing a new pattern for every panel; reuse the card, button and form patterns you already have and the dashboard stays coherent.

Check: What is one thing you would check about marking up the tasks panel in your own MyDay Dashboard before moving on?

Section 7 — Marking up the notes panel

This section covers marking up the notes panel. The notes panel has a heading, an add-note form, and a list for notes, with a pin control on each note. Notes are shorter than tasks in this project: a title and a body, plus a pinned flag that controls their order.

Thinking about marking up the notes panel in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat marking up the notes panel as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through marking up the notes panel in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with marking up the notes panel for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When marking up the notes panel feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects marking up the notes panel to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with marking up the notes panel is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on marking up the notes panel, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Avoid inventing a new pattern for every panel; reuse the card, button and form patterns you already have and the dashboard stays coherent.

Check: What is one thing you would check about marking up the notes panel in your own MyDay Dashboard before moving on?

Section 8 — Marking up the overview panel

This section covers marking up the overview panel. The overview panel shows total tasks, completed tasks, active tasks, and a progress bar, plus a simple bar display of tasks by priority. It contains no inputs, because its job is to summarise data that lives in the other panels.

Thinking about marking up the overview panel in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat marking up the overview panel as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through marking up the overview panel in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with marking up the overview panel for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When marking up the overview panel feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects marking up the overview panel to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with marking up the overview panel is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on marking up the overview panel, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

If you cannot explain why an element exists, remove it or merge it into a neighbour, because extra wrappers make later styling harder.

Check: What is one thing you would check about marking up the overview panel in your own MyDay Dashboard before moving on?

Section 9 — Footer and status area

This section covers footer and status area. The footer holds a short status line, such as how many tasks are shown, and a note that data is stored only in this browser. A footer status line is honest and useful: it tells the user where their data lives.

Thinking about footer and status area in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat footer and status area as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through footer and status area in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with footer and status area for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When footer and status area feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects footer and status area to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with footer and status area is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on footer and status area, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check the page at a narrow width early, not at the end, because a layout that only works wide is not finished.

Check: What is one thing you would check about footer and status area in your own MyDay Dashboard before moving on?

Section 10 — The add-task form

This section covers the add-task form. The add-task form asks for task text and a priority choice of Low, Medium, or High, with a sensible default of Medium. Two fields are enough for this capstone; extra fields would add complexity without teaching a new idea.

Thinking about the add-task form in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat the add-task form as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through the add-task form in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with the add-task form for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When the add-task form feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects the add-task form to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with the add-task form is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on the add-task form, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about the add-task form in your own MyDay Dashboard before moving on?

Section 11 — The add-note form

This section covers the add-note form. The add-note form asks for a note title and a note body, both as plain text fields. Keeping notes as title plus body makes them easy to render, edit, and store, and it keeps the form short enough to use quickly.

Thinking about the add-note form in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat the add-note form as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through the add-note form in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with the add-note form for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When the add-note form feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects the add-note form to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with the add-note form is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on the add-note form, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Comment a structural choice only when the reason is not obvious from the code itself, and keep the comment short. A dashboard is used repeatedly, so calm, readable panels matter more than a striking first impression that tires the eye.

Check: What is one thing you would check about the add-note form in your own MyDay Dashboard before moving on?

Section 12 — Labels and accessible names

This section covers labels and accessible names. Every input has a visible label connected with a for attribute, and every icon-only button has an accessible name. Labels help everyone, not only screen reader users, because clicking a label focuses its input.

Thinking about labels and accessible names in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat labels and accessible names as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through labels and accessible names in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with labels and accessible names for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When labels and accessible names feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects labels and accessible names to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with labels and accessible names is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on labels and accessible names, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about labels and accessible names in your own MyDay Dashboard before moving on?

Section 13 — Lists for tasks and notes

This section covers lists for tasks and notes. Tasks and notes are rendered as list items inside unordered lists, because each panel shows a collection of similar items. Real lists give the content structure that a row of divisions cannot express.

Thinking about lists for tasks and notes in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat lists for tasks and notes as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through lists for tasks and notes in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with lists for tasks and notes for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When lists for tasks and notes feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects lists for tasks and notes to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with lists for tasks and notes is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on lists for tasks and notes, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Compare the rendered page with your plan panel by panel, and fix missing or duplicated regions before polishing colours. Use the browser developer tools to inspect an element when its size surprises you, rather than guessing at values in the stylesheet.

Check: What is one thing you would check about lists for tasks and notes in your own MyDay Dashboard before moving on?

Section 14 — Buttons and their types

This section covers buttons and their types. Submit buttons inside forms use type submit, while buttons inside lists use type button so they never submit a form by accident. Button type is a small detail that prevents a whole class of surprising reloads.

Thinking about buttons and their types in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat buttons and their types as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through buttons and their types in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with buttons and their types for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When buttons and their types feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects buttons and their types to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with buttons and their types is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on buttons and their types, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about buttons and their types in your own MyDay Dashboard before moving on?

Section 15 — Filter controls in markup

This section covers filter controls in markup. The filter bar has three buttons: All, Active, and Done, and the active filter is marked so the user can see the current choice. Filters are buttons, not links, because they change the view without leaving the page.

Thinking about filter controls in markup in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat filter controls in markup as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through filter controls in markup in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with filter controls in markup for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When filter controls in markup feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects filter controls in markup to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with filter controls in markup is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on filter controls in markup, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about filter controls in markup in your own MyDay Dashboard before moving on?

Section 16 — The search input in markup

This section covers the search input in markup. The search box is a single text input with a label, placed above the lists it affects. One search box serves both tasks and notes in this project, which keeps the interface simple and the behaviour easy to explain.

Thinking about the search input in markup in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat the search input in markup as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through the search input in markup in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with the search input in markup for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When the search input in markup feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects the search input in markup to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with the search input in markup is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on the search input in markup, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

A clear structure makes styling easier, because every visual panel already has a sensible container to target. Keep class names honest: a class should describe the job of the element, not only how it happens to look today.

Check: What is one thing you would check about the search input in markup in your own MyDay Dashboard before moving on?

Section 17 — Empty states in markup

This section covers empty states in markup. Each list has a planned empty message, such as No tasks yet, shown when its list is empty. An empty state is part of the design, not an accident, and it should tell the user what to do next.

Thinking about empty states in markup in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat empty states in markup as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through empty states in markup in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with empty states in markup for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When empty states in markup feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects empty states in markup to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with empty states in markup is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on empty states in markup, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Keep class names honest: a class should describe the job of the element, not only how it happens to look today. When a layout breaks, check the markup first, because a missing closing tag or a wrongly nested element can move everything that follows it.

Check: What is one thing you would check about empty states in markup in your own MyDay Dashboard before moving on?

Section 18 — The headings outline

This section covers the headings outline. The page has one level-one heading for the dashboard, and level-two headings for Tasks, Notes, and Overview, in that order. A clean outline lets a visitor understand the whole page from its headings alone.

Thinking about the headings outline in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat the headings outline as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through the headings outline in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with the headings outline for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When the headings outline feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects the headings outline to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with the headings outline is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on the headings outline, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

When a layout breaks, check the markup first, because a missing closing tag or a wrongly nested element can move everything that follows it. Test each change in the browser before adding the next one, so you always know which change caused a new problem. Small, consistent choices compound: the same spacing, the same radius and the same button style make a page feel designed rather than assembled.

Check: What is one thing you would check about the headings outline in your own MyDay Dashboard before moving on?

Section 19 — IDs and class names

This section covers ids and class names. IDs identify single elements that JavaScript must find, such as the task list and the task form, while classes describe reusable patterns such as cards and buttons. Consistent naming makes both the stylesheet and the script easier to read.

Thinking about ids and class names in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat ids and class names as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through ids and class names in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with ids and class names for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When ids and class names feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects ids and class names to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with ids and class names is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on ids and class names, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about ids and class names in your own MyDay Dashboard before moving on?

Section 20 — Linking the stylesheet

This section covers linking the stylesheet. The stylesheet is linked from the head with a link element pointing to styles.css, using a relative path in the same folder. A relative path keeps the project portable: the folder works wherever it is copied.

Thinking about linking the stylesheet in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat linking the stylesheet as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through linking the stylesheet in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with linking the stylesheet for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When linking the stylesheet feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects linking the stylesheet to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with linking the stylesheet is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on linking the stylesheet, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Small, consistent choices compound: the same spacing, the same radius and the same button style make a page feel designed rather than assembled. Write markup that still makes sense with styles switched off, because that outline is what assistive technology and search tools work from.

Check: What is one thing you would check about linking the stylesheet in your own MyDay Dashboard before moving on?

Section 21 — Linking the script

This section covers linking the script. The script is linked at the end of the body, or with the defer attribute from the head, so it runs after the markup exists. Running a script before its elements exist is a common cause of errors that look mysterious.

Thinking about linking the script in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat linking the script as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through linking the script in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with linking the script for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When linking the script feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects linking the script to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with linking the script is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on linking the script, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about linking the script in your own MyDay Dashboard before moving on?

Section 22 — Base styles: a calm starting point

This section covers base styles: a calm starting point. Base styles set a readable font, a comfortable line height, and a neutral background on the body, with margins removed only where needed. A calm base means panels, not the page background, carry the visual interest.

Thinking about base styles: a calm starting point in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat base styles: a calm starting point as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through base styles: a calm starting point in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with base styles: a calm starting point for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When base styles: a calm starting point feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects base styles: a calm starting point to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with base styles: a calm starting point is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on base styles: a calm starting point, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Avoid inventing a new pattern for every panel; reuse the card, button and form patterns you already have and the dashboard stays coherent.

Check: What is one thing you would check about base styles: a calm starting point in your own MyDay Dashboard before moving on?

Section 23 — Colour palette with variables

This section covers colour palette with variables. The palette uses a dark text colour, a light page background, white cards, and one accent colour for primary actions, defined as CSS custom properties. Variables let the whole palette change from one place.

Thinking about colour palette with variables in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat colour palette with variables as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through colour palette with variables in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with colour palette with variables for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When colour palette with variables feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects colour palette with variables to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with colour palette with variables is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on colour palette with variables, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

If you cannot explain why an element exists, remove it or merge it into a neighbour, because extra wrappers make later styling harder. Check the page at a narrow width early, not at the end, because a layout that only works wide is not finished.

Check: What is one thing you would check about colour palette with variables in your own MyDay Dashboard before moving on?

Section 24 — Typography scale

This section covers typography scale. Headings use a small scale, with the page title largest and panel headings smaller, and body text stays at a comfortable reading size. A scale with few steps looks more deliberate than many unrelated sizes.

Thinking about typography scale in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat typography scale as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through typography scale in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with typography scale for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When typography scale feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects typography scale to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with typography scale is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on typography scale, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check the page at a narrow width early, not at the end, because a layout that only works wide is not finished. Give every interactive control a visible label or an accessible name, so nobody has to guess what it does. Comment a structural choice only when the reason is not obvious from the code itself, and keep the comment short.

Check: What is one thing you would check about typography scale in your own MyDay Dashboard before moving on?

Section 25 — Spacing scale

This section covers spacing scale. Spacing uses a few repeated values, such as 8, 16, and 24 pixels, for gaps, padding, and margins throughout the dashboard. A spacing scale is what makes panels feel aligned even when their contents differ.

Thinking about spacing scale in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat spacing scale as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through spacing scale in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with spacing scale for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When spacing scale feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects spacing scale to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with spacing scale is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on spacing scale, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Give every interactive control a visible label or an accessible name, so nobody has to guess what it does. Comment a structural choice only when the reason is not obvious from the code itself, and keep the comment short. A dashboard is used repeatedly, so calm, readable panels matter more than a striking first impression that tires the eye.

Check: What is one thing you would check about spacing scale in your own MyDay Dashboard before moving on?

Section 26 — Page layout: a centred column

This section covers page layout: a centred column. The page content sits in a centred column with a maximum width, so lines stay readable on wide screens and panels do not stretch endlessly. A maximum width is one of the simplest readability improvements available.

Thinking about page layout: a centred column in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat page layout: a centred column as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through page layout: a centred column in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with page layout: a centred column for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When page layout: a centred column feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects page layout: a centred column to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with page layout: a centred column is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on page layout: a centred column, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about page layout: a centred column in your own MyDay Dashboard before moving on?

Section 27 — Panel layout with grid

This section covers panel layout with grid. The main area uses CSS grid to place the tasks and notes panels side by side on wide screens, with the overview panel spanning the width. Grid expresses this two-dimensional arrangement directly, without fragile floats.

Thinking about panel layout with grid in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat panel layout with grid as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through panel layout with grid in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with panel layout with grid for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When panel layout with grid feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects panel layout with grid to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with panel layout with grid is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on panel layout with grid, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about panel layout with grid in your own MyDay Dashboard before moving on?

Section 28 — Cards for tasks and notes

This section covers cards for tasks and notes. Each task and note is a card: a white surface with padding, rounded corners, and a light border. Cards group related controls visually, so a complete button clearly belongs to its own task.

Thinking about cards for tasks and notes in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat cards for tasks and notes as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through cards for tasks and notes in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with cards for tasks and notes for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When cards for tasks and notes feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects cards for tasks and notes to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with cards for tasks and notes is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on cards for tasks and notes, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about cards for tasks and notes in your own MyDay Dashboard before moving on?

Section 29 — Styling buttons

This section covers styling buttons. Buttons share padding, radius, and font, with the primary add button using the accent colour and secondary buttons using a neutral style. Consistent buttons teach the user at a glance which action is the main one.

Thinking about styling buttons in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat styling buttons as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through styling buttons in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with styling buttons for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When styling buttons feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects styling buttons to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with styling buttons is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on styling buttons, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Use the browser developer tools to inspect an element when its size surprises you, rather than guessing at values in the stylesheet. Start from what the visitor needs to do, not from decoration, and let the markup follow that job. A clear structure makes styling easier, because every visual panel already has a sensible container to target.

Check: What is one thing you would check about styling buttons in your own MyDay Dashboard before moving on?

Section 30 — Styling form controls

This section covers styling form controls. Text inputs and selects share padding, borders, and font size, with a clear focus style added in a later section. Form controls should look like a family, so a user recognises an input anywhere on the page.

Thinking about styling form controls in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat styling form controls as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through styling form controls in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with styling form controls for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When styling form controls feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects styling form controls to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with styling form controls is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on styling form controls, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Start from what the visitor needs to do, not from decoration, and let the markup follow that job. A clear structure makes styling easier, because every visual panel already has a sensible container to target. Keep class names honest: a class should describe the job of the element, not only how it happens to look today.

Check: What is one thing you would check about styling form controls in your own MyDay Dashboard before moving on?

Section 31 — Styling the filter bar

This section covers styling the filter bar. Filter buttons sit in a row with a small gap, and the selected filter uses the accent background while the others stay neutral. The selected state must be visible without colour alone, so it also uses bolder text.

Thinking about styling the filter bar in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat styling the filter bar as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through styling the filter bar in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with styling the filter bar for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When styling the filter bar feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects styling the filter bar to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with styling the filter bar is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on styling the filter bar, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about styling the filter bar in your own MyDay Dashboard before moving on?

Section 32 — Focus styles you can see

This section covers focus styles you can see. Every focusable element gets a visible outline or ring when focused by keyboard, using the focus-visible approach so mouse users are not distracted. Focus styles are not decoration; they are how keyboard users know where they are.

Thinking about focus styles you can see in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat focus styles you can see as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through focus styles you can see in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with focus styles you can see for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When focus styles you can see feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects focus styles you can see to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with focus styles you can see is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on focus styles you can see, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Keep class names honest: a class should describe the job of the element, not only how it happens to look today.

Check: What is one thing you would check about focus styles you can see in your own MyDay Dashboard before moving on?

Section 33 — Hover and active states

This section covers hover and active states. Buttons and list items change subtly on hover, and buttons press slightly on active, giving immediate feedback for every click. Feedback should be quick and restrained, never a large jump or a colour flash.

Thinking about hover and active states in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat hover and active states as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through hover and active states in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with hover and active states for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When hover and active states feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects hover and active states to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with hover and active states is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on hover and active states, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about hover and active states in your own MyDay Dashboard before moving on?

Section 34 — Priority badges

This section covers priority badges. Priority is shown as a small badge reading Low, Medium, or High, with a distinct but muted colour for each level. The badge text carries the meaning, so the information survives even if colour is not perceived.

Thinking about priority badges in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat priority badges as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through priority badges in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with priority badges for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When priority badges feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects priority badges to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with priority badges is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on priority badges, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Test each change in the browser before adding the next one, so you always know which change caused a new problem. Small, consistent choices compound: the same spacing, the same radius and the same button style make a page feel designed rather than assembled. Write markup that still makes sense with styles switched off, because that outline is what assistive technology and search tools work from.

Check: What is one thing you would check about priority badges in your own MyDay Dashboard before moving on?

Section 35 — Styling the progress bar

This section covers styling the progress bar. The progress bar is a track with a filled portion whose width represents completed tasks as a percentage, plus a text label giving the same figure. Text plus bar means the information is available to everyone.

Thinking about styling the progress bar in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat styling the progress bar as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through styling the progress bar in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with styling the progress bar for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When styling the progress bar feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects styling the progress bar to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with styling the progress bar is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on styling the progress bar, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about styling the progress bar in your own MyDay Dashboard before moving on?

Section 36 — Styling the simple bar display

This section covers styling the simple bar display. The bar display shows one row per priority, with a label, a bar, and a count, built from plain divisions styled with widths. This is a data display, not a chart library, which keeps the capstone dependency-free.

Thinking about styling the simple bar display in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat styling the simple bar display as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through styling the simple bar display in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with styling the simple bar display for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When styling the simple bar display feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects styling the simple bar display to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with styling the simple bar display is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on styling the simple bar display, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about styling the simple bar display in your own MyDay Dashboard before moving on?

Section 37 — Styling empty states

This section covers styling empty states. Empty states use muted text, generous padding, and a short instruction, so an empty panel looks intentional rather than broken. An empty panel should invite the next action, such as adding a first task.

Thinking about styling empty states in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat styling empty states as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through styling empty states in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with styling empty states for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When styling empty states feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects styling empty states to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with styling empty states is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on styling empty states, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Avoid inventing a new pattern for every panel; reuse the card, button and form patterns you already have and the dashboard stays coherent. If you cannot explain why an element exists, remove it or merge it into a neighbour, because extra wrappers make later styling harder.

Check: What is one thing you would check about styling empty states in your own MyDay Dashboard before moving on?

Section 38 — Responsive design: small screens first

This section covers responsive design: small screens first. On a phone-width screen the panels stack vertically, forms use full-width inputs, and buttons are large enough to tap comfortably. Stacking is the default mobile layout for this dashboard, and wider layouts are added progressively.

Thinking about responsive design: small screens first in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat responsive design: small screens first as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through responsive design: small screens first in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with responsive design: small screens first for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When responsive design: small screens first feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects responsive design: small screens first to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with responsive design: small screens first is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on responsive design: small screens first, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

If you cannot explain why an element exists, remove it or merge it into a neighbour, because extra wrappers make later styling harder.

Check: What is one thing you would check about responsive design: small screens first in your own MyDay Dashboard before moving on?

Section 39 — Responsive design: wider screens

This section covers responsive design: wider screens. At a wider breakpoint the tasks and notes panels sit side by side, and the overview spans the full width. One or two breakpoints are enough here; more would complicate a project that should stay readable.

Thinking about responsive design: wider screens in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat responsive design: wider screens as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through responsive design: wider screens in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with responsive design: wider screens for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When responsive design: wider screens feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects responsive design: wider screens to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with responsive design: wider screens is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on responsive design: wider screens, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about responsive design: wider screens in your own MyDay Dashboard before moving on?

Section 40 — A light, calm theme

This section covers a light, calm theme. MyDay Dashboard uses a light theme throughout: light background, white cards, dark text, and one restrained accent. A single theme kept consistent is better than a half-finished theme switcher that leaves some panels unstyled.

Thinking about a light, calm theme in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat a light, calm theme as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through a light, calm theme in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with a light, calm theme for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When a light, calm theme feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects a light, calm theme to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with a light, calm theme is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on a light, calm theme, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about a light, calm theme in your own MyDay Dashboard before moving on?

Section 41 — Reusable utility classes

This section covers reusable utility classes. A few utilities, such as a muted text style and a small gap helper, are reused where the same small job recurs. Utilities should stay few and purposeful; a project made only of utilities becomes hard to read.

Thinking about reusable utility classes in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat reusable utility classes as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through reusable utility classes in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with reusable utility classes for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When reusable utility classes feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects reusable utility classes to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with reusable utility classes is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on reusable utility classes, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about reusable utility classes in your own MyDay Dashboard before moving on?

Section 42 — Avoiding inline styles

This section covers avoiding inline styles. Styles live in styles.css, not in style attributes on elements, except for widths set by JavaScript on bars, which are data, not design. Keeping design in one file makes the dashboard easy to restyle and review.

Thinking about avoiding inline styles in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat avoiding inline styles as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through avoiding inline styles in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with avoiding inline styles for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When avoiding inline styles feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects avoiding inline styles to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with avoiding inline styles is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on avoiding inline styles, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

A dashboard is used repeatedly, so calm, readable panels matter more than a striking first impression that tires the eye. Compare the rendered page with your plan panel by panel, and fix missing or duplicated regions before polishing colours. Use the browser developer tools to inspect an element when its size surprises you, rather than guessing at values in the stylesheet.

Check: What is one thing you would check about avoiding inline styles in your own MyDay Dashboard before moving on?

Section 43 — Organising the stylesheet

This section covers organising the stylesheet. The stylesheet is organised in order: variables, base, layout, panels, forms, buttons, badges, bars, and responsive rules, with short comments marking each part. Organisation is a kindness to the next person who reads the file, including you.

Thinking about organising the stylesheet in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat organising the stylesheet as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through organising the stylesheet in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with organising the stylesheet for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When organising the stylesheet feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects organising the stylesheet to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with organising the stylesheet is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on organising the stylesheet, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about organising the stylesheet in your own MyDay Dashboard before moving on?

Section 44 — Checking layout with developer tools

This section covers checking layout with developer tools. Developer tools let you inspect an element, see its box model, and find which rule set a size or colour. When a panel looks wrong, inspect it before changing values blindly, because the cause is often a rule you forgot.

Thinking about checking layout with developer tools in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat checking layout with developer tools as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through checking layout with developer tools in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with checking layout with developer tools for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When checking layout with developer tools feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects checking layout with developer tools to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with checking layout with developer tools is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on checking layout with developer tools, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Use the browser developer tools to inspect an element when its size surprises you, rather than guessing at values in the stylesheet.

Check: What is one thing you would check about checking layout with developer tools in your own MyDay Dashboard before moving on?

Section 45 — Fixing overflow

This section covers fixing overflow. Overflow happens when content is wider than its container, often from a long unbroken word or a fixed width that is too large. The fix is usually to let content wrap, to use a flexible width, or to shorten the content, not to hide it.

Thinking about fixing overflow in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat fixing overflow as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through fixing overflow in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with fixing overflow for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When fixing overflow feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects fixing overflow to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<form id="task-form">
  <label for="task-text">New task</label>
  <input id="task-text" type="text" required>
  <button type="submit">Add task</button>
</form>

The label, the input and the submit button belong together in one form, so pressing Enter submits it and the browser can offer its usual form behaviour.

A common mistake with fixing overflow is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on fixing overflow, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about fixing overflow in your own MyDay Dashboard before moving on?

Section 46 — Contrast and readability

This section covers contrast and readability. Text colours are checked against their backgrounds so body text and badges remain readable, and small text is never set in a pale colour on a pale background. Readability is a requirement, not a preference, for a tool used daily.

Thinking about contrast and readability in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat contrast and readability as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through contrast and readability in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with contrast and readability for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When contrast and readability feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects contrast and readability to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
}

A single card rule reused for every panel keeps the dashboard visually consistent, and changing the padding here changes every panel at once.

A common mistake with contrast and readability is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on contrast and readability, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about contrast and readability in your own MyDay Dashboard before moving on?

Section 47 — A consistent spacing audit

This section covers a consistent spacing audit. A spacing audit means opening every panel and checking that gaps, padding, and alignment match the scale, fixing outliers one by one. Audits catch the small inconsistencies that make a page feel unfinished.

Thinking about a consistent spacing audit in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat a consistent spacing audit as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through a consistent spacing audit in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with a consistent spacing audit for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When a consistent spacing audit feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects a consistent spacing audit to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

.task-list {
  display: grid;
  gap: 10px;
}

A grid with a gap turns a plain list into evenly spaced rows without extra margins on individual items, which keeps the spacing easy to adjust.

A common mistake with a consistent spacing audit is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on a consistent spacing audit, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about a consistent spacing audit in your own MyDay Dashboard before moving on?

Section 48 — Style notes in code comments

This section covers style notes in code comments. Short comments record decisions such as why the accent is used only for primary actions, so a later reader understands the system rather than just the rules. Comments explain reasons, not what the code already says.

Thinking about style notes in code comments in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat style notes in code comments as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through style notes in code comments in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with style notes in code comments for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When style notes in code comments feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects style notes in code comments to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<button type="button" data-filter="active">Active</button>

A button with a data attribute can carry its filter value in the markup, which keeps the later JavaScript simple and the intent visible in the HTML.

A common mistake with style notes in code comments is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on style notes in code comments, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about style notes in code comments in your own MyDay Dashboard before moving on?

Section 49 — Reviewing structure and style together

This section covers reviewing structure and style together. Reviewing structure and style together means stepping back from individual panels and asking whether the whole page reads as one dashboard: the header, panels, forms, and bars sharing the same palette, spacing, and language. A page can have correct parts and still feel disjointed, so this review looks for the outliers, the panel that uses a different radius, the button that does not match, or the heading that breaks the scale, and brings them back into the system before behaviour is added.

Thinking about reviewing structure and style together in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat reviewing structure and style together as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through reviewing structure and style together in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with reviewing structure and style together for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When reviewing structure and style together feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects reviewing structure and style together to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<header>
  <h1>MyDay Dashboard</h1>
  <p>Tasks and notes, in one calm place.</p>
</header>

This header gives the dashboard one clear title and one short purpose line, and it sits above every panel so the user always knows where they are.

A common mistake with reviewing structure and style together is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on reviewing structure and style together, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Check: What is one thing you would check about reviewing structure and style together in your own MyDay Dashboard before moving on?

Section 50 — Chapter checkpoint: structure and style done

This section covers chapter checkpoint: structure and style done. By the end of this chapter the dashboard should look complete and calm even before any behaviour works: header, three panels, forms, filters, lists, and bars all in place. A static but well-structured page is a solid checkpoint, not a failure.

Thinking about chapter checkpoint: structure and style done in the MyDay Dashboard helps to keep the work concrete, because every decision can be tested against a real panel, a real list, or a real button.

Beginners often treat chapter checkpoint: structure and style done as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through chapter checkpoint: structure and style done in small steps: make one change, open the page, try the feature with the keyboard and the mouse, and only then move on.

A useful habit is to ask what could go wrong with chapter checkpoint: structure and style done for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When chapter checkpoint: structure and style done feels confusing, simplify the surface first and keep the underlying idea the same, because complexity in the interface rarely helps the user.

Good front-end work connects chapter checkpoint: structure and style done to the rest of the project, so a change here should not silently break a filter, a count, or a saved list elsewhere.

Here is a short example from the MyDay Dashboard:

<section aria-labelledby="tasks-heading">
  <h2 id="tasks-heading">Tasks</h2>
  <ul id="task-list"></ul>
</section>

The section groups the task panel, the heading names it for everyone including screen reader users, and the empty list is ready for JavaScript to fill later.

A common mistake with chapter checkpoint: structure and style done is to rush it, add it everywhere at once, and then struggle to find which change broke the page. Work on one panel at a time, keep a working version saved, and test the dashboard after each step, including reloading the page to confirm that saved tasks and notes are still there. If something looks wrong, undo the last change and re-read the code around it before trying a different fix, because a calm, narrow check usually finds the problem faster than rewriting a whole file.

To check your own work on chapter checkpoint: structure and style done, open the dashboard, use the feature as a visitor would, and look for three things: does it do the job, does it still work after a reload, and does it behave sensibly at a narrow width and with the keyboard alone. Write down anything that fails, fix one item at a time, and re-test the whole flow after each fix, because a fix in one panel can affect a count, a filter, or a saved list in another.

Small, consistent choices compound: the same spacing, the same radius and the same button style make a page feel designed rather than assembled.

Check: What is one thing you would check about chapter checkpoint: structure and style done in your own MyDay Dashboard before moving on?

Practical task

Build the static MyDay Dashboard: create a folder with index.html, styles.css, and app.js, and write the full structure and style from this chapter, with the header, tasks panel, notes panel, and overview panel, the add-task and add-note forms, the filter bar, the search box, and the progress and bar displays. Do not write behaviour yet. Open the page in a browser at a wide width and at a phone width, check the headings outline, the focus styles, and the spacing, and fix any overflow or inconsistency before you consider the chapter done. Keep the data generic and the theme light and calm throughout.

Chapter questions

What are the three files of MyDay Dashboard, and what job does each one do?
Why are tasks and notes marked up as lists, and why does the page have only one level-one heading?
How does the overview panel get its numbers, and why is it not an input panel?
Describe how the dashboard layout changes between a phone width and a wide screen.
What would you check first if a panel overflowed its container on a narrow screen?