I'm curious about the design and construction of Greg Isenberg's website (you can check it out at www.latecheckout.studio). Specifically, I'm wondering how they get all those individual squares to align so neatly, almost like a game. Can anyone break down the techniques or tools used to achieve this look?
5 Answers
Check out Three.js for working with 3D models and assets in JavaScript! It'll really help you understand how to manage the visuals on a site like this.
This site uses a combination of CSS Grid for the layout and HTML5 Canvas for interactive elements. The squares you see are achieved using CSS transforms like skewX and skewY, layered carefully with z-indexes. If you want to dive deeper, you can inspect the grid structure in the DevTools to see how everything is positioned.
You could also use the CanvasAsISO setting to layer graphics properly for an isometric look. It's all about the graphics and how you manage the layering to make it visually appealing!
What do you mean by the squares lining up? From what I see, it's mainly an image background with clickable parts. The eye icon reveals a second image highlighting the buildings that are linked in the code. You could probably pull off a website like this in about half an hour with the right tools! It's mostly about coding clickable areas over a static photo.
It looks like an isometric tilemap built using Canvas and JavaScript. Once you dig in, you might find it's not as complex as it appears—just have fun learning about it!
Related Questions
How to Build a Custom GPT Journalist That Posts Directly to WordPress
Cloudflare Origin SSL Certificate Setup Guide
How To Effectively Monetize A Site With Ads