search

DaftAcademy / daftacademy-frontend4beginners-autumn2019

12 stars 18 forks source link

readme

Front End 4 Beginners

baner kursu

Plan zajęć

plan zajec

Materiały z zajęć

Tutaj dzień po zajęciach znajdziecie prezentacje oraz treść zadań domowych.

  1. Zaczynamy! (Prezentacja)

    • brak pracy domowej po pierwszych zajęciach

  2. Nie tylko float: left (Linki z zajęć)

    • Praca domowa: Bazując na wizualizacji (https://zpl.io/scene/Vx1dY8W) zakoduj warstwę wizualną strony:
      • Wykorzystaj projekt startowy (link) jako bazę do zrobienia pracy domowej
      • Zbuduj finalną strukturę wszystkich sekcji strony
        • postaraj się dobrać adekwatną technikę do ułożenia danej sekcji (flexbox, grid, position relative/absolute, inline-block)
      • Zdefiniuj wygląd tekstów na stronie, zwracając uwagę na:
        • Kolor
        • Rozmiar tekstu
        • Pogrubienie lub brak pogrubienia
        • Letter spacing
        • Line-height
        • Opacity
      • Spraw, aby tło strony pozostawało w tym samym miejscu, niezależnie od paska przewijania
        • Do osiągnięcia tego efektu zapoznaj się z właściwością "background-attachment"
        • Pożądany efekt możesz zobaczyć na animacji w materiałach do pracy domowej (link)
      • Ostyluj elementy formularza:
        • Przyciski
        • Pola tekstowe
        • Labelki
      • Zadbaj o odpowiednie marginesy i paddingi we wszystkich sekcjach strony (odległości od krawędzi ekranu, odległości nagłówków od treści, itp.)
    • Wyniki pracy domowej (link)
    • Przykładowe rozwiązanie (link)

  3. Małe jest piękne (Prezentacja)

    • Praca domowa:
      • Umieść w znaczniku <head> strony odpowiedni meta tag, aby lepiej wspierać jej wersję mobilną.
      • Zmodyfikuj elementy <img> w sekcji 'gallery' tak, aby zaciągały różne wersje pliku w zależności od gęstości pikseli ekranu (DPR) – potrzebne wersje są już w repozytorium (6BM_zdjecia).
      • Skorzystaj z tiny.png, w celu optymalizacji zdjęć sekcji 'concerts' i wykorzystaj zmniejszone wersje w projekcie zamiast oryginalnych.
      • Wykorzystaj @supports w sekcji 'photos' tak, aby korzystać z grida, jeśli przeglądarka go wspiera. Jeśli nie – inne reguły (np. flex) powinny zapewnić wizualnie taki sam efekt.
      • Korzystając z media queries zakoduj wersję designu na telefony o wymiarach 360x640px (np. Samsung Galaxy S5) – strona powinna wyglądać schludnie i spójnie, nie ma konkretnego designu. Główną nawigację ustaw pionowo na górze strony w normalnym flow dokumentu – po kolejnych zajęciach zmienimy ją w wysuwane hamburger menu.
      • CHALLENGE: Zakoduj stronę tak, aby prezentowała się dobrze na wszystkich urządzeniach o szerokościach ekranu od 360px do 1440px.
    • Wyniki pracy domowej (link)
    • Przykładowe rozwiązanie (link)

  4. Akcja i reakcja (Prezentacja)

    • Praca domowa:
      • Dodaj hamburger menu do strony dla ekranu 360px - przycisk pokazujący/ukrywający nawigację na szerokości. Menu i przycisk otwierający mogą na razie pozostać nieostylowane, ostylujemy je po kolejnych zajęciach.
      • Napisz funkcję, która po kliknięciu w przycisk "Kup bilet" w sekcji "Concerts" usunie przycisk i w jego miejscu wyświetli tekst "Have fun!"
      • Napisz funkcję, która na evencie "submit" formularza kontaktowego wyloguje wpisane wartości do konsoli. (Podpowiedź: użyj funkcji Object.fromEntries w połączeniu z FormData)
    • Przykładowe rozwiązanie (link)

  5. Fly Me to the Moon (Prezentacja)

    • Praca domowa:
      • Menu
        • Ostyluj przycisk otwierający menu, tak aby wygladał jak:
          • hamburger (trzy poziome paski) - przy menu zamkniętym
          • znak X - przy menu otwartym
        • Dodaj tranzycje zmiany hamburgera w X oraz tranzycje otwarcia menu.
      • Zdjęcia w galerii
        • Dodaj animacje do zdjęć przy interakcji z kursorem (możesz użyć Eventów JS lub pseudo-klasy :hover).
        • Animacje powinny mieć minimum 3 kroki.
        • Animacja przy najechaniu kursorem używać powinna transformacji.
        • Animacja przy opuszczeniu obrazka modyfikować powinna kolory obrazka (filter).
        • W skrajnych punktach animacji nie powinien wystąpić przeskok.
    • Przykładowe rozwiązanie (link)

  6. Tłumaczymy żarty (Prezentacja)

Informacje organizacyjne

Komunikacja

Zajęcia są dla Was. Chcemy abyście wyciągneli z nich jak najwięcej. Dlatego przygotowaliśmy dla was dwa kanały komunikacji z nami. Piszcie jeśli macie pytania w sprawie prac domowych oraz wymieniajcie się doświadczeniami na GitHub Issues.

Obecności na zajęciach

Jesteśmy firmą technologiczną, także pozbywamy się papieru i zaznaczmy obecność na zajęciach przez internet.

Edytor kodu

Jeśli nie masz swojego ulubionego to polecamy:

https://code.visualstudio.com/

Projekt strony internetowej

Materiały do projektu

animacja

Prace domowe

Wyróżnienie dla najbardziej zaangażowanych osób (certyfikaty ukończenia kursu + gift packi):

Umieszczanie pracy domowej na GitHubie

Od teraz wchodząc na nasze repozytorium projektu możemy metodą drag&drop przenosić pliki i wgrywać je do naszego repo.

Każda aktualizacja projektu to tzw. commit czyli opis zmian w porównaniu do poprzedniej wersji projektu.

Gotową pracę domową wysyłacie do nas w formularzu Google Forms otrzymanym w mailu po zajęciach.

Pomoc przy pracach domowych, pytania dotyczące treści zajęć

Zachęcamy do zadawania pytań przez Issues tego projektu. Przeglądajcie również pytania innych uczestników, może potraficie na nie odpowiedzieć! :D