Materiał na kolokwium

Wstęp do zadanka

Ciekawi was pewnie jak zrobić to zadanie, więc już wam tłumaczę. Mamy tutaj html, prosty, czytelny (chyba), no i przede wszystkim bez css. Tak czy inaczej mamy poprawić semantykę, w skrócie by wyglądało to jeszcze lepiej. Jak widzimy w nawiasie, musimy zmienić tylko i wyłaczenie tagi... Co to są tagi spytacie?

Tagi pomagają, łatwiej zrozumieć strukturę stronki, wiadomo co jest nagłówkiem, sidebarem itd itp. Od siebie też dodam, że google promuje stronki które mają zrobione te tagi (wiem z doświadczenia XD).

PRZYKŁADOWE TAGI: header, nav, main, article, aside, footer.

Jak zrobić to zadanie?

Widzimy, że mamy kod stronki, mamy też pewną podpowiedź, w title nam pisze że mamy zamienić wszystkie div oraz span na te tagi. To też to robimy, pierwszy div który nas wita, to <div class="box" id="task">...</div> widzimy, że on zawiera w sobie jakieś tam rzeczy do wyboru, także możemy stwierdzić, że jest to sekcja do wyboru jakichś tam rzeczy. Także, możemy zastąpić tego diva tagiem, section, po zamianie będzie wyglądało to w ten sposób: <section class="box" id="task"> ... </section>. Jakby ktoś nie zrozumiał tego mojego pieprzonego gadania, to zamieszczam zdjęcie z fragmentem przed oraz po.

W skrócie, zmieniamy tego diva zaczynającego i kończącego na section.. Spytacie czemu section? Bo mi to wygląda na section. Jak uważacie inaczej to nikt wam nie każe tego czytać :)

Następnie mamy do zmiany <div class="menu">...</div> ehh, co by tu dłużej powiedzieć, o tym, by was nauczyć. Well.. well... well..... menu to w sumie powinno znajdować się na sekcja stronki, więc pasowałoby to dać jakoś na górze, więc mamy taki specjalny tag o nazwie header. Zastępujemy tamtego diva headerem i mamy: <header class="box" id="task"> ... </header>. Jakby ktoś nie zrozumiał tego mojego pieprzonego gadania PO RAZ DRUGI.. to macie zdjęcie przed i po. Dodam, że jeszcze możecie tam dać tag nav.. w sumie o nim to zapomniałem, nav to takie menu nawigacyjne. Wtedy Gałka zrobi takie wow, ten głąb jednak coś potrafi.

Z racji iż, jesteśmy na studiach i raczej każdy z was ma więcej niż iq szympansa (nie mam zamiaru obrazić, żadnego szympansa) to reszte wam streszczę i nie będę się rozpisywał po każdym z pokolei.

Macie tutaj tagi te semantyczne które zostały użyte w tym zadaniu, zapoznajcie się z nimi i sobie popatrzcie na rozwiązanie zadania.

• header – nagłówek stronki
• nav – menu nawigacyjne
• main – główna treść strony
• article – samodzielny wpis czy tam post, zwał jak zwał
• aside – treść poboczna (tak zwany sidebar)
• footer – stopka strony
• section – sekcja tematyczna

Dobra, nauczcie się tych tagów, popatrzcie na moje rozwiązania i chyba zadanie 1 mamy za sobą. Co nie??? CO NIE?????? Ehh.. fuck my life

Jak zrobić zadanie?

No to tak, mamy zrobić zajebisty formularz (całe szczęście bez css, więc będzie wam prościej wytłumaczyć). Jak widzimy, mamy w zadaniu formularz. To musimy zrobić formularz.. wiecie jak się robi formularz? Za pomocą <form>... form jak formularz. Proste? Chyba tak.. Skoro mamy już początek pustego formularza to teraz trzeba dodać te rzeczy, takie jak email, hasło i to wszystkie inne. W formularzu służy do tego coś takiego jak <label> Zamieszczam zdjęcie jak to ma wyglądać i wam dokładniej wytłumacze co tu się odwaliło.

No to tak.. form się wzięło z tego, że musimy mieć form, bo to formularz. label for = "email", wzięło się z tego, że jest sprawdzany po prostu email. Jeśli chodzi o html, to on automatycznie sprawdza czy to jest email, więc wystarczy wiedzieć tylko jak to się wpisuje, a on zrobi za nas wszystko inne, także zajebiście. Potem kończymy nasz label i robimy coś takiego jak input type="email" id="email" required to pierwsze czyli input email znaczy, że oczekujemy emaila, drugie to id które w sumie nie musi być, ale fajnie oznaczać inne rzeczy id, wygląda wtedy bardziej profesjonalnie. No i trzecia rzecz to required, znaczy to tyle, że pole nie może być puste i jest on wymagany (dbamy o dostępność). Nie wiem czy jest sens, tłumaczenia więcej. Bo jakby hasło i inne tego typu, polegają na prawie tym samym... więc po prostu zamieszcze wam kod. Nie zapominajcie, że jestem leniwym c-wordem.

Dodam jeszcze jedną, ostatnią rzecz.. Mamy tam, że hasło musi mieć minimum 8 znaków, także dajemy tam minlength="8", no i też pamiętamy że submit musi być buttonem, bo inaczej lipa będzie a nie submit. No to co, drugie zadanie zrobione?? Ez.

Zaczynamy od tego, że mamy tutaj fragment CSS, mówi on nam że mamy jakiś tam box i on ma wysokość (width) oraz padding, nwm jak to na polski. Mamy też border czyli ramkę dookoła. Musimy też zauważyć, że mamy tutaj typ boxa jako (box-sizing:content-box). Mówi to nam o tym, że ramka będzie się zwiększać na zewnątrz, w miarę zwiększania innych parametrów.. Jeśli byśmy mieli (box-sizing:border-box) to byśmy liczyli całkowitą szerokość jako width (bo wszystko inne mieściłoby się w środku.

Well... zacznijmy licczyć:
width = 300px
padding = 20px (uwzględniamy, że jest to odległość od krawędzi do środka z lewej i z prawej strony czyli 20px+20px)
border = 10px (tak samo jak poprzedni, z lewej i z prawej uwzględniamy, także 10px + 10px)

Więc w skrócie pudełko ma 360px. Koniec zadania :bb

Zaczynę od tego, że powiem wam, że piszę te zadanie na telefonie na tych metodach numerycznych, także wybaczcie jak coś będzie wyglądać słabo, nie moja wina.

Jak zrobić zadanie?

No to tak mamy jakąś galerię zdjęć, widzimy że mamy tam 3 zdjęcia. W sumie widzicie jak to wygląda. Widzimy również, że wszystkie znajdują się w galerii, która jest w klasie *gallery*. To właśnie, w odwołaniu do niej będziemy pisać css. Zaczynamy... Jak wiadomo css korzysta z takich bloczków, które są w nawiasach klamerkowych o w takich: {...}.

By odwołać się do całej galerii, wpisujemy przed tymi klamerkami nazwę klasy z kropką. Może po prostu pokaże wam fotkę i wyjaśnię co się tam dzieje.

No to tak, jak już mówiłem .galery{...} bierze się z tego, że odwołujemy się do klasy i zmieniamy ją, w zadaniu mamy, że CSS ma ustawić zdjęcia w 3 kolumnach na desktopie. display: grid; - Dzięki temu, zdjęcia będą poukładane w siatce.
grid-template-columns: repeat(3,1fr); - W skrócie, zrób 3 kolumny, każda o równej szerokości. Ta trójka sprawia, że powtarza 3 razy, a te 1fr to że 1 część dostępnej przestrzeni (fr = fraction).
gap: 12px; - W skrócie, zrób odstęp pomiędzy zdjęciami, który ma 12px..
Skoro, to udało nam się zrobić, to teraz pasowałoby zachować proporcję tych zdjęć, dlatego musimy się odwołać do zdjęcia. Jak to zrobić??? W prosty sposób:
.gallery img {...} . Może lepiej będzie jak dam zdjęcie i wyjaśnię co i jak, jak wcześniej.

width: 100%; - Każde zdjęcie, będzie miało szerokość swojej kolumny.
height: auto; - zachowuje proporcje obrazka, bez tego by się rozciągnęło.
display: block; - domyślnie img ma taką przerwę, ja to w sumie przy prawie każdym zdjęciu daje, zajebiście usuwa te przerwy i wygląda profeszional.
Ostatnia rzecz jaka nam została to zrobienie tego na telegon (w jednej kolumnie 500px). Pewnie większość z was ma teraz takie wtf... Jak to gówno wyrównać na telefonach. Powiem wam, że prosto. Używamy czegoś takiego jak @media (max-width: [...]px) {...}, ogólnie @media sprawia, że możemy zmieniać rozdzielczość oraz inne rzeczy na stronce, gdy urzadzenie korzysta z innej rozdzielczości.

@media (max-width: 500px) {...}; - to co już wyjaśniłem, kod działa tylko wtedy gdy ekran ma maksymalnie 500px, czyli np. telefon.
grid-template-columns: 1fr; - oznacza, zrób tylko jedną kolumnę na całą szerokość.
No to tak, mam nadzieję że wszystko jasne.. jasne czy nie?

Jak zrobić zadanie?

Powiem tyle, mam w dupie co mówi Szanowna Pani Oliwia i będę opisywał zadania, jak chce. Jak wam się coś nie podoba to nikt wam nie każe tego czytać ;DDD.

No to tak, mamy w treści zadania podany html, w którym widzimy, że nasz przycisk (button) ma klasę "btn", widzimy też tam, że ten znaczek ma klasę "badge" także do nich się będziemy odwoływać w naszym CSS.

No to tak, mamy naszą klasę .btn czyli ogólną klasę buttona, w niej nie będziemy zmieniać za wiele. Jedynie zmieńmy pozycję w naszym buttonie (wtedy nasz badge będzie liczył swoje top i right względem tego buttona.. ale wait, napisze to lepiej... Tak jak w tamtym zadaniu.
position: relative; - jak już napisałem, sprawia że będzie wszystko dobrze się utrzymywało przy scalowaniu (badge nie będzie się przesuwał).
padding-right: 25px; - dodaje nam trochę wolnego miejsca po prawej stronie przycisku, by nasz badge nie nachodził na ten tego.. na tekst.

Wiem, wiem, wiem.. wygląda to jak istna rzeź.. ale spokojnie, wytłumaczę wszystko prosto :D.
Zrobię to w ten sam sposób jak poprzednio by zachować porządek:
.btn .badge {...} - to akurat proste, odwołujemy się do buttona, a dokładniej do badge.
position: absolute; - badge jest pozycjonowany ręcznie, siedzi jak taka naklejka na rogu.
top: -6px; , right: -6px; - przesuwa badge na zewnątrz przycisku.. tak by wychodził i guess.
background: red; - zmienia nam kolor backgroundu badge na czerwony.
color: white; - zmienia nam kolor czcionki w badge na biały.
padding: 2px 6px; - daje miejsce w środku by liczba nie była ściśnięta.
border-radius: 50%; - sprawia że rogi są zaokrąglone, tak troszku troszku by było kółeczko a nie kwadracik.
font-size: 12px; - czy muszę to tłumaczyć? Po prostu zmienia wielkość czcionki w badge.

Mam nadzieję, że to wszystko jest w miarę logiczne. Nie było tutaj za bardzo nic skomplikowanego, jedynie trzeba rozumieć jak działa rozstawienie rzeczy w tym CSS, a tak poza tym to not bad.

Jak zrobić zadanie?

Dobra, po prostu w tym zadaniu tworzymy CSS. Zwróćmy uwagę na to jak wygląda html, widzimy tam że mamy header, h1, nav, ul, li itd. to właśnie je, będziemy edytować w naszym css.

Zaczynajmy, mamy w pierwszym poleceniu, ustawić .header jako kontener Flexbox. W drugim poleceniu jednak każą nam ułożyć elementy (h1 i .nav) w jednej linii, po przeciwnych stronach (lewo–prawo). Jak mamy to zrobić?? Użyjemy kilku rzeczy.

Pierwszym zadaniem jest wyjaśnienie, czemu akapit .highlight staje się zielony, a nie niebieski.
Odpowiedź, może być trochę pogmatwana, ale postaram się wam wyjaśnić. Mamy tam trzy nadpisania. Pierwsze nadpisanie to ustawienie koloru #333, drugie ustawienie koloru niebieskiego, a trzecie nadpisanie to ustawienie koloru zielonego. Czemu jest zielony a nie niebieski? W skrócie to dlatego, że jest to ostatnie nadpisanie, i nadpisuje niebieski kolor, kolorem zielonym... Ale tutaj wchodzą jakieś grubsze rzeczy których nie za bardzo sam rozumiem. Bo każde nadpisanie ma jakieś tam wartości, i to ostatnie przypisanie czyli te z gwiazdką * pobiera wartości od tego poprzedniego, czyli ma takie same.... ale jest zasada, że jeśli mają przypisania takie same wartości to wygrywa ten który jest niżej w kodzie. W tym wypadku, niżej w kodzie jest zielony i dlatego on wygrywa..
Ciężko to wytłumaczyć prostymi słowami.. ale miejmy nadzieję, że będzie jakiś prosty przykład. W razie czego możecie sobie wkleić ten kod z kolokwium do html i zobaczyć jak wam działa i może sami dobrze ocenicie, skąd się to wzięło.

Drugim zadaniem jest zmiana CSS tak, aby .highlight było niebieskie bez important. Można to zrobić w dość łatwy sposób, dodając literę p przed hightlight.. czyli:
.post p.highlight { color: blue; }, jak dodacie tą literę p to wartość będzie większa i będzie niebieski zamiast zielonego.

Trzecim zadaniem jest sprawienie by wszystkie akapity w .post były czerwone oprócz .highlight.
można tu zastosować pewną rzecz, którą już pokazuje:

.post p.highlight {color: blue;} - Zawsze tekst będzie niebieski.
.post p:not(.highlight) { color: red;}- Wszystkie p oprócz .highlight są czerwone.

Jak rozumiecie angielski to powinniście i to zrozumieć, jest tu zaprzeczenie, że jednak kod red pojawia się na takich p ze specjalnym tagiem..

Zapewne część osób czytających z was robiła ze mną stronkę z obracającym się gorylem po nakierowaniu na niego. Więc dla was nie będzie to zadanie jakieś ciężkie. Mamy przycisk, zwyczajny niczym nie wyróżniający się przycisk i chcemy zrobić by on pulsował. Co w takim razie trzeba zrobić? Oczywiście zastosować @keyframes.

Dla tych co nie wiedzą o co w tym chodzi, to już wam mówię, @keyframes to inaczej animacja. Nazywamy ją tutaj pulse i ustawiamy wartości. Żeby animacja była zapętlona, musimy zrobić by 0% jak i 100% miało tą samą wartość. Ta animacja wygląda następująco, jeśli ma 0% to ma skale 1, jak ma 50% to skale 1.1, no i jak ma 100% to ma skale znów 1. Teraz jak mamy animację, to pora ją przypisać do tego guzika.

Mamy tutaj kilka rzeczy, które wyjaśnię:
.btn:hover {...} - odwołanie do przedmiotu który ma klasę .btn (:hover dodajemy bo chcemy by się odpalało jak się najedzie na to).
display: inline-block; - inline-block sprawia, że element zachowuje się jak inline, czyli może stać w linii z tekstem. W skrócie nie rozwala się.
animation: pulse 1.2s infinite ease-in-out; - animation to oczywiście animacja, potem zawiera nazwę animacji którą ma wykonywać, potem przez ile czasu następuje jak ma wykonywać? My daliśmy infinite, by cały czas działała. No i ease-in-out dla lepszej płynności.

W skrócie to tyle jeśli chodzi o to zadanie, nie ma tragedii, jest całkiem znośne. Tylko trza się nauczyć tych animacji.

W tym zadaniu, musimy stworzyć tabelkę, posiadającą produkt, cenę, dostępność... no i w sumie widzicie. jak ona wygląda na zdjęciu. Zrobimy ją w podobny sposób. Zaczynamy od napisania html, dopiero potem będziemy się bawili w css. Najpierw trzeba postawić fundamenty. Jak tak patrzę to nasza tabelka powinna się składać z: 3 kolumn na górze, oddzielonych od siebie oraz 3 na dole, po 3 pionowe kolumny. Także zaczynamy :b.

<table> - kontener tablicy, w tym się wszystko znajduje.
<thead> - nagłówek tablicy, określa nam górną oddzieloną tabelę.
<tr> - wiersz.
<th> - komórka nagłówka (pogrubiona i w centrum).
<tbody> - część z danymi tablicy, określa nam dolną tabelę.
<td> - zwykła komórka.

To teraz pora na to, co misiaczki lubią najbardziej. Czyli css.. zaczynamy od całości, domyślnie table nie zawiera linii i wygląda tak:

To teraz pora coś zadziałać z css, by wyglądała jak tamta na zdjęciu lub spełniała oczekiwania klienta.

Już mówię, co tutaj zaszło... no to tak:
.table {...} - odwołanie do tablicy.
width: 100%; - szerokość tabelki 100% (w ten sposób fajnie się rozciąga).
border-collapse: collapse - usuwa podwójne granice między komórkami, granice stają się jedną linią.
th, td {...} - odwołujemy się do tych takich komórek, u know..
border: 1px solid #000; - każda komórka dostaje, cienką na 1 pixel, czarną ramkę.
padding: 8px; - odstęp między tekstem, a krawędzią komórki, żeby było czytelnie.
th {...} - odwołujemy się do tych komórek na górze (oznaczonych jako th).
background: #eee - zmiana koloru backgroundu.

Także nooo, w skrócie wystarczy się odwołać do wszystkiego i powinno banglać. Sory, że tak krótko, ale mam dość robienia tych zadań XDDD I rozpisywania się o nich.. załamie się psychicznie i fizycznie, ale cóż jakoś damy radę. Życzę powodzenia każdemu, kto to czyta. Good luck everyone.

Yooo, witam was w ostatnim zadaniu. Jeśli chodzi o ostatnie zadanie, to będziemy musieli stworzyć taki fajny dymek powiadomień.. który będzie widoczny na naszej stronce. Całe szczęście to 10 zadanie.. jakby było ich więcej to bym załamał się psychicznie
Tak czy inaczej, zaczniemy od tworzenia notification w CSS

.notification {...} - odwołanie do notification
background-color: #cce5ff; - Zmieniamy kolor tła na jasno-niebieski
color: #004085; - Zmieniamy kolor tekstu na ciemny-niebieski
padding: 12px; - Tworzymy odstęp zawartości od obramowania 12px
border-radius: 8px; - Szczypta zaokrąglonych rogów
display: inline-block; - Dajemy to by pasek z naszym powiadomieniem nie rozjeżdżał się po całej stronie (dopasuje się rozmiarem do tekstu)
position: relative; - Pozwala poprawnie ustawić pseudoelement (trójkąt przy powiadomieniu), który musimy dodać


No to mamy z główki pierwszą część, jeśli wykonujecie to w visual studio code (to w czym będziemy wykonywać na kolokwium), to zapewne
widzicie tekst na niebieskim tle. Taki w miarę wyglądający jak powiadomienie. Lecz w poleceniu wymagają od nas czegoś więcej, oprócz
tego by to powiadomienie wyglądało ładnie i schludnie to wymagają pseudoelementu (czyli trójkąta)
To do dzieła, pokażę wam jak zrobić taki trójkąt

Druga część jest trochę trudniejsza, mamy tutaj zrobić trójkąt.. Tylko pewnie spytacie jak zrobić taki trójkąt w html... Już wam mówię
.notification::before {...} - odwołanie do tego pseudoelementu
content: ""; - wymagane jest by ten pseudoelement się pojawił (puste jest, bo element ma być tylko graficzny)
position: absolute; - Pozwala dokładnie ustawić trójkąt względem powiadomienia
left: -8px; - Przesuwa nasz trójkąt w lewą stronę poza kontener (dzięki czemu wychodzi poza naszą ramkę)
top: 50% - ustawia trójkąt w połowie wysokości naszego powiadomienia
transform: translateY(-50%); - Dokładnie sprawia że trójkąt jest w połowie, korygowanie pozycji ustawionej przez top
width: 0; - Trójkąt będzie zbudowany wyłącznie z obramowań, także wysokość mamy w dupie
height: 0; - Trójkąt będzie zbudowany wyłącznie z obramowań, także szerokość mamy w dupie
border-top: 8px solid transparent; – Tworzymy górną krawędź trójkąta, niewidoczną czy tam przezroczystą
border-bottom: 8px solid transparent; – Tworzymy dolną krawędź trójkąta, również przezroczystą
border-right: 8px solid #cce5ff; – Tworzymy widoczną część trójkąta skierowaną w prawo, w tym samym kolorze co tło powiadomienia

Nie wiem, to zadanie ogólnie jest ciężkie, zrobiłem najbardziej taką dobrą wersję. Bo również można by było zrobić ten trójkąt z kwadratu obróconego
Ale wiadomo, że może on się do tego przywalić, że to nie jest trójkąt tylko kwadrat i może mieć ból dupy o to
Tak czy inaczej ta wersja jest według mnie najlepsza i nie powinien się przywalić do niej :b

• Stronka do nauki flex (Zadanie 6)
• Stronka do nauki grid (Zadanie 4)
• Stronka do nauki pozycji (Mało praktyczne, ale możecie sobie obczaić)