🎞️ CSS Animation শেখার সহজ গাইড
CSS Animation ব্যবহার করে আপনি যেকোনো ওয়েব এলিমেন্টকে জীবন্ত করে তুলতে পারেন। নিচে একটি সহজ উদাহরণ দেওয়া হলো:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.box {
animation: fadeIn 2s ease-in-out;
}
উপরের কোডে, @keyframes দিয়ে fadeIn এনিমেশন তৈরি করা হয়েছে যা .box ক্লাসের ওপর ২ সেকেন্ডে প্রয়োগ করা হবে।
আপনি চাইলে বিভিন্ন CSS প্রপার্টি এনিমেট করতে পারেন, যেমন: transform, color, background-color ইত্যাদি।
🧠 JavaScript DOM Explained
DOM বা Document Object Model হলো একটি অবজেক্ট ভিত্তিক মডেল যা দিয়ে JavaScript HTML ডকুমেন্টকে নিয়ন্ত্রণ করতে পারে। এতে আপনি HTML এলিমেন্ট খুঁজে বের করে তাদের স্টাইল, টেক্সট, বা অন্য গুণাবলি পরিবর্তন করতে পারবেন।
document.getElementById("title").innerText = "নতুন টাইটেল";
উপরের কোডে, document.getElementById দিয়ে HTML এর id="title" থাকা এলিমেন্টের টেক্সট পরিবর্তন করা হয়েছে।
এছাড়াও querySelector, getElementsByClassName ইত্যাদি DOM মেথড রয়েছে যা অনেক কাজের।
🐍 Python এর ৫টি সহজ প্রজেক্ট আইডিয়া
- ✅ To-Do List App: টাস্ক যুক্ত, সম্পন্ন, মুছে ফেলা যায় এমন অ্যাপ
- ✅ Calculator: সহজ গণনা করার প্রোগ্রাম
- ✅ Weather Checker: API ব্যবহার করে আবহাওয়া দেখানো
- ✅ Password Generator: নিরাপদ পাসওয়ার্ড তৈরি করার অ্যাপ
- ✅ Quiz Game: প্রশ্ন ও উত্তর নিয়ে ইন্টার্যাকটিভ গেম
এই প্রজেক্টগুলো শুরু করতে আপনাকে প্রোগ্রামিংয়ের বেসিক ধারণা দিবে এবং Python এর প্রতি আত্মবিশ্বাস বাড়াবে।
🛠️ HTML+CSS দিয়ে একটি মিনি সাইট বানানো
HTML দিয়ে কাঠামো এবং CSS দিয়ে ডিজাইন করলে আপনি একটি মিনি ওয়েবসাইট বানাতে পারবেন। নিচে একটি সাধারণ উদাহরণ দেওয়া হলো:
<!DOCTYPE html>
<html>
<head>
<style>
.card {
border: 1px solid #ccc;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
max-width: 300px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.card h2 {
color: #ff0066;
}
</style>
</head>
<body>
<div class="card">
<h2>Welcome</h2>
<p>This is a mini site.</p>
</div>
</body>
</html>
এই বেসিক কাঠামো থেকে শুরু করে আপনি নিজে নিজে ওয়েবসাইট তৈরি করতে পারবেন।