The Functional CSS Course for Squarespace

Expand your web development skills, charge more for your design services, and make your clients more satisfied with this complete Squarespace CSS course!

Learn how to write CSS functionally and responsibly, so you can improve websites and not hurt conversions.

You’ve got an eye for design that makes your clients happy, but you’re missing a crucial skill set that will take your web design business to the next level.

Your client requested a few tweaks here or there that you wish you could fulfill, but the Squarespace platform doesn’t offer a way to make the modification they’re asking for. So, you scour countless forum and blog posts hoping to find some code snippet that works, only to find out it doesn’t work and you can't even understand it enough to modify it. Sound familiar?

Here’s why trying to design high-ticket websites and templates without functional knowledge of CSS can be bad for business:

You’ll inevitably disappoint some clients.

Breaking the news to your client that you cannot achieve something they need is one of the worst feelings for a business owner. Although unhappy customers are a fact of entrepreneurship, why make it worse by limiting your skill set?

You’ll waste valuable time searching for code snippets that may or may not work.

You’re probably used to searching endlessly for a code snippet that you need for a client’s website, only to find that it doesn’t quite do what you thought it would, or even worse, that it doesn’t work at all, and you don’t know how to fix it.

You’ll limit the price points for your services.

Chances are you’re ready to charge more for custom design projects and/or pre-made templates, but you can’t justify increasing your prices without offering unique, advanced coding solutions that can add some flare and functionality.

The Solution: The Functional CSS Course for Squarespace

Increase high-ticket sales for your web design business with this complete CSS course.

Learn the ins-and-outs of how to modify any Squarespace site with confidence using CSS & DevTools.

Make practical, functional design decisions that will help - not harm - the user experience of your website.

Expand your web design skill set, increase your price points, and grow your business.

HEY THERE, I’M CAROLINE!

Are you tired of charging clients’ less than what you’re work is worth because of a code skill deficit? I promise, there’s a solution.

I’m a BS in Software Engineering from Auburn University with 6 years of front-end web development experience, and 3 years of experience on the Squarespace platform, but things didn’t start out so smoothly for me. I remember how daunting the task of learning a new coding language was for me, and how it seemed like no matter how much I learned about CSS, there was always something else around the corner that made the gaps in my CSS skills more evident.

When I started constructing this self-paced course for web designers, I immediately set out to implement every valuable piece of knowledge I’ve learned and used in my own career, as well as everything that I wish someone would’ve taught me when I was just starting out.

Let me be completely transparent here and tell you that learning CSS or any coding language for that matter is a serious investment, but it can be done with the right resources, time commitment and practice.

My intention is that this course will save you the years of mistakes, sloppy code writing and relearning that I had to endure and unlearn when I was just starting out. I’m so excited to share this knowledge with you that I know will grow your web design business!

“Originality in web design is great, but not if it's at the expense of functionality.”

~ Caroline, owner & founder of Launch Hub Studio and course creator

The reasoning behind naming this course The Functional CSS Course for Squarespace is because when it comes to web design, functionality trumps originality (mostly). The #1 thing I see a lot of web designers do with custom CSS in an effort to make their designs “stand out from the rest” is add a bunch of crazy colors, animations, and other distracting elements that they think make their designs original, but in reality it makes them unusable for potential customers; however, there is room for both functionality and originality, and in this course, you'll learn how to achieve the perfect balance of both using CSS.

Course Outline

Includes 5 self-paced modules and 15 hours of content.

Module 01 / Learning CSS

You can’t get far without the basics. In this module, you’ll learn:

  • Intro to CSS

  • HTML basics

  • CSS Syntax

  • CSS Simple Selectors

  • CSS Combinators

  • CSS Pseudo-classes

  • Styling things with CSS

    • Colors

    • Units & Sizes

    • The Box Model

    • Media Queries

    • The “transition” property

    • Styling Text

    • Styling Links

    • The “transform” property

    • The “position” property

    • Styling lists + custom bullet points

    • The “display” property

    • Floats

    • CSS Grid Layouts

    • CSS Flexbox Layouts

    • Images

  • CSS Precedence & the Specificity Hierarchy

  • The !important tag

  • Targeting mobile and tablet views with media queries

  • Organizing CSS rules in Squarespace with comments

  • Squarespace CSS variables

  • Nesting Squarespace CSS rules

Module 02 / Using DevTools

DevTools is a very powerful development tool that allows us to view the backend of a web page, including the CSS, HTML, and JavaScript that goes behind making a web page function. In this module, you’ll learn:

  • How to use Chrome DevTools to examine HTML element attributes

  • Examine the most important selectors in Squarespace, include the data-section-id attribute for page sections, block IDs for each Squarespace block element, and more.

  • Find CSS rules that are being applied to elements

  • Modify CSS rules to see how they affect the layout in real-time

Module 03 / Writing CSS Responsibly

The 7 Fundamental Principles of UX Design

We’ll learn about the 7 fundamental principles of UX* design, and how we can write CSS that helps our web designs to provide an overall great user experience. We’ll even look at some real life examples of good and poor custom code being used on Squarespace sites that either help or hurt UX:

The 7 Fundamental Principles of UX Design:

  1. User-centricity

  2. Consistency

  3. Hierarchy

  4. Context

  5. User Control

  6. Accessibility

  7. Usability

    • Learnability

    • Efficiency

    • Memorability

    • Errors

    • Satisfaction

The Three H’s of CSS

I’ve separated CSS into three main categories that I’ve encountered over my years of writing CSS in terms of the user experience (UX)* of your site. Helpful, Harmless, and Harmful. In this module, you’ll learn how to decide what CSS is helpful, harmless, and harmful to your site’s UX using the 7 principles described above:

  • Helpful: This refers to CSS rules that improve the user experience of a site. These will meet one or all of the 7 principles of UX design.

  • Harmless: This refers to CSS rules that don’t necessarily improve the UX* of your site, nor do they harm the UX of your site, but that simply look good or maybe they add to the overall cohesiveness of your branding. I typically call this “eye candy.”

  • Harmful: This refers to CSS rules that can be catastrophic to the UX* of your website, including flashy animations that cause more of a distraction than anything else, font that is too small to read, text with poor color contrast with the background color, elements that hinder the user’s ability to easily find what they are looking for, and more. These will fail one or all of the 7 principles of UX design.

*UX means the overall experience of a person using a product such as a website or computer application, especially in terms of how easy or pleasing it is to use

Module 04 / Squarespace 7.0 & 7.1 CSS Projects

In this module, we’ll apply everything we’ve learned in modules 1-3 to examine and implement some common code snippets on a Squarespace site. Here are some of the Squarespace elements we’ll be modifying with CSS:

  • Gallery block hover effects

  • Asymmetrical flexbox auto list section

  • Custom list bullet styles

  • Navigation hover effects and pseudo elements

  • FAQ section using accordion blocks

  • 3xn grid layout with icon & text flexboxes using image card blocks

  • Gradient list section with shadows

Module 05 / Personalized Help from the Course Creator (Me)

In this module, you’ll take advantage of the 1:1 training that is included. This includes free help with course material via email.

This course is a perfect fit for you if:

You’re an established or beginning web designer with little or no CSS experience.

You’re ready to start charging more money for your high-end design projects and templates.

You are looking for an in-depth understanding of CSS beyond just the basics, including how to use CSS to help and not harm your site(s) user experience.

“I’m still not sure it’s worth the investment…”

This seems like a lot of money for something I can find online for free.

While it’s true you can find most of the content in this course for free online, there are some really valuable things included in this course that you will not find online, especially not for free. This course combines all of the info you would have to piece together from multiple platforms into one centralized place, with the added benefit Squarespace-specific CSS training, lessons on how to code responsibly, walk-through tutorials on how to create captivating layouts in Squarespace, and 1:1 personalized help.

If you’re business is not yet at a place where you need to invest in a course like this, no sweat. The offer will still be here once you decide to take the next step!

CSS seems overwhelming to learn + time-consuming.

Let’s face it, learning anything new - especially something as intricate as CSS - is going to take time and effort. This course makes it easier by taking a step-by-step approach to learning CSS so that you can code like a pro. Trust me, it won’t seem like too much time and effort once you’re able to charge your clients more with confidence and satisfy more customer requests.

Start expanding your web design toolkit today!

Best Value

One-Time Payment

$250 One-Time Payment

Includes:

  • 5 self-paced modules
  • ~16 hours of content on one centralized platform
  • Instant and lifetime access to all course content
  • 1:1 personalized help with course material
  • In-depth Squarespace coding tutorials
 

 View Some Examples of Layouts & Effects You’ll Learn How to Create with CSS

 

Asymmetrical flexbox layout using auto list sections in Squarespace 7.1.

Gradient list section with box shadows

Modern, sleek hover effects using gallery blocks in Squarespace 7.0 & 7.1.

3xn grid layout with icon & text flexboxes using Squarespace 7.1 image card blocks

Modern FAQ section using accordion blocks in Squarespace 7.0 & 7.1.

Summary block and blog list view card layout

Simple pricing tables grid layout using HTML and CSS.

 FAQs About the Course

  • Not at all! Although I market the course towards web designers who look to add to their design toolkit, really anyone who wants to learn the ins and outs of writing CSS for the Squarespace platform can benefit from this course.

  • Nope! This course is very beginner-friendly. The purpose of this course is to help you go from knowing nothing about CSS to being a Squarespace CSS pro.

    Plus, you’ll get 12 months of free, personalized CSS help from the course creator: me!

  • Although a bulk of the layouts we create in this course are for the 7.1 platform, you can really apply these skills to any Squarespace template out there, including Squarespace 7.0 templates.

  • Forever! Or at least for as long as Launch Hub Studio remains in business.

  • Yes! You have the option to pay the full price up front or 3 monthly payments.

  • Due to the digital nature of this course, all sales are final. However, if you start taking the course and are having second thoughts, you can always contact me about any concerns you have and I’ll try my very best to address them.