SDC 1.0 User Guide

squarespace-design-course-7-1-2010.png

⚠️ Update April 2023 ⚠️

This onboarding guide is for Squarespace Design Course 1.0. If you enrolled in the course after April 2023, please refer to the Squarespace Design Course 2.0 Onboarding Guide.

 
plant-web-2.png

Student
User Guide
Frequently Asked Questions

Table of Contents

01 Course Portal
02 Curriculum
03 Discord Community

black.png

01 — 🖥 Course Portal

Our course portal is where you'll watch course videos, submit your assignments, and learn all that good Squarespace stuff.

If this is not the portal you’re seeing you might be in the new Course Portal. If that’s the case, check out Onboarding Guide for the latest version of the course!

Help! I'm having trouble logging in.

  • First of all, make sure you’re using Google Chrome (you’ll need it for Level 1 anyways).

  • Then, use this link to login to the course portal.

  • Still having trouble? Email us at hello@ilovecreatives.com.

 

How do I move around the Course Portal?

Say hi to your astronaut avatar. 👋 Yup, that's you! Click your mouse to move the astronaut around and click the blue orb button to play the first video. Once you close the video—voilà! You’ll see a staircase appear and you can enter the archway to watch the lesson video.

To return to the main portal, click the orb button to the right of your astronaut's desk.

What's the best way to set-up my workspace?

You'll have a few browser tabs open to:

  • Watch the videos

  • Reference a Squarespace template or inspo website

  • Your website

  • View other resources, images, check up on Discord, etc.

Can I slow down and jump around the video?

Yes and yes! Click the ⚙️ settings gear to change the speed of the video.

Next to the settings gear is the “Chapters” timestamps — this allows you to jump to different sections. Our videos are hosted on Wistia, so you can also use their handy keyboard short-cuts to start, stop, fast forward, rewind, etc.

How do I access the Resource Library?

The Resource Library can be accessed through the portal menu and the button below. There’s some good stuff in here including course events info, Level guides, and past Live Office Hours videos. You’ll want to bookmark it so you can easily refer to it!

02 — 📚 Curriculum

Each level, you’ll be stacking your skills — which means what you learn in one lesson directly helps you in the next.

⚠️ Also, TAs will be reviewing your work with a lot of detail so please make sure you get a good nights rest before you submit! The next day, double-check your work, thennnnnn submit. If you need any help, advice or just a pep-talk, reach out to us on Discord.

 

Level Overview

Level 1: Template Deconstruction aka Brine into Pedro (7.0)
Puno will walk you through how to turn one template (Brine) into another (Pedro). After this level, we want students to feel comfortable with the Squarespace platform and using the Developer Tool.

Level 2: 7.0 Template Master
Students will learn the main differences and key features of each Squarespace 7.0 template.

Level 3: Design Three Websites
In this level, students will:
(1) Learn 7.1 by recreating the Halcyon template (with an introduction to CSS)
(2) Recreate an inspiration website
(3) Design a custom website

Once you’ve completed all three websites, Puno and the TAs will provide feedback on your design work and tips for how to improve.

Level 4: Freelancing
This level is all about figuring out your hourly rate, how to find clients, client on-boarding, and all the tools you need to begin freelancing.

FAQs
Level ①

Squarespace Design Course — I Need A Trial — ilovecreatives 2021-08-28 at 3.49.57 PM.jpg

How many Squarespace Trials do I need to complete the course?

You'll need four:

  • Level 1 – Brine into Pedro

  • Level 3.1 – Halcyon

  • Level 3.2 – Inspiration Site

  • Level 3.3 – Custom Site

For Level 1 make sure to start with a 7.0 Brine template.

How do I extend a Squarespace Trial?

This is a trick we LOVE to use. Once your trial site expires, add /config/extendtrial to your built-in domain.

So if your built-in domain is name.squarespace.com, then you’ll type in name.squarespace.com/config/extendtrial in your browser.

You can use this indefinitely for any site, but you'll have to remember to renew it every time it expires after the 14-day trial period.

 

📹Watch: How to extend your trial

👀Look out for these notes in the video~!

Brine into Pedro template looks different than in Puno's video. Which one should I copy?

Ruh-roh! When in doubt, follow the template. Squarespace is consistently improving its platform and sometimes we don’t catch everything.

Keep an 👀 eye out for a small note on the top right of the video. We’ll note updates and what to do. If you see other discrepancies, let us know the timestamp in the #level1 Discord channel!

How long will I have to wait to receive Level 1 feedback?

You should receive feedback within 72 business hours (not including weekends), and be notified over Discord and email. Still haven't heard back? Let us know in the #level1 Discord channel.

While you wait, feel free to move to Level 2!

How strictly do you grade the Level 1 assignment?

So... we're going to be honest here — we strict! Like, down to the font-style and line-height strict. Seriously, our graders really get into Chrome Developer Tools to double check your work.

In the design world, being detail-oriented is what sets you apart from the green. It's also, pretty much expected. We want you to leave this course feeling confident about your skills and ready to get that dough. So we provide you with the highest level of feedback possible! We know it can feel like a lot, but it will really help set you up for success.👏

Grading criteria ✅

We look for 90% accuracy in the following areas:

  • Content

    • Does this site have all of the pages (Homepage, Shop, Blog, Info and at least 3 Product Pages?). Check that all copy, headers, images and buttons are there.

  • Layout

    • Is the content designed like the original? How are the margins, columns, font sizes and line-heights? Does this site use all the correct blocks?

  • Fonts, Colors & Images

    • Now check that the regular AND overlay fonts are correct. Do the colors have the right hex codes (psst, have you checked the cart quantity color? 👀). Each product image should also be the right aspect ratio.

  • Attention to Detail (aka Typos)

    • Overall, was this site reviewed for any typos, spacing issues or incorrect content? Do the quote blocks have extra quotation marks or dashes? What about each product image — do they correspond to the correct price?

  • Mobile View

    • Is mobile site view as accurate as the desktop version? Check that hamburger menu!

ilc-squarespace-design-course-brineintopedro.png
fp-subtitle-font.png
fp-title-font.png

Tips & Suggestions

  • This level is supposed to be hard! If you have any questions or get stumped:

    • First take a deep breath.

    • Drink some water! 💦

    • Then, take a walk (aka hard refresh).

    • If you still need support after coming back to a problem, share your question in the #Level1 Discord channel. Screen record your issue (we 💖 CloudApp!) so other students can help you out and learn with you!

    • You can reference the Level 1 - Transforming Brine into Pedro resource which goes over common feedback TAs give when grading.

  • Track your time! We mean it!

  • If you're ready to submit your site, make sure to:

    • Double-check your work. Go over the common feedback list to ensure you didn’t miss anything. If you need to sleep on it to get one final set of eyes, go ahead. This is a self-paced course!

    • Make the site password-protected and set the password to backandforth

    • Submit your URL in the Online Course Portal AND drop it in the #Level1 Discord channel. We want to celebrate you and your accomplishment! 🎉

  • If you've already received feedback and need to resubmit, you can do so in the Course Portal!

Level ②

Woohoo! I finished Level 2. What now?

Yeahhh congrats! 🙌 Before you start Level 3, you'll need to start a new Squarespace Trial. That way, you can start Level 3 while you wait for your Level 1 Brine into Pedro to get graded. For Level 3.1 make sure to start with a 7.1 Essex template.

Level ③

What will I be submitting for Level 3?

In Level 3, you'll be submitting the following three sites for review:

  1. Recreation of Halcyon (a custom template Puno created)

  2. Recreation of an inspirational website

  3. Your own custom website

This one is a doozy, but we wanted you to get a feel of what it’s like to juggle three projects. Dat Freelance Life. We highly suggest that you make a calendar, track your time, and reach out anytime you feel stuck.

What can I expect in my Level 3 Design Critiques?

For Halcyon (3.1), you'll receive feedback similar to Level 1. There will be a lot more CSS with this one!

For your inspiration site (3.2), pick a website that you included in your intro. Some people go ham and build out the entire site (Ask Nayadé — she recreated Another, which inspired one of the Cookie Rewards), but we’ll also be fine with recreating 1-3 pages. If you’re serious about freelance, we suggest to go off! Once you submit, Puno will review your site and give you feedback.

For your custom website (3.3), Puno will provide detailed actionable suggestions in a recorded video. This takes sometime for her to review so give her 1-2 weeks.

If I don’t have a client, can I just make a spec site?

Yes! Actually, we would rather not have real client work. You need to satisfy your client and that might go against Puno’s design suggestions. Design is subjective after all!

Instead, create a fictional business or pick a real business that could use a redesign.

Farrah B. Fox redesigned Maven-Made and then cold emailed the brand's owner. Guess what?! They decided to move forward with her design! We can’t guarantee it’ll always work out, but you can definitely put it on portfolio as a Spec Site. Art students do this all the time. 😉

 

📹 Watch the video to see Bronze’s feedback for Mary Kate Hayden's custom website.

Image 2020-06-30 at 7.42.08 PM.png

03 — 👾 Discord Community

Our Discord community is poppin'! This is where you'll connect with fellow students and alumni to chat it up and ask any questions. Don’t be intimidated, we’re all super positive and nice — no matter what technical, design level you are.

What is Discord?

Think of Discord like our student center, cafeteria… The Max from Saved by the Bell if you will. This is where you'll connect with your fellow students and graduates. Each channel starts with a # sign, and is a dedicated space for a specific topic or level.

Discord is sort of crazy / fun / cool / big so just get in there and play around. Everyone in the course is in this Discord community — including students who’ve already completed the course.

What can I do in Discord to prepare for the course?

First, tell us a bit about yourself with the #intros tag, and read everyone else’s intros and websites they love. We HIGHLY encourage you to comment and ask/answer questions. So many great things have come out of students engaging — job opportunities, collaborations, friendships!

What are the different things I can do on Discord?

We love Discord because it's really what our community makes of it.
Some things you can do:

  • #sdc-announcements – Hear about Squarespace Design Course announcements

  • #squarespace-design-course– Ask specific questions about each level

  • #gig-alerts – Post or ask for collaborations and work opportunities

  • #pep-talk – Digitally vent, or ask for some words of encouragement

  • #work-questions – Ask your non-course related work questions here

  • #internet-gems – Share your completed 3.3 and non-course related work sites

How do I ask a question? How do I answer a question?

VERY good question. This is Discord Etiquette 101. If you ever find yourself in a team of designers or developers, this is how they work 😉.

When asking a question:

 🖥Website URL:
 🔑Website Password:
 🤔What’s the issue?:

  • Include a screenshot or screen-recording of what you’re experiencing (we love to use Cloudapp, it's free!). This is a super efficient, time-saving tip for any designer. Tell your future clients to do this too!

  • Emojis are also super fun and helpful! Once your question is answered, add a ✅ reaction to the main thread so everyone knows you've been helped.

When answering a question:

  • Please, reply to the thread so we can keep conversations nice and tidy! We often link to threads, but it’s hard when they aren’t in one thread.

  • Also, @mention them in your answer so they're notified. We LOVE it when students help each other.

 
 

05 — Meet your TAs 👋

Need some help? You’ve got a whole team supporting you!

 
Image 2020-06-30 at 7.42.08 PM.png