All Articles

Frontend Workshop Exercises

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.html w 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;