Zadanie rekrutacyjne na stanowisko CSS Developer


Adres: zobacz stronę

Wytyczne:
Zakoduj template Landing Page’a związanego z turniejem piłkarzyków na rozdzielczości desktop, tablet i mobile przy użyciu języków HTML, CSS (Sass) i Javascript (może być też jQuery).


Szczegóły odnośnie projektu:

  • -można skorzystać z frameworka typu Bootstrap, ale TYLKO modułu Grid
  • -projekt został załączony w formacie .sketch, .xd, .pdf i .png w folderze „task_materials” – sugerujemy skorzystanie z darmowego Adobe Xd w celu łatwego odczytywania wymiarów i kolorów
  • -projekt został przygotowany dla: desktop (1920px), tablet (768px), mobile (320px), jednak breakpointy nie muszą występować dokładnie w tych rozdzielczościach (np. mobile może zaczynać się od 520px)
  • -fonty i wyeksportowane assetsy zostały załączone do paczki z projektem w folderze „assets”
  • -zostały przygotowane pomocnicze guideline’y związane z typografią dla rozdzielczości desktop + tablet oraz mobile (folder „guidelines”)
  • -po zescrollowaniu w dół, nawigacja staje się fixed, zmniejsza się jej wysokość i pojawia się tło + cień (pliki „Tablet – scroll behavior” i „Mobile – scroll behavior”)
  • -dla rozdzielczości tabletowych i mobile występuje menu hamburgerowe, które należy utworzyć samodzielnie w JS (jQuery), bez dodatkowych wtyczek (pliki „Tablet – menu” i „Mobile – menu”)
  • -dodanie animacji przy hoverze (np. na przyciskach) lub dodatkowych animacji ozdobnych traktowane jest jako dodatkowe zadanie

Nasze wskazówki:

  • -szczególną uwagę podczas kodowania należy zwrócić na to, a by kod był zwięzły i łatwy w utrzymaniu – należy unikać powtórzeń i zachowywać modułowość oraz logikę
  • -pomimo, że zadanie nie jest obszerne, ma być traktowane jako część dużego, skomplikowanego projektu
  • -projekt powinien działać na różnych przeglądarkach i urządzeniach (cross-browser)
  • -bardzo ważne jest jak najdokładniejsze odwzorowanie projektuRozwiązane zadanie powinno znajdować się na repozytorium np. Githuba