Front-end project workshop
Starting from real requirements, you plan, write, test and publish small apps such as a data dashboard, a kanban board and an offline field form.
Level 301 · 15 lessons · 12 practice labs
Lessons
Project 1: data dashboard
- Requirements and a UI sketch
- Fetching and displaying data
- Simple charts with SVG
- Filters and state in the URL
- Short task: make the dashboard accessible and fast
Project 2: kanban board
- Data model and components
- Drag and drop with a keyboard alternative
- Local persistence and undo
- Protecting it with tests
- Short task: sync the board with a server
Project 3: field form
- A form that works offline
- A queue that sends when the connection returns
- Validation and accessibility
- Building and publishing
- Capstone: an app for a need you choose
Practice labs
- Draw a weekly sales chart with SVG: Turn a café's weekly sales into an SVG bar chart without a library.
- Keep dashboard filters in the URL: Keep a sales dashboard's date and city filters in the URL so a shared link opens the same view.
- Add an accessible data view to a chart: Add a title, a description and a switchable table view for screen readers to an SVG chart.
- Extract a task card component: Turn copy-pasted task card code into one component that takes a data model.
- Add undo to the board: Add an action history that makes moves and deletes on the board undoable.
- Protect the board logic with tests: Write tests for the move and undo logic, then refactor the code without changing its behaviour.
- Show the connection status live: Add a bar to the top of a field form that shows online and offline status live.
- Queue forms that couldn't be sent: Hold inspection forms submitted while offline in a queue and send them in order when the connection returns.
- Prevent duplicate sends from the queue: Stop the same form being sent twice while the connection flaps, using a client ID and a server-side check.
- Build and publish a front-end project: Produce a front-end project's production build and publish the output on the lab server.
- Run a pre-release checklist: Run a checklist of accessibility, performance and broken-link checks and close the issues it finds.
- Roll back a broken release in one command: Release into versioned folders and roll a broken release back to the previous one with a single command.
About this course
Starting from real requirements, you plan, write, test and publish small apps such as a data dashboard, a kanban board and an offline field form.
What you will learn
- Project 1: data dashboard
- Project 2: kanban board
- Project 3: field form
Prerequisites
You should be comfortable with the level 101 and 201 topics of the same path.
Lab environment
Lessons run on your own Kali Linux desktop in the browser, with the tools ready in their windowed interfaces. Nothing to install; a computer screen is recommended.
Frequently asked questions
- Is this course right for my level?
- The course is at level 301; it assumes you know the topics of the lower-level courses.
- Is there anything to install?
- No. Every lesson runs in your own lab environment that opens in the browser.
- How do lessons work?
- Each lesson has 8 to 10 steps and a short quiz. Early steps show the command to type, later steps give less help; if two attempts fail, the solution opens.
- Can I try it for free?
- Yes. The first three lessons of every course are free.