Learn CSS: Layout & Design

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

এই CSS টিউটোরিয়ালটি নতুনদের জন্য তৈরি এবং এটি আপনার শেখার সাথে সাথে উন্নত হয়। প্রতিটি কোর্স একটি বাস্তব বিষয়ের উপর ভিত্তি করে তৈরি, প্রতিটি পাঠ সংক্ষিপ্ত, এবং এডিটরটি সর্বদা এক ট্যাপ দূরে থাকে, তাই আপনি কেবল পড়ার পরিবর্তে যা পড়েছেন তা অনুশীলন করতে পারেন।

এর ভেতরে যা আছে

• ৪০টি কোর্স এবং ১৫৯টি ছোট ছোট লেসন, বিগিনার (A1) থেকে অ্যাডভান্সড (C1) পর্যন্ত

• দ্রুত পরীক্ষা-নিরীক্ষা এবং আপনার নিজের পেজ তৈরির জন্য ইনস্ট্যান্ট প্রিভিউ সহ একটি লাইভ HTML এবং CSS এডিটর

• ধাপে ধাপে ২০টি গাইডেড ওয়েব ডিজাইন প্রজেক্ট: একটি টুলবার, একটি কার্ড গ্রিড, একটি স্টিকি হেডার, একটি পালসিং বাটন এবং আরও অনেক কিছু

• ২০টি বাগ-হান্ট মিশন: একটি কার্ড যা তার কলামের চেয়ে ৪২ পিক্সেল বেশি চওড়া, একটি মিডিয়া কোয়েরি যা ফোনে কখনও কাজ করে না, একটি মোডাল যা পেজের পিছনে আটকে যায়

• একটি ফাইনাল পরীক্ষা এবং কোর্স সমাপ্তির সার্টিফিকেট

• অ্যাপটি ২২টি ভাষায় উপলব্ধ

বিগিনার থেকে অ্যাডভান্সড পর্যন্ত একটি সম্পূর্ণ পথ

• সিনট্যাক্স এবং সিলেক্টর, রঙ, ব্যাকগ্রাউন্ড এবং টাইপোগ্রাফি

• বক্স মডেল, ডিসপ্লে, পজিশনিং, ইউনিট এবং ভ্যালু

• সিউডো-ক্লাস এবং সিউডো-এলিমেন্ট

• ফ্লেক্সবক্সের মৌলিক বিষয় এবং অ্যাডভান্সড ফ্লেক্সবক্স

• গ্রিডের প্রাথমিক ধারণা, গ্রিড এরিয়া এবং অ্যাডভান্সড গ্রিড লেআউট

• রেসপন্সিভ ডিজাইন, মিডিয়া কোয়েরি এবং কন্টেইনার কোয়েরি

• কাস্টম প্রোপার্টি (ভেরিয়েবল), ফাংশন, স্পেসিফিসিটি, ক্যাসকেড এবং @লেয়ার

• ট্রানজিশন, ট্রান্সফর্ম, কীফ্রেম অ্যানিমেশন, ফিল্টার এবং ব্লেন্ড মোড

• ডার্ক মোড এবং কালার স্কিম, স্ক্রল এবং ওভারফ্লো, ক্লিপ-পাথ এবং শেপ

• ডেভটুলস দিয়ে ডিবাগিং, BEM আর্কিটেকচার, Sass, PostCSS এবং ডিজাইন টোকেন

• কম্পোনেন্ট প্যাটার্ন, আধুনিক লেআউট প্যাটার্ন, পারফরম্যান্স এবং হুডিনি

অভ্যাস যা মনে থাকে

• আপনি যা শিখেছেন তা যাচাই করার জন্য কুইজ

• প্রোপার্টি, সিলেক্টর এবং লেআউট সিনট্যাক্সের ৬৯টি এন্ট্রি সহ একটি চিট শিট

• স্পষ্ট উত্তর সহ ৫০টি ইন্টারভিউ প্রশ্ন, যা ফ্রন্ট এন্ড বা ওয়েব ডেভেলপার ইন্টারভিউয়ের আগে দরকারি

• ছোট ছোট উদাহরণের একটি কোড লাইব্রেরি যা আপনি খুলতে এবং সম্পাদনা করতে পারেন

• আপনার নিজের কোড, নোট এবং প্রিয় লেসন সংরক্ষণ করুন

• ওয়ার্ল্ড কোডিং চ্যালেঞ্জ: প্রতিদিন তিনটি গ্লোবাল রাউন্ড, যা পাইথন, জাভাস্ক্রিপ্ট এবং অন্যান্য ভাষায় সমাধান করা হয়

• স্ট্রিকস, এক্সপি, একটি লিডারবোর্ড এবং আপনার অনুশীলন চালিয়ে যাওয়ার জন্য দৈনিক রিমাইন্ডার

এআই মেন্টর

• কোনো লেআউট বা প্রোপার্টিতে আটকে গেছেন? কোনো ধারণা, ত্রুটি বা আপনার নিজের কোড সম্পর্কে AI মেন্টরকে জিজ্ঞাসা করুন

• AI প্লেগ্রাউন্ড: একটি পেজের বর্ণনা দিন এবং দেখুন কীভাবে HTML ও CSS তৈরি হচ্ছে

• ফ্রি ব্যবহারকারীরা দৈনিক একটি নির্দিষ্ট পরিমাণ AI অ্যালাউন্স পান; প্রো সংস্করণে এটি সীমাহীন

কাদের জন্য

• সম্পূর্ণ নতুন যারা ওয়েব ডেভেলপমেন্টে প্রথম পদক্ষেপ নিচ্ছেন

• ডিজাইনার যারা মকআপ জমা দেওয়ার পরিবর্তে নিজেদের পেজ স্টাইল করতে চান

• শিক্ষার্থী যারা ওয়েব ডিজাইন কোর্সের পাশাপাশি অতিরিক্ত অনুশীলন করতে চান

• ডেভেলপার যারা কিছুটা HTML ও CSS জানেন এবং অবশেষে ফ্লেক্সবক্স ও গ্রিড বুঝতে চান

• যারা ফ্রন্ট-এন্ড চাকরির জন্য প্রস্তুতি নিচ্ছেন এবং পেশা পরিবর্তন করছেন

এটি কীভাবে কাজ করে

১. বিনামূল্যে প্রথম কোর্সটি দিয়ে শুরু করুন: CSS সিনট্যাক্স এবং সিলেক্টর

২. এডিটর খুলুন, একটি মান পরিবর্তন করুন এবং দেখুন প্রিভিউটি অনুসরণ করছে

৩. ধাপে ধাপে এগিয়ে যান: বক্স মডেল, ফ্লেক্সবক্স, গ্রিড, রেসপন্সিভ ডিজাইন এবং অ্যানিমেশন

৪. নির্দেশিত প্রজেক্ট তৈরি করুন এবং মিশনগুলোতে আসল লেআউটের বাগ ঠিক করুন

৫. চূড়ান্ত পরীক্ষায় উত্তীর্ণ হন এবং আপনার সার্টিফিকেট অর্জন করুন

ফ্রি এবং প্রো

প্রথম কোর্স, প্রথম নির্দেশিত প্রজেক্ট, দুটি মিশন এবং লাইভ এডিটর বিনামূল্যে, সাথে দৈনিক AI মেন্টর অ্যালাউন্স রয়েছে। প্রো সংস্করণে প্রতিটি কোর্স, সমস্ত প্রজেক্ট ও মিশন, সার্টিফিকেট পরীক্ষা এবং আনলিমিটেড এআই আনলক হয়, এবং বিজ্ঞাপন দূর হয়ে যায়।

আজই শুরু করুন, নিজের গতিতে CSS শিখুন এবং মিনিটের মধ্যে আপনার প্রথম পৃষ্ঠাটি স্টাইল করুন।