Mobile Warning

This application is optimized for desktop browsers. Some features may not work correctly on mobile devices.

For the best experience, please use a desktop computer.

Welcome to Spaces :D

Free beginner friendly all-in-one platform to create, host and collaborate with on web-apps & other projects.

🚀

Getting Started is Easy

Create your first website in minutes! No complex setup or configuration required.

Quick Start Guide

1

Create a New Site

Click the "New Site" button in your dashboard to start a new project.

2

Edit Your Code

Use our powerful code editor to write HTML, CSS, and add content.

3

Deploy

Your changes are automatically saved and deployed. Share your site instantly!

Features Overview

Code Editor

Powerful editor with syntax highlighting and auto-completion.

Instant Deploy

Changes go live immediately with automatic deployments.

Responsive Preview

Test your site's appearance across different devices.

Custom Domain

Use your own domain name for a professional touch.

HTML & CSS Tips

Responsive Design Example

/* Mobile-first approach */
.container {
    width: 100%;
    padding: 1rem;
}

/* Tablet and larger */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Desktop */
@media (min-width: 1024px) {
    .container {
        max-width: 960px;
    }
}

Use Semantic HTML

Choose meaningful tags like <header>, <nav>, and <article> instead of generic <div>s.

CSS Best Practices

Organize your CSS with a consistent naming convention and use CSS custom properties for theming.

Best Practices

1. Optimize Images

Compress images and use appropriate formats (JPG for photos, PNG for graphics with transparency, SVG for icons).

2. Mobile-First Design

Start with mobile layouts and enhance for larger screens using media queries.

3. Performance

Minimize HTTP requests, use appropriate image sizes, and keep your code clean and efficient.

Editing Code

The Hack Club Spaces editor is powerful and intuitive, with features that make coding easier and more efficient.

Editor Overview

Editor screenshot

Syntax Highlighting

The editor automatically colorizes your code based on the programming language, making it easier to read and understand.

Auto-Completion

As you type, the editor suggests code completions to speed up your development process.

Auto-Indentation

The editor automatically indents your code to maintain proper structure and readability.

Search & Replace

Quickly find and replace text throughout your code using the built-in search functionality (Ctrl+F).

Theme Selection

Choose from several editor themes to match your preference and reduce eye strain.

File Management

Manage your project files efficiently with built-in tools.

Creating New Files

Click the "+" button in the file tabs area to create a new file. Enter the filename with appropriate extension (e.g., about.html, styles.css).

Pro Tip

Organize your project by using descriptive filenames and following naming conventions.

Switching Between Files

Click on the file tabs to switch between open files in your project. The active file will be highlighted.

File Structure

For web projects, your main files include:

  • index.html - Main HTML page structure
  • styles.css - CSS styling for your page
  • script.js - JavaScript for interactive elements

Keyboard Shortcuts

Boost your productivity with these handy keyboard shortcuts.

Essential Shortcuts

General

Ctrl+S Save changes
Ctrl+Z Undo
Ctrl+Y Redo
Alt+F Fold Code

Search & Navigation

Ctrl+F Find
Ctrl+G Find Next
Shift+Ctrl+G Find Previous
Ctrl+H Replace

Git Integration

Hack Club Spaces features powerful GitHub integration for version control.

GitHub Integration

Connect your project to GitHub repositories to track changes, collaborate with others, and manage your code's version history.

1

Connect Repository

Click the "Git" button in the editor toolbar to open the GitHub integration panel.

2

Authorize GitHub

Connect your GitHub account if prompted and select or create a repository.

3

Commit & Push

Make changes, commit them with descriptive messages, and push to your repository.

Orphy AI Assistant

Get help with your code from Orphy, the built-in AI coding assistant.

🦖

Meet Orphy

Orphy is an AI assistant that can help you with coding questions, suggest improvements, and explain concepts.

Using Orphy

Click the "Orphy" button in the toolbar to open the Orphy chat panel. Type your question or code snippet and get instant assistance.

Example Prompts

  • "How do I create a responsive navigation bar?"
  • "Debug this JavaScript function for me"
  • "Explain how CSS flexbox works"
  • "Help me optimize this code"

Code Formatting

Keep your code clean and consistent with built-in formatting tools.

Auto Format

For Python projects, use the "Format" button to automatically format your code according to PEP 8 standards.

Linting

Enable code linting in the editor settings to identify potential errors and style issues as you type.

Before and After Formatting

Before

def messy_function(a,b,c):
    x=a+b
    y=x*c
    return       y

After

def messy_function(a, b, c):
    x = a + b
    y = x * c
    return y

Uploading Images

Learn how to add custom images to your Spaces projects using different methods.

Method 1: Using Hack Club's #cdn Slack Channel

The easiest way to host images for your project is through the Hack Club Slack:

  1. Join the Hack Club Slack if you haven't already
  2. Go to the #cdn channel
  3. Upload your image to the channel
  4. Wait for Orpheus to process your file
  5. Paste the provided URL in your HTML code
<img src="https://cloud-example-url-from-slack.com/your-image.jpg" alt="My Custom Image">

Method 2: Using Images from the Web

You can also use images from anywhere on the web:

  1. Find an image you want to use on any website
  2. Right-click on the image and select "Copy Image Address" or "Copy Image URL"
  3. Paste the URL in your HTML code

Important Note

Make sure you have permission to use images from other websites. Using images without permission may violate copyright laws.

Using Images in HTML

Basic Image Tag

<img src="your-image-url-here.jpg" alt="Description of the image">

Image with Styling

<img 
  src="your-image-url-here.jpg" 
  alt="Description of the image"
  class="responsive-image"
  style="max-width: 100%; border-radius: 8px;"
>

Live Preview

See your changes in real-time with the built-in preview panel.

Using the Preview

The preview panel shows you how your website looks as you code. Click "Run" to update the preview with your latest changes.

Deployment Preview

Click "Deploy" to publish your site and get a shareable URL. Your site will be available at multiple domains provided by Hack Club Spaces.

Instant Deployment

Your changes are deployed instantly, allowing you to share your work with others immediately.

Site Analytics

Track visitor information with built-in analytics.

View Count

See how many people have visited your site through the Analytics modal.

Toggle Analytics

Enable or disable analytics collection for your site.

Clear Analytics

Reset your analytics data when needed.

Privacy Tip

Analytics are anonymous and only track visit counts, not personal information.

Example Projects

Portfolio example

Portfolio Site

A clean, modern portfolio template perfect for showcasing your work.

View Template
Blog example

Blog Template

A responsive blog template with a focus on readability and content.

View Template

File Paths

Understanding how to correctly link to files in your Spaces project is crucial for your website to work properly.

⚠️

Important: Special File Path Format

In Hack Club Spaces, you cannot use relative paths like styles.css or absolute paths like /styles.css as you might in traditional web development.

Correct File Path Format

When linking to your own files, you must use this special format:

/s/[sitename]/[filename]

Where [sitename] is the name of your site and [filename] is the name of your file.

Examples

Linking a CSS file

<!-- WRONG ❌ -->
<link rel="stylesheet" href="styles.css">

<!-- WRONG ❌ -->
<link rel="stylesheet" href="/styles.css">

<!-- CORRECT ✅ -->
<link rel="stylesheet" href="/s/your-site-name/styles.css">

Linking a JavaScript file

<!-- WRONG ❌ -->
<script src="script.js"></script>

<!-- WRONG ❌ -->
<script src="/script.js"></script>

<!-- CORRECT ✅ -->
<script src="/s/your-site-name/script.js"></script>

Referencing an image

<!-- WRONG ❌ -->
<img src="images/logo.png" alt="Logo">

<!-- CORRECT ✅ -->
<img src="/s/your-site-name/images/logo.png" alt="Logo">

CSS Background Images

The same rules apply when referencing images in your CSS:

/* WRONG ❌ */
background-image: url('images/background.jpg');

/* WRONG ❌ */
background-image: url('/images/background.jpg');

/* CORRECT ✅ */
background-image: url('/s/your-site-name/images/background.jpg');

Why This Matters

Files in Hack Club Spaces are served through a special URL structure to ensure proper content delivery and site isolation. Using incorrect file paths is the #1 reason why images, styles, or scripts fail to load in your project.

Finding Your Site Name

Your site name is the name you gave your project when you created it. You can see it in the URL of your deployed site, which will be:

https://your-site-name.hackclub.me