#miniProject #frontend

📱 HTML, CSS va JavaScriptdan foydalanib yaratilgan mini-loyihalar

HTML, CSS va JavaScriptdan foydalanib yaratilgan turli xil mini-loyihalari to'plangan. Ushbu loyihalar yangi boshlovchilar uchun o'zlarini sinab ko'rish va asosiy tushunchalarni o'rganish uchun ajoyib manbadir.

Har bir loyiha uchun HTML, CSS va JavaScript kodlari, shuningdek, loyihaning jonli demosi mavjud.

GitHub sahifaga havola

@frontend

#javascript #library #frontend

🦶 Driver.js

Bu JavaScript kutubxonasi foydalanuvchilarni interfeys bilan tanishtirish, yo'l-yo'riq berish imkoniyatini beradi. U kichik hajmli (taxminan 5kb), moslashuvchan , har qanday elementni ta'kidlab chiqarish imkoniyatini beradi.

doc : https://driverjs.com/docs/installation

@frontend

#js #library #frontend

🔔 Top JavaScript bildirishnoma kutubxonalari

— SweetAlert
— React-Toastify
— Toastr
— Essential JS 2
— chakra-ui/alert
— Vue Toastification
— Sonner
— Awesome Notifications

@frontend

#portfolio #frontend

Frontend dasturchining portfolio saytida
"Nimalar bo'lishi kerak ?"

🔘Shaxsiy ma'lumotlar:

- Qisqa tarjimai hol
- Ta'lim va sohadagi tajribangiz
- Shaxsiy fotosurat yoki avatar qo'shing

🔘Ko'nikmalaringiz:

- Frontend dasturlashda foydalanadigan barcha texnologiyalar ro'yxatini kiriting.
- Har bir texnologiya uchun sizning tajriba darajangizni ko'rsating.
- Qo'shimcha ko'nikmalarni, masalan, dizayn yoki UX/UI

🔘Loyihalaringiz:

- Eng yaxshi ishlaringizni joylang.
- Har bir loyiha uchun qisqa tavsif, ishlatilgan texnologiyalar va loyihada sizning rolingiz.
- Loyihalarni filtrlash yoki qidirish imkoniyatini.

🔘Aloqa ma'lumotlari:

- Siz bilan bog'lanishga qulay bo'lgan elektron pochta/telegramga havola, manzilingiz va telefon raqamingiz.
- Ijtimoiy media profillaringizga havolalarni kiriting.

Saytingiz vizual jihatdan qiziqarli va foydalanish uchun oson bo'lishi kerak. Mobil qurilmalar uchun moslashuvchan dizayndan foydalaning.

Portfoliongizni muntazam yangilab boring. Eng yaxshi loyihangizni namoyish qilish uchun yuqori sifatli tasvirlar ishlating.

Ba'zi namunalar:
1. https://sarkar.fr
2. https://henryheffernan.com

@frontend

#frontendWeekly

🗓 @Frontend telegram kanalida 📆 hafta davomida joylangan postlar ro'yxati:

1. JavaScript va Leetcode'da masala ishlash
2. Maz-UI — Vue.js uchun yuqori sifatli komponentlar kutubxonasi.
3. v-for ichida destrukturizatsiya qilish
4. #100DaysOfFrontend | 4 - kun
5. shadcn/ui chartlari
6. Gemini AI
7. #100DaysOfFrontend | 5 - kun
8. HTML, CSS va JavaScriptdan foydalanib yaratilgan mini-loyihalar
9. Driver.js - interfeys bilan tanishtirish
10. #100DaysOfFrontend | 6 - kun
11. Top JavaScript bildirishnoma kutubxonalari
12. #100DaysOfFrontend | 7 - kun
13. Frontend dasturchining portfolio saytida "Nimalar bo'lishi kerak ?"
14. Vue.js cheatsheet
15. #100DaysOfFrontend | 8 - kun

@frontend

#css #frontend

🎲 CSSda Divni Markazlash

Html struktura:

<div class="container">
    <div class="centered-div">Markazlangan kontent</div>
</div>

1️⃣ Flexbox yordamida markazlash:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

2️⃣ Grid yordamida markazlash:

.container {
    display: grid;
    place-items: center;
    height: 100vh;
}

3️⃣ Absolyut yordamida markazlash:

.container {
    position: relative;
    height: 100vh;
}
.centered-div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

4️⃣ Margin Auto yordamida markazlash:

// Gorizontal markazlash uchun, margin: auto
.centered-div {
    width: 50%;
    margin: 0 auto;
}

5️⃣ Inline-block bilan markazlash:

// Inline yoki inline-block elementlari uchun
.container {
    text-align: center;
    line-height: 100vh;
}
.centered-div {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
}

@frontend

#devtools #frontend

🎲 Swapy

Swapy - bu layoutlarni bir necha qator kod yordamida 'drag-to-swap' qilish imkon beradigan framework-dan mustaqil vosita. Foydalanish oson, har qanday frontend framework (react, vue, angular, ... va hk) bilan ishlatish mumkin.

GitHub

Ishlatish bo'yicha misollar:
React | Vue | Svelte

@frontend