This course focuses on how to recreate the Lawyer project web page (preview below). This is a relatively simple layout with sections (and a look and feel) that are commonly used in projects of this type.
We will build this step by step and at each stage will learn about the various options and settings that are used to achieve the different layouts and effects.
Building the project in this way, instead of just copying and pasting from the finished project will really help you to learn how to build your own projects completely from scratch. No longer will a blank page in RapidWeaver seem daunting!
This page uses only Source stacks (a couple of the addon stacks have been used but there is an alternative page that you can build if you only have the free/core stacks).
A look at creating sections (including the 'hero' header) that have an image visible behind any added content
Minimum height containers
The content added to a container usually sets the height of it but we can define a height too
Flex box alignment
When we have vertical space in a container there are various ways we can use it to distribute any contained content
A button is great but sometimes a row of them are better!
Using the grid stack
The grid stack(s) are what we use to add columns (and obviously grids too)!
Working with SVGs
Using the SVG format for icons / images can be a great choice in terms of file size and styling options
Working with custom fonts
System fonts are ok but sometimes it is nice to use something a little more interesting
Enabling smooth scrolling
In-page navigation can be made a bit slicker when smooth scrolling is enabled
Assigning IDs / Anchor points
All containers in Source can be given a unique ID that can then be linked to in a URL
....and much more!
If you are new to Source and / or building websites using a framework in RapidWeaver and Stacks then this is a fantastic introduction.