|PROJEKT W RAMACH|
CodersCamp (coderscamp.edu.pl) - Największy otwarty kurs programowania webowego
Główne cechy:
- Strona-wizytówka
- 3-blokowa
- Wykonana w HTML + CSS
- Przyciąganie scroll'a do danego bloku
- Responsywność dla 3 zakresów rozmiaru ekranu
- Przejrzysty układ
Strona tytułowa:
- Logo strony
- Tytuł i podtytuł
- Grafiki wypełniające resztę ekranu
- Prosta animacja przepływającej żaglówki
Główna zawartość:
- Cześć lewa ze zdjęciem i głównymi elementami
- Część prawa z poszczególnymi elementami w siatce z 2 kolumnami
- W przypadku przepełnienia prawa cześć jest przewijana niezależnie od lewej
- Poszczególne sekcje jako bloki z rzuconym cieniem.
Stopka:
- Formularz kontaktowy z imieniem/firmą, adresem email, numerem oraz treścią wiadomości
- Z lewej statyczny obrazek jako wypełnienie
- Na dole linki do zewnętrznych stron (linkedin, github)
Strona ma trzy stopnie responsywności w zależności od maksymalnej szerokości ekranu:
- -512px --> smartfony
- 512-1024 --> tablety i smartfony w trybie horyzontalnym
- +1024 --> duże tablety i klasyczne laptopy Dodatkowo dla urządzeń bez wskaźnika (czyli głównie ekrany dotykowe) pasek nawigacyjny cały czas zostaje na wierzchu.
-
Stopień 1
- Strona przekształca się do pionowego układu
- Na stronie tytułowej grafiki wypełniają górną część bloku
- Logo wraz z tytułami jest wyśrodkowane i zajmuje większość bloku
- W sekcji głównej wszystkie części są teraz jeden pod drugim i zajmują cały ekran na szerokość
- Sekcja bloków z opisami ma teraz dodatkowy punkt przyciągania scroll'a
- W stopce formularz jest wyśrodkowany i zajmuje większość bloku, grafika uzupełniająca na górze
-
Stopień 2
- Strona tytułowa taka sama jak w stopniu pierwszym
- Sekcja główna ma dwie kolumny, z lewej kafelek ze zdjęciem i główny opis, z prawej sekcje dodatkowe jedna pod drugą
-
Stopień 3
- Domyślna wersja strony
Pod względem wyglądu strona jest już w pełni gotowa. Dalsza praca to zapełnienie jej treścią i ewentualne stylizowanie dodanych rzeczy. Głębszych testów i uwagi wymagała by również responsywność, w niektórych konfiguracjach rozmiaru strony traci ona na czytelności. Implementacja skryptów JS'a pozwoliła by na płynniejszą/ciekawszą animację, bardziej niezawodny mechanizm przewijania bloków (plus ciekawy znacznik położenia).