Getting Started

Welcome to DevDojo Sites 👋

Sites is going to help you rediscover your joy and excitement for building websites. You write plain HTML with Tailwind CSS and a sprinkle of Blade — the same templating language Laravel developers already know — and Sites adds just enough magic on top ⚡: layouts, reusable components, JSON-powered content, a library of prebuilt sections, and one-click publishing.

No build steps. No config files. No node_modules folder the size of the moon. 🌕 Just you, your ideas, and a live preview that keeps up. 🏄‍♂️

#What is a site, exactly?

A site is a small slice of a Laravel app — a folder of files laid out the way Laravel lays them out:

resources/views/pages/index.blade.php          your homepage (about.blade.php → /about)
resources/views/components/layouts/main.blade.php   the shared shell around every page
resources/views/components/nav.blade.php        reusable pieces you drop in anywhere
resources/data/collections/team.json             data your pages can loop over
resources/css/site.css                           your custom CSS
public/robots.txt                                files copied straight to your site root

If you can edit HTML, you can build a site. And if you can't (yet)? The starter templates and prebuilt sections will carry you a long way. 🔥

#The dashboard

The dashboard opens with a prompt — "What kind of site should we build?" — and lists every site you've made as a card below it: name, web address, a Live or Draft badge, and when you last touched it. Hover a card for quick actions: open the live site, download a ZIP, or delete the site.

#Create your first site

The fastest way is to describe it ✨ — on your dashboard, type what you want into the prompt box:

"a landing page for my coffee shop, warm colors, a menu section"

Press Enter and you land straight in the builder on the homepage. Prompt-first sites do not preselect a starter template: depending on the platform's active design mode, the AI's first move may be to write down a design system for your brief — resources/design.md, covering colors, type, spacing, and a ready-to-use set of design tokens — before it paints the real navigation and hero from that document (see Your Site's Design System); by default it instead paints straight against the platform's own built-in premium design bar, with no separate document. Either way, it keeps that homepage visible while it finishes the remaining sections and 2–3 page site. Every internal navigation and call-to-action link must have a finished page before the build is marked ready. Each file ticks by in the AI panel, and you can safely close the tab — we'll email you the moment it's ready.

Prefer to start from a template? Also great:

1. Click start from a template just under the prompt box.
2. Give it a name — this also becomes your site's web address (a site called "Mara's Portfolio" lives at maras-portfolio).
3. Pick a starter template — Blank for the minimal skeleton, or any of the complete sites in the gallery (Lumen, Aria, and friends).
4. Click Create Site, and you're dropped straight into the builder.

#A tour of the builder

The builder has three modes, switched with the Preview / Edit / Code control front and center in the top bar. All three show the same files — pick whichever fits the moment, or bounce between them. Down the left edge runs a slim activity rail — Assistant, Pages, Content, Media — and clicking an item opens that panel beside the canvas (one at a time; click again to tuck it away). With everything closed, the canvas fills the screen and a floating "Ask AI…" composer waits at the bottom — type there and the Assistant opens with your request already running.

#Preview 👀

Your site exactly as a visitor sees it — click around, follow links, switch pages, resize to any device. No outlines, no editing chrome, nothing in the way.

#Edit 🎨

The default mode. The same live canvas, awake: hover a section and it outlines with a name chip; click it and its options slide in over the Assistant — friendly form fields for its text, images, and links, with a back arrow returning to the chat. A floating toolbar handles move / duplicate / edit content / edit code / delete, and + Add section pills between sections open a popup with a 289-section library — every section is built from your site's own design tokens, so it arrives already wearing your palette — plus "Community" and "My designs" tabs. The full story is in The Builder.

#Code ⌨️

The code workspace: a real file tree beside a full-width code editor (a split toggle brings the live preview back alongside). The tree mirrors a Laravel site:

• resources/views/pages/ — the pages of your site. Each .blade.php file here is a URL.
• resources/views/components/layouts/ — shared page shells with a {{ $slot }} where page content goes.
• resources/views/components/ — your reusable pieces (nav, footer, sections…). Edit one, and it updates on every page that uses it.
• resources/data/ — JSON collections and your global site.json.
• resources/css/ and public/ — your CSS and verbatim files.

The toolbar above the tree uploads files, creates files and folders, and deletes; hovering a file reveals rename and delete buttons. The editor speaks HTML, CSS, JavaScript, JSON, and Markdown with full syntax highlighting, and changes autosave as you type — after a short pause, your work is saved and the preview refreshes. Press ⌘S to save immediately, or ⌘K to quick-open any file by name.

#The live preview

The preview is your actual site, rendered live — not a mockup, the same rendering your visitors will see. Grab the drag handles on its left and right edges to freely resize it; as you drag, a badge shows the exact width and the Tailwind breakpoint you're at (like 1092px · lg) — perfect for finding exactly where your responsive design changes.

#The top bar

From left to right:

• Your site's name + the DevDojo mark — click it for the builder menu: Documentation, Settings, Upload, and more.
• Preview / Edit / Code — the mode control, right beside the name: browse the site, edit the canvas, or open the code workspace.
• The page pill (centered) — devices, refresh, the page switcher, and open-in-tab.
• Publish — ship it. 🚀

The top bar also carries the page pill, centered over the canvas: a device button that cycles Desktop → Tablet → Phone, a refresh button, the current page ("Homepage" for /, the route for everything else) dropping down into the page switcher (each row shows the page's route, with a settings gear, an open-in-tab arrow, and an inline New Page), and a preview-in-new-tab button. Sections are added with the + pills right between sections on the canvas.

#Keyboard shortcuts

#Make your first edit

Time to make it yours. Change the headline on your homepage — in Edit or Code:

<h1 class="text-4xl font-bold">Hello, internet 👋</h1>

#Publish it 🚀

When you're ready for the world to see it, hit the blue Publish button. Your site goes live instantly at its own address, and the button becomes a Live menu where you can open the live site or unpublish. See Publishing for the details.

That's it. You just built and shipped a website. Told you this would be fun. 🎉

#Where to next

• The Builder — the visual editor, section by section
• Your Site's Design System — resources/design.md, and how to restyle a site
• Page-Based Routing — a file is a URL; that's the routing system
• Layouts — the shell around your pages
• Components — build once, use everywhere
• Collections — data-driven pages
• Sections — the prebuilt section library
• Templates — what each starter gives you
• Publishing — preview, publish, export
• Syntax Reference — every tag and expression on one page