Updates to Web Lab (2021)

Hello Folks!

We recently made some updates to our Web Lab coding environment and wanted to highlight some of the new features. You’ll see these updates when creating new Web Lab projects or when using Web Lab in Unit 2 of the curriculum.

Better File Organization

You’ll notice that files are now color-coded by their type and have new icons. Hopefully this will make it easier to quickly tell the difference between a CSS file, an HTML file, or an image.

Color Selector

When adding colors within a CSS file, you will now notice a purple icon that appears when you click on a color name. This icon opens a color selector widget, which makes it easier to select new colors for your website. See it in action below!

Image Metadata and Filters

After you upload an image, you can view additional information about the image, such as it’s dimensions, starter code to use the image in your project, and prominent colors that appear in the image. There is also a new feature to apply filters to the image directly within Web Lab. See these in action below!

We’re excited to bring these new updates to our tools, and hope they make it easier for students to express their creativity by making dynamic, personalized websites!


Code.org CS Discoveries Team


Oh you just made some middle school kids (and teachers) VERY happy!! :partying_face: