Front-end web lab: HTML, CSS and JavaScript with a live preview in the browser

This lab gives each student a small web page of their own, a lunch menu, made of three files: index.html for what is on it, style.css for how it looks and app.js for what it does. They edit the files in JupyterLab’s file editor and see the page in a second link, the Preview, which is served from the same folder. Short Python scripts read the files and print what is in them, so a student can check a page as well as write one.

It is not an attack lab, and it has no Node and no framework: a page is plain files and the browser is the only runtime. Every copy has no route to the internet and none to any other student, so nothing can be downloaded into it and nothing in it can reach anybody else.

What students learn

What HTML, CSS and JavaScript each do. HTML is the structure: elements, the heading outline and links. CSS is the style: selectors and declarations, the box model of content, padding, border and margin, and the cascade that decides which rule wins when two reach one element. JavaScript is the behaviour: events such as a click or typing, and functions that change the DOM, here to filter a list and swap a dark theme with no library. Then how to check a page: counting its tags, reading its outline, finding links that go nowhere and asking the server for the page as a browser does. It suits introductions to web development and to the front end; check your own awarding body’s unit for the exact wording, none is quoted here.

Run it in your browser

The lab starts one service, jupyter, which writes the page, a starter notebook and the short scripts into its work folder and starts a plain file server on the folder site. Two links open from the lab’s page: JupyterLab, the workbench, and Preview, the page itself. JupyterLab asks for no token, because the platform’s own door already knows who is opening it. The Preview shows the saved files, so after editing a file a student saves it and reloads the Preview. The terminal beside the lab has no Python of its own, so it reaches the lab’s with docker exec jupyter, followed by the command to run inside.

  1. Open the Container page. Open Build on the bar and choose Run a container. Anybody may open it, and the Git lab and the SQL lab start with no account. Every other lab needs a free account: create one, sign in, then press Start.
  2. Find the lab. The Sample labs card lists every sample. Find Front-end web: HTML, CSS and JavaScript.
  3. Press Start. Start runs it as it is, in one press. Edit the file first opens the compose file so you can change it before you start.
  4. Open it. On the lab’s page, the lab bar has two links. Press JupyterLab, open the folder site and double-click index.html, then press Preview to see the page. Next press Open terminal and type docker exec jupyter python3 steps/tags.py to count the tags of the page.

What to ask students to hand in

Their own version of the page: the three files from the folder site, downloaded from JupyterLab with File, Download. Then a sentence or two in their own words on one change they made and what it did, for example a new dish, a different colour scheme or a button that does something else. Nothing is marked automatically: the sentence shows whether it was understood. For stronger work ask them to run steps/links.py and steps/outline.py on their page and say what each shows, or to add a rule and explain which rule wins and why.

A basic lesson on this lab

Front-End Web Basics is a small lesson worked in this lab. In it a student lists the three files of the page, counts its tags and reads its outline, counts the rules and declarations in the stylesheet, finds the functions and events in the script, and checks the links and the answer from the Preview’s server. It is deliberately small: it shows a teacher what a lesson worked in a lab is, and the lab does the rest. Copy it into a module of your own to change it.

The code on GitHub

The compose file has no Dockerfile: it runs one stock public image, the Jupyter Docker Stacks’ own scipy-notebook, pinned to a dated tag, as its own unprivileged account with 512 MB of memory. The image is licensed BSD-3-Clause and is not distributed by us. The file writes the page and the scripts from fixed text when it starts, so every copy is the same and nothing is downloaded. The limits are honest ones: the page is small, there is no Node, no framework and no way to fetch a library from the internet, so a student works in plain HTML, CSS and JavaScript, which is what the lesson is about. Nothing is kept when the lab stops, so a student downloads their files first.

Set it as work

Say in the task what to hand in.

  1. Make the lab. In your module add a task and choose the Container lab card, then In a GitHub repository. Give https://github.com/mitsurutech/lab-frontend-web with the branch main. The compose file is the default, compose.yaml. Fork the repository first if you want to change it, for example to start students from a different page.
  2. Publish and try it. Publish pins the commit you were shown, so a later change in the repository does not alter a lab you have already set. Start your own copy first.
  3. Hand it out. Assign it like any task, with a due date if you want one, and say in the task what to do and what to hand in.
  4. Mark what is handed in. Open a student’s copy and the work they handed in, mark it, and send it back with a reason if it needs more.

Try this lab, and what it costs

A free personal account can work through the basic lessons in this lab, with enough free credit each month to follow most lessons and no card. For a class, a school or college has its first 365 days free for up to 50 students, then pays per student a year, with every lab included and staff free.

Questions people ask

Why are there two links?
JupyterLab, the first, is where a student edits the files and runs the terminal. Preview, the second, is the page itself, served from the folder site, the way a visitor would see it. Keeping the page in its own tab means it is not wrapped in an editor.
I changed a file and the Preview did not change. Why?
The Preview shows the saved files. Save the file in the editor, then reload the Preview. If it still looks the same, try a hard reload, because a browser may keep an old copy of a file.
Can students use Node, React or a package from the internet?
No. A copy cannot reach the internet and the image has no Node, so there is nothing to install. The lab teaches the three plain languages that every framework is built on. For other starting pages, fork the repository, change the files the compose file writes, and set the fork as the lab.
Why is there no token or password to type?
A lab’s web page is reached only through the platform’s own door, which already knows who you are and lets in only you and the staff who teach your module. So JupyterLab is started with no token. Do not run it like that on a machine anybody else can reach.