Squarespace Design Course Onboarding Guide
Important Links
Curriculum:
Section 1: Squarespace 101
Section 2: CSS/HTML Basics
Section 3: Create a Custom Site
Section 4: Freelancing
Community Events
If you haven’t already, please fill out the Student Info form 💖
Course Portal / Videos
Find the lesson videos in the ilovecreatives portal.
To access the portal, you will need the email you used to sign up for the course.
Course Workbook
Use this optional digital workbook as a companion to the lesson videos.
Cookie Rewards
Cash in your 🍪 cookies for some real sweet treats!
Resources
Tools, code snippets, recorded workshops, and FAQs for your journey.
Squarespace Design Course
Section 1: Squarespace 101
This section is where you get up close and personal with native features of Squarespace. You will learn how to get creative with them by replicating our custom template, Pedro, all while using Squarespace’s latest features and Fluid Engine editor.
Level 1:
Getting Set Up
This level is all about setting you up for what’s to come (dun dun duuuun – but not! Coz we gotchu). Success is in the preparation and by taking the time to familiarize and get organized, your future self will thank you.
What you’ll learn:
Overview of the Squarespace dashboard
Gathering Assets + The Developer Tool
Style Guide
Installing custom fonts
Level 2:
Building Pedro
Now that you’re prepped and ready to go, you will build your first Squarespace website using only Squarespace features. With step-by-step video instructions, you will replicate our custom template, Pedro using the Fluid Engine editor.
What you’ll learn:
Squarespace features (blocks, sections, collections, etc.)
Fluid Engine Editor
Build-out entire site with mobile
Submission:
Submit your Pedro website to be graded.
Squarespace Design Course
Section 2: CSS/HTML Basics
Add some pizzazz to your Squarespace website with custom code. In this section we introduce the CSS Database, tackle the basics of HTML and CSS, and learn how (and where) to apply custom code to Squarespace. You will put your new tools to use by replicating another custom template site, Halcyon.
Level 1: Developer Tool + CSS Database
When creating custom websites, the Developer tool is our best friend. But with the CSS Database, you put the two together and everything just flooooows! Ahhh!
What you’ll learn:
Deeper dive into the Developer Tool
Walkthrough of the CSS Database
When and how to use what
First look into the Halcyon website
Level 2: Basic of HTML / CSS
This is a hefty level where we dive deep into the basics of HTML and CSS. You will learn juuuust enough theory to make executing less intimidating. Knowing the basics will prevent frankensteining your way to a cool website!
What you’ll learn:
How to read and write CSS
HTML Elements
Parent-child relationship
Identifying classes and IDs
Units in CSS
Level 3: Applying Custom Code
In this level you will learn how to apply custom code to Squarespace and find out all the different places you can add code. We go over the importance of a code editor, troubleshooting skills and how to copy and paste snippets of code from other websites.
What you’ll learn:
Adding Custom CSS to Squarespace
How to use a Code Editor
Troubleshooting Skills
Copy and Pasting Code Snippets
Level 4: Building Halcyon
This is where everything you learned so far comes together! In this level you will replicate our custom template, Halcyon. Unlike Pedro, Halcyon’s step-by-step instructions are written out instead of in video format since most instructions online are in forums and blogs.
Submission
Submit your Halcyon site to be graded.
Squarespace Design Course
Section 3: Creating a Custom Site
Time to put your creative hat on and get designing! This section is all about discovering and executing your design aesthetic. You will learn how to design style tiles and homepage comps in Figma and then translate them into a full blown custom website in Squarespace.
Level 1: Finding Inspiration + Personal Style
This level is where you explore different ideas and styles. You will see an insider take on where and how we find inspiration and tips on how to find your own personal design style.
What you’ll learn:
Where and how to find inspo
How to find your design style
Level 2: Style Tiles + Figma
At ilovecreatives, we use Figma as our initial design for pretty much everything. We design on Figma and then we execute in other programs, including Squarespace. In this level you will learn about the value style tiles in your design process and an introduction to Figma to create style tiles from your inspo sites.
What you’ll learn:
All about Style Tiles
Intro to Figma + Figma UI Kit
Creating Style Tiles from your inspo site
Level 3: Starting your
Custom Site
Mindset matters! In this level, you will do the brainstorming and soul searching you need to get started on building your custom site. Is it a client site? A personal portfolio? An ecomm site? You will narrow it down and start the process by designing style tiles for your future custom site.
What you’ll learn:
Mindset: never miss a deadline!
Figuring out what to work on
Creating Style Tiles from your custom site
Assignment
5 Custom Site Style Tiles
Level 4: Creating your
Custom Site
This is where you come full circle and where you put all your stacked skills to use. This is the level where you will build out a full custom site using all the tools in your new toolkit. We even give you a checklist of items to double…triple…check before you hit that bit submit button.
What you’ll learn:
Introduction to the Figma UI Kit
Setting up Figma for Squarespace
Homepage Comps
How to know when you’re ready to submit
Checklist for submission
Submission
Custom site to be graded
Squarespace Design Course
Section 4: Freelancing
So you know how to design and develop a website on Squarespace…now what? Now you put yourself out there and start making them moneyyyz! This level is all about freelancing. We’re talking portfolio, money matters, managing clients and projects – all this with the guidance of prompts from the Freelancer Worksheet.
Level 1: Intro and Mindset
In this level Puno will share her journey in freelancing and working with agencies. You will get into the mindset to set yourself up for success and understand the different types of work to be the best freelancer you can be.
What you’ll learn:
Puno’s journey
Why Squarespace
Setting yourself up for success
Level 2: Building your Portfolio
Every designer needs a portfolio and this level will jumpstart that process. You will learn how to explain your service offerings, your unique selling proposition, the dos and donts of using spec work and your rights as a designer and designer credit.
What you’ll learn:
How to explain your service offering
Your unique selling proposition
Using spec work
Designer rights and credit
Level 3: Designing your Business
Know your worth! In this level you will figure out how to define scope of work, estimate your cost, payment (hello Do the Math Spreadsheet!) and time, how to deal with client pushback and negotiation, and we touch on the ever-daunting subject of legal and finance.
What you’ll learn:
How to define scope
Estimate cost and payment
Estimate time
Client communication and negotiation
Finance and legal
Level 4: Managing Client Expectations
Learning to manage your clients expectations and needs is a skill in itself. In this level you will get a deeper understanding of how to deal with client expectations and projects, tools to make your admin work more efficient and how to handoff your work to the client.
What you’ll learn:
Client expectations and communication
Tools for working efficiently and effectively
Client handoff process
Scheduling projects
Level 5: Managing Projects
Learn why organization is keeeey to being a successful freelancer. You will also get a closer look into sub-contractors and get a sneak peek at some realities of working with clients, the good, the bad and the ugle.
What you’ll learn:
Staying organized
Managing sub-contractors
Realities of freelancing
Level 6: Check Yo Self
In this level, you learn how to put yourself out there and how to find quality, recurring clients. And you will also do a year-end review so that you know all your hard work is not for nothing.
What you’ll learn:
How to market yourself
End of year review
Upcoming & Past
Workshops and Events
ℭommunity ℰvents
Community & Course
Events ✦Calendar↘
Heads up, this is a calendar of ALL events at ilovecreatives, so look for SDC (Squarespace Design Course): Orientation and Live Workshops with Puno and our TAs. If you would like to add this Calendar to yours, click here. You can also RSVP in Discord Events.
✦ Orientation
Get to know your classmates and learn more about the course and how to finish, Discord, and the community events!
✦ Live Workshop
(Thursdays @ 2:00pm PT on Discord)
Every month we have chat about a specific topic that ties back to the course.
✦ Super Productive Time
A digital co-working session with awesome creatives!
✹ Add this calendar to yours, click +Google Calendar ↖