Forest Group to fikcyjna firma, która zarządza parkiem krajobrazowym. Strona powstała jako projekt końcowy kursu tworzenia stron WWW, w którym dostałem gotowy projekt graficzny i miałem go samodzielnie odwzorować w kodzie, a potem dołożyć własne rozwiązania. Powstała responsywna strona wizytówka dla firmy, czyli prosta strona z ofertą, opisem działalności i kontaktem, napisana od zera bez gotowego szablonu.

Kluczowe funkcje

Strona składa się z trzech podstron: głównej, pełnej oferty i kontaktu. Całość jest pomyślana tak, żeby odwiedzający w kilka sekund wiedział, co firma oferuje i jak się z nią skontaktować.

• Autorskie menu mobilne. Na telefonie menu chowa się pod przyciskiem, otwiera się płynnie i zamyka samo po kliknięciu w link. Nikt nie musi go zamykać ręcznie.
• Układ dopasowany do ekranu. Ta sama strona czyta się dobrze na telefonie, tablecie i komputerze, bez przewijania na boki i bez powiększania palcami.
• Czytelne pakiety oferty. Trzy warianty obok siebie, z zaznaczeniem, co wchodzi w cenę, a co nie. Odwiedzający porównuje je jednym spojrzeniem.
• Formularz kontaktowy. Odwiedzający pisze wiadomość bez otwierania poczty i od razu widzi na stronie potwierdzenie wysyłki. Formularz jest gotowy do podpięcia na hostingu, który obsługuje PHP.
• Mapa dojazdu. Adres pokazany na mapie Google, więc nikt nie musi go przepisywać do nawigacji.

Do tego doszły drobiazgi, których nie widać na pierwszy rzut oka, a które oszczędzają pracę właścicielowi strony.

• Własna strona błędu 404. Kiedy ktoś trafi pod nieistniejący adres, zamiast surowego komunikatu widzi stronę w tej samej szacie graficznej i wraca stąd na właściwą podstronę.
• Automatyczny rok w stopce. Data przy informacji o prawach autorskich zmienia się sama, bez wchodzenia w kod raz na rok.

Technologie

Cała strona jest napisana ręcznie, bez systemu zarządzania treścią i bez kupionego motywu. Dzięki temu w kodzie nie ma niczego, czego ta strona nie potrzebuje.

• HTML5 i CSS. Podstawa każdej strony w internecie. Pierwsze odpowiada za treść, drugie za wygląd.
• SASS. Nakładka na CSS. Kolory i wymiary siedzą w jednym miejscu, więc zmiana koloru na całej stronie to poprawka w jednej linijce.
• Metodologia BEM. Umowa co do nazywania elementów w kodzie. Po miesiącach przerwy nadal wiadomo, za co odpowiada dany fragment, a poprawki idą szybciej.
• CSS Grid i Flexbox. Narzędzia do układania treści, dzięki którym strona sama przestawia bloki pod szerokość ekranu.
• JavaScript. Obsługuje menu mobilne, komunikat po wysłaniu formularza i datę w stopce.
• Node.js i Gulp. Automat, który przed publikacją kompresuje style, skrypty i zdjęcia. Strona waży mniej, więc ładuje się szybciej.
• PHP. Krótki skrypt, który odbiera wiadomość z formularza i wysyła ją na skrzynkę firmy.

Efekt

Zadanie brzmiało tak: weź gotowy projekt graficzny i zamień go w działającą stronę, a tam, gdzie projekt czegoś nie przewidywał, dołóż własne rozwiązanie. Stąd wzięło się autorskie menu mobilne i dopasowanie całej strony do małych ekranów.

Kod nie powstawał w próżni. Wrzucałem go do oceny społeczności skupionej wokół kursu, na jej serwerze Discord, i część rozwiązań poprawiłem dopiero po cudzych uwagach. Pokazanie komuś swojej pracy, zanim uznasz ją za skończoną, do dziś jest dla mnie najszybszym sposobem nauki.

To był pierwszy projekt, który bez wahania mogłem pokazać komuś z zewnątrz. Przez długi czas pokazywałem go osobom pytającym, co potrafię, i to z niego wzięły się moje pierwsze zlecenia.

Projekt powstał na kursie
tworzenia stron WWW cz. 4
w MMC School, a społeczność, która pomogła mi go dopracować, działa na
Discordzie MMC School.

Zobacz stronę na żywo:
rado9206.github.io/forestwebsite