Frontend dünya sürətlə irəliləyən sahələrdən biridir və bu istiqamətdə təzəcə özünü sınamaq istəyən junior proqramçıların müsahibə prosesi maraqlı, eyni zamanda çətin ola bilir. Bu yazıda frontend developer olaraq qarşılaşa biləcəyiniz əsas sualları əhatə edəcəyik.
HTML Sualları
HTML nədir və nə üçün istifadə olunur?
HTML (HyperText Markup Language) veb səhifələrin əsas strukturu və məzmununu yaratmaq üçün istifadə olunan texnologiyadır. HTML proqramlaşdırma dili deyil. Proqramlaşdırma dillərində olduğu kimi məntiq, dəyişənlər, funksiyalar və alqoritmik əməliyyatlar həyata keçirilmir. Bunun əvəzinə, o, bir veb səhifənin necə görünəcəyini və hansı elementlərin harada yerləşəcəyini müəyyən edir.
HTML-nin əsas istifadələri:
- Məzmun daxil etmək: Mətn, şəkil, video və ya səs faylları əlavə etmək.
- Veb strukturu yaratmaq: Başlıqlar, abzaslar, bölmələr və menyular kimi hissələri təşkil etmək.
- Form yaratmaq: İstifadəçidən məlumat toplamaq üçün kontakt, qeydiyyat formları və ya axtarış sahələri əlavə etmək.
- Naviqasiya təmin etmək: Linklər vasitəsilə istifadəçini digər səhifələrə və ya bölmələrə yönləndirmək.
HTML5-in yenilikləri hansılardır?
HTML5 veb inkişafında yeni imkanlar təqdim edən əsaslı yeniləmədir. Onun əsas yenilikləri aşağıdakılardır:
- Semantik Tag-lar: HTML5 veb məzmununu daha yaxşı strukturlaşdırmaq üçün yeni tag-lar təqdim edir:
- <article>: Blog yazıları və ya xəbər məqalələri üçün.
- <section>: Məzmunun ayrı-ayrı bölmələrini təşkil etmək üçün.
- <nav>: Naviqasiya menyusunu yaratmaq üçün.
- <header> və <footer>: Veb saytin başlıq və alt hissələrini müəyyən edir.
- Multimedia Dəstəyi:
- <audio> və <video> elementləri səs və video fayllarını dəstəkləyir. Əlavə plugin-lər tələb etmir.
- Forma İdarəetməsində Yeniliklər: HTML5 yeni form atributları əlavə edib:
- required: Məlumatın daxil edilməsini məcburi edir.
- placeholder: İstifadəçiyə mətn daxil etməzdən əvvəl nümunə göstərir.
- pattern: Xüsusi formatda məlumat daxil etmək üçün şablon təyin edir.
Inline və Block elementlərin istifadəsi
HTML-də elementlər üç əsas kateqoriyaya bölünür: Inline, Block və inline-block. Bu kateqoriyalar elementlərin necə göstərildiyini və digər elementlərlə necə qarşılıqlı əlaqədə olduğunu müəyyən edir.
Inline (Sətir Daxili) Elementlər - Inline elementlər sətir daxilində yerləşir və yan-yana göstərilir. Onlar yalnız öz məzmunlarının ölçüsü qədər yer tutur.
Xüsusiyyətlər:
- Yeni sətirə keçməzlər.
- Yalnız öz məzmununun eni və hündürlüyünə uyğunlaşır.
- width, height, margin-top, margin-bottom kimi xüsusiyyətlər qəbul etmir.
- Stil üçün padding və margin (yanlara) tətbiq edilə bilər.
Block (Blok Səviyyəli) Elementlər - Block elementlər yeni bir sətirdə başlayır və tam bir sətiri tutur.
Xüsusiyyətlər:
- Həmişə yeni bir sətirdən başlayır.
- Ümumiyyətlə, səhifənin tam eni qədər yer tutur.
- width, height, margin, padding kimi CSS xüsusiyyətləri tam dəstəklənir.
Inline-block Elementlər - Inline-block elementlər inline elementlər kimi yan-yana yerləşə bilir, amma block elementlərin bəzi xüsusiyyətlərini dəstəkləyir (məsələn, width və height).
Xüsusiyyətlər:
- Inline elementlər kimi yan-yana düzülürlər.
- Block elementlər kimi eni, hündürlüyü və daxili/çöl boşluqları təyin edilə bilər.
- Yeni sətirə keçmədən, çox istiqamətli stil imkanları təqdim edir.
Semantic HTML və SEO-nun əlaqəsi
Semantic HTML tag-lar axtarış motorlarının (SEO) məzmunu daha yaxşı başa düşməsinə kömək edir. Axtarış motorları semantik tag-ların strukturuna əsaslanaraq saytın hansı hissələrinin daha vacib olduğunu müəyyən edir.
Məsələn:
- <header>: Saytın başlıq bölməsi.
- <main>: Əsas məzmun.
- <footer>: Alt məlumatlar.
CSS Sualları
CSS nədir?
CSS (Cascading Style Sheets) front end proqramlaşdırma istifadə olunan, veb səhifələrin görünüşünü və stilini tərtib etmək üçün istifadə olunan bir texnologiyadır. HTML-dən ayrı olaraq, CSS veb elementlərin dizaynını idarə edir.
Position atributunun tipləri?
Bir HTML elementinin yerini təyin etmək üçün istifadə olunur. Bu xüsusiyyət, elementin yerləşmə davranışını müəyyən edərək onu digər elementlərdən fərqli şəkildə yerləşdirməyə imkan verir. position atributunun beş əsas tipi var:
- Static: Bu, position xüsusiyyətinin standart dəyəridir.
- Relative: mövqe təyin edərkən, elementin mövqeyi özünün normal mövqeyinə nisbətən dəyişdirilir. top, right, bottom və left xüsusiyyətləri ilə həmin mövqe tənzimlənir.
- Absolute: mövqe təyin edərkən, elementin yerləşməsi ən yaxın position edilmiş parent elementinə görə təyin olunur. Əgər belə bir parent yoxdursa, element səhifənin body hissəsinə görə yerləşir. Bu, elementin normal yerindən çıxması və müəyyən mövqedə yerləşməsi deməkdir..
- Fixed: mövqe təyin edərkən, element səhifə boyunca hərəkət etmədən müəyyən bir mövqedə qalır. Yəni, səhifə aşağıya doğru sürüşərkən belə, elementin mövqeyi sabit qalır.
- Sticky: mövqe, elementin müəyyən bir nöqtəyə qədər normal axında yerləşməsini, sonra isə müəyyən bir mövqedə "yapışmasını" təmin edir. Bu, səhifə sürüşərkən elementin yerində qalmasını təmin edir.
Flexbox nədir və özəllikləri?
Flexbox (Flexible Box Layout) CSS-də bir tərtibat sistemidir və elementlərin daha çevik və səmərəli şəkildə düzülməsini təmin etmək üçün istifadə olunur. Flexbox, xüsusilə müasir veb sayt dizaynında istifadə olunur, çünki o, elementlərin tərtibatını dinamik və adaptiv şəkildə tənzimləməyə imkan verir.
Flexbox, əsasən, container və items arasındakı əlaqəni idarə edir. Kontainerin daxilindəki elementlər, onlara verilən tərtibat xüsusiyyətlərinə görə sıralanır və düzülür. Bu, tərtibatı daha rahat idarə etməyə, elementləri mərkəzləşdirməyə, sətirləri dəyişməyə və ya elementləri genişlətməyə imkan verir.
- display: flex; - CSS xüsusiyyəti, elementləri flex container halına gətirərək içindəki elementləri (flex items) müəyyən bir düzülüşlə idarə etməyə imkan verir.
- flex-direction - Flexbox container içindəki elementlərin hansı istiqamətdə düzüləcəyini təyin edir.
- justify-content - Flex container daxilindəki elementlərin əsas ox (flex direction istiqamətində) boyunca hizalanmasını təyin edir.
- align-items - Elementlərin şaquli ox boyunca necə hizalanacağını təyin edir
- flex-wrap - Flex container içindəki elementlərin növbəti sətirə keçməsini və ya bir sətirdə qalmasını təyin edir.
Responsive dizayn nədir?
Responsive dizayn veb saytların müxtəlif ekran ölçülərinə və cihazlara uyğun olaraq düzgün şəkildə görünməsini təmin etmək üçün istifadə olunan bir yanaşmadır. Bu yanaşma, veb saytların dizaynını və tərtibatını avtomatik olaraq cihazın ekran ölçüsünə uyğunlaşdırır, beləliklə, istifadəçilər fərqli cihazlarda (kompüterlər, planşetlər, smartfonlar və digər cihazlar) saytı eyni komfortda istifadə edə bilərlər.
Responsive dizaynın əsas alətlərindən biri CSS media queries-dir. Media queries ekran ölçüsünə və digər xüsusiyyətlərə görə stil tətbiq etməyə imkan verir. Məsələn, min-width və max-width kimi xüsusiyyətlərdən istifadə edərək, ekranın müəyyən ölçüsünə əsaslanan stil təyin etmək mümkündür.
Nəticə
Frontend inkişafı, sürətlə irəliləyən və daim yenilənən bir sahədir. Bu sahədə əsas biliklər JavaScript və React kimi müasir texnologiyalar üzərində qurulub. Junior frontend developer olaraq, JavaScript və React ilə bağlı biliklərinizin olması çox vacibdir, çünki bu texnologiyalar interaktiv və dinamik veb tətbiqlərinin qurulmasında əsas rol oynayır. Lakin HTML və CSS biliklərinin də çox önəmli olduğunu unutmayın, çünki düzgün strukturlanmış və vizual olaraq müasir standartlara uyğun hazırlanmış veb səhifələr yaratmaq üçün bu texnologiyalar təməl rolunu oynayır.
HTML səhifənin strukturu və məzmununu təşkil edir, CSS isə dizayn və stil məsələlərini idarə edir. Bu sahələri dərinləşdirərək, veb saytların düzgün və istifadəçi dostu olmasını təmin edə bilərsiniz. JavaScript və React, dinamik funksionallıq və istifadəçi təcrübəsini artırmaq üçün vacib olsa da, HTML və CSS-in təməl bilikləri olmadan bir səhifənin strukturunun düzgün olmasını təmin etmək mümkün deyil.
Beləliklə, frontend inkişafında həm JavaScript və React, həm də HTML və CSS bilikləri harmonik şəkildə istifadə edilməli və bir arada güclü nəticələr verməlidir.