Notatnik frontendowca

<form>...</form> - znacznik formularza, opakowujący

Atrybuty:

action="url" - adres serwera/programu przetwarzającego dane formularza
method="post" - metoda wysłania danych, get - dane w adresie url, post - dane są w treści formularza
name="nazwaPola" - nazwa wykorzystywana do identyfikacji danych wejściowych
id="idPola" - używamy dla odniesienia się do label for=""
type="text" - określa typ wprowadzanych danych
value="wartość pola" - aktualna wartość pola
placeholder= "Tekst podpowiedzi"

<input>...</input> - znacznik wprowadzania danych

text - wprowadzane dane tekstowe
radio - przycisk radio, wybór jednej wartości z wielu opcji
checkbox - pole wyboru poprzez jego zaznaczenie/odznaczenie
number - do wprowadzania liczb
tel - do numeru telefonu
email - adres email
range - wprowadzenie wartości liczbowej z danego przedziału
```
<input type="range" min="0" max="100" step="5">
```
password - do wprowadzania haseł
file - wybór pliku
submit - wysłanie danych formularza

<label>...</label> - etykieta pola input

Atrybut:

for="name" - wartość id input

Atrybut placeholder nie zastępuje elementu label.

<fieldset>...</fieldset> - do grupowania input

<legend>...</legend> - opis grupy input <fieldset>

<select>...</select> - grupowanie opcji wyboru

<option>...</option> - dziecko znacznika select, opcje wyboru

<textarea>...</textarea> - wprowadzanie dłuższego tekstu

Walidacja:

required - pole jest wymagane

pattern= "[a-zA-Z0-9]+" - walidacja za pomocą wyrażeń regularnych

http://html5pattern.com/Names

Grid służy do tworzenia layoutów.

Źródło: https://webkit.org/blog/7434/css-grid-layout-a-new-layout-module-for-the-web/

Grid container

grid-template-columns - ustawianie kolumn
grid-template-rows - ustawianie wierszy
grid-column-gap - odstęp między elementami w kontekście kolumny
grid-row-gap - odstęp między elementami w kontekście wierszy

grid-template-areas - umieszczanie elementów za pomocą nazwanych obszarów

grid-template-areas:"header header header"
                                    "content . menu"
                                    "footer footer footer";

Grid item

grid-area - określa wielkość i położenie elementu w obrębie siatki
grid-row-start: numer / [nazwa] / span - definiuje, od której linii poziomej element ma się zaczynać
grid-row-end: numer / [nazwa] / span - definiuje, od której linii poziomej element ma się kończyć
grid-column-start: numer / [nazwa] / span - definiuje, od której linii pionowej element ma się zaczynać
grid-column-end: numer / [nazwa] / span - definiuje, od której linii pionowej element ma się kończyć

Jednostka fr, czyli ułamek wolnej przestrzeni.

RWD (Responsive web design) to tworzenie stron dopasowujących się do urządzenia, na którym jest wyświetlana.

@media - słowo kluczowe, własność, dzięki któremu możemy decydować, co się ma zadziać na danym urządzeniu, w danej rozdzielczości.

@media screen, print, all... - wybór typu urządzenia (media type).

@media min-width, max-width, color, aspect-ratio, orientation... - określamy jakie style, w którym momencie powinny się znajdować (media feature).

and / not / , - operatory

                    @media screen and (min-width: 812px) and (orientation: landscape){
                        .header {
                        font-size: 1rem;
                        padding: 8px; 
                        }

element.addEventListener(type, listener [, options]) - nasłuchiwanie zdarzenia

click
mouseenter
mouseleave
mouseover

https://developer.mozilla.org/en-US/docs/Web/Events#Mouse_events

Przykłady:

                    function nameFunction() {
                        console.log('dajesz klika');
                        }

                        element.addEventListener('click', nameFunction);

                    element.addEventListener('click', (e) => {
                        console.log('dajesz klika');
                        })

e = Event

https://developer.mozilla.org/en-US/docs/Web/API/Event

<button>...</button> - znacznik przycisku

element.classList.add - dodaje klasę

element.classList.remove - usuwa klasę

element.classList.toggle - przełącza klasę

element.classList.contains - sprawdza czy klasa istnieje

Notatnik frontendowca

Rozdział piąty

Formularze

Typy danych input

CSS Grid

Właściwości

Media queries

Event

mouse events

Hamburger menu - elementy użyte przy tworzeniu hamburger menu