Claude Vault | Inner Web Solutions

Getting Started The Process

Visual Studio Code is the workspace where your website actually lives — a free, professional-grade editor used by developers everywhere. Every page, style, and image comes together in one place, and changes preview the instant you make them. You don't need to be a programmer to open it; think of it as the desk where the work happens.

Claude Code is the collaborator that sits right inside that workspace. Instead of memorizing syntax or digging through documentation, you describe what you want in plain language — "make the header smaller," "add a contact form," "match the colors to my logo" — and Claude makes the change directly in your files, explaining each step as it goes.

Together they close the old gap between idea and result. The average user can direct real design and development work in minutes, watch it happen live in VS Code, and keep full ownership of the finished site — no agencies, no waiting on quotes, no black box. The two tools turn "I wish my site could do that" into something you can simply ask for.

Getting Started Purchases

Signing Up for Claude

Claude is built by Anthropic and lives at claude.ai. Click Sign up, create an account with your email (or continue with Google), and verify your address — you'll land in the Claude chat interface on the free plan. The free plan is enough to get a feel for Claude, but real design and development work in Claude Code — along with the message limits a full session needs — calls for a paid plan.

Claude Pro

Pro is the entry paid plan and the practical starting point for most users. It unlocks Claude Code, raises your message limits, gives access to the latest models, and lets you work through a full session without hitting the free-tier ceiling. For light, occasional website edits, Pro is usually all you need.

CA$29/mo · US$20/mo

Claude Max

Max is for heavier, sustained work — long build sessions, larger projects, or days when you're directing Claude continuously. Its two tiers raise your usage to roughly 5× and 20× Pro, so you spend less time waiting on limits and more time shipping. If you regularly hit Pro's caps, Max is the upgrade.

5× usage — CA$147/mo · US$100/mo

20× usage — CA$294/mo · US$200/mo

Getting Started Installations

Visual Studio Code

Go to code.visualstudio.com and click the blue Download for Windows button.
Open the downloaded VSCodeUserSetup file from your Downloads folder.
Accept the license agreement and click Next through the prompts. On "Select Additional Tasks," tick Add to PATH and Create a desktop icon.
Click Install, then Finish — VS Code opens automatically.
Optional: right-click its taskbar icon and choose Pin to taskbar for quick access.

Claude AI Integration

Install Node.js (LTS) from nodejs.org — run the .msi installer and accept the defaults.
Open VS Code, then open the integrated terminal with View › Terminal (or Ctrl + `).
In the terminal, run: npm install -g @anthropic-ai/claude-code
Start it by typing claude and pressing Enter. Sign in with your Anthropic account when prompted.
You're connected — describe what you want in plain language and Claude edits your files directly.

Visual Studio Code Idioms

A few things trip up almost everyone at first. None are serious — knowing them up front saves a lot of head-scratching.

Open the folder, not just a file. VS Code works best when you open your whole project folder (File › Open Folder). If the sidebar looks empty, you probably opened a single file instead. (File › Open Folder)
The Explorer is your file list. The left sidebar shows every file in your project. If it disappears, toggle it back with Ctrl/Cmd + B.
Changes aren't live until you save. A dot on a file's tab means unsaved edits; press Ctrl/Cmd + S. You can switch on auto-save under File › Auto Save.
Use the built-in terminal. View › Terminal opens a command line already pointed at your project folder — run install commands there, not in a separate window.
The Command Palette finds everything. Ctrl/Cmd + Shift + P searches every command and setting by name. When you can't find something, start there.
Extensions add the real power. On its own VS Code is a plain editor; features like Live Server and language support come from the Extensions panel (the blocks icon in the left bar).
File names are case-sensitive on the web. Image.png and image.png are different files online, so a mismatched link can break a live site even though it worked on your computer.
Leave generated folders alone. Folders like node_modules are managed automatically — editing inside them gets overwritten and can cause errors.
Red squiggles are hints, not crashes. Coloured underlines flag possible issues; hover to read them. The site can usually still run while you sort them out.
You can always undo. Ctrl/Cmd + Z steps back, and the Source Control panel can restore a file to its last saved version if you go too far.

Claude Code Idioms

Working with Claude is a conversation, not a command line. These habits make that conversation smooth from day one.

Claude works in one folder at a time. It edits the project you have open. If changes land in the wrong place, check which folder the session is in (see the Important Notes recap).
Be specific. Vague prompts get vague results — “increase the heading size and add space below it” beats “make it nicer.”
Claude reads your files, not your screen. It can't see your browser, so describe what you're looking at: “the button is too close to the text.”
Review changes before moving on. Claude shows what it's about to do — skim it. You're the director, and you can always say “undo that” or “try another approach.”
Build up gradually. While you're learning, one change per prompt makes it easy to see what each step did; bundling ten requests hides the cause when something looks off.
Context can reset. After a long gap or a fresh session, Claude may not recall earlier details — restate the important specifics if it seems lost.
Permission prompts are normal. Claude may pause to confirm before running a command or editing files; that's a safety check, not an error.
Describe the goal, not the jargon. If you're unsure of the exact term, say what you want to happen — Claude will map it (the Lingo Library helps here).
Save, then refresh to preview. After Claude edits, reload the page in your browser. If you don't see the change, it's often a caching issue rather than a failure.
Shorthand needs an established routine. Abbreviated prompts only work once you and Claude share a workflow; abbreviating too early leads to mistakes (see the Recap).

Uploading Files Going Live

Your site lives on your computer while you build it, but the world can only see it once the files are copied up to your web host — the always-on server behind your domain. “Uploading” just means moving the finished files from a folder on your machine into the host's public folder (usually named public_html, www, or htdocs). Here are the ways to do it, most reliable first.

Method 1 — FTP Recommended

FTP (File Transfer Protocol) uses a small free app to move files between your computer and the server, exactly like dragging between two folders. We recommend FileZilla — it's free and identical on PC and Mac. First grab your FTP details from your host: a host/server address, username, password, and usually port 21 (or port 22 for the more secure SFTP).

FileZilla (FTP)

Download FileZilla from filezilla-project.org and run the .exe installer, accepting the defaults.
Open FileZilla. In the bar across the top, enter your Host, Username, Password, and Port (21), then click Quickconnect. For SFTP, put sftp:// in front of the host and use port 22.
The left panel is your computer; the right panel is the server. On the right, double-click into public_html.
On the left, browse to your project folder (e.g. C:\Users\You\Documents\my-site) and select everything inside it — index.html, images, CSS, and JS.
Drag the selected files from the left panel into public_html on the right. Watch the transfer queue at the bottom until every file reads successful.
Open your domain in a browser to confirm it's live. To update later, just re-upload the changed file and choose Overwrite when asked.

Method 2 — Host File Manager

Most hosts include a File Manager in their control panel (often cPanel), so you can upload straight from your browser with nothing to install. It's handy for a quick fix or a few files; for a whole site, FTP is faster. Uploading a single .zip and extracting it on the server is the quickest way to move many files at once.

cPanel File Manager

In File Explorer, open your project folder, select all the files inside, right-click and choose Send to › Compressed (zipped) folder to make a .zip.
Log in to your host and open cPanel › File Manager.
Double-click into public_html, then click Upload in the toolbar.
Drag your .zip onto the upload page (or click Select File) and wait until it reaches 100%.
Back in File Manager, right-click the uploaded .zip, choose Extract, then delete the .zip to keep things tidy.
Check that index.html sits directly inside public_html (not in a sub-folder), then load your domain.

Other Methods

VS Code SFTP extension. An extension such as SFTP can push files to the server every time you save. Convenient once you're settled in, though there's a small config file to set up first.
Drag-and-drop hosts. Services like Netlify let you drag your whole site folder onto a web page to publish it — no FTP details required.
Git-based deploys. Hosts like Netlify, Vercel, or GitHub Pages can republish automatically whenever you push your code — the most hands-off option once a project is wired up.
Your host's own uploader. Managed hosts and site builders often have a Publish button that handles the upload for you — check the dashboard before reaching for FTP.

Keeping Local Files Organized

A tidy folder on your computer makes uploads quick and mistakes rare — what you see locally should mirror what's on the server.

One folder per site. Keep every project in its own clearly named folder (e.g. my-site), with index.html at the top level and sub-folders like images/, css/, and js/ inside.
Mirror the server. Arrange your local folders exactly as they sit in public_html. When the structures match, links never break on upload.
Sort by date to find recent work. In File Explorer (PC) click the Date modified column header; in Finder (Mac) use View › Sort By › Date Modified. The files you just changed jump to the top — exactly the ones to re-upload.
Name files clearly and consistently. Use lowercase, no spaces, and hyphens — hero-banner.jpg, not Hero Banner (1).jpg. The web is case-sensitive, so tidy names prevent broken links.
Keep originals separate. Store full-size photos, source art, and drafts in an _originals folder you don't upload — only the web-ready versions go to the server.
Date your backups. Before a big change, copy the folder and append the date — my-site_2026-06-22. Sorting by name then lines your backups up in order.
Clear the clutter. Delete stray system files like .DS_Store (Mac) and Thumbs.db (PC), plus any test or old copies, before uploading so they never reach the live site.

Troubleshooting

Can't connect? Re-check the host, username, and password (all case-sensitive). If it still fails, try SFTP on port 22, or switch FileZilla to passive mode under Edit › Settings › FTP — most hosts and home routers prefer it.
Site shows “Index of /” or a file list. Your home page must be named exactly index.html and sit directly inside public_html, not in a sub-folder.
Images or styles missing online but fine locally. Almost always a case or path mismatch: Logo.PNG in your HTML won't find logo.png on the server. Match names and folders exactly.
Changes aren't showing up. Usually the browser cache, not a failed upload — hard-refresh with Ctrl + F5 (PC) or Cmd + Shift + R (Mac), or check the file's date in File Manager to confirm the new version landed.
“Permission denied” on upload. You may be outside public_html or lack write access. Confirm the folder, and if needed set folders to 755 and files to 644 (right-click › File permissions in FileZilla or File Manager).
Upload stalls or files arrive partial. A dropped connection — re-upload, and in FileZilla right-click the failed queue items and choose Reset and requeue. For very large files, some browser uploaders cap the size; use FTP or a .zip instead.
Mixed-content warning (padlock with a slash). A page loaded over https:// is pulling a file over http://. Update those links to https://, or use relative paths like images/photo.jpg.
Whole site landed in a sub-folder. If you dragged the folder instead of its contents, the site ends up at yoursite.com/my-site/. Move the files up one level into public_html and delete the empty folder.

Lingo Library Prompting

A shared vocabulary makes Claude faster and more accurate — the more precisely you name what you want, the closer the first result lands. Terms with a dashed underline have a hover example, and the + adds a term to My Notes. Tick a term's box and hit Build PDF to print your own glossary.

Padding — the space inside an element, between its content and its edge.Example: “add 20px of padding inside the buttons.”
Margin — the space outside an element, between it and the elements around it.
Hero — the large banner area at the very top of a page.Example: “make the hero shorter on mobile.”
Above the fold — the part of a page that is visible before any scrolling.
Viewport — the visible area of the page in the browser; it changes with screen size.
Container (wrapper) — a box that holds and constrains a group of elements.
Grid — an invisible framework of rows and columns used to line content up.
Gutter — the gap between columns or grid items.
Whitespace — intentional empty space that gives a layout room to breathe.
Alignment — how elements line up: left, center, right, or justified.
Hierarchy — using size, weight, and color to signal what matters most.
Typography — the overall style and arrangement of text.
Typeface (font) — the design of the lettering, such as serif or sans-serif.
Serif / Sans-serif — fonts with small “feet” on the letters versus those without.
Font weight — how bold or light the text is.Example: 400 is regular, 700 is bold, 300 is light.
Line height (leading) — the vertical spacing between lines of text.
Letter spacing (kerning) — the horizontal spacing between letters.
Hex code — a six-character code for an exact color.Example: #2e3192 is the brand blue; #ff6a00 is the orange.
Contrast — the brightness and color difference that keeps text readable.
Opacity — how transparent (see-through) an element is.
Gradient — a smooth blend from one color into another.
Accent color — a secondary color used to draw the eye, like buttons and links.
CTA (call to action) — a button or link that prompts the user to act.Example: a “Get Started” or “Sign Up” button.
Navigation (nav) — the menu used to move around the site.
Responsive — a layout that adapts to phone, tablet, and desktop sizes.
Breakpoint — the screen width where the layout shifts for responsiveness.Example: phones are usually 720px wide or less.
Hover state — how an element looks while the cursor is over it.Example: “make the button turn orange on hover.”
Modal (pop-up) — a window that overlays the page to focus attention.
Carousel — a rotating slideshow of content.
Favicon — the tiny icon shown in the browser tab.
Asset — any file used on the site: an image, logo, icon, or font.
Footer — the bottom section of a page, usually holding links, contact details, and copyright.
Animation — movement or change applied to an element over time.
Format — how text and content are arranged and styled (bold, lists, spacing, and so on).
Bold — heavier, thicker text used for emphasis.
Italicize — to slant text for emphasis or for titles.
Bullet list — a list of items, each marked with a dot.
Wrap — when content flows onto the next line once it runs out of room across, instead of overflowing (e.g., text wrapping or flex items wrapping).

Note: Even without knowing these terms, Claude will be very accurate, but, even knowing some of these terms and techniques will speed up your efficiency (which in turn saves money).

Important Notes Recap

Identify which folder you are in if Claude has been inactive for more than 30 minutes (less of a concern if you are working on a single project consistently)
Abbreviated prompts only work if there is an established workflow for Claude to follow (abbreviating without context can lead to error)
In VS Code, if a blue “Update” button appears, it's recommended to update as soon as you see it.
Go one step at a time — that way, if a mistake or wrong result occurs, you can simply prompt “undo” to return to the prior state.
When adding special effects (animations, transitions, interactive flourishes), keep it to 2–3 per prompt for the best accuracy. A large volume of content or data commands, however, can be executed in a single prompt with excellent accuracy.
Structure is a big key for communicating with Claude well. Use colons, bullets and other formatting to identify association
If you are trying to describe something, but not quite sure what it is called, you can also take a Screenshot of the current page and paste it in the prompt (make sure you type something, though).
If you press enter inside VS Code by accident (before you were actually finished your thought), simply hit the STOP icon (bottom-right). Then you can copy and paste your interrupted text into the prompt field and start again.
REMEMBER: Shift + Enter will forward your cursor to the next line.

Member Resources

Under-Budgie__real-estate-website Realtor website that includes backend, mortgage calculator, industry-specific animation.
Download .zip
Mula-Hoopla__online-book Online book that includes flip animation on 2-page spread layout. Author backend included.
Download .zip
Cookie-Consent-Banner Drop-in cookie consent bar — Accept / Decline, remembers the choice, zero dependencies.
Download .zip
FAQ-Accordion Accessible collapsible FAQ — click to expand, smooth height animation, keyboard-friendly.
Download .zip
Back-to-Top-Button Floating button that fades in after scrolling and smooth-scrolls back to the top.
Download .zip
Image-Lightbox-Gallery Click-to-enlarge photo gallery with a dark overlay, captions, prev/next and keyboard control.
Download .zip
Scroll-Reveal-Animations Fade-and-rise elements into view as the visitor scrolls (IntersectionObserver, reduced-motion safe).
Download .zip
Dark-Mode-Toggle Light/dark theme switch — remembers the choice, follows the OS preference, smooth transition.
Download .zip
Toast-Notifications Slide-in toast popups (success / error / info) with auto-dismiss — call showToast() anywhere.
Download .zip
Animated-Stat-Counter Numbers that count up when they scroll into view — perfect for stats and highlights.
Download .zip
Before-After-Slider Drag-to-compare image slider — reveal an “after” over a “before”. Touch + mouse.
Download .zip
Logo-Marquee Seamless infinite logo/text ticker (“trusted by” strip) that pauses on hover.
Download .zip
Command-Palette Advanced ⌘K command launcher — fuzzy-search every page & action with full keyboard control. Grouped results, recent history, zero dependencies.
Download .zip

2Day Reward Resources

Must be a 2Day Member to gain access

Under-Budgie__real-estate-website Realtor website that includes backend, mortgage calculator, industry-specific animation.
Download .zip
Vineham-Auto__dealership-website Vineham Auto is an automotive frontend with backend build. Perfect for a small or medium sized auto dealer. Track your sales, leads, test drives, vehicle inventory and fuel consumption all from one location!
Download .zip
Chai-Zebra__music-artist-website Music-artist website with an album showcase, a built-in song player with audio previews, tour dates, and an animated hero — ready to drop in any band or solo act.
Download .zip
Vineham-Atlas__history-website History website exploring the world region by region — interactive Europe and North America pages, rich imagery, and a cinematic water-loop hero.
Download .zip

Video Tutorials

Quick, animated walkthroughs — click a tutorial to play it right here.