←WebSprout logoWebSprout

Codelab: Build a Gradient Pricing Card

Step out of the platform and build a real pricing card with gradient buttons in a local HTML file. End-to-end: terminal, editor, browser refresh.

Step 1 of 6

Set up your project folder

You will build a single HTML file with a small CSS file that ships a pricing card the way you might see one on a real product page.

Open a terminal on Linux with Ctrl + Alt + T, then run these commands one by one:

  • mkdir ~/gradient-card-lab — create a new project folder in your home directory
  • cd ~/gradient-card-lab — move into that folder
  • touch index.html style.css — create the HTML and CSS files
  • code . — open the folder in VS Code

Use any plain-text editor you like; saving plain HTML and CSS is the only requirement.

Tip

If code . does not work, open your editor manually and choose File → Open Folder, then select ~/gradient-card-lab.