Coding for designers

We're almost ready to open a project in Cursor. But first, we need code to work with.

Unlike design, where we often start with a blank canvas, most code-based projects start from boilerplate—pre-written code that handles tedious, repetitive stuff so you don't have to.

For instance, a marketing website boilerplate will typically already include the engine that generates shared page patterns and the HTML markup that stays consistent across every page.

Get the boilerplate

For this lesson, I already have boilerplate cooked up that we can make use of. To get that code onto your machine, we're going to utilize GitHub and GitHub Desktop.

Accessing the boilerplate code

In GitHub, we'll need to first add your handle (username) to the project. To do this, ping me (@mikestilling) your GitHub handle in Slack. I'll give your account access.

Once added, click the button below to create your own project using the boilerplate. A bunch of fields will appear. We'll walk through those in the next step.

Creating your first repository

The page linked above will be titled Create a new repository. A repository (or "repo") is just a project. If you're building a new website, you'd create a new repo. If you're adding pages to that website, it happens within the same repo.

The repo we're basing our new project off was created for building Helm prototypes. Fill out the fields on this page to match the form below:

Once complete, click Create repository.

Cloning the repo to your computer

Now that we've duplicated the boilerplate into our own GitHub account, we need to get the code onto our computer so we can work with it. Here's how:

1. Open GitHub Desktop. Sign into GitHub in GitHub desktop if you need to.
2. Click the Add button or the Clone Repository... button.
3. If  you clicked Add, select Clone Repository... from the dropdown.
4. In the modal that appears, find and select our protohelm repo.
5. Click Choose... next to the Local Path field. A Finder window will open.
6. In Finder's left sidebar, under Locations, click your username (e.g. mikestilling).
7. Create a new folder here called Sites.
8. At the top of Finder, enter protohelm in the Clone As: field.
9. Click the Sites folder we just created, then tap Select to close Finder.

For reference, here's a visual of the Finder steps:

After Finder closes, you'll return to the GitHub Desktop modal, here you can now click Clone. You'll see a brief loading state and then the repo will be opened in GitHub Desktop. ✅ You've successfully gotten your code from GitHub onto your computer.

Open the repo in Cursor

Now let's open Cursor so we can look at the code and edit it. Once Cursor is open:

1. Click Open project.
2. In the Finder window, navigate to the Sites folder.
3. Select the protohelm folder.
4. Click Open.

Unlike design files or docs, code-based projects are a collection of files. That's why we open the folder, not an individual file. After doing this, you should see a folder called src and a list of weirdly named files running down Cursor's left sidebar.

Install dependencies

We're almost cooking with code 🧑‍🍳. Just a couple of command line things left to do.

Cursor has a built-in Terminal we can use for this. To open it, look at the top of your screen while Cursor is open. You should see a tab labeled Terminal. Click that, then select New Terminal.

This opens a Terminal pane across the bottom of Cursor.

Configure NodeJS for your project

Let's check which version of NodeJS we're using. Paste this into Cursor's Terminal and then tap your enter key:

node -v

If the number returned in Terminal is >=21, skip the next step. If not, we'll use nodenv to change the version of NodeJS that we're using. To do this, we'll first install NodeJS 21 with nodenv by typing this into the Terminal and tapping enter:

nodenv install 21.0.0

If Terminal responds with ~"this version of NodeJS already exists," click N and hit enter to prevent installing a duplicate version of NodeJS. Otherwise, proceed with the installation.

Either way, we now know this version of NodeJS is installed. Next, we need to tell nodenv to use it. We'll set it globally—meaning it becomes the default Node version across your entire computer, not just this project. Run this command:

nodenv global 21.0.0

Double-check that NodeJS is now using 21+:

node -v

If you are seeing a number >=21, yay, perfect!!! 🎉

Install the NPM packages

Now that NodeJS is set up, we'll install the project's dependencies. These are bits of other people's code that our code is dependent on to work correctly.

These dependencies are often called "packages" (hence NPM, Node Package Manager). Packages can include all sorts of tools. For example, in this codebase we'll use Tailwind for styling. Other common ones include libraries like ThreeJS.

To install all the dependencies for this project, we'll simply add this into Cursor's Terminal and tap enter:

npm i

A bunch of things will happen in the Terminal after you run this -- that's totally normal. The vulnerabilities mentioned are fine since we're making a static website, not software that handles users' personal data.

The Terminal should look something like this:

Back on the left-hand sidebar in Cursor, you'll now also see a node_modules folder. This folder contains all of those packages we were talking about earlier. You typically don't have to do anything with the contents found within this folder ever.

✅ Our dependencies are now installed.

Run the code

Now for the exciting part, running our code for the first time. This does two things: it transforms the code in our repo's src folder into real HTML, CSS, and JavaScript (output to a generated dist folder), and it starts a development server that continually updates our website as we make changes and save them.

To run the code, all it takes is a simple npm command:

npm start

Once you enter this into Cursor's Terminal and hit enter, the development server will fire up and the site will be built.

In your Terminal, you should see a link appear like: localhost:8080. Typing that address into your browser's address bar will open up the site!

To stop the dev server, click back into your Terminal and tap ^C (Control + C) on your keyboard. Now fire it back up by re-running npm start and tapping enter. This back and forth of starting/stopping a development server will become second nature.

Make a code edit

With our dev server running (npm start), we'll make our first code edit. We'll edit the homepage of this website's headline.

To do this, we'll open up a file called index.webc. This file will be within the src folder in the left-hand sidebar in Cursor. All we need to do to open it up is click on it.

With the index.webc file open, we'll scroll down to line 42 in the code. It should look something like this:

<h1 class="text-48/[115%] tracking-tight max-w-928 mb-40 mix-blend-multiply">
    Financial infrastructure to grow your revenue. <span class="text-subheadline">Accept payments, offer financial services, and implement custom revenue models—from your first transaction to your billionth.</span>
</h1>

Select and delete out the text between the opening <h1> and closing </h1> tags. Replace it with whatever you'd like to make it.

Once you update it, tap ⌘S to save the index.webc file. Now, go look at that development server URL (localhost:8080) in a browser window. You should see your changes being reflected there.

Push edits to GitHub

Usually, you'll push changes you make in code to GitHub after completing a more meaningful piece of work. For demonstration purposes, we'll push our simple headline update to GitHub. To do this, we'll hop back over to GitHub Desktop.

When you open up GitHub Desktop, you should see something like this:

In the bottom-left corner, next to the avatar image, enter Headline copy edit. This field is called the Git Commit Message. Essentially, we want to write extremely concise messages describing what we did in this slice of work.

The message entered here will appear in GitHub and help any future collaborators understand what has happened in the codebase. After you enter that message click the Commit 1 file to main button below it.

After committing, a new blue button that says Push origin should appear over to the right-hand side of the app. Click it to update the code you have on GitHub based on the changes you've made on your computer.

Launch the website

Now that we're all set up, have our code in GitHub, and can push updates from our computer, the last thing we need is a way to share our creation. For that, we'll use Netlify or Vercel.

In this demo, we'll be using Netlify. The steps in Vercel are extremely similar. Follow along, chances are you'll be able to get through Vercel from these same steps.

Connecting Netlify to our GitHub repo

In a browser, open up Netlify and login. Once logged in, you should see a Add new project button. Click it and then select Import an existing project.

On the next screen, select GitHub. Here, you may need to authenticate/login to your GitHub account within the modal. If so, do that, and give Netlify the permissions it requests. Afterward, back in the Netlify website, you should see your protohelm repository appear as an option. Click it.

At this point, we'll need to fill out a small form configuring our Netlify project setup. I've added the details of what should be added into that below:

Project name: protohelm
Branch to deploy: main
Base directory: (leave empty)
Build command: npm start
Publish directory: dist
Functions directory: (leave empty)

After you update those fields, click the Deploy protohelm button at the bottom of the form. It will take a minute or so for Netlify to build and deploy your new website.

Visit your new website

Once the deploy completes, the beige "Project deploy in progress" text will turn into a green url. Click that URL to view your website on the world wide web! You've done it.

From here on out, anytime you update code on your computer, commit it, and push it, it will automatically update after a minute or so at this URL. You can now share your work with the world.

You launched a website! And that was all without an ounce of AI help. Kudos—this took me years to figure out 🥲.

Next: Lesson 3 – Design in code

What you just accomplished is how most static marketing websites are built. I've shipped many websites myself using these exact tools, some that I charged >$30K for. While it may seem silly, weird, and a bit chaotic—it's meaningful. You just:

1. Learned the basics of the command line and Terminal
2. Utilized Git-based workflows and GitHub
3. Operated a modern Javascript project using NodeJS/NPM
4. Launched a website with Netlify/Vercel

This is the standard way most folks code on a day-to-day basis. They update/write code on their computer, push it to GitHub, get it reviewed, and merge it into the "main" so it can deploy and be put in front of users (a.k.a. "merging a PR").

This should all seem a bit fuzzy still. We'll dive deeper into each of these in the next three lessons. I pinky swear, the rest is going to be more fun with this is out of the way.

In Lesson 3 – Design in code, we're going to start commanding code to do as we wish -- designing in code, if you will. Click on the next lesson below to continue.