🪄 Frontend bilimlaringizni oshirish uchun 6 ta eng zo'r saytlar.
1) CSS battle
cssbattle.dev
2) Codepen challenges
codepen.io/challenges
3) Codewell
codewell.cc
4) Frontend Mentor
frontendmentor.io
5) Freecodecamp
freecodecamp.org
6) Java Script 30
javascript30.com
Manba 📚
@webdasturchilar_html_css_js
1) CSS battle
cssbattle.dev
2) Codepen challenges
codepen.io/challenges
3) Codewell
codewell.cc
4) Frontend Mentor
frontendmentor.io
5) Freecodecamp
freecodecamp.org
6) Java Script 30
javascript30.com
Manba 📚
@webdasturchilar_html_css_js
#css #misol
Marhamat, misol orqali ko'rishingiz mumkin...
body {
width: 100%;
height: 100vh;
background: linear-gradient(25deg, green, blue);
}
Manba 📚
@webdasturchilar_html_css_js
Marhamat, misol orqali ko'rishingiz mumkin...
body {
width: 100%;
height: 100vh;
background: linear-gradient(25deg, green, blue);
}
Manba 📚
@webdasturchilar_html_css_js
#useful
Fayl kengaytmalarining ingliz tilida qandag ma'no anglatishi.
Manba 📚
@webdasturchilar_html_css_js
Fayl kengaytmalarining ingliz tilida qandag ma'no anglatishi.
Manba 📚
@webdasturchilar_html_css_js
#css
CSSda chegaralar (border) - rasmda keltirilgan, aniqroq tushuntirishga harakat qildim.
📌 Bu yerda
border: 👉 chegara
1px 👉chegara qalinligi
solid 👉 chegara dizayni
#1092b2 👉 rang
Manba 📚
@webdasturchilar_html_css_js
CSSda chegaralar (border) - rasmda keltirilgan, aniqroq tushuntirishga harakat qildim.
📌 Bu yerda
border: 👉 chegara
1px 👉chegara qalinligi
solid 👉 chegara dizayni
#1092b2 👉 rang
Manba 📚
@webdasturchilar_html_css_js
#css
Marhamat - margin, border, padding, height va width haqida tushuncha. Juda ham sodda qilib tushuntirilgan.
Manba 📚
@webdasturchilar_html_css_js
Marhamat - margin, border, padding, height va width haqida tushuncha. Juda ham sodda qilib tushuntirilgan.
Manba 📚
@webdasturchilar_html_css_js
#html #css
CSS - box shadow haqida tushuncha!
Rasm orqali tushunishga osonroq deb o'ylayman.
Tushuncha 💡
box-shadow: 0 0 10px #00fff5;
1) 0 - soyaning "x" koordinata bo'yicha joylashuvi.
2) 0 - soyaning "y" koordinata bo'yicha joylashuvi.
3) 10px - xiralashish darajasi (blur).
4) #00fff5 - rang
Manba 📚
@webdasturchilar_html_css_js
CSS - box shadow haqida tushuncha!
Rasm orqali tushunishga osonroq deb o'ylayman.
Tushuncha 💡
box-shadow: 0 0 10px #00fff5;
1) 0 - soyaning "x" koordinata bo'yicha joylashuvi.
2) 0 - soyaning "y" koordinata bo'yicha joylashuvi.
3) 10px - xiralashish darajasi (blur).
4) #00fff5 - rang
Manba 📚
@webdasturchilar_html_css_js
#html #css
Box shadow haqida (2-qism)
Elementga berilgan soyani yorqinroq qilmoqchi bo'lsak, box-shadow berilgan qiymatlarni o'zgartirgan holda "vergul" orqali qo'shimcha ravishda berishimiz mumkin!
P.s Rasmda CSS koddagi box-shadowga qarang!
Manba 📚
@webdasturchilar_html_css_js
Box shadow haqida (2-qism)
Elementga berilgan soyani yorqinroq qilmoqchi bo'lsak, box-shadow berilgan qiymatlarni o'zgartirgan holda "vergul" orqali qo'shimcha ravishda berishimiz mumkin!
P.s Rasmda CSS koddagi box-shadowga qarang!
Manba 📚
@webdasturchilar_html_css_js
#html #css
TEXT DECORATION - CSS
📖 Matnlarga bezak beramiz, buning uchun "text-decoration" ishlatiladi.
P.s 5-jumlaga e'tibor bering, bir necha xil bezak bergan holda ranggini ham o'zgartirsa bo'ladi.
Manba 📚
@webdasturchilar_html_css_js
TEXT DECORATION - CSS
📖 Matnlarga bezak beramiz, buning uchun "text-decoration" ishlatiladi.
P.s 5-jumlaga e'tibor bering, bir necha xil bezak bergan holda ranggini ham o'zgartirsa bo'ladi.
Manba 📚
@webdasturchilar_html_css_js
#css
CSS - Selektorlar
📖 Ushbu postda css selektrolar haqida kerakli ma'lumotlarni jamladik.
1) .misol - misol nomli classlarga stil berish.
2) #misol - misol nomli idlarga stil berish.
3) <p> - p nomli teglarga stil berish.
4) div p - "div" tegi ichida joylashgan "p" teglariga stil berish. Class yoki id bergan holda ishlatsa yaxshiroq bo'ladi.
5) div, p, h3 - agar bir necha elementga bir xil stil bermoqchi bo'lsangiz ularni "vergul" bilan ajratgan holda stil bersangiz yaxshi samara beradi. Kodni qisqa bo'lishini ta'minlash uchun.
Selektorlar haqida qo'shimcha ma'lumot kerak bo'lsa quyidagi havola orqali ko'proq ma'lumot olishingiz mumkin.
📌CSS SELEKTORLAR QO'SHIMCHA
Manba 📚
@webdasturchilar_html_css_js
CSS - Selektorlar
📖 Ushbu postda css selektrolar haqida kerakli ma'lumotlarni jamladik.
1) .misol - misol nomli classlarga stil berish.
2) #misol - misol nomli idlarga stil berish.
3) <p> - p nomli teglarga stil berish.
4) div p - "div" tegi ichida joylashgan "p" teglariga stil berish. Class yoki id bergan holda ishlatsa yaxshiroq bo'ladi.
5) div, p, h3 - agar bir necha elementga bir xil stil bermoqchi bo'lsangiz ularni "vergul" bilan ajratgan holda stil bersangiz yaxshi samara beradi. Kodni qisqa bo'lishini ta'minlash uchun.
Selektorlar haqida qo'shimcha ma'lumot kerak bo'lsa quyidagi havola orqali ko'proq ma'lumot olishingiz mumkin.
📌CSS SELEKTORLAR QO'SHIMCHA
Manba 📚
@webdasturchilar_html_css_js