Frontend
3.45K subscribers
382 photos
53 videos
23 files
364 links
Barchasi Frontend dasturlash haqida!

- So'nggi yangiliklar
- Eng yaxshi resurslar
- Intervyu savol - javoblar

Vakansiyalar: @frontendVacancy

Reklama va hamkorlik: @jaydariX
Download Telegram
#100DaysOfFrontend #beginner


8 - kun | Coming Soon


Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 21.07.2024 — 20:00

P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.

@frontend
👍4đŸ”Ĩ3
#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
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ11👍10
This media is not supported in your browser
VIEW IN TELEGRAM
#css #mem #frontend


Saytni adaptive qilish jarayonida.

P.S. Buyog'ini to'girlasa boshqa joyi qiyshayib ketadi

@frontend
😁28👍5đŸ”Ĩ3
This media is not supported in your browser
VIEW IN TELEGRAM
#100DaysOfFrontend #beginner


9 - kun | Todo


Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 22.07.2024 — 20:00

P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.

@frontend
đŸ”Ĩ6👍2
This media is not supported in your browser
VIEW IN TELEGRAM
#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
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ10👍3
#100DaysOfFrontend #beginner


10 - kun | Responsive design


Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 24.07.2024 — 20:00

P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.

@frontend
đŸ”Ĩ9👍3
#100DaysOfFrontend #beginner


11 - kun | Calculator
app

Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 25.07.2024 — 20:00

P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.

@frontend
👍10đŸ”Ĩ10
#meme #frontend


No comment â˜šī¸

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
😁37👍3đŸ”Ĩ3
#api #frontend


📱 Instagram API

Instagram klonini yaratmoqchi bo'lsangiz, Instagram-dan real vaqtda ma'lumotlarni taqdim etadigan ushbu ajoyib bepul API-dan foydalanishingiz mumkin.

https://rapidapi.com/neotank/api/instagram130

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ9👍3
#100DaysOfFrontend #beginner


12 - kun | Upload images


Texnologiya: Html, Css/Css kutubxonalari, Js
Dizayn: Figma
Deadline: 2.08.2024 — 20:00

P.S. Bajargan ishingizga havolani(GitHub) ushbu post izoh qismiga yuborishingiz mumkin! Hostingga qo'yish ixtiyoriy.

@frontend
👍6đŸ”Ĩ5
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ10😁7👍6
#meme #frontend


Junior vs Senior


@frontend
😁29👍4đŸ”Ĩ3
#JsLibrary #frontend


đŸ’ĨSyntax highlighting kutubxonalari

Syntax highlighting nega muhim?
Bu kodni o'qishni, yozishni va tuzatishni, dasturiy elementlarni vizual tarzda ajratib ko'rsatib o'qishni osonlashtiradi.

Eng yaxshi kutubxonalar:
— Highlight.js
— Microlight.js
— Bright
— starry-night
— react-syntax-highlighter
— Torchlight
— Chroma

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ6👍2
#tailwindCss #frontend


đŸ–ąī¸TailwindCSS tugmalari to'plami

Yoqqanini tanlaysiz Copy & Paste ishingiz hal!

https://devdojo.com/tailwindcss/buttons

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ13👍3
#update #frontend


🔄 Loyiha versiyasidagi #.#.# (2.4.1) formati nimani anglatishiga qiziqib ko'rganmisiz?

Web sayt versiyalarini belgilashda ko'p hollarda Semantic Versioning (SemVer) standarti qo'llaniladi.

SemVer standarti uch qismdan iborat versiya raqamlarini qo'llaydi:
MAJOR.MINOR.PATCH


1. MAJOR
(katta yangilanishlar)
- Texnologiya stekini yangilash (masalan, yangi frameworkga o'tish).
- Dizayn yoki struktura qismida kattaroq o'zgarishlar.

2. MINOR (kichik yangilanishlar)
- Mavjud sahifalar yoki funksiyalarga yangi imkoniyatlar qo'shish.
- SEO optimizatsiyalari

3. PATCH (kichik tuzatishlar)
- Bug'larni tuzatish
- Xavfsizlik yangilanishlari

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ8👍7
#vue #frontend


🅰 Vue 3 loyihasiga xalqaro tillarni qo'shish (vue-i18n)

Bugungi kunda web-ilovalar global foydalanuvchilar uchun mo'ljallangan bo'lib, turli tillardagi qo'llab-quvvatlash juda muhim ahamiyatga ega. Vue 3 ilovangizga xalqaro tillarni qo'shish orqali siz kengroq auditoriyaga xizmat qilishingiz mumkin. Bu jarayonni "Vue I18n" yordamida oson amalga oshirish mumkin.

👀 Batafsil bu yerda o'qing

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍9đŸ”Ĩ2
#javascript #frontend


👩‍đŸ’ģ JavaScript cheatsheet

https://quickref.me/javascript

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
đŸ”Ĩ8👍5
This media is not supported in your browser
VIEW IN TELEGRAM
#react #frontend


âš™ī¸ React bilan PDF yaratish

Onedoc dasturchilari tomonidan ishlab chiqilgan React Print deb nomlangan UI to'plami. U React va TypeScript yordamida PDF-fayllarni yaratish uchun mo'ljallangan. Uning yordamida turli hujjatlar uchun shablonlarni tayyorlashingiz mumkin.

Getting started | GitHub

@frontend
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5đŸ”Ĩ4
Please open Telegram to view this post
VIEW IN TELEGRAM
😁39👍4đŸ”Ĩ3