Frontend developer olmaq üçün yol xəritəsi: HTML-dən portfolioya

Frontend developer olmaq istəyirsiniz, amma HTML, CSS, JavaScript, TypeScript, React, Next.js kimi texnologiyaların arasında çaşıb qalırsınız? Bu yol xəritəsində öyrənməni ardıcıl mərhələlərə bölürük: hər mərhələdə nəyi öyrənməli, hansı mini-layihəni qurmalı olduğunuzu və növbəti addıma nə vaxt hazır olacağınızı göstəririk. Tələsməyin: mərhələləri ardıcıl keçmək hər şeyi eyni anda öyrənməyə çalışmaqdan daha tez nəticə verir.

1. HTML və CSS: hər şeyin təməli

Brauzerdə gördüyünüz hər səhifə HTML və CSS üzərində qurulur. Freymvorklar dəyişir, bu ikisi isə qalır — ona görə bu mərhələyə ayırdığınız vaxt sonra dəfələrlə özünü doğruldur.

HTML və semantika

HTML səhifənin strukturunu təsvir edir. Məqsəd teqləri əzbərləmək deyil, hər element üçün mənaca düzgün teqi seçməkdir: naviqasiya üçün <nav>, əsas məzmun üçün <main>, düymə üçün <button> — hər şey üçün <div> yox. Semantik vərstka saytı həm axtarış sistemləri, həm də ekran oxuyucusundan istifadə edən insanlar üçün anlaşıqlı edir.

• başlıqların iyerarxiyası, siyahılar, linklər, şəkillər və alt atributu;
• semantik teqlər: header, nav, main, section, article, footer;
• formalar: input növləri, label, sadə validasiya;
• əlçatanlığın (accessibility) əsasları.

CSS: Flexbox, Grid və adaptiv dizayn

CSS səhifənin görünüşünə cavabdehdir. Əsas diqqəti elementlərin yerləşməsinə verin — frontenddə ən çox vaxt aparan iş məhz budur.

• selektorlar, kaskad, box model, rənglər və şriftlər;
• Flexbox — bir sətir və ya sütun üzrə düzülüş: menyular, kartlar, düymə qrupları;
• Grid — iki ölçülü maketlər: səhifənin skeleti, qalereyalar;
• media query-lər və mobile-first yanaşma ilə adaptiv dizayn;
• CSS dəyişənləri, keçidlər (transition) və sadə animasiyalar.

Mini-layihə: hazır dizayn maketinə əsasən bir səhifəlik lendinq — məsələn, kafe və ya idman zalı üçün. Səhifə telefonda, planşetdə və kompüterdə eyni dərəcədə səliqəli görünməlidir.

Növbəti addıma hazırsınız, əgər: sadə maketə baxan kimi onu Flexbox və ya Grid ilə necə quracağınızı təsəvvür edirsiniz, semantik teqləri düşünmədən seçirsiniz və səhifəniz mobil ekranda «dağılmır».

Bu mərhələni mentorla birlikdə HTML & CSS kursumuzda keçə bilərsiniz. Pulsuz sənədləşmə üçün ən etibarlı mənbələrdən biri — MDN Web Docs.

2. JavaScript: DOM, asinxron kod və fetch

JavaScript səhifəni «canlandırır»: düyməyə klik, formanın yoxlanması, serverdən məlumatın gətirilməsi. Bu, frontend yolunun ən uzun və ən vacib mərhələsidir — bütün freymvorklar elə JavaScript üzərində qurulub.

• dilin əsasları: dəyişənlər, tiplər, şərtlər, dövrlər, funksiyalar;
• massivlər və obyektlər, map, filter, reduce metodları;
• DOM: elementləri tapmaq, dəyişmək, hadisələrə (event) reaksiya vermək;
• asinxron kod: callback, Promise, async/await;
• fetch ilə API-dən məlumat almaq, JSON və xətaların emalı;
• modullar (import/export) və müasir ES2015+ sintaksisi.

Məsələn, API-dən istifadəçilərin siyahısını belə almaq olar:

async function loadUsers() {
  const response = await fetch('/api/users');
  if (!response.ok) throw new Error('Xəta: ' + response.status);
  return response.json();
}

Mini-layihə: açıq API-dən məlumat götürən hava proqnozu və ya film axtarışı səhifəsi — axtarış forması, yüklənmə göstəricisi və xəta mesajı ilə. Əlavə məşq kimi məlumatları brauzerin localStorage-ında saxlayan tapşırıqlar siyahısı (to-do list) yazın.

Növbəti addıma hazırsınız, əgər: kiçik interaktiv səhifəni kitabxanasız, sıfırdan yaza bilirsiniz, async/await-in necə işlədiyini öz sözlərinizlə izah edə bilirsiniz və konsoldakı xəta mesajını oxuyub problemi özünüz tapırsınız.

Dili sistemli öyrənmək üçün — JavaScript kursu. Kodun sətir-sətir necə icra olunduğunu görmək istəyirsinizsə, «Necə işləyir?» bölməmizdəki 100 pulsuz animasiyalı dərsə baxın — JavaScript mövzuları da oradadır.

3. Git və GitHub: kodunuzu idarə edin

Git kodun versiyalarını saxlayır, GitHub isə kodu internetdə saxlamaq və komanda ilə işləmək üçün platformadır. Bu mərhələni ayrıca göstərsək də, Git-dən ilk HTML səhifənizdən istifadə etməyə başlaya bilərsiniz — nə qədər tez, o qədər yaxşı.

• terminalın əsasları;
• commit, branch, merge və konfliktlərin həlli;
• GitHub-da repozitoriya, Pull Request və kod-review;
• statik saytı GitHub Pages-də dərc etmək.

Mini-layihə: əvvəlki bütün layihələrinizi GitHub-a yükləyin və hər birinə README yazın. Yeni funksiyanı ayrıca branch-da hazırlayıb Pull Request vasitəsilə əsas koda birləşdirin.

Növbəti addıma hazırsınız, əgər: Git ilə hər gün işləyirsiniz, commit mesajlarınız anlaşıqlıdır və nəsə səhv gedəndə kodun əvvəlki versiyasına qayıtmağı bilirsiniz.

Rəsmi sənədləşmə və pulsuz «Pro Git» kitabı git-scm.com saytındadır. Praktikada öyrənmək üçün — Git & GitHub kursu.

4. TypeScript: daha etibarlı kod

TypeScript JavaScript-ə statik tiplər əlavə edir. Redaktor səhvləri hələ kod yazılarkən, brauzerə çatmadan göstərir, böyük layihələrdə isə kodu oxumaq və dəyişmək xeyli asanlaşır. Müasir React, Vue və Next.js layihələrində TypeScript geniş istifadə olunur.

• əsas tiplər, union tiplər, type və interface;
• funksiyaların parametrlərinin və nəticəsinin tipləşdirilməsi;
• generics;
• API-dən gələn məlumatlar üçün tiplər.

type User = { id: number; name: string };

function greet(user: User): string {
  return `Salam, ${user.name}!`;
}

Mini-layihə: JavaScript mərhələsindəki layihənizi TypeScript-ə köçürün: API cavabı üçün tiplər yazın və redaktorun tapdığı səhvləri düzəldin.

Növbəti addıma hazırsınız, əgər: tip xətalarını oxuyub başa düşürsünüz, any-dən qaçırsınız və öz tiplərinizi rahat yazırsınız.

Ətraflı: TypeScript kursu.

5. Freymvork: React və ya Vue

Freymvork interfeysi təkrar istifadə olunan komponentlərdən qurmağa imkan verir. Başlanğıcda birini seçin və onu dərindən öyrənin: React daha geniş ekosistemə və böyük icmaya malikdir, Vue isə sadə və anlaşıqlı sintaksisi ilə tanınır. Əsas anlayışlar hər ikisində oxşardır, ona görə sonradan digərinə keçmək çətin olmayacaq.

• komponentlər, props və state;
• React-da hooks (useState, useEffect), Vue-da Composition API;
• siyahıların, şərti göstərilmənin və formaların idarə olunması.

Routing, state və məlumatların alınması

Real tətbiq bir neçə səhifədən ibarət olur və serverlə daim məlumat mübadiləsi aparır. Freymvorkun əsaslarından sonra bu üç mövzuya keçin:

• routing — səhifələr arasında keçid: React Router və ya Vue Router;
• state idarəetməsi — bir neçə komponentin paylaşdığı məlumat: Redux Toolkit və ya Pinia;
• data fetching — API sorğuları, keşləmə, yüklənmə və xəta vəziyyətləri, məsələn, TanStack Query ilə.

Mini-layihə: filtrləri, məhsul səhifəsi və səbəti olan kiçik onlayn mağaza (məlumatlar açıq API-dən) və ya bir neçə səhifəli tapşırıq meneceri.

Növbəti addıma hazırsınız, əgər: tətbiqi komponentlərə necə böləcəyinizi əvvəlcədən planlaşdırırsınız, state-in harada saxlanmalı olduğunu izah edə bilirsiniz və bir neçə səhifəli tətbiqi sıfırdan qura bilirsiniz.

Kurslar: React və Vue.js. Rəsmi sənədləşmə: react.dev və vuejs.org.

6. Next.js, testlər və deploy

Next.js və SSR əsasları

Next.js React əsasında qurulan freymvorkdur. Adi React tətbiqi səhifəni brauzerdə qurur, Next.js isə onu serverdə də hazırlaya bilir (SSR — server-side rendering). Nəticədə səhifə daha tez açılır və axtarış sistemləri onu daha yaxşı indeksləyir.

• App Router və fayl əsaslı routing;
• Server və Client Components arasındakı fərq;
• SSR, statik generasiya və SEO üçün metadata;
• sadə API route-lar.

Testlərin əsasları

Testlər kodu dəyişəndə əvvəlki funksiyaların pozulmadığına əminlik verir. Başlanğıc üçün unit testlər (Vitest və ya Jest) və komponent testləri (Testing Library) kifayətdir: funksiyanın düzgün nəticə qaytardığını və düyməyə klikdən sonra ekranda lazımi mətnin göründüyünü yoxlayın.

Deploy

Layihə yalnız sizin kompüterinizdə işləyirsə, onu heç kim görməyəcək. Statik saytları GitHub Pages və ya Netlify-da, Next.js tətbiqlərini Vercel-də dərc etmək asandır. Mühit dəyişənlərini (environment variables) və GitHub-dan avtomatik deploy-u da öyrənin.

Mini-layihə: Next.js ilə bloq və ya portfolio saytı — məqalə səhifələri serverdə hazırlanır, əsas funksiyalar üçün bir neçə test yazılır, nəticə isə internetdə açılan linkdir.

Növbəti addıma hazırsınız, əgər: SSR-in nə vaxt lazım olduğunu izah edə bilirsiniz, layihənizdə testlər var və hər push-dan sonra sayt avtomatik yenilənir.

Ətraflı: Next.js kursu; Vitest ilə testlər React kursunda keçilir.

7. Portfolio: bacarıqlarınızın sübutu

İşəgötürən üçün ən inandırıcı arqument internetdə işləyən layihələr və GitHub-da açıq koddur. Portfolioda layihələrin sayından daha vacibi bir neçə səliqəli, sona çatdırılmış işin olmasıdır.

• hər layihənin canlı linki və README-si olsun: layihə nə edir, hansı texnologiyalarla qurulub, necə işə salınır;
• ən azı bir layihə real istifadəçi üçün olsun — tanışınızın kiçik biznesi və ya öz hobbiniz;
• mobil versiyaya, kodun təmizliyinə və anlaşıqlı commit tarixçəsinə diqqət edin;
• layihələrinizi, qısa bioqrafiyanızı və əlaqə məlumatlarınızı bir portfolio saytında toplayın.

İşə müraciət etməyə hazırsınız, əgər: hər layihənizi qısa və aydın izah edə bilirsiniz, səliqəli CV-niz var və vakansiyalardakı tələblərin əksəriyyəti sizə tanış gəlir. «Tam hazıram» hissini gözləməyin — o, çox vaxt heç gəlmir.

Kurslarımızda bir neçə portfolio layihəsi hazırlanır, kurs bitdikdən sonra isə CV-nin hazırlanmasında və işə qəbul prosesində köməklik göstəririk.

Qısaca: yol xəritəsi

Mərhələ	Əsas mövzular	Kurs
HTML & CSS	semantika, Flexbox, Grid, adaptiv dizayn	HTML & CSS
JavaScript	DOM, async/await, fetch	JavaScript
Git & GitHub	commit, branch, Pull Request	Git & GitHub
TypeScript	tiplər, interfeyslər, generics	TypeScript
React və ya Vue	komponentlər, routing, state, data fetching	React, Vue.js
Next.js, testlər, deploy	SSR, unit testlər, dərc	Next.js, React (testlər)
Portfolio	layihələr, README, CV	—

Yol uzun görünə bilər, amma hər mərhələ əvvəlkinin üzərində qurulur və hər mini-layihə sizi portfolioya bir addım da yaxınlaşdırır.

Hansı mərhələdə olduğunuzu və haradan davam etməli olduğunuzu bilmirsinizsə, pulsuz sınaq dərsinə gəlin: müəllimlə tanış olacaq, dərsin necə keçdiyini görəcək, səviyyənizi yoxlayacaq və kurs seçimində kömək alacaqsınız. Heç bir öhdəlik yoxdur. JavaScript-i artıq bilirsinizsə, məntiqi növbəti addım — React kursu.