Kahoot
HTML
1. Czym jest HTML? Język do opisu struktury stron internetowych
2. Co oznacza <!DOCTYPE html>? Deklarację typu dokumentu HTML5
3. Do czego służy znacznik <html>? Określa początek i koniec dokumentu HTML
4. Co zawiera sekcja <head>? Metadane, tytuł i odnośniki do plików
5. Za co odpowiada sekcja <body>? Zawiera widoczną zawartość strony
6. Do czego służy <meta charset=UTF-8>? Ustawia kodowanie znaków strony
7. Który znacznik służy do nagłówków? <h1> do <h6>
8. Jak wstawiamy zewnętrzny plik CSS? Za pomocą <link rel=’stylesheet’ hrief=’style.css’>
9. Jak wczytać zewnętrzny skrypt JS? Za pomocą <script src=’app.js’></script>
10. Jak działa <meta name=viewport’>? Dostosowuje stronę do ekranów urządzeń
11. Ile poziomów nagłówków jest w HTML? Sześć (h1-h6)
12. Do czego służy znacznik <p>? Tworzy akapit tekstu
13. Jak wstawiamy nową linię w HTML? Za pomocą <br>
14. Co robi znacznik <hr>? Wstawia poziomą linię
15. Który element jest blokowy? <div>
16. Który element jest inline? <span>
17. Do czego służy <strong>? Podkreśla ważność tekstu (pogrubienie)
18. Jak działa <em>? Zaznacza tekst jako wyróżniony (kursywa)
19. Co robi znacznik <code>? Oznacza fragment kodu programistycznego
20. Co oznacza pojęcie Accessibility w HTML? Dostępność stron dla osób z niepełnosprawnościami
HTML: Tabele, media i formularze
1. Który znacznik tworzy listę nieuporządkowaną w HTML? <ul>
2. Jak oznacza się pojedynczy element listy w HTML? <li>
3. Który znacznik używany jest do tworzenia listy uporządkowanej? <ol>
4. Do czego służy znacznik <dl>? Do listy definicji
5. Jakie znaczniki tworzą pary w liście definicji? <dt> i <dd>
6. Jak stworzyć zagnieżdżoną listę? Wstawić <ul> lub <ol> w <li>
7. Co oznacza termin breadcrumbs w nawigacji? Ścieżkę nawigacyjną użytkownika
8. Który atrybut w <a> definiuje cel odnośnika? Href
9. Jak otworzyć link w nowej karcie? Target=”_blank”
10. Który atrybut <img> opisuje obraz dla czytników ekranu? Alt
11. Jak wskazać alternatywne źródła obrazu dla różnych rozdzielczości? Srcset
12. Jaki atrybut w <img> opóźnia ładowanie poza ekranem? Loading=”lazy”
13. Który znacznik służy do osadzania pliku wideo? <video>
14. Które znaczniki definiują strukturę tabeli danych? <table>, <thread>, <tbody>, <tfoot>
15. Do czego służy atrybut colspan w tabeli? Łączy kolumny w jednej komórce
16. Jak oznaczamy nagłówki kolumn w tabeli? <th>
17. Jakie znaczenie ma <caption> w tabeli? Tytuł lub opis tabeli
18. Który atrybut <form> określa sposób przesyłania danych? Method
19. Jakie typy obsługuje <input>? Text, email, password, numer
20. Jak wymusić wypełnienie pola w formularzu? Required
CSS
1. Jak nazywa się proces nakładania się reguł CSS? Cascading
2. Który zapis koloru jest w formacie RGB z przeźroczystością? Rgba(255,0,0,0,5)
3. Jak ustawić pogrubienie tekstu w CSS? Font-weight
4. Która właściwość ustawia odstęp między literami? Letter-spacing
5. Jak w CSS ustawić tło obrazkowe? Background-image
6. Jakiego słowa używamy do definiowania zmiennej w CSS? --nazwa
7. Które jednostki CSS są zależne od rozmiaru okna? vw, vh
8. Jaka właściwość tworzy gradient promieniowy kolorów? Radial-gradient
9. Jak włączyć sprawdzanie poprawności formularza HTML5? Użyć atrybutów walidacyjnych
CSS: Box model, flex, grid
1. Który element Box Modelu znajduje się najbliżej zawartości? Content
2. Za odstęp między zawartością a obramowaniem odpowiada właściwość? Padding
3. Która część Box Modelu nie ma koloru tła elementu? Margin
4. Jakie są dwie główne wartości właściwości box-sizing? Content-box i border-box
5. W trybie content-box szerokość NIE uwzględnia: Paddingu i borderu
6. W trybie border-box width obejmuje: Content, padding i border
7. Jak obliczana jest całkowita szerokość elementu? Width+padding+border+margin
8. Do czego służy DevTools w kontekście Box Modelu? Analiza marginesów i rozmiarów elementów
9. Jakie wartości może mieć właściwość display? Block, inline, flex, grid
10. Jak zachowuje się element o display:inline? Nie zaczyna nowej linii
11. Jakie pozycjonowanie jest domyślne dla elementów? Static
12. Element z position:absolute jest pozycjonowany względem? Najbliższego przodka z pozycją inną niż static
13. Jak działa z-index? Określa kolejność nakładania się elementów
14. Jaką właściwość używamy do kontrolowania przepełnienia treści? Overflow
15. Czym różni się visibility:hidden od display:none? Hidden ukrywa bez usuwania miejsca
16. Które wartości należą do justify-content? Flex-start, center, space-between
17. Co robi właściwość flex-wrap? Zawija elementy do nowej linii
18. Jak ustawić różne odstępy między elementami w flexboxie? Użyć właściwości gap
19. Co określa grid-template-columns? Liczbę I szerokość kolumn siatki
20. Jak działają media queries w CSS? Dostosowują styl do rozmiaru ekranu
JS: zmienne i typy danych
1. Gdzie najlepiej umieścić skrypt JS w HTML, by działał po załadowaniu strony? Na końcu body
2. Jak działa atrybut defer w znaczniku script? Wykonuje skrypt po załadowaniu DOM
3. Jak działa atrybut async w znaczniku script? Wykonuje skrypt gdy tylko się załaduje
4. Jaka jest różnica między var i let? Var ma function scope, let ma block scope
5. Dlaczego nie zaleca się używać var? Brak block scope i ryzyko nadpisania
6. Co to jest Temporal Dead Zone (TDZ)? Okres przed inicjalizacją zmiennej let/const
7. Co oznacza hoisting w JavaScript? Podnoszenie deklaracji na początek zakresu
8. Jaka konwencja nazewnictwa jest poprawna dla zmiennej boolean? isActive
9. Jak nazywać stałe w JS zgodnie z konwencją? UPPER_CASE
10. Jak pisać nazwy funkcji zgodnie z konwencją JS? camelCase z czasownikiem
11. Ile jest prymitywnych typów danych w JS? 7
12. Który z poniższych NIE jest typem prymitywnym? Object
13. Co zwróci typeof null? Object
14. Co zwróci typeof NaN? Number
15. Jak poprawnie sprawdzić czy wartość to NaN? Number.isNaN(x)
16. Jak utworzyć symbol z opisem w JS? Symbol(‘opis’)
17. Co oznacza BigInt w JS? Typ do przechowywania bardzo dużych liczb
18. Jaki wynik da typeof undefined? ‘undefined’
19. Jak sprawdzić czy wartość to liczba całkowita w JS? Number.isInteger(x)
20. Co robi funkcja prompt()? Wyświetla okno dialogowe i zwraca wpisany tekst
JS: Pętle i instrukcje warunkowe
1. Jaki operator służy do potęgowania w JavaScript? **
2. Co zwróci 7 % 3? 1
3. Który operator sprawdza równość bez konwersji typów? ===
4. Jaki będzie wynik ‘5’ – 2? 3
5. Co zwróci parseFloat(3.14px)? 3.14
6. Czym różni się do…while od while? Do…while wykona się co najmniej raz
7. Która z wartości jest falsy w JS? 0
8. Jaki będzie wynik ‘5’ + 2? 52
9. Jaki wynik da 2 == ‘2’? true
10. Jak działa operator &&? Zwraca pierwsze falsy lub ostatni truthy
11. Jaki wynik da: null ?? ‘wartość’? domyślne
12. Co zapewnia optional chaining ‘?.’ ? Bezpieczny dostęp przy null/undefined
13. Który operator ma wyższy priorytet: && czy || ? &&
14. Co zwróci false || ‘ok’ && ‘x’ ? x
15. Który operator przypisze tylko gdy wartość jest falsy? II=
16. Która konstrukcja sprawdza warunek i wykonuje blok kodu? If
17. Który wzorzec upraszcza zagnieżdżone ify? Guard clauses
18. Kiedy wybrać switch zamiast if-else? Gdy porównujemy jedną zmienną do wielu wartości
19. Jaki wynik dla age=17 w age>=18 ? ‘OK’ : ‘NO’ ? NO
20. Co robi continue w pętli for? Pomija bieżącą iterację
JS: Pętle, cd i funkcje
1. Do czego służy pętla for…in w JS? Iteruje po kluczach obiektu
2. Co iteruje pętla for… of? Wartości elementów z iterowanych kolekcji
3. Dlaczego zagnieżdżone pętle mogą być wolne? Wykonują wiele iteracji w każdej pętli
4. Która technika może przyśpieszyć pętlę for? Buforowanie długości tablicy w zmiennej
5. Jak przerwać dwie zagnieżdżone pętle naraz? Użyć etykiety i instrukcji break
6. Co jest przykładem obiektu iterowalnego? Tablica używana w pętli for..of
7. Co zwraca metoda next () w iteratorze? Obiekt z polami value i done
8. Co wyróżnia deklarację funkcji od wyrażenia? Doklaracja jest hoistowana w całości
9. Co opisuje parametry funkcji? Nazwane zmienne zdefiniowane w deklaracji
10. Do czego służy obiekt arguments? Daje dostęp do wszystkich argumentów funkcji
11. Co robi instrukcja return w funkcji? Zwraca wartość i kończy działanie funkcji
12. Co jest prawdą o zasięgu funkcji? Zmienne w niej są niewidoczne na zewnątrz
13. Która nazwa funkcji najlepiej pasuje do konwencji JS? calculateTotalPrice
14. Jak zapiszesz funkcję strzałkową dodającą a i b? (a, b) => a + b
15. Czym różnią się arrow functions od zwykłych? Nie mają własnego this ani arguments
16. Jak ustawisz domyślny parametr count na 1? Function f(count = 1) {}
17. Co robi parametr …args w funkcji? Zbiera pozostałe argumenty do tablicy
18. Co to jest funkcja wyższego rzędu? Funkcja przyjmująca lub zwracająca funkcję
19. Co oznacza, że funkcje są pierwszej klasy w JS? Można je przekazywać i przechowywać jak dane
20. Które wywołanie używa funkcji wyższego rzędu? [1, 2, 3].map(x=> x * 2)
JS: This, tablice i obiekty
1. Co zwraca this w globalnym kontekście przeglądarki? Window
2. Co zwraca this w funkcji wywołanej bez kontekstu w trybie strict? Undefined
3. Co określa kontekst this w metodzie obiektu? Obiekt przed kropką
4. Która metoda ustawia this i wywołuje funkcję natychmiast? Call
5. Która metoda przyjmuje argumenty jako tablicę i ustawia this? Apply
6. Która metoda zwraca nową funkcję z przypisanym this? Bind
7. Jak zachowuje się this w arrow function? Dziedziczy this z otoczenia
8. Co oznacza sparse array? Tablica z brakującymi indeksami
9. Co zwraca length przy sparse array? Najwyższy indeks +1
10. Jaka metoda dodaje element na końcu tablicy? Push
11. Jaka metoda usuwa pierwszy element tablicy? Shift
12. Co zwracam Array.isArray([]) ? True
13. Jaki typ zwraca typeof [] ? Object
14. Jaka metoda wykonuje funkcję dla każdego elementu bez zwrotu tablicy? forEach
15. Która metoda zwraca nową tablicę z przekształconych elementów? Map
16. Która metoda zwraca pierwszy element spełniający warunek? Find
17. Która metoda sprawdza, czy dowolny element spełnia warunek? Some
18. Która metoda sprawdza, czy tablica zawiera wartość? Includes
19. Co oznacza method chaining? Łączenie kilku metod po sobie
20. Jak odwołać się do właściwości obiektu o nazwie z zmiennej? Bracket notation
JS: Zaawansowane obiekty i tablice
1. Który zapis tworzy dynamiczną nazwę właściwości? Obj[klucz] = 1
2. Który zapis tworzy metodę w shorthand? Const o=[x(){}}
3. Co zwraca Object.keys(obj) ? Tablicę kluczy obiektu
4. Co robi Object.values(obj) ? Zwraca tablicę wartości
5. Object.entries(obj) zwraca…? Tablice [llucz, wartość]
6. Co opisują property descriptors? Sposób działania właściwości
7. Co robi reduce? Akumuluje wartości do jednej
8. Kiedy użyć reduceRight? Gdy liczymy od końca tablicy
9. Sort z compare function zwraca? Liczbę porównania
10. Metoda reverse? Odwraca tablicę mutując ją
11. Czym różni się slice od splice? Slice nie mutuje
12. Array destructuring pozwala? Wyciągnąć elementy do zmiennych
13. Default values w destrukturyzacji? Dają wartość gdy brak danych
14. Object destructuring z rename? Daje zmienną o innej nazwie
15. Spread w tablicach? Rozwija element do nowej tablicy
16. Rest operator w destrukturyzacji? Zbiera resztę danych
17. Object.assign służy do? Łączenia obiektów
18. Object.freeze? Blokuje modyfikacje obiektu
19. Podstawowy cel prototypu to? Dziedziczenie w obiektach
20. Constructor function służy do? Tworzenia instancji obiektów
JS: Klasy, JSON, DOM
1. Po co używamy klas w JavaScript? Do tworzenia obiektów według wspólnego szablonu
2. Jak definiujemy klasę w JS? Słowem kluczowym CLASS
3. Co tworzy słowo kluczowe new? Instancję klasy
4. Co wyróżnia metodę statyczną? Wywołuje się ją na klasie, nie instancji
5. Jakim słowem realizujemy dziedziczenie? Extends
6. Co robi super() w konstruktorze? Wywołuje konstruktor klasy bazowej
7. Jak oznaczamy prywatne pola klasy? #nazwaPola
8. Co zapewnia enkapsulacja? Ukrywanie szczegółów implementacji
9. Co robi JSON.stringify? Konwertuje obiekt na tekst JSON
10. Co robi JSON.parse? Konwertuje tekst JSON na obiekt
11. Do czego służy replacer w stringify? Do filtrowania lub modyfikacji danych podczas serializacji
12. Czym jest reviver w JSON.parse? Funkcją modyfikującą wartości podczas parsowania
13. Co uniemożliwia JSON przy cyklicznych referencjach? Serializację bez specjalnej obsługi
14. Czym jest DOM? Reprezentacją dokumentu w pamięci jako drzewo
15. Jakie typy węzłów istnieją w DOM? Element, Text, Comment, Document
16. Jak pobrać element po ID? document.getElementById()
17. Co zwraca querySelectorAll? Statyczną NodeList
18. textContent vs innerHTML – różnica? innerHTML interpretuje HTML, textContent nie
19. Co opisuje relację parent-child w DOM? Węzeł zawiera inne węzły jako dzieci
20. Co wyróżnia HTMLCollection? Jest żywą kolekcją aktualizującą się wraz z DOM
JS: Manipulacja DOM, eventy
1. Co robi createElement w DOM? Tworzy nowy element HTML
2. Do czego służy createTextNode? Tworzy węzeł tekstowy
3. Co robi appendChild? Dodaje węzeł jako ostatnie dziecko
4. Jak działa insertBefore? Wstawia węzeł przed wskazanym
5. replaceChild wymaga? Nowego i starego węzła
6. removeChild usuwa? Wskazane dziecko z DOM
7. Co robi element.remove() ? Usuwa element z DOM
8. cloneNode(true) oznacza? Kopiowanie węzła razem z dziećmi
9. style vs classList – co prawda? classList dodaje i usuwa klasy
10. Do czego służy DocumentFragment? Tworzy grupę węzłów dla wydajności
11. Dlaczego addEventListener a nie onClick? Pozwala dodać wiele handlerów
12. Event object zawiera? Informacje o zdarzeniu i celu
13. Co robi preventDefault() ? Blokuje domyślne działanie dla danego elementu
14. stopPropagation zatrzymuje? Propagację zdarzenia
15. Dlaczego usuwać event listenery? Aby uniknąć wycieków pamięci np. przy usuwaniu elementu
16. Opcja capture w listenerze? Uruchamia zdarzenie zanim dotrze do elementu docelowego
17. Mouse event to? Click, dblclick, mousedown
18. Keyboard event to? Keydown, keyup
19. Focus event to? Focus i blur
20. Co jest kluczowe w event delegation? Obsługa zdarzeń na wspólnym rodzicu
