In this section, you'll learn how to put your website online so others can see it. We'll cover:

• Saving your code with Git and GitHub
• Deploying your site with Netlify
• Setting up a custom domain with Namecheap

---

Git is a version control system—it tracks changes to your code. GitHub is a website where you can store your Git projects online and collaborate with others.

Why Use Git?

• Track every change you make
• Work with others on the same code
• Roll back if something breaks
• Keep your project backed up online

Getting Started

In your project folder, run these commands in the terminal:

# Initialize Git in your project
git init

# Add your files
git add .

# Save your changes with a message
git commit -m "Initial commit"

Connect to GitHub

Next, create a new repository on GitHub, then connect it like this:

# Add your GitHub repo as the remote
git remote add origin https://github.com/yourusername/your-repo.git

# Push your code
git push -u origin main

Done! Your code is now online.

---

Netlify makes it super easy to host static websites. It's fast, free, and beginner-friendly.

Why Netlify?

• Free hosting with no ads
• Automatic builds from GitHub (optional)
• Custom domains + HTTPS
• Built-in support for forms and functions

Deploy with Drag + Drop

This is the easiest way to go live:

• Build your project (usually with npm run build)
• Locate your _site or dist folder (depends on your setup)
• Visit app.netlify.com/drop
• Drag your folder into the drop zone
• Wait a few seconds... and boom—you're live!

📌 You'll get a unique netlify.app URL. You can customize it later.

---

If you want your own ".com" (or something cooler), here's how to buy and connect it using Namecheap.

Step 1: Buy a Domain

• Go to namecheap.com
• Search for your desired domain
• Add it to your cart and check out

Step 2: Connect It to Netlify

• In Netlify, go to your site dashboard
• Click "Domain Settings"
• Select "Add Custom Domain"
• Enter your domain name
• Follow the steps to update your Namecheap DNS settings

💡 Tip: It may take a few hours for your DNS changes to take effect.

---

Custom Favicon

That little icon in the browser tab? Here's how to add one:

<link rel="icon" type="image/x-icon" href="/favicon.ico">

Meta Tags for SEO

Meta tags help search engines and social platforms understand your site:

<meta name="description" content="Your site description">
<meta name="keywords" content="your, keywords, here">
<meta property="og:title" content="Your Title">
<meta property="og:description" content="Your Description">
<meta property="og:image" content="https://your-site.com/og-image.jpg">

Contact Forms with Netlify

Netlify supports simple contact forms with no backend required. Just add the data-netlify attribute:

<form name="contact" method="POST" data-netlify="true">
  <input type="hidden" name="form-name" value="contact">
  <input type="text" name="name" placeholder="Your Name">
  <input type="email" name="email" placeholder="Your Email">
  <textarea name="message" placeholder="Your Message"></textarea>
  <button type="submit">Send</button>
</form>

---