web-course.html

---
layout: default
title: "Web Development for Data Tools"
permalink: /courses/webdev/
---

<section style="padding: 60px 20px; background-color: #1f1f1f; color: #ffffff;">
  <div class="container" style="max-width: 1000px; margin: auto;">

    <h1 style="color: #4CAF50;">🌐 Web Development for Data Tools</h1>
    <p style="font-size: 1.1em; color: #ccc;">
      Learn to build interactive web dashboards, data visualizations, and user interfaces using HTML, CSS, JavaScript, and open-source libraries. Tailored for data scientists, analysts, and researchers.
    </p>

    <h2 style="color:#00BFFF;">📘 What You'll Learn</h2>
    <ul style="padding-left: 20px; list-style: disc; color: #ddd;">
      <li>HTML/CSS structure for clean layouts</li>
      <li>JavaScript basics & DOM manipulation</li>
      <li>Creating charts with Chart.js and Plotly</li>
      <li>Embedding Jupyter and Colab outputs</li>
      <li>Deploying with GitHub Pages</li>
    </ul>

    <h2 style="color:#00BFFF;">📂 Course Format</h2>
    <ul style="padding-left: 20px; list-style: disc; color: #ccc;">
      <li>🧑‍💻 Code-along projects</li>
      <li>🎥 Screencast tutorials</li>
      <li>📝 Final Project: Deploy your Data Portfolio</li>
    </ul>

    <h2 style="color:#00BFFF;">🛠️ Tools You'll Use</h2>
    <ul style="padding-left: 20px; list-style: disc; color: #ccc;">
      <li>Visual Studio Code</li>
      <li>GitHub Pages</li>
      <li>Chart.js / Plotly / D3.js (optional)</li>
    </ul>

    <h2 style="color:#00BFFF;">🎁 Bonus Materials</h2>
    <ul style="padding-left: 20px; list-style: disc; color: #ccc;">
      <li>HTML/CSS/JS boilerplate for dashboards</li>
      <li>GitHub portfolio starter template</li>
    </ul>

    <a href="/toolkits/" style="display: inline-block; margin-top: 30px; background-color: #4CAF50; color: white; padding: 12px 24px; border-radius: 6px; text-decoration: none;">Go to Toolkits →</a>

  </div>
</section>