Skip to main content

Using the Updated HTML Block Coding UI

Learn how to navigate and use our newly updated block coding UI for HTML programs

Written by Cameron Snow
Banner: This is a Free Feature

We recently updated the interface for block coding in the code editor. This update will only affect HTML programs with block coding enabled. The overall way blocks work hasn't changed, but the layout and navigation for building with blocks has been refreshed to make it easier to find blocks, drag them into the workspace, and move between block and code view.

Switching Between Blocks and Text Coding

If blocks are enabled for an HTML assignment, students have the option to switch between block and code view. From their code editor, students will see a Blocks icon in their left sidebar. Once they click that, they can switch between Blocks and Code by pressing the two buttons that appear:

Screenshot showing how to switch between blocks and text coding. Arrow pointing to Blocks icon in left sidebar. Another arrow pointing to Blocks and Code buttons.

When in Code View, the block coding palette will be grayed out. To switch back to block coding, students can either click Blocks up top by the Code button, or press "Switch to Block Coding to use the palette":

Screenshot showing the two ways to switch back to Block coding from Code view

If the student would like to change their default settings, they can click on the gear icon in the left sidebar of the code editor. From there, they can use the "Code with blocks by default" toggle:

Image showing how students can enable block coding by default by toggling "Code with blocks by default"

Blocks in the Sandbox

Students can also set their block preferences for Sandbox programs independent of their section's settings. For HTML Sandbox programs, students can click the gear icon in the left sidebar of the editor and toggle their block/text preference for that program with the "Use block coding" toggle:

Screenshot showing how students can enable block coding for their sandbox programs in CodeHS

Note: Students will need to refresh the page after enabling "Use block coding" to be able to use blocks.

For more on turning on block coding for a section, module, or individual student, see Enabling Block Coding for Students.


Still have questions? Contact our team at support@codehs.com to learn more!

Did this answer your question?