Prezentujemy zadania z warsztatów frontendowych przeprowadzonych przez członków AKAI w 2016 roku
Link do repozytorium: https://github.com/akai-org/frontend-workshops
Workshop #1
Zadanie 0 - przygotowanie środowiska pracy
Upewnij się, że posiadasz / zainstaluj edytor tekstu, w którym będzie się wygodnie pisać kod. Przykładowe programy:
W późniejszych etapach przydadzą się również:
Zadanie 1 - przygotowanie projektu
- Utwórz folder, w którym chcesz stworzyć swój projekt
- W ulubionym edytorze utwórz trzy puste pliki:
index.html,style.css,scripts.js - Korzystając z dokumentu utwórz prosty szkielet strony internetowej.
- Uruchom plik
index.htmlw swojej przeglądarce internetowej.
Zadanie 2 - przygotowanie struktury strony internetowej
- Przemyśl, jakie informacje mogłyby znaleźć się na Twojej stronie
- Uzupełnij sekcję
<head>, nie zapominając o tagach
Zadanie 3 - stylowanie sekcji powitalnej
- Czas sprawić, by strona jakoś wyglądała. Możesz wzorować się na tym layoucie
- Zapoznaj się z właściwościami:
margin, padding, border - Zapoznaj się z właściwościami stylowania tekstów
Zadanie 4 - obrazki
- Pobierz z legalnego źródła grafiki, które umieścisz na swojej stronie
- Wykorzystaj właściwość
background, by wstawić swoją grafikę w tle pierwszej sekcji - Dodaj obrazek do sekcji “O mnie”
Zadanie 5 - hiperłącza
- Utwórz drugi plik HTML i połącz go z pierwszym przy użyciu hiperłączy
- Utwórz pasek nawigacji
- Utwórz odnośniki do stron społecznościowych
Zadanie 6 - animacje
- Dodaj animację zmiany koloru po najechaniu na linki
- Spraw, by animacja zmiany koloru była płynna
Zadanie 7 - pozycjonowanie stałe i względne
- ‘Przyklej’ nawigację tak, aby była widoczna również przy scollowaniu strony
- Ściągnij ikonkę Facebooka
- Umieść tę ikonkę Facebooka na wysokości połowy strony i przyklejeniem jej do lewej strony
- Po najechaniu na nią, ikonka powinna płynnie przesuwać się po osi x w prawo o 10/15px
- Po “wyjechaniu” myszką z tego miejsca ikonka równie płynnie ma wrócić na swoje miejsce początkowe
Zadanie 8 - edycja obrazka:
- Spraw, by obrazek dodany do strony miał kształt koła
- Dodaj do niego cień
- Dodaj kreatywny efekt po najechaniu na obrazek (np.: jego obrót, przyciemnienie, pojawienie się napisu)
Zadanie 9 - Ukrywanie sekcji w wersji na telefony
- Spraw, aby dowolnie wybrana sekcja strony nie wyświetlała się na małych ekranach
- Podpowiedź: media-query oraz css - display:none;