CSS এর হাতেখড়ি (পর্ব

এগারো পর্ব শেষে এখন আমরা CSS-এর প্রায় সবকিছু জানি — Selector, Color/Font, Box Model, Display, Position, Flexbox, Grid, Media Query, Pseudo-class/element, Animation, ও CSS Variables। আজকের এই শেষ পর্বে আমরা HTML সিরিজের পর্ব ১০-এ বানানো সাদামাটা ল্যান্ডিং পেজটাকে সম্পূর্ণ সুন্দর ও responsive বানিয়ে ফেলবো।

আমরা কী কী প্রয়োগ করবো

পর্ব	এই পেজে যেখানে ব্যবহার হবে
পর্ব ১ ও ১১	`:root`-এ CSS Variables দিয়ে থিম সেট করা
পর্ব ২	Color, gradient, font styling
পর্ব ৩	Box model — padding, border-radius, box-sizing
পর্ব ৫	Sticky navbar
পর্ব ৬-৭	Flexbox দিয়ে navbar ও form layout
পর্ব ৮	Grid দিয়ে skills ও responsive layout
পর্ব ৯	Media Query দিয়ে মোবাইল-ফ্রেন্ডলি বানানো
পর্ব ১০	Hover effect, transition, animation

সম্পূর্ণ কোড

<!DOCTYPE html>
<html lang="bn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>আরিফ — ওয়েব ডেভেলপার</title>
<style>
  :root {
    --primary: #3949ab;
    --primary-dark: #1a237e;
    --accent: #e91e63;
    --bg: #fafafa;
    --text: #2c2c2c;
    --radius: 10px;
    --spacing: 20px;
  }

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

  body {
    font-family: 'Segoe UI', Arial, sans-serif;
    color: var(--text);
    background: var(--bg);
    line-height: 1.7;
  }

  header {
    background: linear-gradient(to right, var(--primary), var(--primary-dark));
    color: white;
    text-align: center;
    padding: 60px 20px;
  }

  header p {
    opacity: 0.9;
  }

  nav {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: center;
    gap: 24px;
    background: white;
    padding: 14px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    z-index: 10;
  }

  nav a {
    color: var(--text);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
  }

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

  main {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing);
  }

  section {
    padding: 40px 0;
  }

  section h2 {
    color: var(--primary-dark);
    margin-bottom: var(--spacing);
    border-left: 4px solid var(--accent);
    padding-left: 12px;
  }

  #about {
    display: flex;
    gap: var(--spacing);
    align-items: center;
    flex-wrap: wrap;
  }

  #about img {
    width: 150px;
    border-radius: 50%;
    border: 4px solid var(--primary);
  }

  .skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
  }

  .skill-item {
    background: white;
    padding: 16px;
    text-align: center;
    border-radius: var(--radius);
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    transition: transform 0.3s ease;
  }

  .skill-item:hover {
    transform: translateY(-5px);
  }

  table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    border-radius: var(--radius);
    overflow: hidden;
  }

  th {
    background: var(--primary);
    color: white;
    padding: 12px;
    text-align: left;
  }

  td {
    padding: 12px;
    border-bottom: 1px solid #eee;
  }

  tr:nth-child(even) {
    background: #f8f8f8;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
  }

  input, textarea {
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: var(--radius);
    font-family: inherit;
    transition: border-color 0.3s ease;
  }

  input:focus, textarea:focus {
    outline: none;
    border-color: var(--primary);
  }

  button {
    background: var(--accent);
    color: white;
    border: none;
    padding: 14px;
    border-radius: var(--radius);
    font-size: 16px;
    cursor: pointer;
    transition: background 0.3s ease;
  }

  button:hover {
    background: #c2185b;
  }

  footer {
    text-align: center;
    padding: 20px;
    background: var(--text);
    color: white;
  }

  footer a {
    color: #90caf9;
  }

  @media (max-width: 600px) {
    header {
      padding: 40px 15px;
    }

    nav {
      gap: 14px;
      font-size: 14px;
    }

    #about {
      flex-direction: column;
      text-align: center;
    }
  }
</style>
</head>
<body>

  <header>
    <h1>আরিফ</h1>
    <p>ফ্রিল্যান্স ওয়েব ডেভেলপার</p>
  </header>

  <nav>
    <a href="#about">পরিচিতি</a>
    <a href="#skills">দক্ষতা</a>
    <a href="#projects">প্রজেক্ট</a>
    <a href="#contact">যোগাযোগ</a>
  </nav>

  <main>

    <section id="about">
      <img src="profile.jpg" alt="আরিফের প্রোফাইল ছবি">
      <div>
        <h2>আমার সম্পর্কে</h2>
        <p>আমি একজন সেল্ফ-টট ওয়েব ডেভেলপার, যিনি Firebase, Cloudflare
        এবং vanilla JavaScript নিয়ে কাজ করতে ভালোবাসেন।</p>
      </div>
    </section>

    <section id="skills">
      <h2>আমার দক্ষতা</h2>
      <div class="skills-grid">
        <div class="skill-item">HTML</div>
        <div class="skill-item">CSS</div>
        <div class="skill-item">JavaScript</div>
        <div class="skill-item">Firebase</div>
      </div>
    </section>

    <section id="projects">
      <h2>সাম্প্রতিক প্রজেক্ট</h2>
      <table>
        <tr>
          <th>প্রজেক্ট</th>
          <th>ধরন</th>
        </tr>
        <tr>
          <td>Midnight Craving</td>
          <td>PWA Dashboard</td>
        </tr>
        <tr>
          <td>Pathokghar</td>
          <td>Ebook Platform</td>
        </tr>
      </table>
    </section>

    <section id="contact">
      <h2>যোগাযোগ করো</h2>
      <form>
        <input type="text" placeholder="তোমার নাম" required>
        <input type="email" placeholder="ইমেইল" required>
        <textarea rows="4" placeholder="বার্তা"></textarea>
        <button type="submit">পাঠাও</button>
      </form>
    </section>

  </main>

  <footer>
    <p>© ২০২৬ আরিফ &middot; <a href="mailto:arif@example.com">ইমেইল করো</a></p>
  </footer>

</body>
</html>

কোডে যা লক্ষ করার মতো

:root-এ variable রাখায় রঙ বদলাতে এখন এক জায়গায় গেলেই হবে
nav-এ position: sticky দেওয়ায় স্ক্রল করলেও মেনু সবসময় উপরে দেখা যাবে
.skills-grid-এ auto-fit ও minmax() থাকায় স্কিল কার্ডগুলো নিজে থেকেই স্ক্রিন সাইজ অনুযায়ী সাজবে
প্রতিটা .skill-item-এ hover করলে হালকা উপরে উঠে যায় (transform: translateY + transition)
টেবিলে nth-child(even) দিয়ে zebra stripe
ফর্মে :focus দিয়ে ইনপুটে ক্লিক করলে বর্ডার হাইলাইট হয়
শেষে @media (max-width: 600px) দিয়ে মোবাইলে পরিচিতি সেকশন কলামে সাজানো হয়েছে

টিপস: এই কোডটা কপি করে নিজের ব্রাউজারে খুলে দেখো, তারপর একটা একটা করে property বদলে বদলে দেখো কী পরিবর্তন হয় — এভাবে হাতে-কলমে experiment করাই CSS শেখার সবচেয়ে কার্যকর উপায়।

এরপর কী?

HTML দিয়ে কাঠামো, CSS দিয়ে সৌন্দর্য — এই দুটো এখন তোমার হাতে আছে। কিন্তু এখনো এই পেজটা "স্থির" — ফর্ম সাবমিট করলে কিছুই হয় না, বাটনে ক্লিক করলে কোনো অ্যাকশন নেই। পরের ধাপ হলো JavaScript — যেটা দিয়ে পেজটাকে সত্যিকারের ইন্টারঅ্যাক্টিভ বানানো যায়।

নিজে চেষ্টা করো

Exercise:

উপরের কোডটা কপি করে নিজের তথ্য দিয়ে বদলে ফেলো
--primary ও --accent variable বদলে নিজের পছন্দের রঙে সাজাও
মোবাইল স্ক্রিনে (developer tools দিয়ে) পেজটা কেমন দেখাচ্ছে যাচাই করো
নিজের আরও কিছু স্কিল বা প্রজেক্ট যোগ করে গ্রিড ও টেবিল বড় করো

সিরিজ শেষ — অভিনন্দন!

বারো পর্ব শেষ করে তুমি এখন CSS-এর একটা শক্তপোক্ত ভিত্তি পেয়ে গেছো — Selector থেকে Grid, Media Query থেকে Animation, সবকিছু। HTML আর CSS মিলিয়ে এখন তুমি যেকোনো সুন্দর, responsive স্ট্যাটিক ওয়েবসাইট বানাতে পারবে।

পরের সিরিজ "JavaScript এর হাতেখড়ি"-তে দেখা হবে, যেখানে আমরা এই পেজগুলোকে সত্যিকারের ইন্টারঅ্যাক্টিভ ও ডাইনামিক বানাবো।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

CSS এর হাতেখড়ি (পর্ব – ১২)