DEV Community

Cover image for Mastering HTML i CSS za Intervju: 50 Obaveznih Pitanja i 10 Koja će Vas Iznenaditi
Jelena Petkovic
Jelena Petkovic

Posted on

Mastering HTML i CSS za Intervju: 50 Obaveznih Pitanja i 10 Koja će Vas Iznenaditi

#html #frontend #css #interview

Kada se pripremate za intervju za poziciju front-end developera, HTML i CSS su osnovne tehnologije koje će vam sigurno biti na intervjuu. Većina poslodavaca će vam postaviti uobičajena pitanja koja se tiču strukture HTML-a i stilizacije CSS-om, ali postoje i ona pitanja koja vas mogu iznenaditi i izazvati konfuziju. Zato je važno ne samo savladati osnovna znanja, već biti spreman na dublja i neočekivana pitanja.
U ovom postu, prvo ćemo proći kroz 50 najčešćih pitanja koja se postavljaju na intervjuima za HTML i CSS, zajedno sa detaljnim odgovorima. Na kraju, dodaću još 10 neočekivanih pitanja koja vas mogu zbuniti, ali sa objašnjenjima kako ih rešiti.

HTML pitanja:

1. Šta je HTML i koja je njegova osnovna svrha?
HTML (HyperText Markup Language) je jezik za označavanje koji se koristi za strukturiranje sadržaja na web stranici. Omogućuje kreiranje naslova, paragrafa, linkova, slika, tabela i drugih elemenata stranice.

2. Koje su glavne HTML5 novine u odnosu na prethodne verzije?
HTML5 donosi semantičke oznake poput <header>, <footer>, <article>, <section>, podršku za multimedijske elemente <audio> i <video>, lokalno skladištenje (localStorage, sessionStorage), te unapređenu podršku za grafiku putem <canvas> elementa.

3. Objasni razliku između id i class atributa.
id je jedinstveni identifikator koji se može dodeliti samo jednom elementu na stranici, dok se class može dodeliti više elemenata i koristi se za grupisanje elemenata sa sličnim stilom ili funkcionalnošću.

4. Šta je semantički HTML i zašto je važan?
Semantički HTML koristi elemente koji imaju jasno definisano značenje (npr. <article>, <footer>, <header>). To poboljšava pristupačnost, SEO, čitljivost koda i olakšava rad pretraživačima i čitačima ekrana.

5. Koje su glavne semantičke HTML5 oznake i kako se koriste?
Glavne oznake uključuju <header>, <footer>, <nav>, <article>, <section>, <aside>, i <main>. Ove oznake pružaju strukturu i jasnoću za organizaciju sadržaja.

6. Šta je DOCTYPE i zašto je važan u HTML dokumentu?
<!DOCTYPE html> deklaracija definiše verziju HTML-a koja se koristi. U HTML5, jednostavna deklaracija <!DOCTYPE html> obezbeđuje da se stranica prikazuje pravilno u svim pretraživačima.

7. Kako napraviti link u HTML-u?
Koristi se <a> oznaka: <a href="https://example.com">Klikni ovde</a>. href atribut specificira URL na koji link vodi.

8. Kako kreirati tabelu u HTML-u?
Tabela se kreira pomoću <table> oznake, a redovi i kolone pomoću <tr>, <td>, i <th>. Primer:

<table>
  <tr>
    <th>Ime</th>
    <th>Prezime</th>
  </tr>
  <tr>
    <td>Marko</td>
    <td>Marković</td>
  </tr>
</table>
Enter fullscreen mode Exit fullscreen mode

9. Šta je atribut alt kod slike i zašto je važan?
alt atribut pruža alternativni tekst za slike koje se ne mogu prikazati. Važan je za SEO i pristupačnost, jer ga čitači ekrana koriste za opisivanje slike.

10. Kako kreirati formu u HTML-u?
Forme se kreiraju pomoću <form> oznake sa poljima poput <input>, <textarea>, i <button>. Primer:

 <form action="/submit" method="POST">
     <input type="text" name="ime" placeholder="Unesi ime" />
     <button type="submit">Pošalji</button>
 </form>
Enter fullscreen mode Exit fullscreen mode

11. Kako se koristi input tipa radio i checkbox?
radio se koristi kada je potrebno izabrati jednu opciju iz grupe, dok checkbox omogućava izbor više opcija. Primer:

  <input type="radio" name="pol" value="muško" /> Muško
  <input type="radio" name="pol" value="žensko" /> Žensko
  <br>
  <input type="checkbox" name="hobi" value="sport" /> Sport
Enter fullscreen mode Exit fullscreen mode

12. Kako uključiti video u HTML?
Koristi se <video> oznaka:

   <video controls>
      <source src="video.mp4" type="video/mp4">
   </video>
Enter fullscreen mode Exit fullscreen mode

13. Šta je atribut placeholder u HTML formi?
placeholder atribut pruža tekstualni nagoveštaj unutar polja za unos koji se vidi dok korisnik ne unese podatke. Primer:

   <input type="text" placeholder="Unesi svoje ime">
Enter fullscreen mode Exit fullscreen mode

14. Kako definišemo listu sa redosledom i bez redosleda?
Koristi se <ol> za numerisane liste i <ul> za liste sa tačkama. Stavke se definišu pomoću <li>. Primer:

   <ul>
      <li>Prva stavka</li>
      <li>Druga stavka</li>
   </ul>
Enter fullscreen mode Exit fullscreen mode

15. Kako pravimo spoljne i unutrašnje linkove u HTML-u?
Spoljni link vodi do druge stranice na internetu (koristi se puna URL adresa), dok unutrašnji link vodi na drugu stranicu unutar sajta (koristi se relativna adresa). Primer:

   <a href="https://example.com">Spoljni link</a>
   <a href="/kontakt">Unutrašnji link</a>
Enter fullscreen mode Exit fullscreen mode

CSS pitanja:

16. Šta je CSS i čemu služi?
CSS (Cascading Style Sheets) služi za stilizovanje HTML elemenata, definišući boje, margine, pozicioniranje, fontove, itd.

17. Koje su prednosti korišćenja eksternih CSS fajlova?
Eksterni CSS fajlovi omogućavaju da se stilovi dele između više HTML stranica, smanjujući redundanciju i olakšavajući održavanje koda.

18. Kako primenjujemo CSS na HTML elemente?
CSS se može primeniti na tri načina: inline (unutar HTML-a pomoću style atributa), u <style> oznaci unutar <head>, ili u eksternom CSS fajlu.

19. Objasni box model u CSS-u.
CSS box model definiše kako se svaki HTML element prikazuje, uključujući sadržaj (content), padding, border, i margin. To je ključna osnova za razumevanje layout-a.

Image description

20. Kako dodati pozadinsku sliku u CSS-u?
Koristi se background-image svojstvo:

      body {
        background-image: url('slika.jpg');
      }
Enter fullscreen mode Exit fullscreen mode

21. Kako centrirati element horizontalno pomoću CSS-a?
Za blok elemente koristi se margin: 0 auto ako element ima zadatu širinu. Za inline elemente koristi se text-align: center na roditelju.

22. Kako se kreiraju responsive web stranice pomoću CSS-a?
Responsive dizajn se kreira korišćenjem media query-ja, fleksibilnih jedinica poput em, rem, i vw/vh, i fleksibilnih layout sistema kao što su Flexbox i Grid.

23. Šta su CSS pseudo-klase i kako se koriste?
Pseudo-klase definišu posebna stanja elemenata, npr. :hover, :focus, :nth-child(). Primer:

      a:hover {
        color: red;
      }
Enter fullscreen mode Exit fullscreen mode

24. Kako koristiti Flexbox za postavljanje elemenata?
Flexbox je moćan alat za postavljanje elemenata u jednom pravcu (horizontalno ili vertikalno) i koristi se pomoću display: flex. Primer:

      .container {
        display: flex;
        justify-content: center;
        align-items: center;
      }
Enter fullscreen mode Exit fullscreen mode

25. Kako funkcionišu CSS grid layout sistemi?
CSS Grid omogućava kreiranje dvodimenzionalnih layout-ova koristeći redove i kolone.
Primer:

      .grid {
        display: grid;
        grid-template-columns: 1fr 2fr;
      }
Enter fullscreen mode Exit fullscreen mode

26. Koja je razlika između inline i block elemenata u CSS-u?
block elementi zauzimaju celu širinu roditeljskog elementa i počinju novi red (npr. <div>), dok inline elementi zauzimaju samo potrebnu širinu i stoje u istom redu (npr. <span>).

27. Kako funkcioniše z-index?
z-index definiše redosled preklapanja elemenata. Elementi sa većim z-index vrednostima će biti iznad onih sa manjim vrednostima. Radi samo na elementima sa position vrednostima osim static.

28. Šta je razlika između position: relative, absolute, fixed, i sticky?
- relative: Pozicionira element relativno prema njegovom uobičajenom mestu.

- absolute: Pozicionira element relativno prema najbližem pozicioniranom roditelju.

- fixed: Element je fiksiran u odnosu na prozor pretraživača.

- sticky: Kombinacija relative i fixed - ostaje relativan dok ne dosegne određenu tačku.

29. Kako se koristi calc() funkcija u CSS-u?
calc() omogućava kombinovanje različitih CSS jedinica u izračunavanju vrednosti.
Primer:

      div {
        width: calc(100% - 50px);
      }
Enter fullscreen mode Exit fullscreen mode

30. Kako se koristi transition za animaciju u CSS-u?
transition omogućava dodavanje efekta prelaza između dva stanja elementa.
Primer:

      button {
        background-color: blue;
        transition: background-color 0.3s ease;
      }
      button:hover {
        background-color: red;
      }
Enter fullscreen mode Exit fullscreen mode

31. Kako primeniti više klasa na jedan HTML element?
Više klasa se dodaje razdvajanjem njihovih imena razmakom. Primer:

      <div class="box rounded"></div>
Enter fullscreen mode Exit fullscreen mode

32. Kako se kreira vertikalni razmak između blok elemenata?
Koristi se margin. Na primer, margin-top ili margin-bottom mogu kreirati razmak između elemenata.

33. Šta su CSS varijable i kako se koriste?
CSS varijable omogućavaju definisanje prilagodljivih vrednosti koje se mogu koristiti više puta u stilovima.
Primer:

      :root {
        --main-color: #96c1b0;
      }
      body {
        background-color: var(--main-color);
      }
Enter fullscreen mode Exit fullscreen mode

34. Kako izbeći CSS konflikte pomoću specificity pravila?
Specificity određuje koja pravila će biti primenjena kada više selektora odgovaraju istom elementu. Specifičniji selektori (npr. ID selektori) imaju prednost nad opštim selektorima (npr. tagovi ili klase).

  1. Nivo - univerzalni selektor, ne utiče uopšte na specifičnost (*)

  2. Nivo

    • HTML selektor
    • pseudo-element (::before, ::after, ::first-letter, ::first-line, ::selection...)

  3. Nivo

    • selektor klase
    • selektor HTML parametra (npr.: a[href$=".pdf"], input[name*="email"] , [class~="button"] ...)
    • pseudo-klasa (:hover, :focus, :active, :first-child, :nth-child())

  4. Nivo - ID selektor

  5. Nivo - inline CSS

  6. Nivo - !important pravilo

35. Šta znači !important i kada ga treba koristiti?
!important preuzima prioritet nad bilo kojim drugim pravilima za isti element. Koristi se samo u posebnim slučajevima kada treba nadjačati pravilo.

36. Kako kreirati transition ili transform animacije u CSS-u?
Koriste se svojstva poput transition za prelaze između stanja ili transform za transformacije (rotacija, skaliranje, itd.). Primer:

      div {
        transition: transform 0.5s;
      }
      div:hover {
        transform: rotate(45deg);
      }
Enter fullscreen mode Exit fullscreen mode

37. Kako dodati senku elementima?
Koristi se box-shadow za elemente kao što su div-ovi ili text-shadow za tekst. Primer:

      box {
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
      }
Enter fullscreen mode Exit fullscreen mode

38. Šta znači display: none i kako se razlikuje od visibility: hidden?
display: none potpuno uklanja element iz dokumenta i layout-a, dok visibility: hidden element čini nevidljivim, ali on i dalje zauzima prostor na stranici.

39. Kako koristiti media queries za prilagođavanje različitim uređajima?
Media queries omogućavaju promenu stilova zavisno od veličine ekrana ili uređaja.
Primer:

      @media (max-width: 768px) {
        body {
          background-color: blue;
        }
      }
Enter fullscreen mode Exit fullscreen mode

40. Kako koristiti float i koje su njegove alternative?
float se koristi za postavljanje elemenata levo ili desno od roditeljskog elementa. Moderne alternative su Flexbox i Grid.

41. Kako kreirati transparentnost u CSS-u?
Koristi se opacity ili RGBA boje. Primer:

      div {
        opacity: 0.5;
      }
Enter fullscreen mode Exit fullscreen mode

42. Kako definišemo globalne stilove?
Globalni stilovi se definišu na vrhu CSS fajla ili koristeći selektore poput * ili html, body.
Primer:

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
Enter fullscreen mode Exit fullscreen mode

43. Šta su CSS vendor prefiksi i zašto su važni?
Vendor prefiksi (npr. -webkit-, -moz-, -o-) omogućavaju podršku za novija CSS svojstva u različitim pretraživačima, dok svojstva još nisu potpuno standardizovana.

44. Kako koristiti min-width i max-width za responsivne dizajne?
min-width i max-width ograničavaju minimalne i maksimalne širine elemenata, čime se osigurava prilagodljiv dizajn.

45. Kako primeniti iste stilove na više elemenata u CSS-u?
Više selektora se može grupisati koristeći zarez.
Primer:

      h1, h2, h3 {
        color: #96c1b0;
      }
Enter fullscreen mode Exit fullscreen mode

46. Kako stilizovati forme u CSS-u?
Možeš koristiti CSS pravila kao za druge elemente, ali može biti potrebno dodatno prilagođavanje za različite pretraživače.
Primer:

      input[type="text"] {
        padding: 10px;
        border: 2px solid #96c1b0;
      }
Enter fullscreen mode Exit fullscreen mode

47. Šta je clearfix trik u CSS-u?
clearfix se koristi za rešavanje problema sa float elementima. Najčešće koristi pseudo-element:

      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
Enter fullscreen mode Exit fullscreen mode

48. Kako koristiti aspect-ratio u CSS-u?
aspect-ratio održava proporcije elementa (širina naspram visine) u zadatom odnosu. Primer:

      div {
        aspect-ratio: 16 / 9;
      }
Enter fullscreen mode Exit fullscreen mode

49. Kako možemo kontrolisati protok teksta unutar elementa?
Koriste se svojstva kao što su:

  • white-space: kontroliše kako se upravlja razmacima i linijama unutar elementa (npr. nowrap za onemogućavanje prelamanja teksta).

  • overflow: određuje šta se dešava sa sadržajem koji izlazi izvan granica elementa (npr. hidden, scroll, auto).

  • text-overflow: koristi se zajedno sa overflow i white-space svojstvima za kontrolu kako se prikazuje višak teksta, npr. sa ellipsis dodaje tri tačke kada tekst prelazi granicu elementa. Primer:

     p {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
     }
Enter fullscreen mode Exit fullscreen mode

Ova svojstva omogućavaju kontrolu prikaza i formatiranja teksta, posebno u slučajevima kada je prostor za tekst ograničen.

50. Kako stilizovati listu tako da nema tačke ili brojeve?
Koristi se svojstvo list-style-type: none;. Primer:

      ul {
        list-style-type: none;
      }
Enter fullscreen mode Exit fullscreen mode

Ovo su najčešća i najbitnija pitanja sa odgovorima za HTML i CSS intervjue. Ova pitanja pokrivaju širok spektar osnovnih i naprednih tema, koje su ključne za web development.

Bonus pitanja

Evo 10 pitanja za HTML i CSS koja mogu biti neočekivana ili te mogu zbuniti na intervjuu, zajedno sa objašnjenjima:

1. Kako funkcioniše data-* atribut u HTML-u i za šta se koristi?

  • data-* atributi se koriste za čuvanje prilagođenih podataka u HTML elementima koje JavaScript može da koristi. Na primer: 
     <div data-user-id="123"></div>
Enter fullscreen mode Exit fullscreen mode

Možeš pristupiti ovim podacima pomoću JavaScript-a:

     var userId = document.querySelector('div').dataset.userId;
Enter fullscreen mode Exit fullscreen mode

2. Šta se dešava ako u CSS-u primeniš width: 100% na element koji već ima padding i border?
Podrazumevano, width: 100% će postaviti širinu elementa na 100% njegove roditeljske širine, ali će padding i border dodatno proširiti ukupnu širinu. Da bi to izbegao, koristi box-sizing: border-box, što uključuje padding i border u izračunavanje širine.

3. Koja je razlika između link i @import za dodavanje CSS-a u HTML?

link element se koristi u <head> sekciji za uključivanje CSS-a, dok se @import koristi unutar CSS fajlova za učitavanje drugih CSS fajlova.
Razlike:

  • link je brži jer se CSS učitava paralelno.

  • @import odlaže učitavanje CSS-a, što može usporiti renderovanje stranice.

  • link je bolje podržan i ima veći prioritet.

4. Kako možeš stilizovati placeholder tekst u HTML input elementima?
Koristi pseudo-klasu ::placeholder da bi stilizovao tekst unutar input polja. Na primer:

     input::placeholder {
       color: grey;
       font-style: italic;
     }
Enter fullscreen mode Exit fullscreen mode

5. Šta se dešava kada postaviš position: absolute na element bez pozicioniranog roditelja?
Ako roditeljski element nema zadatu poziciju (relative, absolute, fixed ili sticky), apsolutno pozicionirani element će se pozicionirati relativno prema prozoru pretraživača, a ne prema roditelju.

6. Kako kreirati trougao koristeći samo CSS?
Trougao se kreira pomoću border svojstava. Na primer:

     .triangle {
       width: 0;
       height: 0;
       border-left: 50px solid transparent;
       border-right: 50px solid transparent;
       border-bottom: 100px solid red;
     }
Enter fullscreen mode Exit fullscreen mode

Ovaj kod kreira crveni trougao.

7. Kako funkcionišu CSS rem i em jedinice i koja je razlika između njih?
rem je relativna jedinica u odnosu na font-size root elementa (obično <html>), dok je em relativan u odnosu na font-size roditeljskog elementa.

Na primer, ako je html { font-size: 16px; }:

  • 1rem je uvek 16px.

  • 1em zavisi od veličine fonta roditelja.

8. Kako radi zlatni rez (Golden Ratio) u web dizajnu i kako ga koristiš u CSS-u?
Zlatni rez je odnos od otprilike 1.618:1 i često se koristi za raspored elemenata na stranici kako bi dizajn bio vizuelno prijatan. Može se koristiti za određivanje proporcija elemenata, npr. širine i visine sekcija:

     .box {
       width: 61.8%;
       height: 100%;
     }
Enter fullscreen mode Exit fullscreen mode

9. Šta se dešava kada HTML dokument nema deklaraciju <!DOCTYPE html>?
Bez <!DOCTYPE html>, pretraživač može prikazivati stranicu u "quirks mode", što uzrokuje ponašanje neusklađeno sa standardima, potencijalno menjajući renderovanje elemenata, veličine margina, itd.

10. Kako možeš učiniti da tekst bude selektibilan ili neselektibilan pomoću CSS-a?
Koristi CSS svojstvo user-select. Na primer, da onemogućiš selektovanje teksta:

      p {
        user-select: none;
      }
Enter fullscreen mode Exit fullscreen mode

Možeš omogućiti selektovanje sa user-select: text;.

Zaključak:

Intervju za poziciju front-end developera može biti izazovan, ali uz pravu pripremu možete se lako izboriti sa svim pitanjima. Osim što je važno savladati osnovne koncepte HTML-a i CSS-a, od koristi vam može biti i priprema za pitanja koja idu korak dalje i zahtevaju dublje razumevanje tehnologija. Neočekivana pitanja koja vas zbunjuju pružaju priliku da se izdvojite od konkurencije i pokažete svoju sposobnost za rešavanje problema na kreativne načine.

Top comments (4)

Collapse
 
markpelf profile image
Mark Pelf •

Lep ti je clanak. Zasto ne pises na Engleskom, bila bi ti potencijalna publika veca...

Collapse
 
jelena_petkovic profile image
Jelena Petkovic •

Hvala ti na komentaru, zaista cenim tvoju povratnu informaciju!
Pišem na srpskom jeziku jer smatram da već postoji obilje materijala na engleskom, dok na našem jeziku takvi sadržaji nisu toliko zastupljeni.
Ovi blogovi su prvenstveno namenjeni početnicima, kojima će biti lakše i brže da ih prate na srpskom, dok za naprednije učenje mogu koristiti materijale na engleskom jeziku.
Još jednom hvala na komentaru, zaista mi znači!

Collapse
 
markpelf profile image
Mark Pelf •

Mi smo kolege, ja sam Dipl. Matematicar, Magistar Racunarstva (U. u Beogradu), samo starija generacija...

Thread Thread
 
jelena_petkovic profile image
Jelena Petkovic •

Drago mi je Mark

Read next

i_am_vesh profile image

Top Interview questions for DevOps Part-3

Avesh -

crabnebuladev profile image

Interview with Hussein Hareb, Creator of Ηw-monitor!

CrabNebula -

lorenzojkrl profile image

What Is React Compiler?

Lorenzo Zarantonello -

ngneha09 profile image

Convolutional Neural Network || Beginner’s Guide

Neha Gupta -