Zadanie rekrutacyjne Frontend - stworzenie headera wraz z menu

Treść

Twoim zadaniem będzie stworzenie jedynie elementu header z menu (nie całej strony). Głównym celem ćwiczenia jest sprawdzenie jak radzisz sobie z kodowaniem szablonu z PSD do HTML.

W twoim rozwiązaniu muszą się znaleźć jedynie elementy:

• górna belka
• logo, wyszukiwarka, koszyk
• menu kategorii

Plik źródłowy

W folderze src znajdziesz plik z zadaniem w formacie .psd. Rozwiąż zadanie na jego podstawie.

Co musi być zawarte w rozwiązaniu?

1. Użycie HTML i CSS do rozwiązania zadania.
2. RWD - użyj breakpointów wedle własnego uznania.
3. Podejście mobile first
4. Zadanie musi być dostarczone w postaci linku do repozytorium GitHub.

Co może (ale nie musi) być zawarte w rozwiązaniu

1. Preprocesor CSS np.: Less,
2. Managera pakietów wraz z taskrunnerem np.: Grunt,
3. Zewnętrzna biblioteka/i JS - jeśli uznasz za konieczne.

Na co warto zwrócić uwagę?

1. Poprawny, semantyczny kod HTML.
2. Użycie layout model flexbox i/lub grid.
3. Poprawny wygląd na różnych urządzeniach, systemach operacyjnych i przeglądarkach.
4. Używanie zmiennych CSS.
5. Używanie metodyk CSS (np. SMACSS).
6. Korzystanie z systemu kontroli wersji podczas pracy.
7. Animacje na elementach, które mogą tego wymagać (np. przyciski).
8. Struktura projektu - np. oddzielne pliki CSS.

Czego należy unikać?

1. Nie możesz używać bibliotek czy frameworków pokroju Bootstrapa czy Foundation. Chcemy zobaczyć jak tworzysz layout bez ich użycia.

Przeglądarki

Rozwiązanie powinno działać na następujących wersjach przeglądarek:

1. Firefox (najnowsza)
2. Chrome (najnowsza)
3. Edge (najnowsza)
4. Internet Explorer 11
5. Safari (najnowsza)

Na co zwrócimy uwagę przy ocenie?

1. Poprawność kodu HTML i CSS. Sprawdź swój kod w W3C Validator.
2. Spójność w nazewnictwie elementów.
3. Reużywalne style i elementy.
4. Reużywalny kod (zasada DRY).
5. Dbałość o szczegóły.
6. Optymalizacja kodu.
7. Dobre praktyki programistyczne.
8. Strona wyglądająca tak samo niezależnie od przeglądarki.
9. Mobile first