What is Web Lab?

Web Lab is the browser-based coding environment where your students ages 13+ build websites using HTML, CSS, and JavaScript. If you've used Legacy Web Lab before, the new Web Lab will feel familiar — but it's been rebuilt from the ground up to be more secure, more capable, and better equipped to support students as they learn to code.

You can learn more about the difference between Legacy and new Web Lab in this article.

What are the key features of Web Lab?

1. Strong Security

The biggest change is one students won't even see. The new Web Lab was built with stronger security protections from the start, so student projects meet updated safety standards for school environments. This is especially important for districts with strict technology policies.

2. Full JavaScript Support

Web Lab was designed from day one to fully support HTML, CSS, and JavaScript.

3. Network & Debug Panel

The new Web Lab includes a dedicated panel for debugging and inspecting what's happening behind the scenes in student projects. Students can access it by clicking the bug icon at the top of the preview area. The panel has two tabs:

• Console — This is where students go to debug their code. Errors show up here automatically, and students can also use console.log() to print messages and trace what their program is doing. It's a great habit to build early.
• Network — This tab is especially useful when students are working with API requests. Each request appears as an item in a list on the left, and students can click into any one to see its status and full details. This is the go-to place when a fetch isn't working as expected.

4. The Resource Panel

The Resource Panel lives on the left-hand side of the screen and is the central hub for everything students and teachers need during a lesson — all without leaving the coding workspace. See Resource Panel in Labs to learn more. 

5. AI Tutor

AI Tutor supports students in three ways:

• Learning — Explains concepts and answers questions as students work
• Debugging — Helps students identify and fix errors in their code
• Code Generation — Generates code based on student prompts, helping them get unstuck and move forward

In the new Web Lab, the AI Tutor is also the default tab when students open the Resource Panel, with instructions accessible in a drawer above it — so students are encouraged to engage with it as part of their natural workflow.

Important: Students need to be granted access to AI Tutor before they can use it. See AI Settings: Managing Student Access to AI Tools for setup instructions.

For a full overview of how AI Tutor works, visit the AI Tutor FAQ.

6. Version History

The new Web Lab includes a Version History tab in the Resource Panel that gives students a safety net as they work. Students can commit a saved version of their project at any point — so if an experiment goes sideways, they can always get back to a version that worked.

What makes this especially powerful is how it connects to AI Tutor: any time a student makes changes using AI Tutor, they're prompted to commit a version of their work before moving on. This builds a natural checkpoint habit and means students can explore AI-generated changes confidently, knowing they're not risking their project.

From the Version History tab, students can:

• Commit a working version at any time
• Browse past versions of their project
• Restore a previous version with a single click

For teachers, this is a great talking point around the iterative nature of coding — trying things, breaking things, and being able to recover is a real developer skill.

7. The Backpack

The Backpack is a tool that lets students carry their work across levels and units — saving something in the Backpack on one level and picking it up again on any other Web Lab level in the future.

What's especially useful is that the Web Lab Backpack is shared with Sketch Lab, Code.org's new whiteboarding environment. This opens up a practical planning workflow for students:

1. Use Sketch Lab to create wireframes, flowcharts, or other planning materials
2. Save those designs to the Backpack
3. Open them in Web Lab for reference while building — or use them as prompts for AI Tutor

This connection between planning and building is a meaningful workflow improvement, and it mirrors how real developers think through a project before writing code.

Frequently Asked Questions

Do I need to do anything special to use Web Lab? You can use Web Lab generally without extra set up but to use AI Tutor there is some extra work. 

• Teachers must have a verified teacher account in order to give their class section/s access to AI Tutor.
• Students need to be granted access to AI Tutor before they can use it. See AI Settings: Managing Student Access to AI Tools for setup instructions.

Where do students change their language settings? Language options are in the Settings menu at the bottom-left corner of the Resource Panel. Both teachers and students can change the site language at any time.

How can I change the code font size? Font size options are in the Settings menu at the bottom-left corner of the Resource Panel. Both teachers and students can change the font size at any time.

Where can students find coding reference materials? Documentation links are also in the bottom-left corner of the Resource Panel, right next to Settings.

More Resources

• Documentation: studio.code.org/docs/ide/weblab2
• Web Lab overview — code.org/tools/web-lab
• AI Tutor FAQ
• AI Settings: Managing Student Access to AI Tools

Have feedback or questions? Reach out to support@code.org.