Ta strona nie ma sensu – prosty tutorial HTML i CSS

Mój brat (14 lat) ostatnio zaczął uczyć się kodzić. Bardzo szybko znudził się porządnymi stronami, które mają jakieś funkcje, a zaczął przeglądać stronki, które nie robią nic 😉 Stąd tutorial HTML i CSS.

Głownie losuje sobie stronki za pomocą Usless Web.
useless web

Zapytał mnie, jak zrobić stronę w stylu: www.republiquedesmangues.fr (została moją inspiracją). Tak, ta strona nie ma sensu, ale jest bardzo prosta do wykonania. Także dzisiaj wpis z tutorialem dla niego, a może i ktoś jeszcze będzie miał ochotę taką stronę zrobić 🙂

Wykonanie całości to pewnie ok 30 min roboty, więc jest to bardzo szybki tutorial.

Co oto dzisiaj powstanie:

1) Tworzymy nowy projekt

Może być to nowy projekt na pulpicie czy w dowolnym miejscu na dysku. Będzie zawierał plik index.html oraz plik style.css.
tutorial HTML i CSS: stwórz nowy projekt

Do pliku index.html kopiujemy bazowy szablon html:

See the Pen base_html by Malgorzata Rita (@ritawanderlust) on CodePen.

Plik style.css chwilowo jest pusty.

2) Kolorujemy tło

W pliku CSS ustawiam właściwość background-color. U mnie będzie to jasna zieleń w kolorze: #f5ffd8. Więcej kodów kolorów można wziąć np. ze strony color-hex.

html, body {
  background-color: #f5ffd8;
}

See the Pen +background by Malgorzata Rita (@ritawanderlust) on CodePen.

3) Grafiki na stronę

Do naszego projektu potrzebujemy dwa obrazki – element na środek o raz promienie. W moim wypadku jest to grafika awokado i zielone promienie na przeźroczystym tle. Oczywiście, mogłby to być dowolne dwie grafiki 😉

Zapisujemy je w folderze naszego projektu:
dodaj grafiki do projektu

4) Wstawiamy obrazki na stronę

W pliku index.html dodajemy grafiki na stronę przez wstawienie kodu HTML o znaczniku img, zazwyczaj wygląda to tak <img src="ścieżka/do/pliku" alt="opis"/>. Nasza ścieżka do obrazka u mnie ./avocado.png. W body zastępuję „Your code here” pobranymi obrazkami:

<body>
  <img src="./rays.png" />
  <img src="./avocado.png" />
</body>

See the Pen +images by Malgorzata Rita (@ritawanderlust) on CodePen.

5) Zmiana rozmiaru obrazków

W pliku index.html obu obrazkom dodajemy klasy – awokado będzie na górze, dlatego dostanie klasę top, a promienie będą pod spodem – klasa bottom.

<body>
  <img class="bottom" src="./rays.png" />
  <img class="top" src="./avocado.png" />
</body>

W pliku style.css ustawiamy wysokość i szerokość obrazków:

.top {
  width: 300px;
  height: 300px;
}

.bottom {
  width: 500px;
  height: 500px;
}

Nasz kod na tym etapie wygląda o tak:

See the Pen +resize by Malgorzata Rita (@ritawanderlust) on CodePen.

6) Wypośrodkowanie elementu

Aby wypośrodkować element w CSS wykorzystamy właściwość position i nadamy jej wartość absolute.

Więcej o właściwości position i innych jej wartościach znajdziecie w tym filmiku

Właściwość position pozwala manipulować elementem na stronie: góra-dół (top-bottom), lewo-prawo (left-right). Wartość absolute sprawia, że element pozycjonujemy względem krawędzi jego bezpośredniego rodzica. U nas rodzicem obrazków jest element body.

Zacznijmy od awokado. Chcemy je przesunąć 50% wysokości okna przeglądarki w dół i 50% szerokości okna przeglądarki w bok – lewo. Spróbujmy. Ustawimy w CSS:

.top {
  width: 300px;
  height: 300px;

  position:absolute;
  top: 50%;
  left: 50%;
}

Dziwne, nadal nasze awokado nie jest na środku. A to dlatego, że wypośrodkowaliśmy jego lewą krawędź, a nie całe awokado.

Tak naprawdę, aby wypośrodkować awokado chcemy je przesunąć w dół o 50% oraz odjąć połowę całej wysokości awokado tj. 150px (awokado ma wysokość ustawioną height: 300px;). Na matematyce odjęcie dwóch różnych jednostek by nie zadziałało, mimo że intuicyjnie wiemy, ile to jest od 50% naszego wzrostu odjąć 15cm.
Tu z pomocą przychodzi nam funkcja calc(), która działa właśnie tak, jak przykład ze wzrostem.

Możemy użyć w CSS: top: calc(50% - 150px). Czyli od połowy wysokości okna przeglądarki odejmujemy połowę wysokości obrazka. Analogicznie możem przesunąć nasze awokado w lewo left: calc(50% - 150px):

.top {
  width: 300px;
  height: 300px;

  position:absolute;
  top: calc(50% – 150px);
  left: calc(50% – 150px);
}

Teraz awokado jest dokładnie na samym środku okna przeglądarki. Udało się!

Czas analogicznie przesunąć promienie. Wiemy, że ich wysokość i szerokość jest ustawiona na 500px, połowa z tego to 250px. W związku z tym, analogicznie do przykładu z awokado klasa bottom będzie wyglądała tak:

.bottom {
  width: 500px;
  height: 500px;

  position:absolute;
  top: calc(50% – 250px);
  left: calc(50% – 250px);
}

See the Pen +position by Malgorzata Rita (@ritawanderlust) on CodePen.

7) Obracanie promieni

Czas przygotować animację promieni. W tym celu musimy skorzystać z reguły @keyframes, która pojawiła się na blogu przy okazji tworzenia pisanek w CSSie.

Nasza animacja (nazwana spin) będzie bardzo prosta. Skorzystamy z właściwości transform, aby obracać (rotate) cały obrazek od kąt 0st do kąta pełnego tj. 360st – czyli wykonujemy pełen obrót.

W pliku style.css dopisujemy:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

Następnie na grafice – promieniach użyjemy naszej animacji o nazwie spin. Wykorzystamy właściwość animation. Podajemy nazwę animacji (name), czas trwania jednego wykonania (duration), sposób przyspieszenia (timing function) oraz liczbę powtórzeń (iteration count).

Możemywięc do klasy bottom dopisać:

animation-name: spin;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;

albo wszystkie trzy ustawienia podać w jednej linii jako animation: spin 20s linear infinite.
Stąd klasa bottom będzie wyglądała tak:

.bottom {
  width: 500px;
  height: 500px;

  position:absolute;
  top: calc(50% – 250px);
  left: calc(50% – 250px);

  animation: spin 20s linear infinite;
}

See the Pen +animation by Malgorzata Rita (@ritawanderlust) on CodePen.

Gratulacje, strona gotowa!

Pełen kod udostępniony na GitHubie: Avocado here

Co dalej?
Dalej stronę można np. opublikować w Internecie za pomocą Github pages, sprawić, że będzie publicznie dostępna.

Niedosyt kodowania? Sprawdź Tutorial: CV w HTML i CSS – krok po kroku!

Dajcie znać czy podoba wam się taki tutorial HTML i CSS (w domyśle pisany dla osoby dopiero zaczynającej przygodę z kodem).