সরাসরি মূল অংশে যান
ABCL TECH · সম্পূর্ণ ফ্রি কোর্স

HTML ও CSS — প্রথম ওয়েব পেজ থেকে আধুনিক, রেসপন্সিভ আর সবার জন্য ব্যবহারযোগ্য ডিজাইন পর্যন্ত

HTML & CSS — from your first web page to modern, responsive, accessible design

A free 59-lesson HTML and CSS course taught in Bangla, in eight modules: web and HTML foundations, structure, forms and accessibility, CSS foundations, layout with Flexbox and Grid, responsive and modern CSS, motion, effects and polish, a professional workflow with a portfolio capstone, and exam and front-end interview preparation, with a live editor in every lesson.

আপনি প্রতিদিন যে ওয়েবসাইটগুলো খোলেন — খবরের সাইট, অনলাইন শপ, ব্যাংকের পোর্টাল, সরকারি সেবার পাতা — সবকিছুর ভিত্তি দুটি ভাষা: HTML দেয় কাঠামো আর অর্থ, CSS দেয় চেহারা আর লেআউট। এই কোর্সে একদম শূন্য থেকে শুরু করে ধাপে ধাপে নিজের ওয়েব পেজ বানাবেন, তারপর Flexbox, Grid, রেসপন্সিভ ডিজাইন আর আধুনিক CSS-এ পৌঁছাবেন। একদম নতুন যাঁরা, ফ্রিল্যান্সার, শিক্ষার্থী আর যে ডেভেলপাররা আধুনিক CSS-এ নিজেকে হালনাগাদ করতে চান — সবার জন্যই কোর্সটি সহজ বাংলায়, ধাপে ধাপে সাজানো।

  • ৫৯টি পর্ব
  • ৮টি মডিউল
  • শুরু থেকে উন্নত
  • প্রতিটি পর্বে লাইভ এডিটর
  • সম্পূর্ণ ফ্রি
পর্ব ০১ থেকে শুরু করুন সব পর্ব দেখুন শব্দকোষ

AI-এর যুগে কেন HTML ও CSS শিখবেন?

Why HTML and CSS still matter

AI এখন কয়েক সেকেন্ডে একটি পুরো পেজের কোড লিখে দিতে পারে। কিন্তু সেই কোড মোবাইলে ভেঙে যাচ্ছে কি না, screen reader ব্যবহারকারী পেজটি পড়তে পারছেন কি না, কেন একটি CSS নিয়ম কাজ করছে না — এসব বুঝে ঠিক করার দক্ষতা আপনার নিজেরই থাকা দরকার।

ওয়েবের আসল ভাষা

React, WordPress, Tailwind বা যেকোনো টুল শেষ পর্যন্ত ব্রাউজারে HTML আর CSS-ই তৈরি করে। ভিত্তিটা বুঝলে যেকোনো framework দ্রুত শিখতে আর তার সমস্যা ধরতে পারবেন।

সব স্ক্রিনে সুন্দর

অনেকেই ওয়েব দেখেন মূলত ফোনে। মোবাইল-ফার্স্ট ভাবনা, Flexbox, Grid আর container query দিয়ে এমন পেজ বানাবেন যা ছোট ফোন থেকে বড় মনিটর — সবখানে ঠিকঠাক দেখায়।

সবার জন্য ওয়েব

যিনি চোখে কম দেখেন, কিবোর্ড দিয়ে চালান বা screen reader ব্যবহার করেন — অ্যাক্সেসিবিলিটি শিখলে আপনার পেজ তাঁদের কাছেও পৌঁছাবে, আর সার্চ ইঞ্জিনও পেজটি ভালো বুঝবে।

কাজ ও ক্যারিয়ারে

ফ্রিল্যান্স ওয়েব ডিজাইন, ল্যান্ডিং পেজ, ইমেইল টেমপ্লেট, ফ্রন্ট-এন্ড ডেভেলপারের চাকরি — সবখানেই HTML আর CSS প্রথম দক্ষতা, আর ইন্টারভিউতে এগুলো থেকেই প্রশ্ন আসে।

কোর্সটি কাদের জন্য

  • একদম নতুনদের জন্য — আগে কখনো কোড না লিখলেও প্রথম পর্ব থেকে শুরু করতে পারবেন; ওয়েব কীভাবে চলে, সেখান থেকেই শুরু
  • ফ্রিল্যান্সার আর যাঁরা ফ্রিল্যান্সিং শুরু করতে চান — ক্লায়েন্টের জন্য রেসপন্সিভ, দ্রুত আর পরিষ্কার সাইট বানানোর পুরো কাজের ধারা
  • শিক্ষার্থী — স্কুল-কলেজের ICT, বিশ্ববিদ্যালয়ের ওয়েব কোর্স আর চাকরির পরীক্ষার HTML-CSS অংশ বুঝে নিন
  • যে ডেভেলপাররা অনেক দিন আগে CSS শিখেছিলেন আর এখন Grid, container query, :has(), nesting বা View Transitions-এর মতো আধুনিক CSS-এ হালনাগাদ হতে চান

এই কোর্সে যা আলাদা

  • প্রতিটি পর্বে লাইভ এডিটর — HTML আর CSS বদলান, সঙ্গে সঙ্গে পাশে ফলাফল দেখুন; কিছু ইনস্টল করতে হয় না
  • মোবাইল-ফার্স্ট আর অ্যাক্সেসিবল — শুরু থেকেই ফোনের স্ক্রিন, কিবোর্ড আর screen reader মাথায় রেখে লেখা শেখানো হয়
  • একদম হালনাগাদ CSS — Flexbox, Grid, container query, :has(), nesting, @layer, anchor positioning আর View Transitions
  • পরীক্ষা, ইন্টারভিউ ও সার্টিফিকেট — MCQ, লিখিত-ভাইভা আর ইন্টারভিউর প্রশ্ন; লগইন করলে ড্যাশবোর্ডে মডিউল টেস্ট, ফাইনাল পরীক্ষা আর ফ্রি কোর্স-সমাপ্তির সার্টিফিকেট

প্রতিটি পর্ব যেভাবে সাজানো

How every lesson works

প্রতিটি পর্ব একই ছকে লেখা, তাই কোথায় কী পাবেন আগে থেকেই জানবেন। আগে ধারণা, তারপর এমন উদাহরণ যা লাইভ এডিটরে নিজেই বদলে দেখতে পারবেন।

  1. এক নজরেপুরো পর্বের মূল কথা কয়েক লাইনে, শুরুতেই।
  2. চেনা উদাহরণদোকানের সাইনবোর্ড, বইয়ের সূচিপত্র, ঘরের আসবাব সাজানো — চেনা জিনিস দিয়ে কঠিন ধারণা।
  3. ধাপে ধাপে ডায়াগ্রাম“পরে” চেপে চেপে দেখুন ব্রাউজার কীভাবে পেজ সাজায়, box model আর cascade কীভাবে কাজ করে।
  4. লাইভ এডিটরHTML আর CSS বদলান, সঙ্গে সঙ্গে ফলাফল দেখুন — ভুল করুন, আবার চেষ্টা করুন, কিছু ইনস্টল ছাড়াই।
  5. AI-এর যুগে কাজAI-কে কোড লেখানোর প্রম্পট আর AI-এর লেখা HTML-CSS যাচাইয়ের চেকলিস্ট।
  6. যাচাই ও শব্দকোষভাবনার প্রশ্ন, কুইজ, পরীক্ষা ও ইন্টারভিউর নোট আর প্রতিটি নতুন শব্দের সহজ মানে।

লগইন করা ঐচ্ছিক — না করেও সব পড়া যায়। লগইন করলে কোন পর্ব শেষ হলো তা সেভ থাকে, আর মডিউল টেস্ট, ফাইনাল পরীক্ষা ও সার্টিফিকেট খুলে যায়। নমুনা দেখতে চান? পর্ব ০১ · ওয়েব কীভাবে চলে খুলে দেখুন।

শেখার পথ — ৮টি মডিউল

Your learning path

কোর্সটি সহজ থেকে কঠিনের দিকে এগোয়: প্রথমে HTML দিয়ে কাঠামো, তারপর CSS দিয়ে চেহারা ও লেআউট, শেষে আধুনিক কৌশল আর পেশাদার কাজের ধারা। প্রতিটি মডিউল আগেরটির ওপর দাঁড়িয়ে। যেকোনো মডিউলে চাপলে তার পর্বগুলো দেখাবে।

    শুরু · মডিউল ১–৩

    ওয়েব ও HTML-এর ভিত্তি, ফর্ম, অর্থবহ গঠন ও অ্যাক্সেসিবিলিটি, আর CSS-এর ভিত্তি। আগে কিছু জানা লাগে না — এখান থেকেই সবার শুরু।

    মাঝারি · মডিউল ৪–৫

    Normal flow, position, Flexbox আর Grid দিয়ে লেআউট, তারপর মোবাইল-ফার্স্ট রেসপন্সিভ ডিজাইন, CSS variable, dark mode আর একেবারে নতুন CSS ফিচার।

    উন্নত · মডিউল ৬–৭

    Animation, transform, স্ক্রল ইফেক্ট, SVG, CSS architecture, পারফরম্যান্স, Sass, framework আর সাইট প্রকাশ — শেষে একটি পোর্টফোলিও ক্যাপস্টোন।

    পরীক্ষা · মডিউল ৮

    রেন্ডার অনুমানের অনুশীলন, MCQ প্রশ্নব্যাংক, লিখিত-ভাইভা, ফ্রন্ট-এন্ড ইন্টারভিউর প্রশ্ন আর UI বানানোর চ্যালেঞ্জ।

    আগে থেকে HTML জানেন? সরাসরি মডিউল ৩ · CSS-এর ভিত্তি বা মডিউল ৪ · লেআউট দিয়ে শুরু করতে পারেন। শুধু আধুনিক CSS-এ হালনাগাদ হতে চাইলে মডিউল ৫ · রেসপন্সিভ ও আধুনিক CSS আপনার জন্য।

    সম্পূর্ণ সিলেবাস

    Full syllabus

    যে পর্ব পড়া শেষ করেছেন, তার পাশে ✓ চিহ্ন দেখাবে। লগইন করলে এই অগ্রগতি আপনার সব ডিভাইসে থাকবে।

    শুরুর আগে ও শেষের পরে

    Before you start · After you finish

    আগে যা জানা থাকলেই চলবে

    • বাংলা পড়তে পারা আর কম্পিউটার বা ফোনে একটি ব্রাউজার চালাতে পারা
    • ফাইল আর ফোল্ডার তৈরি, সেভ ও খোলার সাধারণ ধারণা — না থাকলে আমাদের কম্পিউটার ফান্ডামেন্টালস ও ICT কোর্সের প্রথম দিকের পর্বগুলো দেখে নিন
    • একটি ল্যাপটপ বা ডেস্কটপ থাকলে ভালো — না থাকলেও পাতার লাইভ এডিটরে মোবাইল থেকেই কোড লিখে দেখা যাবে
    • আগে কোনো প্রোগ্রামিং জানার দরকার নেই — যা লাগবে, সব পর্ব ০১ থেকে বুঝিয়ে দেওয়া হয়েছে

    কোর্স শেষে যা পারবেন

    • অর্থবহ (semantic) HTML দিয়ে লেখা, লিংক, ছবি, টেবিল আর ফর্মসহ পূর্ণ ওয়েব পেজ বানাতে
    • selector, cascade, specificity আর box model বুঝে যেকোনো ডিজাইন CSS দিয়ে ফুটিয়ে তুলতে
    • Flexbox আর Grid দিয়ে navbar, কার্ড, sidebar, dashboard আর gallery-র মতো লেআউট বানাতে
    • মোবাইল-ফার্স্ট, রেসপন্সিভ আর অ্যাক্সেসিবল পেজ বানাতে, dark mode আর আধুনিক CSS ব্যবহার করতে
    • DevTools দিয়ে সমস্যা খুঁজে বের করতে, পারফরম্যান্স ভালো করতে আর Git দিয়ে নিজের সাইট অনলাইনে প্রকাশ করতে
    • নিজের একটি রেসপন্সিভ পোর্টফোলিও সাইট বানিয়ে প্রকাশ করতে আর পরীক্ষা ও ফ্রন্ট-এন্ড ইন্টারভিউতে আত্মবিশ্বাসী হতে
    • শর্ত পূরণ করলে একটি ফ্রি কোর্স-সমাপ্তির সার্টিফিকেট পেতে

    সাধারণ প্রশ্ন

    Frequently asked questions
    প্র ০১HTML আর CSS কি প্রোগ্রামিং ভাষা?

    ঠিক অর্থে নয়। HTML হলো markup ভাষা — এটি বলে পেজের কোন অংশ শিরোনাম, কোনটি অনুচ্ছেদ, কোনটি লিংক বা ফর্ম। CSS হলো style sheet ভাষা — এটি বলে সেগুলো দেখতে কেমন হবে আর কোথায় বসবে। এগুলোতে প্রোগ্রামিংয়ের মতো লুপ বা শর্তের যুক্তি লিখতে হয় না, তাই শুরু করা তুলনামূলক সহজ।

    তবে “সহজ শুরু” মানে “অগভীর” নয় — cascade, লেআউট, রেসপন্সিভ ডিজাইন আর অ্যাক্সেসিবিলিটি ঠিকভাবে বুঝতে সময় আর অনুশীলন লাগে, আর এই কোর্স ঠিক সেটাই ধাপে ধাপে শেখায়।

    প্র ০২কোর্সটি কি সত্যিই পুরো ফ্রি?

    হ্যাঁ, ৫৯টি পর্বের সবকিছু — পড়া, লাইভ এডিটর, কুইজ, শব্দকোষ, পরীক্ষা আর সার্টিফিকেট — সম্পূর্ণ ফ্রি। কোনো লুকানো ফি নেই, পড়ার জন্য লগইনও বাধ্যতামূলক নয়। সাইটের খরচ চলে পাতার বিজ্ঞাপন থেকে।

    প্র ০৩কিছু ইনস্টল করতে হবে? মোবাইল দিয়ে কি শেখা যাবে?

    শুরু করতে কিছুই ইনস্টল করতে হবে না — প্রতিটি পর্বের লাইভ এডিটরে কোড বদলালেই পাশে ফলাফল দেখা যায়, ফোনের ব্রাউজারেও। নিজের প্রজেক্ট বানানোর সময় একটি কোড এডিটর লাগবে; কোনটি কীভাবে সেট করবেন, তা দেখানো হয়েছে পর্ব ০২ · কাজের টুল — VS Code, ব্রাউজার আর DevTools-এ।

    পুরো সাইট বানানো, DevTools দিয়ে সমস্যা খোঁজা আর সাইট প্রকাশের কাজ কম্পিউটারে অনেক সহজ — স্কুল-কলেজের ল্যাব বা পরিচিত কারও কম্পিউটারেও অনুশীলন করে নিতে পারেন।

    প্র ০৪Bootstrap বা Tailwind থাকতে কি CSS শেখা জরুরি?

    হ্যাঁ। Bootstrap আর Tailwind আসলে CSS-এর ওপরেই তৈরি — CSS না বুঝলে তাদের লেআউট ভাঙলে বা ডিজাইন বদলাতে হলে আটকে যাবেন। আগে CSS-এর ভিত্তি, লেআউট আর রেসপন্সিভ ডিজাইন শিখুন; তারপর পর্ব ৫১ · CSS framework — Bootstrap আর Tailwind CSS, কখন কোনটি-এ দেখবেন কোন কাজে কোনটি ভালো।

    প্র ০৫আমি আগে থেকেই HTML-CSS জানি — আমার জন্য কি নতুন কিছু আছে?

    অবশ্যই। গত কয়েক বছরে CSS অনেক বদলেছে। মডিউল ৫-এ পাবেন container query, :has(), nesting, clamp(), @layer, anchor positioning, @scope আর View Transitions; মডিউল ৬-এ scroll-driven animation; আর মডিউল ৭-এ CSS architecture, পারফরম্যান্স আর ব্রাউজার সাপোর্টের পেশাদার কৌশল।

    এরপর ইন্টারঅ্যাকটিভ পেজ বানাতে চাইলে আমাদের JavaScript কোর্সে যেতে পারেন।

    প্র ০৬ফ্রিল্যান্সিং বা চাকরির ইন্টারভিউর জন্য কি কাজে লাগবে?

    হ্যাঁ। ক্লায়েন্টের কাজে যা সবচেয়ে বেশি লাগে — রেসপন্সিভ লেআউট, পরিষ্কার ফর্ম, দ্রুত লোড হওয়া পেজ, ব্রাউজার সাপোর্ট আর সাইট প্রকাশ — সবই কোর্সে আছে। পর্ব ৫৪ · ক্যাপস্টোন-এ নিজের পোর্টফোলিও সাইট বানিয়ে প্রকাশ করবেন, যা ক্লায়েন্ট বা নিয়োগকর্তাকে দেখাতে পারবেন।

    ইন্টারভিউর জন্য আছে পর্ব ৫৮ · ফ্রন্ট-এন্ড ইন্টারভিউর প্রশ্ন আর পর্ব ৫৯ · UI বানানোর চ্যালেঞ্জ; বিশ্ববিদ্যালয় বা চাকরির পরীক্ষার জন্য পর্ব ৫৬ · MCQ প্রশ্নব্যাংক আর পর্ব ৫৭ · লিখিত ও মৌখিক (ভাইভা) প্রশ্ন।

    প্র ০৭পরীক্ষা দেওয়া আর সার্টিফিকেট পাওয়া যাবে?

    হ্যাঁ। লগইন করলে ড্যাশবোর্ডে প্রতিটি মডিউলের টেস্ট আর একটি ফাইনাল পরীক্ষা পাবেন। মডিউল ১ থেকে ৭-এর সব পর্ব পড়া শেষ করে ফাইনালে ৬০% বা তার বেশি পেলে একটি ফ্রি কোর্স-সমাপ্তির সার্টিফিকেট পাবেন। লগইন না করলেও সব পড়া যায়, তবে তখন অগ্রগতি সেভ হয় না।

    মনে রাখবেন, এটি আপনার শেখার স্বীকৃতি — কোনো একাডেমিক ডিগ্রি বা সরকারি সনদ নয়।

    প্র ০৮পুরো কোর্স শেষ করতে কত সময় লাগবে?

    প্রতিটি পর্ব মনোযোগ দিয়ে পড়তে, লাইভ এডিটরে কোড বদলে দেখতে আর কুইজ দিতে মোটামুটি এক ঘণ্টা লাগে। প্রতিদিন একটি পর্ব পড়লে দুই মাসের মধ্যে শেষ হবে। তবে নিজের গতিতে এগোন — প্রতিটি পর্বের পর নিজে কিছু বানিয়ে দেখা তাড়াহুড়ার চেয়ে অনেক বেশি জরুরি।

    আজই প্রথম পর্ব দিয়ে শুরু করুন

    প্রতিদিন একটি পর্ব — দুই মাসের মধ্যেই আপনি প্রথম ওয়েব পেজ থেকে নিজের রেসপন্সিভ পোর্টফোলিও সাইট পর্যন্ত পৌঁছে যাবেন।

    পর্ব ০১ · ওয়েব কীভাবে চলে অন্য কোর্সগুলো দেখুন