DevTools, which is short for Developer Tools, is the single most powerful tool for web designers and developers. It lets you inspect and interact with the HTML, CSS, and even JavaScript behind a web page so that you can manipulate the code and try out different design changes without messing anything up on published sites.

This 27-minute video minicourse will take you through a step-by-step tutorial on how to use Chrome DevTools.

Here’s what you’ll learn:

→ Examine HTML element attributes

→ Find CSS rules that are being applied to elements

→ Modify CSS rules to see how they affect the layout

→ Find some of the more common Squarespace attributes, such as page section IDs in Squarespace 7.1 and block IDs in both 7.0 & 7.1

→ Non-code-related things, like how to view your site on at least 15 different mobile and tablet devices

First Name

Last Name

Email Address

We respect your privacy.

Thanks for filling out the form! Check your inbox in a few minutes for free access to this course.

Improve your Squarespace custom CSS in just 11 steps!

This 11-step guide will show you how to make your custom CSS cleaner, and more understandable. It also explains some of the core principles of writing CSS responsibly, so that you can ensure your code will actually help your site visitors instead of confuse or distract them.

First Name

Last Name

Email Address

We respect your privacy.

Thanks for filling out the form! Check your inbox in a few minutes to download the PDF.