Prowid loqosu — proqramlaşdırma kursları PROWIDIT Education Academy

HTML & CSS

HTML & CSS kursu — Prowid
Kursun müddəti
2 ay/ 16 dərs
Fərdi
Ayda 160 AZN
Qrupda
Ayda 130 AZN
Bütün kurs üçün ödəniş edərkən
15% endirim
Ödəniş hissə-hissə
50/50
Abunəlik ilə
ayda 30 AZN-dən
HTML və CSS veb səhifələrin yaradılmasında istifadə olunan iki əsas dildir. Kursda sıfırdan müasir, adaptiv və əlçatan saytlar qurmağı öyrənəcəksiniz.

Yeni qrup toplanır — yerinizi ayırmaq üçün müraciət edin

Kursa yazıl Pulsuz sınaq dərsi

Və ya şəxsi kabinetdə özünüz öyrənin → abunə ilə ayda 30 AZN-dən

Kurs proqramı

Veb necə işləyir: brauzer, server, HTTP, domen və hostinq
İş alətləri: VS Code, DevTools, Emmet
HTML əsasları: sənədin strukturu, mətn, linklər, şəkillər
Semantik HTML5: header, nav, main, article, section, footer
Siyahılar, cədvəllər, iframe, audio və video
Formalar, onların elementləri və validasiya
Meta-teqlər, SEO əsasları və Open Graph
Əlçatanlıq (a11y): alt mətnlər, ARIA, klaviatura ilə naviqasiya
CSS əsasları: selektorlar, kaskad, spesifiklik, box model
Rənglər, şriftlər, fonlar və ölçü vahidləri (px, rem, %, vw)
Flexbox
CSS Grid Layout
Adaptiv dizayn: media queries, mobile-first, adaptiv şəkillər
CSS dəyişənləri (custom properties) və @-qaydalar
Keçidlər, transformasiyalar və animasiyalar (2D/3D)
Sass və Tailwind CSS ilə tanışlıq
Final layihə: Figma maketinin vərstkası və GitHub Pages-də yayımlanması
Necə öyrədirik?

Tədris mərhələləri

01

Vebinar

Tələbələr dərsə canlı yayım vasitəsilə qoşulurlar. Hər dərsin sonunda keçirilən dərsin video formatı tələbələrə göndərilir.

02

Ev tapşırığı

Bütün tapşırıqlar vebinarda keçilən mövzuya əsaslanır. Ev tapşırığı materialın möhkəmləndirilməsinə və daha yaxşı anlaşılmasına kömək edir.

03

Mentorla iş

Təlimçi həm tədris zamanı, həm də dərsdən kənar vaxtlarda qrupla əlaqədə olur. Yaranan suallar dərhal cavablandırılır.

04

Portfolio

Kurs müddətində müxtəlif mövzulu bir neçə layihə hazırlanacaq. Bu, bacarıqlarınızı işəgötürənlərə nümayiş etdirməyə imkan yaradacaq.

Müstəqil öyrənmə

Şəxsi kabinetdə tam proqram

Nəzəriyyə, nümunələr və praktika ilə 154 mövzu. İlk 8 mövzu pulsuzdur, qalanları abunə ilə. Slaydlı və trenajorlu interaktiv dərslər: 141.

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

Qrup və fərdi dərslər — müəllim, tapşırıqların yoxlanması və sertifikat. Abunəlik — öz tempinizdə materiallar, trenajorlar və irəliləyiş, müəllim rəyi olmadan.

HTML & CSS kursu — kursa yazılın

Formanı doldurun — növbəti qrupun başlama tarixini, dərs cədvəlini və ödəniş şərtlərini sizə bildirəcəyik. Və ya əvvəlcə pulsuz sınaq dərsinə gəlin.

+994 77 333 38 36 Və ya dərhal WhatsApp-a yazın info@prowid.com

Formanı göndərməklə məlumatlarınızın yalnız sizinlə əlaqə saxlamaq üçün istifadə olunmasına razılıq verirsiniz.

WhatsApp