DropoutDeveloper
Back to Blog
Coding 101

How to Build a Website from Scratch: The Pragmatic Developer Guide

DD
Ankur Ishwar
9 min read Updated Sep 7, 2026
Dropout Developer • Editorial Coding 101

How to Build a Website from Scratch: The Pragmatic Developer Guide

Oct 16, 2023•9 min read

The Drag-and-Drop Illusion

Local computer coaching centers in India love charging college students ₹15,000 to teach WordPress plugins, Wix buttons, or 15-year-old dreamweaver templates. Students finish those classes thinking they know web development, only to freeze the moment someone asks them to open a terminal or edit a raw HTML tag.

Real web engineering does not start with a visual page builder that generates 4 megabytes of bloated JavaScript for a static contact page. It starts with three empty text files in an empty folder: index.html, style.css, and script.js.

If you understand how those three files communicate with the browser engine, you can build anything: landing pages, SaaS dashboards, or client websites that load in under 200 milliseconds on a cheap 4G mobile connection in Patna or Jaipur.

The Architecture: HTML, CSS, and the Browser

Every single website on the internet, from Google to your personal blog, boils down to three responsibilities:

  1. HTML (Structure): The skeleton. It defines headings, paragraphs, images, links, forms, and buttons.
  2. CSS (Presentation): The skin and clothes. It controls layouts, colors, typography, spacing, and mobile screen responsiveness.
  3. JavaScript (Behavior): The nervous system. It handles user clicks, API data fetching, form validation, and interactive animations.

Let us build a clean, responsive developer landing page from scratch with zero third-party dependencies.

Step 1: The Semantic HTML Skeleton

Create a fresh directory and open it in VS Code. Create a file named index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta name="description" content="Ankur Ishwar - Self-Taught Software Engineer & Builder" />
  <title>Ankur Ishwar | Software Engineer</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <header class="site-header">
    <nav class="nav-container">
      <a href="#" class="brand-logo">Dropout Developer</a>
      <ul class="nav-links">
        <li><a href="#projects">Projects</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact" class="btn-nav">Contact</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <section class="hero-section">
      <div class="container">
        <h1 class="hero-title">Building practical software that solves real problems.</h1>
        <p class="hero-subtext">
          Self-taught developer from India. I turn ideas into fast, production-ready web apps
          without enterprise bloat or expensive cloud bills.
        </p>
        <div class="hero-actions">
          <a href="#projects" class="btn btn-primary">View My Work</a>
          <a href="https://github.com/your-username" target="_blank" class="btn btn-outline">GitHub Profile</a>
        </div>
      </div>
    </section>

    <section id="projects" class="projects-section">
      <div class="container">
        <h2 class="section-title">Featured Projects</h2>
        <div class="projects-grid">
          <article class="project-card">
            <span class="project-tag">TypeScript / Node.js</span>
            <h3>Invoice Generator API</h3>
            <p>Generates GST-compliant PDF receipts in under 50ms with automated Razorpay webhook verification.</p>
            <a href="#" class="project-link">Source Code &rarr;</a>
          </article>

          <article class="project-card">
            <span class="project-tag">PostgreSQL / Next.js</span>
            <h3>PG Room Finder</h3>
            <p>Zero-brokerage accommodation portal for tech interns relocating to Bengaluru and Pune.</p>
            <a href="#" class="project-link">Source Code &rarr;</a>
          </article>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <p>&copy; 2026 Ankur Ishwar. Built from scratch with zero framework bloat.</p>
  </footer>
</body>
</html>

Step 2: Clean, Modern CSS Without Frameworks

Now create style.css in the same folder. We will use modern CSS variables, Flexbox for navigation, and CSS Grid for the project cards:

/* Reset and Base Tokens */
:root {
  --bg-primary: #0a0e17;
  --bg-surface: #111827;
  --text-primary: #f3f4f6;
  --text-muted: #9ca3af;
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --border-color: #1f2937;
  --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-main);
  line-height: 1.6;
}

.container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Navigation Bar */
.site-header {
  border-bottom: 1px solid var(--border-color);
  background: rgba(10, 14, 23, 0.8);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: 1080px;
  margin: 0 auto;
  padding: 1rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.brand-logo {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

.nav-links {
  display: flex;
  list-style: none;
  gap: 1.5rem;
  align-items: center;
}

.nav-links a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--text-primary);
}

/* Hero Section */
.hero-section {
  padding: 6rem 0 4rem;
}

.hero-title {
  font-size: 2.75rem;
  line-height: 1.2;
  max-width: 720px;
  margin-bottom: 1.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hero-subtext {
  font-size: 1.2rem;
  color: var(--text-muted);
  max-width: 600px;
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Reusable Buttons */
.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background-color 0.15s ease;
}

.btn-primary {
  background-color: var(--accent);
  color: #ffffff;
}

.btn-primary:hover {
  background-color: var(--accent-hover);
}

.btn-outline {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
}

.btn-outline:hover {
  border-color: var(--text-muted);
}

/* Projects Bento Grid */
.projects-section {
  padding: 4rem 0;
}

.section-title {
  font-size: 1.75rem;
  margin-bottom: 2rem;
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.project-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.project-tag {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 700;
}

.project-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
}

.project-link {
  margin-top: auto;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
}

.project-link:hover {
  color: var(--accent);
}

/* Footer */
.site-footer {
  border-top: 1px solid var(--border-color);
  padding: 2.5rem 0;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.875rem;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
  .hero-title {
    font-size: 2rem;
  }

  .nav-links {
    display: none;
  }
}

Step 3: Free Hosting (Zero Rupee Deployment)

Never pay ₹3,000 per year for shared cPanel hosting just to host static HTML files. Modern developer platforms host static files across global CDN edge nodes for exactly zero rupees:

  1. GitHub Pages: Put your project in a GitHub repository, click Settings > Pages, select main branch, and hit save. Your site goes live at https://username.github.io/repo-name/ within 60 seconds.
  2. Cloudflare Pages: Connect your GitHub repo to Cloudflare Pages. You get unlimited bandwidth, instant global caching across 300+ edge data centers (including Mumbai, Delhi, Chennai), and free SSL certificates.

The Next Step for Real Engineering Growth

Once your static site is live on the internet, do not stop. You now possess the foundation of web technology. Next, add a contact form using an API endpoint, connect a custom domain (.in or .dev), and add interactive UI features with vanilla JavaScript.

Writing raw HTML and CSS teaches you how browsers actually paint pixels to screens. No drag-and-drop tool or generic theme generator can ever replace that deep understanding.

Found this useful?
View all articles

Keep Reading

Related Articles

Coding 101 13 min

Best Free Developer Resources to Host Full-Stack Apps

Discover verified permanent free developer resources to host, build, and scale full-stack and AI apps for zero rupees with top always-free tiers, databases, and compute.

Read article
Coding 101 7 min

Do You Still Need to Learn to Code in the AI Era?

AI can write most of the code now. So what is actually left for you to learn, and why the developers who skip it get stuck the fastest.

Read article
Coding 101 9 min

Voice Search Architecture: Schema.org JSON-LD, Conversational Queries, and Web Audio APIs

Voice search is not magic SEO pixie dust. It is structured data extraction and semantic indexing. Learn how search engines parse Speakable Schema, long-tail conversational syntax, and the browser Web Speech API.

Read article
Learn with Dropout Developer

Build real software with AI

Step-by-step learning paths, vibe coding tutorials, and certified developer programs designed for the modern engineer.

Explore Free Courses → Browse All Posts