Applet Tutorials

Welcome to Squarespace CSS Mastery - how to work with this course

HTML, CSS and Javascript - a very high level overview of how web pages operate

What is CSS? How is it related to HTML?

Adding and managing CSS inside Squarespace

Using a code editor for syntax highlighting

Basic HTML structure and CSS targeting

The cascading logic of CSS. Types of selectors - IDs, classes, attributes

Google Chrome web inspector

Common styles for common elements

In-depth look at targeting HTML elements in CSS and how cascading works

Selecting and targeting page elements in the real world using the web inspector. Color values.

CSS variables

LESS

Positioning and the box model, shorthands

Responsive design, media queries, and mobile breakpoints

Measurement systems (px, em and rem, percent, vh and vw, etc)

States - hover, active, focus

Pseudo elements

Transformations

Transitions

Gradients, animations and keyframes

Flexbox

CSS Grid system (high-level overview)

Evolution of HTML and CSS and why you should stay up to date

Precise targeting - using data-smth-smth to target section/block settings

Using fonts in Squarespace

HTML structure of common Squarespace elements. Part 1 - Sections

HTML structure of common Squarespace elements. Part 2 - Pages. Targeting using parts of class names

Squarespace CSS variables

Why clean code is important and Best CSS/LESS practices

Controlling image and font size for each individual testimonial in Testimonial Sections

Adding a gradient background to sections, targeting by section style (Lightest 1, Dark 2, etc)

Adding a background “frame” to a button, animating it on hover, and setting button minimum width

Add an icon inside any button / all buttons of a certain type (primary, secondary or tertiary)

Change the size and style of the sub-navigation items in the menu dropdown

Adjust a Summary block to have a more sleek card-like look (using Squarespace CSS variables)

Turning blog page posts grid into stylish cards