Start Here
Welcome, welcome, welcome my friend!!
I am soooo happy to have you join us in the Encyclopedia of Code Community!! You have found the Start Here Guide. Please take the time to go through the following information as it will make your use of the Encyclopedia SOOO much smoother.
Step 1: Bookmark This Page
I encourage you to bookmark the Encyclopedia of Code Home Page so that it is easier for you to find later on!
Step 2: Learn How to Use the Encyclopedia
To make the most of the Encyclopedia, it is important you know everything that is available to you and how to properly search through the database.
How to Search the Database
There are a ton of code snippets available to you in the Encyclopedia, so being able to search through the database effectively is super important. The tricky part is there are multiple ways to say the same thing. For example, I might say “dropdown box”, but it could also be called “accordion block”, “FAQ block”, etc.
I have provided two different ways for you to search the database.
Categories: Each code snippet has been categorized by which Squarespace Block or Section the code applies to. For example, by clicking on the “Galleries” Category you will see all the code snippets that apply to the Gallery Sections and Gallery Blocks.
Search Bar: The search bar allows you to type in terms or keywords to filter the code snippets. This search bar works best when only one or two words are typed in. For example, you could search “mobile” to see all the code snippets that have the word “mobile” in their title or description.
Request Form
We are constantly adding code snippets to the Encyclopedia. However, if there is a specific code snippet that you want added, you can request for it to be added here.
Report a Problem
We want to ensure that the Encyclopedia is up to date and compatible with the latest Squarespace Updates. If you find an error in one of our codes or notice that it is not working with the latest Squarespace Changes, please fill out this form so that we can get it fixed right away.
Known Clashes and How to Fix Them
We have made our best effort to make sure all our codes work well together. However, sometimes certain codes just don’t want to play nice. In this resource is a list of the code snippets that don’t like to work together. For each one we have provided a code snippet you can use instead.
Step 3: Watch These Helpful Tutorials
To help you use this Encyclopedia to its fullest, I suggest you start with the following video tutorials. These tutorials will go through some of the commonly asked questions and will help you prevent some of the frequent errors that come up when copying and pasting code snippets.
Tutorial 1: What is HTML, Javascript, and CSS?
This tutorial will give a brief introduction to the three coding languages you will see throughout this encyclopedia. Well you do not need to know how to code, it may be helpful to know what you are looking at and the parts of the code that cause the most errors.
Tutorial 2: CSS Best Practices
Most of the edits I make to my site use CSS, more so than HTML or Javascript. After copying and pasting several codes, your CSS can start to look messy which can cause errors down the line. In this tutorial, I show you how to keep your CSS looking neat and some other best practices.
Tutorial 3: Where do I paste the code?
This tutorial will go over the areas of your Squarespace Website where you can paste the code and when to use each area.
Tutorial 4: Collection Ids, Page Ids, and Block Ids
Throughout the snippets you will see code in ALL CAPS. This is to show you which areas of the code need to be edited to work for your website. The most common edit will be to insert your page’s collection id, page id, page section, or a block’s id. This tutorial will show you how to find this information. I strongly suggest downloading the Squarespace Collection Block Identifier Chrome Extension. It will help make these edits super easy!
Update: The Squarespace Collection Block Identifier Chrome Extension is currently down. Check out the Squarespace ID Finder for help finding id’s on your Squarespace site.
Tutorial 5: Mobile vs. Desktop CSS
The Encyclopedia of Code has a section dedicated to mobile responsiveness. However, this tutorial will show you how to take any CSS code you find and make it apply only to the mobile version of your website.
Tutorial 6: Debugging Your Code
We have tried our best to make the code snippets copy and paste. However, code can be very picky and the smallest error can “break” your code. Plus, sometimes different code snippets can interfere with each other and cause one or both to not work. Don’t worry, although frustrating these errors can be fixed. This tutorial will go into the common sources of error and ways to make sure your code snippets work nicely together.
Step 4: Enjoy!!
Thank you for taking the time to go through all of that information, I promise it will make your use of the Encyclopedia go MUCH smoother. If you run into any problems down the line, just come back here and look through the tutorial again or email me at rebecca@rebeccagracedesigns.com with the subject line “Encyclopedia Support”.
