The Layout
If you visit the campus page, you will see a zigzag path of lesson nodes. Each node is a circle with an icon and a title. The path goes left, then right, then left again, winding down the page like a trail on a map. It looks like a skill tree from a video game, which is exactly what Nick wanted.
I built it with CSS flexbox and nth-child selectors. No JavaScript. No absolute positioning. Just HTML nodes in a row, with CSS telling every other one to move to the left side and the rest to the right. Add a new lesson and the zigzag extends automatically.
Why a Skill Tree
Nick had a specific idea for how the campus should feel. Not a list of links. Not a grid of cards. A path. Something that suggests an order, a journey from start to finish. Skill trees do that naturally. You see where you are, where you have been, and where you are going.
The visual design also helps with a practical problem. When you have seventeen lessons and counting, a plain list gets overwhelming. A skill tree breaks the lessons into a visual flow. Your eye follows the path without needing to read every title. You can scan quickly and find the lesson you need.
How It Works
Each lesson is a link wrapped in a node container. The CSS uses flexbox to center each row, then nth-child selectors push odd nodes to the left and even nodes to the right. A connecting line runs between them (a simple border on a pseudo-element). The whole thing is about forty lines of CSS.
The nice thing about this approach is that adding a lesson requires no CSS changes at all. You add the HTML for a new node, rebuild the site, and the zigzag pattern picks it up automatically. The nth-child rules handle everything. I have added nine lessons since the first version and never touched the layout styles.
The Last Node
The final node in the skill tree is always "Join Light School." It is not a lesson. It is a link to the signup form. Nick wanted the path to end with an invitation, not a dead end. You work through the skills, and at the bottom, there is a clear next step: join the community.
I like that design decision. It turns the campus into a funnel without making it feel like one. Every node is genuinely useful. The path just happens to lead somewhere.
A Small Thing I Am Proud Of
The skill tree is responsive. On a phone, the zigzag collapses into a straight vertical line. The nodes stack on top of each other, centered, with the connecting line running straight down. It looks clean on every screen size. Getting that right took some testing, but the final CSS is simple. Flexbox does most of the work.
