Chapter 50 — Capstone Finish, Portfolio and Next Steps

Section 1 — What finished means

This section covers what finished means. A finished capstone is one where every promised feature works end to end: tasks and notes can be added, changed, filtered, searched, and reloaded without a broken step. Finished does not mean perfect; it means complete, tested, and demonstrable.

Thinking about what finished means 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 what finished means as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through what finished means 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 what finished means for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When what finished means 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 what finished means 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with what finished means 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 what finished means, 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.

Portfolio reviewers spend little time on each project, so the first screen and the first paragraph must explain the job clearly. Honest descriptions build more trust than grand claims: say what you built, what you chose, and what you would improve next.

Check: What is one thing you would check about what finished means in your own MyDay Dashboard before moving on?

Section 2 — End-to-end testing of the whole flow

This section covers end-to-end testing of the whole flow. End-to-end testing means walking the dashboard as a user: add a task, complete it, filter to Done, search for it, reload, and confirm it is still there. One full walk-through catches more than many isolated checks.

Thinking about end-to-end testing of the whole flow 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 end-to-end testing of the whole flow as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through end-to-end testing of the whole flow 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 end-to-end testing of the whole flow for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When end-to-end testing of the whole flow 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 end-to-end testing of the whole flow 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with end-to-end testing of the whole flow 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 end-to-end testing of the whole flow, 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.

Honest descriptions build more trust than grand claims: say what you built, what you chose, and what you would improve next.

Check: What is one thing you would check about end-to-end testing of the whole flow in your own MyDay Dashboard before moving on?

Section 3 — Testing on a phone-sized screen

This section covers testing on a phone-sized screen. Testing on a phone-sized screen, using the browser's device emulation and, if possible, a real phone, confirms that panels stack, buttons are tappable, and text does not overflow. A dashboard is often used on a phone, so this test is essential.

Thinking about testing on a phone-sized screen 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 testing on a phone-sized screen as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through testing on a phone-sized screen 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 testing on a phone-sized screen for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When testing on a phone-sized screen 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 testing on a phone-sized screen 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with testing on a phone-sized screen 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 testing on a phone-sized screen, 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 the demo data generic, because a portfolio project should never expose real personal notes, names or private tasks.

Check: What is one thing you would check about testing on a phone-sized screen in your own MyDay Dashboard before moving on?

Section 4 — Testing with the keyboard only

This section covers testing with the keyboard only. Keyboard testing means using Tab, Enter, Space, and Shift plus Tab to reach every control and complete every action without a mouse. If any action needs a mouse, that control needs fixing before the project is called done.

Thinking about testing with the keyboard only 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 testing with the keyboard only as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through testing with the keyboard only 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 testing with the keyboard only for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When testing with the keyboard only 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 testing with the keyboard only 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with testing with the keyboard only 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 testing with the keyboard only, 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 short case study beats a long feature list, because it shows judgement, not only that you can follow a tutorial.

Check: What is one thing you would check about testing with the keyboard only in your own MyDay Dashboard before moving on?

Section 5 — Basic screen reader checks

This section covers basic screen reader checks. Basic screen reader checks mean confirming headings are in order, form labels are announced, and the overview counts are reachable, using a free screen reader if one is available. You do not need to be an expert to catch a missing label.

Thinking about basic screen reader checks 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 basic screen reader checks as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through basic screen reader checks 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 basic screen reader checks for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When basic screen reader checks 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 basic screen reader checks 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with basic screen reader checks 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 basic screen reader checks, 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.

Before you call a project done, run through it as a stranger would, with no knowledge of how the code works inside.

Check: What is one thing you would check about basic screen reader checks in your own MyDay Dashboard before moving on?

Section 6 — Triaging the bug list

This section covers triaging the bug list. Triaging means sorting found bugs into must-fix, should-fix, and later, and fixing must-fix items first, such as data loss or a button that does nothing. A short, honest bug list is better than a long list nobody acts on.

Thinking about triaging the bug list 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 triaging the bug list as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through triaging the bug list 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 triaging the bug list for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When triaging the bug list 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 triaging the bug list 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with triaging the bug list 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 triaging the bug list, 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.

Note the trade-offs you made, because being able to explain a choice is often more impressive than the choice itself. Update the portfolio when the project improves, and remove anything that no longer works, rather than leaving a dead link.

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

Section 7 — Polishing copy and labels

This section covers polishing copy and labels. Polishing copy means reading every heading, label, button, and empty message aloud and fixing anything vague, such as a button that only says Click here. Clear copy is part of usability, not an afterthought.

Thinking about polishing copy and labels 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 polishing copy and labels as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through polishing copy and labels 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 polishing copy and labels for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When polishing copy and labels 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 polishing copy and labels 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with polishing copy and labels 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 polishing copy and labels, 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.

Update the portfolio when the project improves, and remove anything that no longer works, rather than leaving a dead link. Learning does not stop at the last chapter; it changes shape, from following lessons to choosing your own problems.

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

Section 8 — Writing the project readme

This section covers writing the project readme. The readme explains what MyDay Dashboard is, what it does, how to run it by opening index.html, and what was learned building it. A readme is the first file a reviewer opens, so it should be short and accurate.

Thinking about writing the project readme 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 writing the project readme as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through writing the project readme 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 writing the project readme for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When writing the project readme 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 writing the project readme 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with writing the project readme 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 writing the project readme, 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.

Learning does not stop at the last chapter; it changes shape, from following lessons to choosing your own problems. Practise in small, regular sessions with a concrete deliverable, rather than collecting courses you never finish.

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

Section 9 — Taking portfolio screenshots

This section covers taking portfolio screenshots. Screenshots should show the dashboard with generic demo data, at a readable size, capturing the full layout and one detailed panel. Captions should say what each screenshot shows, rather than assuming the viewer guesses.

Thinking about taking portfolio screenshots 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 taking portfolio screenshots as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through taking portfolio screenshots 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 taking portfolio screenshots for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When taking portfolio screenshots 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 taking portfolio screenshots 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with taking portfolio screenshots 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 taking portfolio screenshots, 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 taking portfolio screenshots in your own MyDay Dashboard before moving on?

Section 10 — Writing the case study

This section covers writing the case study. A case study tells a short story in four parts: the problem, the approach, the result, and what you would improve. Four short paragraphs, honestly written, beat a page of adjectives.

Thinking about writing the case study 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 writing the case study as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through writing the case study 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 writing the case study for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When writing the case study 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 writing the case study 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with writing the case study 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 writing the case study, 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 a record of bugs you fixed and what caused them, because that record becomes your interview evidence and your study notes. Share work in a way that invites feedback, and treat a critical comment as a free review of something you can still improve.

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

Section 11 — Showing the problem first

This section covers showing the problem first. Start the case study with the problem: keeping tasks and notes in scattered places makes it easy to lose track. A problem-first opening gives the project a reason to exist, which a feature list alone cannot.

Thinking about showing the problem 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 showing the problem 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 showing the problem 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 showing the problem first for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When showing the problem 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 showing the problem 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with showing the problem 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 showing the problem 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.

Share work in a way that invites feedback, and treat a critical comment as a free review of something you can still improve. A second project that reuses the same core skills in a new context proves the first one was understanding, not memorisation.

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

Section 12 — Showing the build, not just the result

This section covers showing the build, not just the result. The build section names the three files, the state shape, and localStorage persistence, and explains why no framework was used. Reviewers want to see decisions, not only screenshots of a finished page.

Thinking about showing the build, not just the result 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 showing the build, not just the result as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through showing the build, not just the result 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 showing the build, not just the result for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When showing the build, not just the result 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 showing the build, not just the result 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with showing the build, not just the result 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 showing the build, not just the result, 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 second project that reuses the same core skills in a new context proves the first one was understanding, not memorisation.

Check: What is one thing you would check about showing the build, not just the result in your own MyDay Dashboard before moving on?

Section 13 — Showing the result honestly

This section covers showing the result honestly. The result section describes what works, using the features themselves as evidence, and avoids invented numbers about users or speed. If the dashboard has no real users yet, say it is a personal project, which is true and respectable.

Thinking about showing the result honestly 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 showing the result honestly as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through showing the result honestly 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 showing the result honestly for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When showing the result honestly 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 showing the result honestly 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with showing the result honestly 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 showing the result honestly, 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 every link, screenshot and claim in your portfolio, because one broken demo undermines the rest of the page. The goal is not to know every tool, but to be able to build, test, explain and improve a working front-end project.

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

Section 14 — Final code cleanliness pass

This section covers final code cleanliness pass. A cleanliness pass removes unused variables, dead functions, and duplicated code, and gives unclear names better ones. Clean code is easier to explain in an interview, which is a practical reason to do the pass.

Thinking about final code cleanliness pass 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 final code cleanliness pass as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through final code cleanliness pass 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 final code cleanliness pass for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When final code cleanliness pass 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 final code cleanliness pass 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with final code cleanliness pass 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 final code cleanliness pass, 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.

The goal is not to know every tool, but to be able to build, test, explain and improve a working front-end project. A finished project is one you can demonstrate from start to finish without apologising for a broken step in the middle.

Check: What is one thing you would check about final code cleanliness pass in your own MyDay Dashboard before moving on?

Section 15 — Removing console logs and dead code

This section covers removing console logs and dead code. Development logs and commented-out experiments are removed, because they distract a reviewer and suggest the project was never finished. Keep only logs that serve the user, which in this project means none.

Thinking about removing console logs and dead code 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 removing console logs and dead code as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through removing console logs and dead code 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 removing console logs and dead code for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When removing console logs and dead code 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 removing console logs and dead code 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with removing console logs and dead code 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 removing console logs and dead code, 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 finished project is one you can demonstrate from start to finish without apologising for a broken step in the middle.

Check: What is one thing you would check about removing console logs and dead code in your own MyDay Dashboard before moving on?

Section 16 — Comments that explain why

This section covers comments that explain why. Remaining comments explain reasons, such as why progress guards against zero tasks, not what the next line does. A comment that restates code adds noise; a comment that records a decision adds value.

Thinking about comments that explain why 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 comments that explain why as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through comments that explain why 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 comments that explain why for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When comments that explain why 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 comments that explain why 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with comments that explain why 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 comments that explain why, 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 comments that explain why in your own MyDay Dashboard before moving on?

Section 17 — Deploying a static site

This section covers deploying a static site. Deployment for a static project means copying the three files to a static host, so the dashboard has a public link. This chapter describes the idea and the checks, without naming a host as a guarantee, because hosting choices change.

Thinking about deploying a static site 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 deploying a static site as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through deploying a static site 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 deploying a static site for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When deploying a static site 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 deploying a static site 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with deploying a static site 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 deploying a static site, 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.

Honest descriptions build more trust than grand claims: say what you built, what you chose, and what you would improve next.

Check: What is one thing you would check about deploying a static site in your own MyDay Dashboard before moving on?

Section 18 — Checking the deployed version

This section covers checking the deployed version. After deployment, open the public link in a fresh browser session, repeat the end-to-end test, and confirm the live copy matches the local copy. A deployed version is only real once it has been tested live.

Thinking about checking the deployed version 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 the deployed version 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 the deployed version 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 the deployed version for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When checking the deployed version 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 the deployed version 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with checking the deployed version 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 the deployed version, 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 the demo data generic, because a portfolio project should never expose real personal notes, names or private tasks. A short case study beats a long feature list, because it shows judgement, not only that you can follow a tutorial.

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

Section 19 — Structuring a portfolio page

This section covers structuring a portfolio page. A portfolio page has a short introduction, a list of projects, and a contact section, with each project getting a name, a sentence, a screenshot, and links. One page, clearly organised, is enough to start.

Thinking about structuring a portfolio page 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 structuring a portfolio page as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through structuring a portfolio page 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 structuring a portfolio page for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When structuring a portfolio page 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 structuring a portfolio page 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with structuring a portfolio page 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 structuring a portfolio page, 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 short case study beats a long feature list, because it shows judgement, not only that you can follow a tutorial. Before you call a project done, run through it as a stranger would, with no knowledge of how the code works inside.

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

Section 20 — Writing the MyDay portfolio entry

This section covers writing the myday portfolio entry. The MyDay entry says, in one paragraph, that it is a task-and-notes dashboard built with HTML, CSS, and JavaScript, storing data in the browser. The entry links the live demo and the code, if both are public.

Thinking about writing the myday portfolio entry 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 writing the myday portfolio entry as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through writing the myday portfolio entry 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 writing the myday portfolio entry for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When writing the myday portfolio entry 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 writing the myday portfolio entry 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with writing the myday portfolio entry 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 writing the myday portfolio entry, 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.

Before you call a project done, run through it as a stranger would, with no knowledge of how the code works inside.

Check: What is one thing you would check about writing the myday portfolio entry in your own MyDay Dashboard before moving on?

Section 21 — Describing skills honestly

This section covers describing skills honestly. Skills are described by what you have actually done: built a dashboard, handled state and storage, and tested with keyboard and small screens. Claimed skills should be traceable to a project a reviewer can open.

Thinking about describing skills honestly 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 describing skills honestly as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through describing skills honestly 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 describing skills honestly for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When describing skills honestly 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 describing skills honestly 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with describing skills honestly 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 describing skills honestly, 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 describing skills honestly in your own MyDay Dashboard before moving on?

Section 22 — Linking the demo and the code

This section covers linking the demo and the code. Links to the demo and the code sit beside the project entry, and both are checked before the portfolio is shared. A broken demo link is worse than no link, because it wastes the reviewer's time.

Thinking about linking the demo and the code 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 demo and the code 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 demo and the code 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 demo and the code for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When linking the demo and the code 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 demo and the code 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with linking the demo and the code 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 demo and the code, 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.

Update the portfolio when the project improves, and remove anything that no longer works, rather than leaving a dead link.

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

Section 23 — Next learning: responsive patterns

This section covers next learning: responsive patterns. The next responsive step is learning flexible grids, fluid type, and container-aware layouts through small exercises, building on the dashboard's two breakpoints. Depth on one topic beats a shallow tour of many.

Thinking about next learning: responsive patterns 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 next learning: responsive patterns as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: responsive patterns 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 next learning: responsive patterns for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: responsive patterns 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 next learning: responsive patterns 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with next learning: responsive patterns 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 next learning: responsive patterns, 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 next learning: responsive patterns in your own MyDay Dashboard before moving on?

Section 24 — Next learning: accessibility in depth

This section covers next learning: accessibility in depth. The next accessibility step is learning focus management, accessible names for custom controls, and testing with a screen reader on a real project. Accessibility is a practice, not a checklist memorised once.

Thinking about next learning: accessibility in depth 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 next learning: accessibility in depth as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: accessibility in depth 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 next learning: accessibility in depth for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: accessibility in depth 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 next learning: accessibility in depth 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with next learning: accessibility in depth 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 next learning: accessibility in depth, 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 next learning: accessibility in depth in your own MyDay Dashboard before moving on?

Section 25 — Next learning: forms and validation

This section covers next learning: forms and validation. The next forms step is learning richer validation, such as showing errors as the user types and grouping related fields, while keeping messages plain. Good validation guides rather than punishes.

Thinking about next learning: forms and validation 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 next learning: forms and validation as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: forms and validation 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 next learning: forms and validation for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: forms and validation 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 next learning: forms and validation 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with next learning: forms and validation 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 next learning: forms and validation, 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 a record of bugs you fixed and what caused them, because that record becomes your interview evidence and your study notes.

Check: What is one thing you would check about next learning: forms and validation in your own MyDay Dashboard before moving on?

Section 26 — Next learning: fetching data

This section covers next learning: fetching data. The next data step is learning to fetch data from a public API, handle loading and error states, and display the result, which moves the dashboard idea toward real-world applications. Loading and error states are the lesson, not just the fetch call.

Thinking about next learning: fetching data 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 next learning: fetching data as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: fetching data 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 next learning: fetching data for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: fetching data 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 next learning: fetching data 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with next learning: fetching data 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 next learning: fetching data, 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.

Share work in a way that invites feedback, and treat a critical comment as a free review of something you can still improve.

Check: What is one thing you would check about next learning: fetching data in your own MyDay Dashboard before moving on?

Section 27 — Next learning: frameworks, when and why

This section covers next learning: frameworks, when and why. Frameworks become useful when a project grows large enough that manual rendering becomes painful, and learning one is easier once manual rendering is understood. The dashboard teaches the problems a framework later solves.

Thinking about next learning: frameworks, when and why 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 next learning: frameworks, when and why as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: frameworks, when and why 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 next learning: frameworks, when and why for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: frameworks, when and why 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 next learning: frameworks, when and why 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with next learning: frameworks, when and why 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 next learning: frameworks, when and why, 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 second project that reuses the same core skills in a new context proves the first one was understanding, not memorisation.

Check: What is one thing you would check about next learning: frameworks, when and why in your own MyDay Dashboard before moving on?

Section 28 — Next learning: testing front-end code

This section covers next learning: testing front-end code. Testing front-end code means writing small checks for helpers, such as progress calculation, and manual checklists for the interface. Automated tests for helpers are a realistic first testing step.

Thinking about next learning: testing front-end code 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 next learning: testing front-end code as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: testing front-end code 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 next learning: testing front-end code for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: testing front-end code 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 next learning: testing front-end code 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with next learning: testing front-end code 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 next learning: testing front-end code, 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 next learning: testing front-end code in your own MyDay Dashboard before moving on?

Section 29 — Next learning: performance

This section covers next learning: performance. Performance learning covers measuring load time, reducing image sizes, and avoiding unnecessary work, applied to real pages rather than as abstract rules. Measure first, because guessing at slowness wastes effort.

Thinking about next learning: performance 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 next learning: performance as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: performance 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 next learning: performance for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: performance 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 next learning: performance 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with next learning: performance 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 next learning: performance, 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 next learning: performance in your own MyDay Dashboard before moving on?

Section 30 — Next learning: version control habits

This section covers next learning: version control habits. Version control habits mean small, frequent commits with clear messages, and a repository that shows the project growing step by step. A clean history is itself portfolio evidence.

Thinking about next learning: version control habits 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 next learning: version control habits as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through next learning: version control habits 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 next learning: version control habits for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When next learning: version control habits 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 next learning: version control habits 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with next learning: version control habits 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 next learning: version control habits, 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 finished project is one you can demonstrate from start to finish without apologising for a broken step in the middle. Portfolio reviewers spend little time on each project, so the first screen and the first paragraph must explain the job clearly.

Check: What is one thing you would check about next learning: version control habits in your own MyDay Dashboard before moving on?

Section 31 — A second project: a habit tracker

This section covers a second project: a habit tracker. A habit tracker reuses the dashboard's skills, with a list of habits, a daily check-off, and a simple streak count stored in the browser. Reusing a known pattern in a new context is strong evidence of understanding.

Thinking about a second project: a habit tracker 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 second project: a habit tracker 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 second project: a habit tracker 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 second project: a habit tracker for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When a second project: a habit tracker 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 second project: a habit tracker 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with a second project: a habit tracker 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 second project: a habit tracker, 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.

Portfolio reviewers spend little time on each project, so the first screen and the first paragraph must explain the job clearly.

Check: What is one thing you would check about a second project: a habit tracker in your own MyDay Dashboard before moving on?

Section 32 — A third project: a reading list

This section covers a third project: a reading list. A reading list reuses lists, filters, and storage again, adding a status per book, such as To read, Reading, and Finished. Each new project should add one new idea, not five, so learning stays manageable.

Thinking about a third project: a reading list 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 third project: a reading list 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 third project: a reading list 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 third project: a reading list for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When a third project: a reading list 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 third project: a reading list 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with a third project: a reading list 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 third project: a reading list, 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.

Honest descriptions build more trust than grand claims: say what you built, what you chose, and what you would improve next.

Check: What is one thing you would check about a third project: a reading list in your own MyDay Dashboard before moving on?

Section 33 — Job search: presenting the portfolio

This section covers job search: presenting the portfolio. In a job search, the portfolio link goes with applications, and the MyDay entry is mentioned in a cover letter only when it matches the role. Relevance matters more than sending every project to every employer.

Thinking about job search: presenting the portfolio 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 job search: presenting the portfolio as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through job search: presenting the portfolio 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 job search: presenting the portfolio for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When job search: presenting the portfolio 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 job search: presenting the portfolio 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with job search: presenting the portfolio 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 job search: presenting the portfolio, 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 the demo data generic, because a portfolio project should never expose real personal notes, names or private tasks.

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

Section 34 — Interview: talking through MyDay

This section covers interview: talking through myday. In an interview, describe MyDay in one minute: the problem, the three files, the state and storage approach, and one challenge you solved. Practise the minute aloud, because a rehearsed summary sounds confident, not memorised.

Thinking about interview: talking through myday 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 interview: talking through myday as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through interview: talking through myday 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 interview: talking through myday for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When interview: talking through myday 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 interview: talking through myday 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with interview: talking through myday 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 interview: talking through myday, 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 interview: talking through myday in your own MyDay Dashboard before moving on?

Section 35 — Interview: explaining a bug you fixed

This section covers interview: explaining a bug you fixed. Choose a real bug, such as a filter that disagreed with the counts, and explain the symptom, the cause, and the fix in that order. Interviewers listen for method, not only for the answer.

Thinking about interview: explaining a bug you fixed 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 interview: explaining a bug you fixed as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through interview: explaining a bug you fixed 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 interview: explaining a bug you fixed for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When interview: explaining a bug you fixed 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 interview: explaining a bug you fixed 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with interview: explaining a bug you fixed 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 interview: explaining a bug you fixed, 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.

Before you call a project done, run through it as a stranger would, with no knowledge of how the code works inside.

Check: What is one thing you would check about interview: explaining a bug you fixed in your own MyDay Dashboard before moving on?

Section 36 — Interview: explaining a trade-off

This section covers interview: explaining a trade-off. A good trade-off example is choosing no framework: simpler to explain and deploy, but manual rendering to maintain. Naming both sides shows judgement, which is what the question is really asking.

Thinking about interview: explaining a trade-off 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 interview: explaining a trade-off as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through interview: explaining a trade-off 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 interview: explaining a trade-off for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When interview: explaining a trade-off 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 interview: explaining a trade-off 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with interview: explaining a trade-off 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 interview: explaining a trade-off, 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 interview: explaining a trade-off in your own MyDay Dashboard before moving on?

Section 37 — Keeping a learning log

This section covers keeping a learning log. A learning log is a short weekly note of what you built, what confused you, and what you want to try next. Over months it becomes a record of growth that no certificate can replace.

Thinking about keeping a learning log 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 keeping a learning log as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through keeping a learning log 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 keeping a learning log for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When keeping a learning log 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 keeping a learning log 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with keeping a learning log 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 keeping a learning log, 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 keeping a learning log in your own MyDay Dashboard before moving on?

Section 38 — First steps with open source

This section covers first steps with open source. A realistic first open-source step is fixing documentation, or a small bug, in a project you already use, after reading its contributing guide. Start small and respectful of the maintainers' time.

Thinking about first steps with open source 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 first steps with open source as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through first steps with open source 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 first steps with open source for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When first steps with open source 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 first steps with open source 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with first steps with open source 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 first steps with open source, 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 first steps with open source in your own MyDay Dashboard before moving on?

Section 39 — Accessibility roadmap

This section covers accessibility roadmap. The accessibility roadmap continues with keyboard patterns, colour contrast checks, and screen reader testing on every new project, until those checks feel automatic. Habits, not one-off effort, make accessible work.

Thinking about accessibility roadmap 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 accessibility roadmap as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through accessibility roadmap 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 accessibility roadmap for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When accessibility roadmap 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 accessibility roadmap 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with accessibility roadmap 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 accessibility roadmap, 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.

Practise in small, regular sessions with a concrete deliverable, rather than collecting courses you never finish. Keep a record of bugs you fixed and what caused them, because that record becomes your interview evidence and your study notes. Share work in a way that invites feedback, and treat a critical comment as a free review of something you can still improve.

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

Section 40 — CSS roadmap: layout mastery

This section covers css roadmap: layout mastery. The CSS roadmap deepens grid and flexbox, custom properties, and responsive design, through rebuilding small layouts from scratch. Rebuilding is the fastest way to move a layout skill from recognition to recall.

Thinking about css roadmap: layout mastery 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 css roadmap: layout mastery as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through css roadmap: layout mastery 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 css roadmap: layout mastery for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When css roadmap: layout mastery 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 css roadmap: layout mastery 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with css roadmap: layout mastery 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 css roadmap: layout mastery, 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 css roadmap: layout mastery in your own MyDay Dashboard before moving on?

Section 41 — JavaScript roadmap: modules and async

This section covers javascript roadmap: modules and async. The JavaScript roadmap adds modules for organising larger scripts, and asynchronous code for fetching data, both built on the state and rendering ideas from this capstone. Each new concept should land on a familiar project.

Thinking about javascript roadmap: modules and async 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 javascript roadmap: modules and async as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through javascript roadmap: modules and async 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 javascript roadmap: modules and async for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When javascript roadmap: modules and async 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 javascript roadmap: modules and async 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with javascript roadmap: modules and async 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 javascript roadmap: modules and async, 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.

Share work in a way that invites feedback, and treat a critical comment as a free review of something you can still improve.

Check: What is one thing you would check about javascript roadmap: modules and async in your own MyDay Dashboard before moving on?

Section 42 — Tooling roadmap: build tools later

This section covers tooling roadmap: build tools later. Build tools, such as bundlers and formatters, are worth learning after manual projects feel comfortable, because then their benefits are visible rather than magical. Tooling should remove friction, not add mystery.

Thinking about tooling roadmap: build tools later 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 tooling roadmap: build tools later as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through tooling roadmap: build tools later 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 tooling roadmap: build tools later for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When tooling roadmap: build tools later 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 tooling roadmap: build tools later 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with tooling roadmap: build tools later 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 tooling roadmap: build tools later, 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 second project that reuses the same core skills in a new context proves the first one was understanding, not memorisation.

Check: What is one thing you would check about tooling roadmap: build tools later in your own MyDay Dashboard before moving on?

Section 43 — Keeping the portfolio updated

This section covers keeping the portfolio updated. Update the portfolio whenever a project improves or a new one finishes, and remove or fix anything broken, on a short regular schedule. A stale portfolio quietly suggests stale skills.

Thinking about keeping the portfolio updated 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 keeping the portfolio updated as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through keeping the portfolio updated 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 keeping the portfolio updated for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When keeping the portfolio updated 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 keeping the portfolio updated 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with keeping the portfolio updated 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 keeping the portfolio updated, 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 keeping the portfolio updated in your own MyDay Dashboard before moving on?

Section 44 — Avoiding tutorial hell

This section covers avoiding tutorial hell. Avoiding tutorial hell means spending more time building than watching, and choosing a tutorial only when it answers a question from a project you are already making. Building is where learning becomes skill.

Thinking about avoiding tutorial hell 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 tutorial hell 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 tutorial hell 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 tutorial hell for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When avoiding tutorial hell 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 tutorial hell 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with avoiding tutorial hell 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 tutorial hell, 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 avoiding tutorial hell in your own MyDay Dashboard before moving on?

Section 45 — A weekly practice plan

This section covers a weekly practice plan. A weekly plan might be three short building sessions, one review of past code, and one new small feature, repeated for a month. Consistency matters more than intensity, especially alongside other commitments.

Thinking about a weekly practice plan 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 weekly practice plan 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 weekly practice plan 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 weekly practice plan for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When a weekly practice plan 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 weekly practice plan 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with a weekly practice plan 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 weekly practice plan, 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 weekly practice plan in your own MyDay Dashboard before moving on?

Section 46 — Reviewing the book's skills map

This section covers reviewing the book's skills map. Reviewing the book means listing its major skills, marking which you can demonstrate, and choosing the weakest demonstrable one to practise next. A map turns a finished book into a next step, not a dead end.

Thinking about reviewing the book's skills map 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 the book's skills map 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 the book's skills map 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 the book's skills map for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When reviewing the book's skills map 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 the book's skills map 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with reviewing the book's skills map 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 the book's skills map, 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.

Portfolio reviewers spend little time on each project, so the first screen and the first paragraph must explain the job clearly.

Check: What is one thing you would check about reviewing the book's skills map in your own MyDay Dashboard before moving on?

Section 47 — Capstone retrospective

This section covers capstone retrospective. A retrospective asks three questions: what worked, what was difficult, and what you would do differently, answered honestly about MyDay Dashboard. Retrospectives turn one project into lessons for the next.

Thinking about capstone retrospective 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 capstone retrospective as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through capstone retrospective 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 capstone retrospective for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When capstone retrospective 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 capstone retrospective 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with capstone retrospective 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 capstone retrospective, 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.

Honest descriptions build more trust than grand claims: say what you built, what you chose, and what you would improve next. Keep the demo data generic, because a portfolio project should never expose real personal notes, names or private tasks. A short case study beats a long feature list, because it shows judgement, not only that you can follow a tutorial.

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

Section 48 — Sharing without exposing personal data

This section covers sharing without exposing personal data. Before sharing, replace any personal tasks or notes with generic demo data, and check screenshots for names, addresses, or private details. A portfolio project should demonstrate skill without leaking a private life.

Thinking about sharing without exposing personal data 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 sharing without exposing personal data as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through sharing without exposing personal data 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 sharing without exposing personal data for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When sharing without exposing personal data 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 sharing without exposing personal data 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:

## What I would improve next

- Keyboard shortcuts for common actions
- Editing a task in place

Listing honest next improvements shows a reviewer that you can judge your own work and that you know where the project could go.

A common mistake with sharing without exposing personal data 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 sharing without exposing personal data, 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 the demo data generic, because a portfolio project should never expose real personal notes, names or private tasks.

Check: What is one thing you would check about sharing without exposing personal data in your own MyDay Dashboard before moving on?

Section 49 — Final sign-off checklist

This section covers final sign-off checklist. The sign-off checklist repeats the end-to-end test, the keyboard test, the small-screen test, the readme check, and the link check, and only then is the project declared finished. A checklist makes done a decision, not a feeling.

Thinking about final sign-off checklist 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 final sign-off checklist as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through final sign-off checklist 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 final sign-off checklist for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When final sign-off checklist 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 final sign-off checklist 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>
  <h2>MyDay Dashboard</h2>
  <p>A task-and-notes dashboard built with HTML, CSS and JavaScript.</p>
  <a href="#">View live demo</a>
</section>

A portfolio entry needs a name, one plain sentence about the job it does, and a link, before any detail about tools or techniques.

A common mistake with final sign-off checklist 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 final sign-off checklist, 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 final sign-off checklist in your own MyDay Dashboard before moving on?

Section 50 — Where to go from here

This section covers where to go from here. From here, build the second project, keep the learning log, and return to the weakest skill on your map, one small project at a time. The book ends, but the practice that made it useful does not need to.

Thinking about where to go from here 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 where to go from here as a finishing touch, but in this dashboard it shapes how the user finds, changes, and trusts their own tasks and notes.

Work through where to go from here 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 where to go from here for a first-time visitor, a hurried visitor, and a visitor on a small phone screen.

When where to go from here 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 where to go from here 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:

# MyDay Dashboard

A personal task-and-notes dashboard.

## Run it

Open index.html in a browser.

A short readme that says what the project is and how to run it is more useful than a long one nobody reads to the end.

A common mistake with where to go from here 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 where to go from here, 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.

Before you call a project done, run through it as a stranger would, with no knowledge of how the code works inside.

Check: What is one thing you would check about where to go from here in your own MyDay Dashboard before moving on?

Practical task

Finish and present MyDay Dashboard: run the end-to-end, keyboard-only, and phone-width tests, fix must-fix bugs, remove console logs and dead code, write the readme with honest run instructions, and take screenshots using only generic demo data. Then write a one-page portfolio entry with a problem, build, and result paragraph, a screenshot, and checked links to the demo and the code, plus a short list of what you would improve next and the second project you plan to build.

Chapter questions

What checks must pass before you call MyDay Dashboard finished?
Write a one-paragraph portfolio entry for MyDay Dashboard, naming the problem, the build, and the result honestly.
What is one trade-off of building without a framework, and how would you explain it in an interview?
Name a second project that reuses the dashboard's skills, and state the one new idea it would add.
What is your next learning step after this book, and what small project will practise it?