HTML5 CSS3 başlanğıc səviyyədən irəli səviyyəyə qədər

Youtube kanalımda dərs videolarından yararlanmaq üçün klikləyin

Medium hesabımda məqalələrimlə tanış olmaq üçün klikləyin

Burada olan proyektlərdən ilhamlanaraq HTML və CSS yazan dostlar öz proyektlərini yaza, eyni zamanda HTML və CSS-in dərinlikləri ilə tanış ola bilərlər. Repoda olan bəzi proyektlərdə əlavə olaraq JavaScript, Bootstrap, Sass, ikonlar, Google Fonts və s. istifadə edilmişdir. Bu repoda sadəcə HTML CSS və onlara yaxın texnologiyalar istifadə edildiyi üçün kopyala yapışdır məntiqindən istifadə edilmişdir. Təbii ki gündəlik həyatda iş mühitində bu yol müsbət deyil. Lakin öyrənmə prosesində və ya statik olan veb saytlar üçün kopyala yapışdır məntiqi uyğundur. Çünki bir data alış verişi olmadığı üçün səhivələrin statik olmasında problem yoxdur. Əlbətdə dinamik səhivələrlə daha çox çalışılır lakin qeyd etdiyim kimi öyrənmə prosesində bunu çoxda düşünməyə gərək yoxdur. Önəmli olan bu texnologiyalardan istifadə edərək müəyyən kodlar yaza bilməkdir.

QEYD: Əvvəllər bu proyektlər ayrı-ayrı repolarda idi, bu səbəbdən repoların sayı çox idi və qarışıqlıq yaradırdı. Buna görə də bütün proyektləri bir repo altında toplamağa qərar verdim.

PROYEKTLƏR HAQQINDA MƏLUMAT:

• SPORT SİTE - filename: sportSite

  Bu proyektdə FlexBox ilə yanaşı CSS Grid istifadə edilir. CSS Grid daha çox ümumi səhifə dizaynında istifadə olunur və bu yönü ilə FlexBox-dan fərqlənir. Proyekt responsive dizayn edilmişdir. CSS-də rəng seçimlərinin idarə edilməsi üçün :root və var() dəyişənlərindən istifadə edilmişdir. Bu layihə, artıq bir neçə addım irəliləmiş istifadəçilər üçün faydalı bir nümunədir. Eyni zamanda fərdiləşdirilmiş kitabxana şəklində xüsusi classlar hazırlanmışdır ki, bu da gələcək proyektlər üçün əlverişlidir. Ana səhifədə menyu hissəsində fərqli seçimlər var, lakin test üçün yalnız home bölməsi işlənmişdir. Layihəni genişləndirmək üçün onu pull edərək digər səhifələri işləyə bilərsiniz.

• MOVIEAPP - filename: movieapp

  Bu proyekt HTML5, CSS3 və digər texnologiyalardan istifadə edir. Layihə responsive deyil, lakin onu pull edərək responsive dizayn edə bilərsiniz. Bu, responsive dizaynı öyrənmək istəyənlər üçün yaxşı bir məşq ola bilər.

• HOTEL SITE - filename: hotelSite

  Burada HTML5 və CSS3 istifadə edilərək sadə bir sayt hazırlanmışdır. Bu proyekt əsasən FlexBox və onun xüsusiyyətlərini mənimsəmək üçün əlverişlidir. FlexBox-un flex-direction, flex-wrap, justify-content, align-items, align-self, grow, shrink, basis, align-content, gaps, flex margin kimi xüsusiyyətlərindən istifadə edilmişdir.

• FREELANCER SİTE - filename: freelancerSite_SassandLess

  Bu proyektdə HTML5, CSS3 qismən JavaScript və SCSS-dən istifadə edilmişdir (Əgər başlanğıc səviyyədəsinizsə, JavaScript hissəsinə çox diqqət etməyə bilərsiniz). Proyektə kənardan əlavələr edildiyi üçün package.json faylı əlavə olunmuşdur və içərisində istifadə edilən texnologiyaları görə bilərsiniz. JavaScript, yalnız ana səhifədə istifadə edilmişdir və hazır kod olaraq əlavə edilmişdir. Ümumilikdə bu, geniş bir layihədir və burada olan kodları incələyərək öz layihələrinizi daha da inkişaf etdirə bilərsiniz.

• BOOTSTRAP SITE ONE - filename: bootstrapSite_one

  Bu layihə əsasən HTML, CSS və Bootstrap köməkliyi ilə hazırlanmışdır. 3 səhifədən ibarət bir layihədir. Səhifələrin hər birində fərqli və bir-birinin bənzəri olmayan dizaynlar mövcuddur ki, bu kodları təkrar işləmək istəyən şəxslərin daha möhkəm biliklərə sahib olmasına zəmin yaradır. Eyni zamanda layihədə əlaqə səhifəsində form və məkan məlumatları göstərilmişdir. Ümumilikdə çox böyük layihə olmasa da, içərisində Bootstrap daha çox istifadə edilmişdir və Bootstrap biliklərinin möhkəmlənməsinə dəstək verə biləcək bir layihədir.

• BOOTSTRAP Product Cards - filename: bootstrapProductCard

  Layihə Bootstrap əsaslı hazırlanmışdır və əlavə olaraq CSS kodlarından istifadə edilmişdir. Bir məhsul kartı hansı formada olur və içərisində nələrdən istifadə edilir, bunların istifadəsinə aid sadə bir layihədir. Lokalda yerləşdirilən şəkillərdən istifadə edilmişdir görsəl hissəsində.

• BOOTSTRAP Comments - filename: bootstrapComments

  Bu kiçik həcimli bol bootstrap classı istifadə edilmiş bir proyektdir. Təbii olaraq dinamik hazırlanmadığı üçün təkrar kodlar və kopyala yapışdır məntiqi istifadə edilmişdir. Gələcəkdə real iş mühitində proyektlərdə bu və ya buna yaxın formada comment səhivələri yazmaq üçün əla praktika proyektidir. Burada əsas məqsəd bootstrapın classlarının funksionallığını praktika edərək görməkdir. Eyni zamanda responsive dizayn üçündə classlar istifadə edilmişdir.

• BOOTSTRAP Filter - filename: bootstrapFilter

  Bu proyekt ümumilikdə sadə, filtirləmə üçün isə orta dərəcəlidir. Burada yenə Bootstrap-dan istifadə edilmişdir, əlavə olaraq isə CSS kodları yazılmışdır. Örnək olaraq bir satış səhifəsinin filtr hissəsinə bənzədilməyə çalışılıb. Lakin əsas məqsəd tam olaraq hər hansı bir saytın filtirləməsini hazırlamaq deyil. Burada əsas məqsəd Bootstrap istifadə edərək necə filtreleme hissəsini hazırlaya biləcəyimizi öyrənməkdir.

  Təbii olaraq əlavələr və ya azaltmalar edə bilərik. Eyni yolla biz başqa formalı accordion menulərdə hazırlaya bilərik. Yəni istifadə olunan Bootstrap classları bizə çox şaxəli imkanlar təqdim edir.

• BOOTSTRAP E-Shopping - filename: bootstrapShoppingSite

  Bu layihədə HTML və CSS ilə yanaşı, Bootstrap və SCSS istifadə edilmişdir. Layihə daxilində məhsul detalları səhifəsi də mövcuddur. Ana menyuda slayd (slide) funksionallığı əlavə edilmişdir. JavaScript istifadə edilərək məhsulların həm detallı səhifələri, həm də fotolarının geniş şəkildə təqdim edilməsi təmin edilmişdir.

  Diqqət: Layihəni GitHub hesabıma yüklədiyim zaman node_modules qovluğunu .gitignore faylına əlavə etmişəm. Layihəni lokalınızda aktiv etmək üçün terminalda aşağıdakı əmri icra etməyiniz vacibdir:

  npm install

  Bu əmrin icrası, package.json faylında göstərilən asılılıqları layihəyə əlavə edəcəkdir. Əks halda, bəzi funksionallıqlar deaktiv qala bilər. Məsələn, slaydın avtomatik dövr etməsi və ya əl ilə dəyişdirilməsi kimi xüsusiyyətlər işləməyə bilər.

• Movie App Only HTML - filename: movieAppOnlyHTML

  Bu layihə çox əvvəlki dövrlərə aiddir. Yalnız HTML istifadə edilmişdir. HTML ilə yeni başlayan dostlar üçün əla bir təcrübədir. Səhifələr yalnız linklər vasitəsilə yönləndirilmişdir. CSS və digər texnologiyalardan istifadə edilməmişdir.

  Əsas Xüsusiyyətlər:

  • Yalnız HTML ilə hazırlanmışdır.
  • Linklər vasitəsilə səhifələr arasında yönləndirmə var.
  • Heç bir CSS və ya JavaScript istifadə edilməmişdir.

  Layihə əvvəllər yazdığım kodları araşdırarkən qarşıma çıxdı və nostalji hissi yaşatdı. Əminəm ki, bu repoya baxan və yeni başlayan dostlar da özlərini inkişaf etdirərək gələcəkdə bu hissləri yaşayacaqlar.

• Cinema Reservation - filename: cinemaReservation

  Bu layihədə HTML, CSS və JavaScript istifadə edilmişdir. Funksionallıq baxımından əsas hissə JavaScript ilə təmin olunmuşdur, lakin HTML və CSS də aktiv şəkildə istifadə olunmuşdur. Proyekt, sinema rezervasiyası ilə bağlıdır və 3 fərqli kateqoriyada film seçimi imkanı təqdim edir. Hər kateqoriya üçün qiymətlər, bilet sayına görə avtomatik olaraq dəyişir.

  Ümumiyyətlə, bu layihə həm HTML, CSS, həm də JavaScript ilə işləməyi inkişaf etdirmək üçün əlverişli bir təcrübədir.

• Drawing App - filename: drawingApp

  Bu layihədə HTML, CSS və JavaScript aktiv şəkildə istifadə edilmişdir. Layihədə əsasən HTML elementi olan canvas ön plana çıxır, çünki əsas iş sahəmiz məhz onun üzərindədir və bizə əlverişli şərait yaratmışdır. CSS ümumilikdə daha praktik və çox istifadə edilmişdir. Proyekti araşdırma etdikdən sonra özünüz kodları yazmağı yoxlaya bilərsiniz. İlk başlarda digər layihələrə nisbətdə daha qarışıq gələ bilər. Lakin incələmə yolu ilə daha da effektli işlər yaratmaq mümkündür.

• Menu Right to Left - filename: menuRightToLeft

  HTML, CSS və JavaScript istifadə edilərək sadə, responsive dizaynda bir menyu hazırlanmışdır. CSS daha çox istifadə olunmuşdur. JavaScript istifadəsi sadəcə klikləmə funksiyalarında və display dəyişimlərində istifadə edilmişdir. Ümumilikdə CSS-in bir çox mövzularına toxunulmuş kiçik həcmli layihədir. Menyu hazır olduğu üçün davamını inkişaf etdirərək əla bir layihə yaratmaq olar.

---

Youtube kanalımda dərs videolarından yararlanmaq üçün klikləyin.

Medium hesabımda məqalələrimlə tanış olmaq üçün klikləyin.