Strona portfolio. Jak się za to zabrać? – cz. 4 – HTML + CSS, part III – WHAT.

Kolejny artykuł z serii portfolio. Dzisiaj skupimy się na HTML i CSS sekcji What I do.

Seria strona portfolio

W skład serii wchodzą:

  1. Część 1 – Jak stworzyć projekt graficzny. TUTAJ opisywałem jak się zabrać do tworzenia layoutu.
  2. Część 2 – HTML + CSS, part I – Hero.
  3. Część 3 – HTML + CSS, part II – Sekcja Home.
  4. Część 4 – HTML + CSS, part III – czyli ten wpis 🙂 Opiszę jak wykonałem sekcję What I do.
  5. Część 5 – HTML + CSS, part IV – sekcja About.
  6. Część 6 – HTML + CSS, part V – sekcja Contact.
  7. Część 7 – HTML + CSS, part VI – kwestie globalne strony np. head, linki, responsywność.
  8. Część 8 – JavaScript – definiowanie zachowania poszczególnych elementów na stronie.

Pełny projekt dostępny do podglądu tutaj:

http://bartlomiejcis.eu/

Przedmowa

No i odważyłem się. Pierwszy praktyczny projekt który zrobiłem, nie wolny od błędów logiczno-technicznych ale kompletny i działający- czyli moja strona portfolio ujrzał światło dzienne. Wykupiłem sobie domenę za 0PLN i wrzuciłem stronę na serwer. Pytasz się czego się odważyłem? Bo ponadto pokazałem ją “społeczności” Front-Endowej do oceny. I jak?

Grupa wsparcia.

Na facebooku funkcjonuje sporo grup gdzie można znaleść informację lub pomoc w jakimś problemie. Pochwaliłem się na grupie Programowanie – wsparcie na starcie. Odzew był taki, że przez następną godzinę odpisywałem na komentarze 🙂 Świetnie, wiele cennych uwag i recenzenci naprawdę wykazywali zaangażowanie. Choć uświadomiłem sobie ile muszę poprawić aby strona spełniała lepiej “standardy jakości” to byłem bardzo zadowolony. Super, polecam wszystkim tą grupę.

Co do poprawy?

Przy pierwotnym tworzeniu strony popełniłem kilka błędów zarówno koncepcyjnych jak i technicznych. Uświadomiłem sobie, że:

  1. CSS: Kiedy operujesz w systemie blokowym to nie ma sensu ustawiać width:100% bo każdy kolejny element ma ustawioną taką wartość domyślnie
  2. CSS: Jak możesz to unikaj ustawiania sztywnej wysokości poszczególnych sekcji. Pozwól elementom samym definiować wysokość sekcji. Dlaczego? Bo potem jak robisz widoki mobilne to oszczędzi Ci to wiele zachodu.
  3. CSS: Unikaj ustawiania elementów za pomocą position:absolute jeżeli tylko możesz. Dlaczego? Bo się to potem na mobilkach rozjeżdża i sporo pracy kosztuje. Jak trzeba to trzeba ale jak nie trzeba to po co?
  4. HTML: Nie twórz tysięcy divów, im mniej tym lepiej. Dbaj o to, żeby nie było pustych sekcji czy <br>ów między sekcjami. Ustawiaj paddingiem jeśli można.
  5. Jak nie używasz Bootstrapa to usuń wszystkie linki z HTML a potem dodaj w CSS formułę * { margin: 0; } czyli globalne usunięcie domyślnych marginów.
  6. Na koniec deserek 🙂 Jeśli myślisz, że jakaś niedoróbka umknie uwadze wprawnego oka to się mylisz 🙂 Wypunktują Cię raczej skutecznie 🙂

Zgodnie z duchem nowej filozofii przystąpiłem do poprawek 🙂 Jedziemy z tym 🙂

Sekcja What I do.

To jest trzecia sekcja strony która wstępnie informuje użytkownika czym się zajmuję i pokazuje wybrane (nie wszystkie! wybierz najlepsze, jak chcesz iść w ilość to po prostu pokaż jakąś statystykę) realizacje. Zbuduję ją krok po kroku. Wygląda ona tak:

https://htmlpreview.github.io/?https://github.com/bartcis/portfolio/blob/what/what.html

Pracę podzieliłem na 3 etapy.

Etap 1 – Sekcja, główny kontener i napisy.

Tutaj podobnie jak w poprzednich częściach. Tworzymy nową sekcję, ustawiamy tło i zostawiamy wysokość w spokoju. Sekcja będzie się sama powiększać kiedy będą dodawane kolejne elementy blokowe.

Następnie kontener o szerokości 80% do którego wrzucamy elementy, środkujemy zawartość text-align: center i odsuwamy od górnej krawędzi sekcji zostawiając miejsce na nawigację przez padding-top: 7%;. Ja wolę operować na % niż konkretnych wartościach w pixelach bo widok wtedy jest dynamiczny wraz ze zmianą rozdzielczości ekranu.

Potem wstawiamy same elementy czyli w tym wypadku nagłówek <h2>, tekst <p> i przycisk Scroll zrobiony z wektora czyli <scroll-what>. Wektory <svg> trochę “brudzą” kod HTML ale generalnie są bardzo ok, więcej o wektorach w pierwszej części serii opisującej CSS.

Etap 2 – Sekcja Portfolio.

Przy tym będzie więcej główkowania bo zrobiłem to dość fajnym efektem “pseudo-3D” zapożyczonym z sieci.

Na początku tworzę kontener portfolio gdzie wrzucam nagłówek <h3> i mniejszy kontener <div class=“port”> gdzie będą części portfolio, tego gościa ustawiam na display:flexbox; ta właściwość daje nam sporo kontroli nad tym co znajduje się w środku bez wprowadzania chaosu.

Wewnątrz tworzę oddzielne elementy portfolio <div class=“port-item-1″> i definiuję ich wielkość w tym wypadku width: 300px; i position: relative; bo będzie potem trochę zabawy. Ważną właściwością jest perspective: 1000px; to ten parametr definiuje nasz efekt “3D”.

Każdy element portfolio składa się z części front i back (jak karty do gry) które się odwracają po najechaniu kursorem (na hoverze). Ustawiamy ich wysokość min-height: 400px; i generalnie orientację przestrzenną, tło itp. elementów składowych każdej strony. Tutaj ważnymi parametrami są backface-visibility: hidden; i overflow: hidden; dodają “ogłady” skaczącym elementom wskutek różnych transformacji.

Do tego wszystkiego dochodzi sporo kodu opisującego dziejące się transformacje. Generalnie obiekty obracają się o 180deg stając się potem “przykryte” drugą stroną, więcej szczegółów w kodzie 🙂

Trochę się na początku namęczyłem żeby użyć tego efektu ale ostatecznie jest on dość fajny.

Etap 3 – Sekcja Testimonials

To jest w zasadzie część niezależna od sekcji What ale jest jakąś jej logiczną kontynuacją. Tutaj zamieszczę pozytywne referencję od potencjalnych klientów kiedy jacyś w ogóle się znajdą 🙂 Sekcję zbuduje w trzech krokach.

Krok 1

W opisany na początku sposób tworzę sekcję, dodaję wypełnienie ciemnym gradientem. Definiuje wysokość min-height: 250px;, dlaczego? Bo jak potem dodam funkcjonalność przewijania opinii, nie chcę aby wysokość sekcji się zmieniała za każdym w zależności od długości komentarza. Teraz wysokość może się tylko zwiększyć jak komentarz będzie bardzo długi, w przeciwnym razie sekcja ma wys. 250px.

Krok 2

Tutaj po prostu dodaję kontener z width 80% i umieszczam w nim pola tekstowe wypełnione <h4> i <h6>. Czcionki odpowiednio formatuję.

Krok 3

Dodaję strzałki nawigacji w prawo i lewo, zrobiłem je z wektorów. Ustawiam je za pomocą margin-top oraz float: right / left.

W ostatecznej wersji strona będzie miała możliwość przewijania między komentarzami za pomocą tych strzałek.

Podsumowanie

Opisałem dzisiaj jak stworzyłem kolejną sekcję w moim projekcie. Z kompletnie nowych elementów  dodałem fajny efekt portfolio. Dodatkowo zmieniłem trochę filozofię tworzenia i odszedłem od sztywno zdefiniowanych wysokości sekcji. Pomaga to zaoszczędzić potem pracę przy budowie widoków na urządzeniach mobilnych. Ogólnie jest dobrze i nauka postępuje 🙂