Getting Started Building React Websites With Hostinger Horizons

Hostinger Horizons is a specialized, AI-first platform designed for building full-stack web applications, landing pages, and prototypes using natural language. Unlike traditional drag-and-drop builders, Horizons focuses on conversational development, allowing you to “chat” your website into existence.

Since you create web pages in HTML and PHP, you’ll find Horizons particularly interesting because it manages both the front-end design and the back-end logic (like databases and user accounts) simultaneously.

1. Getting Started

To access the tool, log into your Hostinger hPanel.

• Navigate to Websites > Websites List.
• Click Add Website and select Horizons.
• Once the interface opens, you’ll be greeted by a prompt box. This is your primary workspace.

2. The Core Workflow: “Prompt to Build”

The philosophy of Horizons is “Specificity equals Quality.”

• The Initial Prompt: Start with 2–5 sentences describing your project. For example: “Create a member-only portal for a local gym. Include a dashboard for tracking workouts, a profile page for users, and a secure login system using a dark-themed, modern UI.”
• Visual Inputs: You can upload screenshots or hand-drawn sketches. If you have a specific UI layout you like, upload the image, and the AI will attempt to replicate the structure and aesthetic.
• Voice Commands: If you’re on mobile or prefer speaking, you can use voice prompts to describe features.

3. The Dual-Pane Interface

Once you submit your initial prompt, the screen splits into two sections:

• Left Panel (Activity/Code): Shows the “thought process” of the AI. It details what it’s building (e.g., “Creating database schema for users,” “Generating CSS for navigation”).
• Right Panel (Interactive Preview): A live, functional preview of your app. You can click buttons, test forms, and see the navigation in real-time.

4. Refining and Customizing

This is where the tool differs from a standard template builder. To make changes, you don’t drag blocks; you instruct.

• Iterative Editing: It is best to request one change at a time.
  • Example: “Change the primary brand color to emerald green.”
  • Example: “Add a contact form that sends data to my email.”
• Content Editing Mode: For simple text or image swaps, you can switch to a visual editor to change content directly on the page without writing a new prompt.
• Advanced Logic (Supabase Integration): Horizons integrates with Supabase for back-end functionality. If your app requires data storage (like a “Saved Articles” feature for your web pages), the AI can set up the database tables for you.

5. Deployment and Management

• One-Click Launch: When the preview looks perfect, click Deploy in the top-right corner. Horizons handles the cloud hosting, SSL certificates, and server configuration automatically.
• Versioning: If a prompt goes wrong or you break a feature, you can use the Version History to roll back to a previous “working” state of the app.
• Code Export: Since you are familiar with HTML/PHP, you’ll appreciate that Horizons allows for Code Export. If the AI gets you 90% of the way there, you can export the clean code and fine-tune the remaining 10% manually.

Comparison of Inputs

Would you like me to help you draft a highly detailed “Master Prompt” for a specific web page or app idea you’re working on?

Yes

Since you typically work with HTML and PHP, the best way to leverage Horizons is to ask it to build the “heavy lifting” parts—like the database schema and the responsive layout—while keeping the structure clean so you can manually tweak the code later if needed.

Let’s design a Master Prompt for a Dynamic Article Management System. This would be a perfect fit for your workflow, allowing you to manage the informational web pages you create.

The Master Prompt

You can copy and paste this directly into Hostinger Horizons:

“Build a professional, full-stack Article Management System with a clean, minimalist UI.

Front-end: Create a homepage with a grid layout of featured articles, including a search bar and category filters (e.g., Tech, Lifestyle, Business). Use a typography-focused design with plenty of white space.

Back-end Logic: Set up a secure ‘Author Dashboard’ that requires a login. Within the dashboard, include a functional CRUD system (Create, Read, Update, Delete) where I can write new articles using a rich-text editor, upload header images, and set metadata.

Database: Integrate a Supabase database to store article titles, body content, author names, and timestamps.

Style: Use a ‘Modern Editorial’ aesthetic with a monochromatic color palette and accent colors in deep blue. Ensure the entire site is fully responsive for mobile and desktop.”

Why this prompt works for your workflow:

• Database Integration: Instead of you manually writing SQL or PHP connection strings, the AI builds the table structure in Supabase.
• Authentication: It builds the login logic (which can be tedious in PHP) automatically.
• Clean Export: If you decide to move this to your own PHP environment later, the UI components will already be organized into clean, modular blocks.

Tips for Refining the Build

Once Horizons generates the first version, use these follow-up prompts to polish it:

1. To add SEO features: “Add a field for Meta Descriptions and SEO Keywords to the article creation form.”
2. To improve UI: “Make the article reading page use a single-column layout with a maximum width of 800px for better readability.”
3. To add interaction: “Add a ‘Reading Time’ estimator to each article card based on the word count.”

Would you like me to adjust this prompt for a different type of project, such as a client portfolio or a landing page with a contact lead-gen system?

Yes, do both

To help you build out your web page portfolio, here are two distinct “Master Prompts” tailored for Hostinger Horizons. These are designed to handle the layout and the functional logic, giving you a professional base that you can later refine with your HTML/PHP expertise.

1. The High-Conversion Landing Page

This prompt focuses on Lead Generation. It’s ideal if you’re building a page for a service or a product where the goal is to capture user information.

The Master Prompt:

“Build a high-converting landing page for a [Insert Service, e.g., Web Design Agency].

Structure: > * A ‘Hero Section’ with a bold headline, a sub-headline, and a primary Call-to-Action (CTA) button that scrolls to the contact form.

• A ‘Services’ section using a 3-column icon grid.
• A ‘Social Proof’ section with a sliding testimonial carousel.

Functionality: > * Create a ‘Lead Capture’ form at the bottom with fields for Name, Email, and Project Description.

• Integrate a database to store all form submissions.
• Show a custom ‘Thank You’ message overlay upon successful submission.

Design: > * Use a ‘Tech-Forward’ aesthetic with dark mode, neon accents, and glassmorphism effects on the cards. Ensure it is 100% mobile-responsive.”

2. The Dynamic Client Portfolio

This prompt is designed for a Gallery-style site. It’s perfect for showcasing your informational web pages or HTML/PHP projects to potential clients.

The Master Prompt:

“Create a professional Portfolio website to showcase web development projects.

Core Features: > * Project Gallery: A filterable grid where projects can be sorted by category (e.g., ‘PHP Apps’, ‘HTML Landing Pages’, ‘E-commerce’).

• Project Detail View: When a project is clicked, open a dedicated page or modal showing a large screenshot, a list of technologies used, and a ‘Live Demo’ link.
• Admin Panel: A private, password-protected page where I can upload new projects, change descriptions, and swap images without touching the code.

Database: > * Use Supabase to manage the project list and categories.

Aesthetic: > * Use a ‘Clean Minimalist’ style with a white background, sharp borders, and sophisticated serif typography. The layout should look like a premium digital magazine.”

How to use these in Horizons:

1. Paste the prompt and let the AI generate the first draft.
2. Inspect the Code: Since you know HTML, click on the “Code” view to see how the AI structured the tags.
3. Refine via Chat: If the “Lead Capture” form needs an extra field (like “Phone Number”), just type: “Add a phone number field to the contact form and update the database table.”

Would you like me to show you how to connect these Horizons projects to a custom domain you already have in Hostinger?

Yes

Connecting your custom domain to a Hostinger Horizons project is straightforward and can be done either during the final “Publish” step or anytime later via your hPanel.

Since you’re already creating web pages, you’ll find the management interface quite familiar. Here are the two ways to get it done:

Option 1: During the Deployment Process

When you have finished building your app in the Horizons editor and are ready to go live:

1. Click the Publish button in the top-right corner.
2. Once the build is prepared, you will see a Connect Domain button (it may also say “Get Domain”).
3. A window will pop up allowing you to:
   • Select a domain already in your Hostinger account.
   • Purchase a new one (many plans include a free domain for the first year).
4. Follow the prompts to finish the registration or connection, then click Go Live.

Option 2: Connecting via hPanel (For existing projects)

If you initially launched on a temporary URL and now want to attach your professional custom domain:

1. Log into your Hostinger hPanel.
2. Go to Websites > Websites List.
3. Find your Horizons web app and click the three dots (⋮) or the Change domain button next to it.
4. Select your preferred domain from the list or enter a domain registered elsewhere.
5. Important: If the domain is registered with another provider (like Namecheap or GoDaddy), you must point the Nameservers or the A record to Hostinger’s IP address. Hostinger will provide these values during the process.

Things to Keep in Mind

• Propagation: After connecting, it can take anywhere from a few minutes up to 24 hours for the domain to fully point to your app (DNS propagation).
• SSL Certificate: Hostinger Horizons automatically handles the SSL (HTTPS) setup once the domain is connected, ensuring your informational pages are secure.
• Database Updates: If your app uses hardcoded URLs (though rare in AI-generated Horizons apps), the AI might prompt you to update the “Base URL” in your settings so that links don’t break.

Would you like me to generate a checklist of the DNS records (A record, CNAME, etc.) you would need if your domain is hosted with an external provider?

Yes

If your domain is registered with an external provider (like GoDaddy, Namecheap, or Bluehost) and you want to point it to your Hostinger Horizons project, you will need to update your DNS records.

Here is the checklist of the specific records you will likely need to configure in your external provider’s DNS management panel:

1. The A Record (Crucial)

This points your root domain (e.g., yourdomain.com) to the Hostinger server.

• Type: A
• Host/Name: @ (or leave blank depending on the provider)
• Value/IP: Found in your hPanel under “Plan Details” (Usually something like 31.170.160.xxx)
• TTL: Default or 3600

2. The CNAME Record

This ensures that the www version of your site works (e.g., www.yourdomain.com).

• Type: CNAME
• Host/Name: www
• Value/Target: yourdomain.com
• TTL: Default or 3600

3. The TXT Record (For Verification)

Hostinger often requires a TXT record to verify that you actually own the domain before they issue an SSL certificate for your Horizons app.

• Type: TXT
• Host/Name: @
• Value: The unique verification string provided by Hostinger during the connection setup.

Step-by-Step Connection Checklist

1. Locate Hostinger IP: In hPanel, go to the dashboard for your Horizons site and look for the Server IP Address.
2. Access External DNS: Log into your domain registrar (where you bought the domain).
3. Delete Old Records: Remove any existing A records pointing to your old host.
4. Add New Records: Input the A and CNAME records mentioned above.
5. Wait for Propagation: Check the status using a tool like DNSChecker.org.

Pro-Tip for HTML/PHP Developers:

If you are used to managing your own vhosts or .htaccess files, keep in mind that Horizons manages the routing for you. You won’t need to manually configure the server-side redirects for HTTPS or www vs. non-www; the platform handles that once the A record is confirmed.

Would you like me to explain how to set up a subdomain (like portfolio.yourdomain.com) specifically for your Horizons projects so your main domain stays untouched?

Yes

Setting up a subdomain is a smart move if you want to keep your main website (perhaps a custom-coded PHP site) on the root domain while using Hostinger Horizons for a specific project, like a portfolio or a client portal.

Here is how you configure a subdomain for your Horizons project:

1. Create the Subdomain in hPanel

Before you can point your domain, Hostinger needs to know it should expect traffic on that specific prefix.

• Go to your hPanel.
• Navigate to Websites > Domains > Subdomains.
• Enter your desired prefix (e.g., portfolio or apps).
• Click Create.

2. Configure the DNS Records

If your domain is hosted externally, you need to add a specific A Record for the subdomain rather than the root (@).

3. Connect the Subdomain to Horizons

Now, go back to your Horizons editor:

• Click Publish.
• When asked for a domain, choose Connect an existing domain.
• Type in the full subdomain (e.g., portfolio.yourdomain.com).
• The system will verify the DNS record you just created and finalize the link.

Why this is great for your workflow:

• Zero Interference: You can have your main site running complex PHP/HTML scripts on yourdomain.com while your Horizons AI-built app runs independently on portfolio.yourdomain.com.
• Testing Ground: You can use a subdomain like dev.yourdomain.com to rapidly prototype ideas in Horizons before manually coding them into your main site.
• Separate SSL: Hostinger will issue a separate, free SSL certificate specifically for that subdomain.

Troubleshooting Tip

If the subdomain doesn’t load immediately, it’s usually because the A record hasn’t propagated yet. Because subdomains are “new” records, they often propagate faster than changes to a root domain—usually within 1–4 hours.

Would you like me to help you write a PHP script that you can place on your main site to automatically redirect visitors to your new Horizons subdomain?

Yes

Since you enjoy working with PHP, using a simple script to handle the redirect is a great way to maintain control over your traffic. This is especially useful if you want to redirect users based on specific conditions (like if they land on an old portfolio page) or if you just want a clean “gateway” file.

Here are the two best ways to handle this:

1. Simple PHP Redirect (header function)

Create a file named portfolio.php (or index.php inside a folder) on your main server. This script will instantly send the user to your Hostinger Horizons subdomain.

PHP

<?php
// Redirect to your Horizons subdomain
header("Location: https://portfolio.yourdomain.com/", true, 301);

// Ensure that no subsequent code is executed
exit();
?>

Why use 301? A 301 redirect tells search engines that the move is permanent, which helps transfer any “SEO juice” from your old page to your new Horizons site.

2. Logic-Based PHP Redirect

If you want to keep your main site active but send users to the subdomain only when they click a specific link or if they come from a mobile device, you can use this:

PHP

<?php
$target = "https://portfolio.yourdomain.com/";

// Example: Redirect only if a certain condition is met
if ($_GET['view'] == 'portfolio') {
    header("Location: " . $target);
    exit();
} else {
    // Stay on the main site or go to a default page
    header("Location: https://yourdomain.com/welcome");
    exit();
}
?>

3. The .htaccess Method (Alternative)

Since you work with HTML and PHP, you likely use an Apache server. You can also do this without a PHP file by adding a single line to your .htaccess file in your root directory. This is often faster because the server processes it before even loading the PHP engine.

Apache

Redirect 301 /my-work https://portfolio.yourdomain.com/

In this example, if someone types yourdomain.com/my-work, they are automatically sent to your Horizons subdomain.

Summary of the Flow

1. User visits your main PHP-based site.
2. PHP Script (or .htaccess) intercepts the request.
3. Browser is instructed to head to the Horizons subdomain.
4. Horizons App loads seamlessly under your branded subdomain.

Would you like me to help you create a custom “Landing Gateway” page in HTML/PHP that shows a preview of your Horizons projects before redirecting the user?

Yes

This is a great way to bridge your hand-coded HTML/PHP environment with the AI-powered Horizons apps. A “Gateway” page acts as a professional bridge, giving users a quick preview (and a nice loading experience) before they land on the full app.

Here is a clean, modern template you can save as index.php or gateway.php.

The “Gateway” HTML/PHP Script

PHP

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Launching Portfolio | Your Name</title>
    <style>
        :root {
            --primary: #2563eb;
            --bg: #0f172a;
            --text: #f8fafc;
        }
        body {
            background-color: var(--bg);
            color: var(--text);
            font-family: 'Inter', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            text-align: center;
        }
        .container {
            max-width: 500px;
            padding: 2rem;
        }
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid #1e293b;
            border-top: 5px solid var(--primary);
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin: 20px auto;
        }
        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
        .btn {
            display: inline-block;
            margin-top: 20px;
            padding: 10px 20px;
            color: var(--text);
            text-decoration: none;
            border: 1px solid #334155;
            border-radius: 6px;
            transition: 0.3s;
        }
        .btn:hover { background: #1e293b; }
    </style>
    <meta http-equiv="refresh" content="3;url=https://portfolio.yourdomain.com/">
</head>
<body>

    <div class="container">
        <h1>Opening Portfolio</h1>
        <p>Transferring you to my interactive project gallery built with Hostinger Horizons...</p>
        
        <div class="loader"></div>

        <p><small>Not redirecting? <a href="https://portfolio.yourdomain.com/" style="color: var(--primary);">Click here</a></small></p>
        
        <a href="https://yourdomain.com" class="btn">← Back to Main Site</a>
    </div>

</body>
</html>

How to Customize This:

• The Timer: The line <meta http-equiv="refresh" content="3;url=..."> handles the automatic jump. I set it to 3 seconds so visitors can actually read your message, but you can change 3 to 0 for an instant jump.
• PHP Integration: If you want to log how many people are clicking through to your Horizons site, you can add a simple PHP logging snippet at the very top:PHP<?php $log = "clicks.txt"; $current = file_get_contents($log); $current .= date("Y-m-d H:i:s") . " - User redirected to Portfolio\n"; file_put_contents($log, $current); ?>
• Styling: I used a “Dark Mode” aesthetic which matches the typical “Tech/Dev” look. You can easily swap the hex codes in the :root section to match your main site’s branding.

Why this adds value:

1. Professionalism: It looks like a deliberate “Loading” screen found on high-end SaaS platforms.
2. Context: It tells the user why the URL is changing (e.g., “Transferring you to the interactive gallery”).
3. SEO: It allows you to keep a page on your main domain indexed by Google that points directly to your subdomain.

Would you like me to help you create a “Preview Card” in HTML that you can embed on your main page to show a screenshot of your Horizons site with a “View Project” button?

Yes

This is the perfect way to visually bridge your static HTML pages with your dynamic Horizons apps. Since you’re comfortable with HTML/PHP, we can build a “Project Card” that uses CSS for a professional hover effect and PHP variables to make it easily reusable for multiple Horizons projects.

The Reusable Preview Card (HTML & CSS)

You can drop this code into any of your informational web pages.

HTML

<div class="project-grid">

    <div class="horizons-card">
        <div class="card-image" style="background-image: url('your-horizons-screenshot.jpg');">
            <div class="card-badge">Live App</div>
        </div>
        <div class="card-content">
            <h3>Horizons AI Portfolio</h3>
            <p>A full-stack project gallery featuring dynamic database integration and real-time updates.</p>
            <div class="tech-stack">
                <span>AI-Powered</span>
                <span>Responsive</span>
                <span>Database</span>
            </div>
            <a href="https://portfolio.yourdomain.com" class="view-btn">View Live Project &rarr;</a>
        </div>
    </div>
    </div>

<style>
    .project-grid {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
    .horizons-card {
        width: 350px;
        background: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border: 1px solid #eee;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .horizons-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 40px rgba(0,0,0,0.15);
    }
    .card-image {
        height: 200px;
        background-size: cover;
        background-position: center;
        position: relative;
    }
    .card-badge {
        position: absolute;
        top: 15px;
        left: 15px;
        background: #2563eb;
        color: white;
        padding: 4px 12px;
        border-radius: 20px;
        font-size: 0.75rem;
        font-weight: bold;
    }
    .card-content {
        padding: 20px;
    }
    .card-content h3 {
        margin: 0 0 10px 0;
        color: #1e293b;
    }
    .card-content p {
        font-size: 0.9rem;
        color: #64748b;
        line-height: 1.5;
    }
    .tech-stack {
        margin: 15px 0;
    }
    .tech-stack span {
        font-size: 0.7rem;
        background: #f1f5f9;
        color: #475569;
        padding: 4px 8px;
        border-radius: 4px;
        margin-right: 5px;
    }
    .view-btn {
        display: block;
        text-align: center;
        background: #1e293b;
        color: white;
        text-decoration: none;
        padding: 10px;
        border-radius: 8px;
        font-weight: 600;
        transition: background 0.2s;
    }
    .view-btn:hover {
        background: #2563eb;
    }
</style>

Making it Dynamic with PHP

If you have multiple projects built in Horizons, you don’t want to copy-paste that long HTML block every time. You can use a PHP Array to generate your portfolio automatically:

PHP

<?php
$projects = [
    [
        "title" => "Client Portal",
        "desc"  => "A secure dashboard for managing client data.",
        "url"   => "https://clients.yourdomain.com",
        "img"   => "img/clients.jpg",
        "tags"  => ["Auth", "Database"]
    ],
    [
        "title" => "Lead Gen Page",
        "desc"  => "High-conversion landing page for marketing.",
        "url"   => "https://promo.yourdomain.com",
        "img"   => "img/promo.jpg",
        "tags"  => ["Marketing", "Forms"]
    ]
];

foreach ($projects as $project) {
    echo "
    <div class='horizons-card'>
        <div class='card-image' style='background-image: url({$project['img']});'></div>
        <div class='card-content'>
            <h3>{$project['title']}</h3>
            <p>{$project['desc']}</p>
            <a href='{$project['url']}' class='view-btn'>Launch App</a>
        </div>
    </div>";
}
?>

Summary of Benefits:

• Aesthetic Integration: The CSS ensures the “AI-built” app looks like a premium feature of your manual site.
• Interactive: The “lift-on-hover” effect makes the page feel modern and high-quality.
• Scalability: With the PHP loop, you can add 10 more Horizons projects just by adding 10 lines to your array.

Would you like me to create an image using my generation tools that you can use as a “placeholder” background for these project cards?

Yes

Got questions about any of this? Please leave a comment.