100 Queer Coding Prompts

1. "Hello, Web!" Page

Description: Create your first HTML page with a message.

How To: Create a file named index.html.
Write this boilerplate code:
<!DOCTYPE html>
<html>
<head>
    <title>My First Page</title>
</head>
<body>
    <h1>Hello, web!</h1>
    <p>Iā€™m queer and coding!</p>
</body>
</html>
Open the file in a browser (double click or drag into browser window).
Try this: Change colors with inline styles (<h1 style="color: hotpink">), replace text, or add emojis.

2. Change the Background Color

Description: Use CSS to change the background color.

How To: Inside the <head> of index.html, add:
<style>
    body {
        background-color: lavender;
    }
</style>
Save and refresh in the browser.
Try this: Try gradients like background: linear-gradient(pink, blue), or use dark color codes like #1e1e1e.

3. Make a Button that Does Nothing (Yet)

Description: Add a button to your page.

How To: Inside the <body>, add:
<button>Click me!</button>
Then style it in a <style> block:
button {
    background-color: hotpink;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 10px;
}
Try this: Change shape, use shadows, add multiple buttons, or animate on hover.

4. Center Everything on the Page

Description: Use flexbox to center content.

How To: In the <style> block, add:
body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: #fafafa;
    font-family: sans-serif;
}
Then put any HTML content inside the <body> to see it centered.
Try this: Try adding multiple elements, test vertical stacking, or center a form.

5. Make a Personal Name Tag

Description: Create a digital name tag with styling.

How To: In the <body>:
<div class="nametag">
    <h2>Hello, my name is</h2>
    <h1>šŸŒˆ [Your Name]</h1>
</div>
In the <style> block:
.nametag {
    border: 3px dashed purple;
    padding: 20px;
    background: white;
    text-align: center;
}
h1 {
    color: deeppink;
}
Try this: Use animated borders, emojis, or load a special font.

6. Create a Rainbow Divider

Description: Make a visual rainbow separator.

How To: In the <body>:
<div class="rainbow"></div>
In the <style> block:
.rainbow {
    height: 20px;
    background: linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet);
    margin: 20px 0;
}
Try this: Make it diagonal or animate it.

7. Build a Queer Manifesto Section

Description: Write and style a small manifesto.

How To: In the <body>:
<section class="manifesto">
    <h2>Queer Coding Manifesto</h2>
    <p>We code for joy, for resistance, for community.</p>
</section>
In the <style> block:
.manifesto {
    font-style: italic;
    background-color: #ffeef0;
    border-left: 6px solid crimson;
    padding: 15px;
    max-width: 500px;
}
Try this: Make it collapsible or let users add their own lines.

8. Insert an Image

Description: Add and style a queer-related image.

How To: In the <body>:
<img src="your-image-url.jpg" alt="Queer Joy" />
In the <style> block:
img {
    width: 300px;
    border-radius: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}
Try this: Use filters like grayscale or blur, or add a caption.

9. Design a Pronoun Badge

Description: Make a colorful badge with your pronouns.

How To: In the <body>:
<span class="badge">they/them</span>
In the <style> block:
.badge {
    background: turquoise;
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-weight: bold;
}
Try this: Try gradients, emoji, different shapes, or hover effects.

10. Create a Simple Navigation Bar

Description: Make a top nav with links.

How To: In the <body>:
<nav>
  <a href="#">Home</a>
  <a href="#">About</a>
  <a href="#">Contact</a>
</nav>
In the <style> block:
nav {
    background: black;
    padding: 10px;
}
nav a {
    color: white;
    margin-right: 15px;
    text-decoration: none;
}
nav a:hover {
    text-decoration: underline;
}
Try this: Add icons, make it sticky, or give it a rainbow background.