اردو میں جدید کوڈنگ زبان ایچ ٹی ایم ایل ، سی ایس ایس اور جاوا اسکرپٹ کا یہ سولہواں لیچکچر ہے ۔ یہ لیکچر انتہائی آسان زبان اور آسانی سے سمجھ میں آنے والی کوڈنگ میں لکھا گیا ہے ۔ اس زبان کو ایک نو دس سال کا بچہ بھی آسانی سے سمجھ سکتا ہے ۔۔ تو آئیے شروع کرتے ہیں آج کا سولہواں لیکچر ۔جدید CSS سیکھنے کا جائزہ ۔ لیکچر 16
اب تک ہم نے کیا سیکھا؟
- فلیکس باکس
- گرڈ
- رسپانسیو ڈیزائن اور میڈیا کوئریز
- ٹرانزیشنز
- اینیمیشنز
- متغیرات
- ٹرانسفارمز
- اسپیسیفیسٹی
- جدید سلیکٹرز
مشق: ایک رسپانسیو بلاگ لے آؤٹ بنائیں
ایک دو کالم والا بلاگ لے آؤٹ بنانے کے لیے گرڈ یا فلیکس باکس کا استعمال کریں۔ اسے چھوٹی اسکرینوں پر ایک کالم میں تبدیل کرنے کے لیے میڈیا کوئریز شامل کریں۔
<style>
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
.sidebar {
background: lightblue;
padding: 20px;
}
.content {
background: lightyellow;
padding: 20px;
}
</style>html پیج میں کوڈنگ کے دوران body سیکشن میں ہم اسے یوں لکھیں گے
<!DOCTYPE html>
<html lang="EN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=" your website or article description here....... ">
<title> Your website title here... </title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 3fr;
gap: 20px;
}
.sidebar {
background: lightblue;
padding: 20px;
}
.content {
background: lightyellow;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="sidebar">سائیڈبار</div>
<div class="content">مواد</div>
</div>
</body>
</html>