Make your page with HTML, step by step

This guide takes you from nothing to a finished page with your own code. You need no experience: copy, paste, change the words.

1. Open the HTML tab

Dashboard → Advanced → switch to HTML at the top. The code is on the left, your page on the right, and it updates as you type.

2. Paste a page

Copy this into the code box (replace everything that is there):

<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');

  body { margin: 0; font-family: 'Inter', sans-serif; color: #fff;
         background: linear-gradient(160deg, #2a0618, #12020b); min-height: 100vh; }
  .page { max-width: 560px; margin: 0 auto; padding: 48px 16px; text-align: center; }
  .avatar { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
  h1 { font-size: 48px; margin: 16px 0 8px; }
  .links { display: grid; gap: 10px; margin-top: 28px; }
  .links a { display: block; padding: 14px; border-radius: 14px; color: #fff;
             text-decoration: none; background: rgba(255,255,255,.08); }
  .links a:hover { background: rgba(255,255,255,.16); }
</style>

<div class="page">
  <img class="avatar" src="https://placehold.co/240x240/ff3d9a/ffffff?text=Me" alt="">
  <h1>Hi, I'm you.</h1>
  <p>One sentence about what you do.</p>
  <div class="links">
    <a href="https://twitch.tv/you">Twitch</a>
    <a href="https://youtube.com/@you">YouTube</a>
    <a href="#about">About me</a>
  </div>
</div>

You now have a working page. Change the text, the colors and the links.

3. Use your own pictures

Two ways, both fine:

• Press Upload image. Linky converts it to WebP on your device, uploads it and adds an <img> tag for it. Up to 10 uploads per site.
• Use any picture already online with its https:// address, like the placehold.co one above. These do not count towards the 10.

Pictures work in <img src="…"> and in CSS, like background-image: url(https://…).

4. Add more pages

Press + Page above the code. The new page's address is shown next to its name, like #about. Link to it from any page with <a href="#about">About me</a>, or use Link to a page and Add page buttons, which write the links for you.

5. Shared styles

The Shared styles tab (top right of the tab row) holds code that is added to every page, so fonts and colors only need writing once. A page's own <style> works too.

If you imported a Carrd site and then paste a completely different design, the old shared styles still apply and can show through, for example as the old background. The editor warns you and offers Remove shared styles. Undo brings them back.

6. Tidy the code

Format code puts one tag and one CSS rule per line on every page, without changing how anything looks. Imported Carrd sites arrive formatted.

7. Save and publish

Save keeps it private, Publish puts it live. Make sure Visitors see is set to Advanced.

Using code from an AI app

ChatGPT, Claude and similar apps can write a whole page for you. Ask for:

One HTML page with all CSS in a <style> tag, no JavaScript, no forms, no iframes. Mobile friendly. Use these links: …

Paste the answer straight in, whether it is a fragment or a whole document with <!DOCTYPE html>, <head> and <body>: Linky keeps the styles from the head and the content of the body. Anything that is not allowed is listed under the code box as Removed when you publish, and the rest of the page keeps working. Common removals and what to do:

Countdown timers

<time class="lk-timer" datetime="2030-01-01T00:00:00Z" title="It's here!"></time> counts down live and shows the title when it ends.

Next

• HTML and CSS reference: every tag, attribute and CSS feature you can use.
• Site templates: start from a finished design, or share yours.