Cześć!

Przed Tobą drugie zadanie domowe obejmujące pracę z HTML i CSS.

CARD:

ORDER_SUMMARY:

SNAP:

Pliki z designami znajdziesz w folderach /card, /orderSummary i /snap.

Zadanie wykonuj na swoim repozytorium w obrębie organizacji infoshareacademy, tj. https://github.com/infoshareacademy/jfdzr13-student-[login_git_hub].

Folder /homework-02 zawiera pliki niezbędne do wykonania 3 projektów. Dwa z nich to niewielkie komponenty /card i /orderSummary, trzeci zaś jest zblizony do strony, jaką kodowaliście podczas ostatnich zajęć projektowych.

Przed przystąpieniem do pracy domowej, zapoznaj się dokładnie z wymaganiami:

1. Pracę domową wykonaj na branchu homework-02.
2. Kazdy projekt umieść w folderze noszącym nazwę projektu, tj. ostatecznie oczekuję takiej struktury:

/homework-02
   /card
   /orderSummary
   /snap

3. Do kazdego projektu napisz plan w pliku tekstowym. Plan dla kazdego projektu ma się znaleźć we właściwym mu folderze.

Przykład:

-  Szkielet HTML:
   -  elementy nawigacji umieszczone w tagu `<nav>`
   -  wewnątrz nawigacji logo, linki
   -  (...)
-  CSS:

   -  Podstawowy layout strony zdefiniowany przy pomocy Grid Template Areas
   -  Rozmieszczenie elementów wewnątrz nawigacji przy pomocy flex
   -  (...)

   Powyższy przykład to tylko... przykład. Choć bazuje na zadanym tutaj projekcie "snap", jest niedokładny i wymaga wielu uzupełnień. Powinien być przede wszystkim Twoim planem na implementację ;]

4. Uzywaj znaczników semantycznych HTML.
5. Zachowaj czystość w commitach - commitujemy tylko skończone etapy pracy, zachowując jednocześnie czytelność wiadomości w commitach.
6. Po zakończeniu pracy stwórz pull request i dodaj mnie jako recenzenta.

Co będzie oceniane?

1. Praca wykonana na branchu homework-02 i stworzenie pull requesta po jej zakończeniu - 1pkt
2. Plan dla kazdego projektu - 3pkt
3. Zbudowanie projektu zgodnie z tym planem - 3pkt
4. Poprawne użycie semantycznych znaczników HTML - 3pkt
5. Przyciski posiadające style dla :hover i :active - 3pkt
6. Czystość w commitach (oznacza czytelne wiadomości commit i commity tylko skończonych części pracy) - 6pkt

Co jeśli wypełnię wszystkie powyższe punkty, ale moja praca nie będzie idealnie odtwarzała designów?

Wtedy utnę 0.5 pkt za style i analogicznie 0.5pkt za brak jakiegoś elementu w HTML - czy to będzie przycisk, czy któryś z assetów ;]

UWAGA!!! Mobilne style w tej części nie są obowiązkowe i nie będę ich oceniać

Sumarycznie można za tę pracę domową zdobyć 19 punktów

Czas na oddanie pracy: 12 stycznia 2024 do północy, przy czym oddanie pracy definiowane jest przez stworzenie Pull Requesta i przypisanie mnie do niego jako recenzenta (UWAGA: informacja o ewentualnym przedłuzeniu terminu oddania pracy w poście na slacku powiadamiającym o tej pracy domowej)

RADY:

• Do zdefiniowania layoutu dla projektu snap warto uzyć Grid Template Areas. Zdaję sobie sprawę z tego, ze moze to wykraczać poza dotychczas wyłozony materiał, więc absolutnie nie jest to obowiązkowe,
• Kolory, rozmiar fontów, ogólnie reuzywalne wartości własności CSS zdefiniuj w zmiennych CSS,
• Unikaj podpowiedzi asystentów AI (to o tyle podpowiedź, ze asystenci AI akurat w CSSy są beznadziejni :D)
• Jak najbardziej jednak staraj się wykorzystać potencjał płynący z AI np przy definiowaniu semantycznych znaczników HTML.
• Potrenuj stylowanie przy pomocy np https://cssbattle.dev/ :D

POWODZENIA!