Hang up… please wait, we're loading
From "what's a website?" to your first live site — step by step, no nonsense, all real.
Every website you visit loads HTML from a server.
A website is a collection of files (HTML, CSS, JS) stored on a server and accessible via a URL. Think of HTML as the skeleton, CSS as the skin, and JS as the muscles that make everything move.
A website is a collection of files (HTML, CSS, JS, images) stored on a computer called a server, accessible via the internet through a unique address called a URL (Uniform Resource Locator).
The content & structure — headings, paragraphs, images, links
The visual styling — colors, fonts, layouts, animations
The behavior — interactivity, animations, data fetching
When you type https://google.com in your browser, it finds Google's server, downloads the files, and renders them. That's a website!
The internet is a massive network of computers connected by cables, fiber, and wireless signals. Here's what happens when you visit a website — in 6 steps:
You type https://example.com into your browser and hit Enter. The browser needs to find where this lives.
Your computer asks a DNS (Domain Name System) server: "What's the IP address for example.com?" The DNS server replies: "It's 93.184.216.34."
Your browser connects to that IP address (the web server) using TCP/IP — like an electronic handshake. HTTPS makes this connection secure.
Your browser sends an HTTP GET request: "Hey server, give me the file at /index.html please."
The server sends back the HTML file along with an HTTP status code (200 = OK, 404 = Not Found, 500 = Server Error).
Your browser reads the HTML, downloads linked CSS and JS files, builds the DOM tree, and paints the page you see.
When you type "nexray.in" in your browser, the DNS (Domain Name System) translates that human-readable name to a specific IP address like 192.168.1.1 — where the actual server lives.
A domain name is the human-friendly address of a website (like youtube.com). Underneath, every server has a numeric IP address (like 142.250.80.78). DNS translates domain names to IP addresses — it's the internet's phone book.
Domain registrars sell domain names. Popular options in 2026:
Often the cheapest option. .com domains ~$9-12/year. Great interface, free WhoisGuard privacy.
Budget PickSells domains at wholesale price (no markup!). Best for privacy. Requires a Cloudflare account.
Best ValueSimple, clean. Google Domains was acquired but the service continues under Squarespace Domains.
Beginner Friendly| Record | Purpose | Example |
|---|---|---|
A |
Domain → IPv4 address | mysite.com → 76.76.21.21 |
AAAA |
Domain → IPv6 address | mysite.com → 2606:50c0:...::1 |
CNAME |
Domain → another domain | www → mysite.com |
MX |
Email routing | mysite.com → mail.google.com |
TXT |
Verification, SPF, DKIM | v=spf1 include:... |
You don't need to buy a domain or pay for hosting to get started. Here are the best free hosting options in 2026:
Push to GitHub → auto-deploy. Free subdomain like mysite.vercel.app. Instant HTTPS. Best for static sites + Next.js.
Drag & drop deploy or GitHub. Free at mysite.netlify.app. Great for forms, functions, and split testing.
Free hosting directly from a GitHub repo. URL: username.github.io/repo. Perfect for portfolios.
Deploy from git. Ridiculously fast edge network. Free unlimited bandwidth. URL: mysite.pages.dev.
HTML (HyperText Markup Language) is the skeleton of every webpage. It defines content and structure using tags — keywords wrapped in angle brackets.
<p> and a closing tag </p>. Everything between them is the content. Some tags are self-closing like <img /> and <br />.Every HTML document starts with this boilerplate. This is the minimum required structure for a valid HTML5 page:
<!-- This doctype tells browsers: "I'm HTML5" --> <!DOCTYPE html> <!-- The root element. lang="en" helps search engines & screen readers --> <html lang="en"> <!-- HEAD: Invisible settings & metadata --> <head> <!-- Character encoding - always include this first --> <meta charset="UTF-8" /> <!-- Responsive viewport for mobile devices --> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- SEO description (shows in Google results) --> <meta name="description" content="My first website - built in 2026!" /> <!-- Tab title --> <title>My First Website</title> <!-- Link to your CSS file --> <link rel="stylesheet" href="style.css" /> </head> <!-- BODY: Everything visible on the page --> <body> <h1>Hello, World! 🌍</h1> <p>My first website is live. I'm a web developer now!</p> <!-- Link to your JS file — at the bottom for performance --> <script src="script.js"></script> </body> </html>
These are the tags you'll use in 95% of websites. Master these first.
<!-- Headings: h1 = biggest, h6 = smallest --> <!-- Only use ONE h1 per page for SEO --> <h1>Main Title</h1> <h2>Section Heading</h2> <h3>Sub-heading</h3> <!-- Paragraphs --> <p>This is a paragraph of text.</p> <!-- Bold & Italic --> <strong>Bold text</strong> <em>Italic text</em> <!-- Line break --> <br /> <!-- Horizontal rule (divider) --> <hr />
<!-- Links --> <a href="https://google.com"> Visit Google </a> <!-- Open in new tab --> <a href="https://google.com" target="_blank" rel="noopener"> New Tab Link </a> <!-- Images --> <!-- alt= describes image for SEO & accessibility --> <img src="photo.jpg" alt="Description of photo" width="400" loading="lazy" />
<!-- Unordered list (bullet points) --> <ul> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> </ul> <!-- Ordered list (numbered) --> <ol> <li>Buy domain</li> <li>Build site</li> <li>Deploy it</li> </ol>
<!-- Semantic tags = meaningful structure --> <header> <!-- top of page --> <nav>...</nav> </header> <main> <!-- primary content --> <article>...</article> <section>...</section> <aside>...</aside> </main> <footer> <!-- bottom of page --> ... </footer> <!-- Generic containers --> <div>Block container</div> <span>Inline container</span>
Forms let users send you data — contact forms, sign-ups, search bars. Here's a complete contact form example:
<form action="https://formspree.io/f/YOUR_ID" method="POST"> <!-- Text input --> <label for="name">Your Name</label> <input type="text" id="name" name="name" placeholder="John Doe" required /> <!-- Email input --> <label for="email">Email</label> <input type="email" id="email" name="email" placeholder="you@example.com" required /> <!-- Textarea for longer messages --> <label for="msg">Message</label> <textarea id="msg" name="message" rows="5" placeholder="Write your message..." required ></textarea> <!-- Select dropdown --> <label for="subject">Subject</label> <select id="subject" name="subject"> <option>General Question</option> <option>Collaboration</option> <option>Feedback</option> </select> <!-- Checkbox --> <input type="checkbox" id="agree" name="agree" required /> <label for="agree">I agree to the terms</label> <!-- Submit button --> <button type="submit">Send Message </button> </form>
netlify to your form tag and it works automatically if hosted on Netlify. Zero backend code needed!Hosting is where your website files live. Here's a comparison for 2026:
| Host | Free Tier | Best For | Custom Domain |
|---|---|---|---|
| Vercel | Yes | Static + Next.js | Free |
| Netlify | Yes | Static + Forms | Free |
| GitHub Pages | Yes | Portfolio / docs | Free |
| Cloudflare Pages | Yes | Fast global edge | Free |
| Railway.app | Limited | Node.js / backend | Free |
| Render | Limited | Apps + databases | Free |
GitHub Pages is the easiest way to host a static website for free. Here's how to go from zero to live in under 5 minutes:
Go to github.com and sign up for free. GitHub is where all your code will live.
Click "New" → name it username.github.io (replace with your actual username). Make it Public. Check "Add README". Click Create.
Click "Add file" → "Upload files" → Drag your index.html and other files → Commit changes.
Go to Settings → Pages → Source: "Deploy from a branch" → Branch: main → Save. GitHub builds your site automatically.
In ~60 seconds, visit https://yourusername.github.io — your site is live on the internet! 🎉
yourusername.github.io. Cloudflare as your DNS provider + GitHub Pages = free HTTPS custom domain hosting. These platforms are even faster to deploy than GitHub Pages. The easiest way: drag & drop your project folder.
# Install Vercel CLI npm install -g vercel # Navigate to your project folder cd my-website # Deploy! Follow the prompts vercel # Your site is now live at https://my-website.vercel.app # ── Or with Netlify CLI ── npm install -g netlify-cli netlify deploy --prod --dir=.
Build and deploy a simple portfolio landing page with: