PROWIDIT Education Academy

Bloq
Haqqımızda
Necə işləyir?
FAQ

+994 77 333 38 36 Sınaq dərsi Kabinet

AZ RU EN

Kursu dəyişinHTML & CSS kursu

Proqramçılar üçün AI kursu104
Alqoritmlər və verilənlər strukturları kursu129
Django & FastAPI kursu140
Docker və Deploy kursu103
Full Stack Developer kursu270
Git & GitHub kursu103
HTML & CSS kursu154
JavaScript kursu169
Laravel kursu136
Operator şəbəkələri: MPLS, BGP və BNG81
Next.js kursu113
Node.js kursu123
PHP kursu144
Python kursu153
React kursu122
SQL və verilənlər bazaları kursu122
TypeScript kursu112
Vue.js kursu111

Giriş: veb, alətlər və ilk səhifə
Veb necə işləyir: brauzer, server, HTTP, domen və hostinq Pulsuz
İş mühiti: VS Code, genişləndirmələr, Live Server və Emmet
İlk HTML səhifəsi: teqlər, elementlər, atributlar və iç-içə yerləşmə
HTML sənədinin strukturu: doctype, html, head və body
Brauzerin DevTools alətləri: element inspektoru, DOM və cihaz rejimi
HTML kontent: mətn, linklər, cədvəllər və media
h1–h6 başlıqları və abzaslar: mətnin iyerarxiyası
Sətirdaxili mətn elementləri: strong, em, mark, small, sub, sup, abbr, time
Sitatlar, kod və xüsusi simvollar: blockquote, q, pre, code, kbd, entity-lər
Siyahılar: ul, ol, dl və iç-içə siyahılar
Linklər: a teqi, href, mütləq və nisbi yollar
Səhifədaxili linklər, mailto, tel, download və target/rel atributları
Cədvəllər: table, tr, td, th və caption
Cədvəlin strukturu: thead, tbody, tfoot, colspan, rowspan və colgroup
Şəkillər: img teqi, alt, width/height, lazy loading və figure
Şəkil formatları: JPEG, PNG, WebP, AVIF və SVG
Adaptiv şəkillər: srcset, sizes və picture
Audio və video: audio, video, source və track altyazıları
Kontentin yerləşdirilməsi: iframe, YouTube, xəritələr, embed və object
Layihə: təmiz HTML ilə vizit kartı saytı
Semantika, əlçatanlıq və SEO
Semantik markup: div əvəzinə header, nav, main və footer
article, section və aside: düzgün elementi necə seçmək
JavaScript-siz interaktivlik: details/summary, dialog və popover
Qlobal atributlar: id, class, title, lang, hidden, inert və data-*
HTML validasiyası: W3C Validator və tipik markup səhvləri
SEO əsasları: title, meta description, canonical, robots və hreflang
Open Graph, sosial şəbəkələrdə önizləmə və favicon
Əlçatanlıq (a11y): WCAG, ekran oxuyucuları və alternativ mətn
ARIA əsasları: rollar, aria-label, aria-labelledby və aria-hidden
Klaviatura ilə naviqasiya: fokus, tabindex və skip link
Layihə: blog məqaləsinin semantik səhifəsi
Formalar
Formalar: form, action, method, name və göndərmə düymələri
Mətn sahələri: input tipləri, placeholder, autocomplete və inputmode
Seçim və xüsusi sahələr: checkbox, radio, range, color, date və file
Etiketlər və qruplaşdırma: label, fieldset və legend
Seçim siyahıları və çoxsətirli mətn: select, optgroup, datalist, textarea
Daxili validasiya: required, pattern, min/max və minlength
Əlçatan formalar: köməkçi mətnlər, xəta mesajları və məcburi sahələr
Layihə: HTML ilə kursa qeydiyyat anketi
CSS əsasları və selektorlar
CSS nədir və necə qoşulur: style, link və inline üslublar
Əsas selektorlar: teq, class, id, universal selektor və qruplaşdırma
Atribut selektorları: [attr], ^=, $=, *= və i bayrağı
Kombinatorlar: nəsil, birbaşa uşaq, qonşu və ümumi qonşu selektorları
Vəziyyət psevdo-sinifləri: :hover, :focus-visible, :active, :checked, :disabled
Struktur psevdo-sinifləri: :first-child, :nth-child() və :nth-of-type()
Funksional psevdo-siniflər: :is(), :where() və :not()
Valideyn selektoru :has(): məzmuna görə üslublar
Psevdo-elementlər: ::before, ::after, ::marker, ::placeholder və ::selection
Kaskad, ölçü vahidləri və rəng
Kaskad: üslub mənbələri, qaydaların sırası və !important
Selektorların spesifikliyi: hesablanması və idarə olunması
Varislik və qlobal dəyərlər: inherit, initial, unset, revert
Kaskad qatları @layer: üslubların idarə olunan sırası
DevTools-da CSS-in yoxlanılması: Styles, Computed, vəziyyətlər və Layout
Ölçü vahidləri: px, em, rem və faizlər
Viewport və şrift vahidləri: vw, vh, dvh, svh, vmin, ch və lh
CSS-də rəng: adlı rənglər, HEX, rgb() və hsl()
Müasir rənglər: oklch(), color-mix(), currentColor və transparent
Riyazi funksiyalar: calc(), min(), max() və clamp()
Box model, display və mövqeləndirmə
Box model: content, padding, border, margin və box-sizing
Xarici boşluqların birləşməsi (margin collapsing)
Ölçülər: width, height, min-/max-, auto və min-content/max-content
display xassəsi: block, inline, inline-block, none, flow-root, contents
Daşma: overflow, sürüşdürmə və məzmunun kəsilməsi
Elementlərin gizlədilməsi: display: none, visibility, opacity və visually-hidden
Mövqeləndirmə: position relative və absolute, inset xassəsi
position: fixed və sticky: sabit başlıqlar və yapışqan bloklar
z-index və qatlaşma konteksti (stacking context)
float və clearfix: mətnin şəkli əhatə etməsi və layout üçün yararsızlığı
Tipoqrafiya və vizual tərtibat
Şrift: font-family, font-size, font-weight, font-style və font qısaltması
Veb şriftlər: @font-face, Google Fonts və variativ şriftlər
Mətn: line-height, text-align, text-decoration, text-transform, letter-spacing
Mətnin keçirilməsi: white-space, overflow-wrap, text-wrap, line-clamp
Fonlar: background-color, background-image, repeat, position və size
Qradiyentlər: linear-gradient, radial-gradient və conic-gradient
Qabaqcıl fonlar: çoxqatlı fon, attachment, clip, origin və qısaltma
Sərhədlər: border, border-radius və outline
Kölgələr: box-shadow və text-shadow
Layihə: blog məqaləsinin və müəllif kartının tərtibatı
Flexbox
Flexbox-a giriş: flex konteyner, elementlər və oxlar
flex-direction: əsas oxun istiqaməti
flex-wrap, flex-flow və gap: sətirə keçmə və aralıqlar
justify-content: əsas ox boyunca düzləndirmə
align-items: çarpaz ox boyunca düzləndirmə
align-content: çoxsətirli konteynerdə sətirlərin düzləndirilməsi
flex-grow: elementlər boş yeri necə bölüşür
flex-shrink: yer çatmadıqda elementlərin sıxılması
flex-basis və flex qısaltması: 1, auto, none
order və align-self: ayrı-ayrı elementlərin idarə olunması
Flexbox-da margin: auto fəndləri
Flexbox ilə hazır həllər: navbar, kartlar, sticky footer və media object
Flexbox-da tipik səhvlər: min-width: 0, daşma və şəkillər
Layihə: Flexbox ilə tarif kartları və sayt başlığı
CSS Grid: əsaslar
CSS Grid-ə giriş: xətlər, treklər, xanalar və sahələr
grid-template-columns, grid-template-rows və gap
fr vahidi: boş sahənin payları
repeat() funksiyası: treklərin və şablonların təkrarlanması
minmax() və trek ölçüləri: min-content, max-content, fit-content()
auto-fill və auto-fit: media query-siz adaptiv şəbəkə
Xətlər üzrə yerləşdirmə: grid-column, grid-row, span və mənfi nömrələr
Şəbəkənin adlandırılmış xətləri
grid-template-areas: səhifənin adlandırılmış sahələrlə qurulması
Layihə: CSS Grid ilə foto qalereya
CSS Grid: qabaqcıl texnikalar
Qeyri-aşkar şəbəkə: grid-auto-rows və grid-auto-columns
grid-auto-flow və dense: elementlərin avtomatik yerləşdirilməsi
Grid-də düzləndirmə: justify/align-items, -self, -content və place-*
İç-içə şəbəkələr və subgrid
Grid ilə layout-lar: holy grail, qalereya, jurnal şəbəkəsi və üst-üstə qoyma
Grid, yoxsa Flexbox: aləti necə seçmək
Layihə: CSS Grid ilə admin paneli
Adaptiv dizayn
Adaptiv dizayn: viewport, elastik maketlər və yanaşmalar
Media query-lər: @media sintaksisi, tiplər və məntiqi operatorlar
Media xüsusiyyətləri: hover, pointer, orientation və prefers-*
Mobile-first və breakpoint-lərin seçilməsi
clamp() ilə elastik tipoqrafiya və boşluqlar
CSS-də adaptiv media: aspect-ratio, object-fit və object-position
Konteyner sorğuları: @container, container-type və cqi vahidləri
Layihə: mobil menyulu adaptiv lendinq
Müasir CSS
CSS dəyişənləri (custom properties): elan, görünmə sahəsi və fallback
Temalar və qaranlıq rejim: prefers-color-scheme, color-scheme və light-dark()
Nativ CSS iç-içəliyi (nesting) və & selektoru
Məntiqi xassələr və writing-mode: left/right əvəzinə inline/block
Sürüşdürmə: scroll-behavior, scroll-margin, scroll-snap və overscroll
Dəstəyin yoxlanılması: @supports və proqressiv təkmilləşdirmə
Qarşılıqlı əlaqə: cursor, pointer-events, user-select və touch-action
Layihə: dizayn tokenləri və qaranlıq temalı vizit kartı saytı
Animasiyalar və vizual effektlər
Keçidlər: transition, timing funksiyaları və @starting-style
2D transformasiyalar: translate, rotate, scale, skew və transform-origin
3D transformasiyalar: perspective, rotateX/Y və çevrilən kart
@keyframes animasiyaları: animation xassəsi və parametrləri
Animasiyaların performansı və əlçatanlığı: will-change və prefers-reduced-motion
Filtrlər və qarışdırma rejimləri: filter, backdrop-filter və mix-blend-mode
Kəsmə və maskalar: clip-path və mask-image
::before və ::after ilə dekorativ üsullar
View Transitions: CSS ilə səhifələr arasında hamar keçidlər
Layihə: animasiyalı UI komponentləri dəsti
Siyahıların, cədvəllərin və formaların üslublandırılması
Siyahıların tərtibatı və CSS sayğacları
Cədvəllərin tərtibatı: border-collapse, zebra, yapışqan başlıq və adaptivlik
Formaların tərtibatı: sahələr, düymələr, fokus, appearance və accent-color
Təmiz CSS ilə xüsusi checkbox, radio və switch
CSS-də forma vəziyyətləri: :valid, :invalid, :user-invalid və :has()
Layihə: kursa qeydiyyat formasının üslublandırılması
CSS arxitekturası və Sass
Reset və Normalize: layihənin baza üslubları
BEM metodologiyası: bloklar, elementlər və modifikatorlar
Layihədə CSS-in təşkili: fayllar, qatlar və dizayn tokenləri
Sass: dart-sass quraşdırılması, dəyişənlər, iç-içəlik və partial-lar
Sass modulları: @use, @forward və daxili modullar
Sass: mixin-lər, funksiyalar, dövrlər və şərtlər
Tailwind CSS v4
Tailwind CSS v4: utility-first yanaşması və quraşdırma
Tailwind utility-ləri: boşluqlar, tipoqrafiya, rənglər, Flexbox və Grid
Tailwind variantları: adaptivlik, vəziyyətlər, dark və group/peer
Tailwind v4-ün fərdiləşdirilməsi: @theme, xüsusi utility-lər və komponentlər
Layihə: Tailwind CSS ilə lendinq bölmələri
Performans və final layihə
CSS performansı: kritik CSS, şriftlərin yüklənməsi və Core Web Vitals
Figma maketindən koda: ölçülər, asset-lər və vərstka planı
Final layihə: Figma maketinin vərstkası və GitHub Pages-də yayımlanması

HTML & CSS kursu · CSS Grid: əsaslar

Layihə: CSS Grid ilə foto qalereya

🔒 Bu, dərsin əvvəlidir. Tam versiyası abunə ilə əlçatandır.

Hesab yarat Daxil ol

← Əvvəlki dərs🔒 grid-template-areas: səhifənin adlandırılmış sahələrlə qurulması Növbəti dərs →🔒 Qeyri-aşkar şəbəkə: grid-auto-rows və grid-auto-columns

PROWIDIT Education Academy

Bakıda onlayn proqramlaşdırma kursları. Canlı dərslər, 80% praktika, mentor dəstəyi və işə düzəlməyə kömək.

Front End

HTML & CSS JavaScript TypeScript React Next.js Vue.js

Back End

SQL (PostgreSQL, MySQL) PHP Laravel Python Alqoritmlər Django & FastAPI Node.js Full Stack

Alətlər və AI

Git & GitHub Docker və Deploy Proqramçılar üçün AI

Faydalı

Pulsuz sınaq dərsi Mentorluq və müsahibəyə hazırlıq Şirkətlər üçün Bloq FAQ

Əlaqə

+994 77 333 38 36 info@prowid.com Video dərslər Müraciət göndər

© 2021 – 2026 Prowid — IT Education Academy. Bütün hüquqlar qorunur. Bakı, Azərbaycan