Strona internetowa w 3 minuty

O czym jest ten poradnik?

W tym poradniku dowiesz się jak w 3 minuty (lub mniej) stworzyć prostą stronę internetową. Nauczysz się jak:

kontrolować rozmiary i położenie elementów
ustawiać odstępy między elementami i tekstem
używać fontów Google Fonts
korzystać z kolorów
wykonać prostą animację
ostylować górną część strony
utworzyć nawigację

Treść

Podstawą każdej strony internetowej jest treść. Jeśli chcesz przyciągnąć użytkowników to Twoja treść musi być interesująca i możliwie unikalna.

Załóżmy, że wiesz, jaka będzie tematyka Twojej strony, masz gotową treść i podpiąłeś pusty plik style.css. Gotowy na dodanie pierwszej reguły?

Szerokość i wyśrodkowanie

Stylowanie naszej prostej strony zaczniemy od ustawienia szerokości kontenerów section i header. Następnie wyśrodkujemy je, by rozłożyć treść równo.

section, header {
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
}

Popracujmy teraz trochę nad tekstem.

Font

Domyślny font Times New Roman jest fontem szeryfowym i będzie słabo wyglądać na większości stron. Prosta zmiana na font bezszeryfowy taki jak Lato znacznie poprawi wygląd strony. Więcej fontów możesz znaleźć na Google Fonts.

@import url('https://fonts.googleapis.com/css?family=Lato:300,400&subset=latin-ext');

body {
  font-family: 'Lato', sans-serif;
}

Poprawiliśmy już czcionkę. Zajmijmy się teraz czytelnością tekstu.

Odstępy

Odstępy są jednym z najważniejszych elementów na stronie. Dobrze użyte mogą poprawić czytelność i dodać estetyki. Źle użyte mogą sprawić, że użytkownik bardzo szybko opuści wytrynę.

body {
  line-height: 1.5;
}

h2 {
  margin-top: 20px;
  padding-top: 20px;
}

pre {
  padding: 1em;
}

p {
  margin: 10px 0;
}

section ul {
  margin: 30px 0;
}

section li {
  margin-top: 3px;
}

Strona wygląda już znacznie lepiej. Dodajmy teraz podstawowe kolory.

Kolory

Kolory są kolejnym bardzo istotnym elementem. Najważniejsza zasada: nie przesadzaj z kolorami. Jeśli jesteś początkujący to używaj 2-3 kolorów: ogólny kolor tekstu, kolor elementów klikalnych (np. linki) i kolor po najechaniu myszką na element klikalny (hover).

a {
  color: #16a085;
}

p {
  color: #545454;
}

h1, h2, li, strong {
  color: #333333;
}

pre {
  background-color: #efefef;
  border-left: 3px solid #16a085;
}

Zajmijmy się teraz animacją elementów.

Animacje

Animacje są kolejnym elementem, z którym nie należy przesadzać. W tym poradniku dodamy tylko prostą animacje odnośników.

a {
  transition: color .3s ease-out;
}

html.krok6 a:hover {
  color: #0086c3;
}

Treść na stronie wygląda już bardzo dobrze. Dodajmy teraz kilka reguł do elementu header.

Nagłówek

Dodajmy tło do nagłówka i ustawmy jego rozmiary. Zmieniamy też kolor nagłówka h1 i odnośnika. Dzięki temu uzyskamy ładny kontrast i czytelność.

header {
  max-width: none;
  width: 100%;
  padding-top: 260px;
  padding-bottom: 200px;
  margin-bottom: 100px;
  text-align: center;
  background-image: url('../images/strona-internetowa-w-3-minuty.jpg');
  background-size: cover;
  background-position: center;
}

header h1 {
  color: #fff;
  font-weight: 300;
  font-size: 44px;
}

header a {
  color: #fff;
  text-decoration: none;
  font-size: 22px;
}

Strona jest już prawie gotowa. Dodajmy teraz coś, bez czego nie obędzie się żadna strona. Dodajmy nawigację.

Nawigacja

Nawigacja wymaga większej ilości reguł niż poprzednie elementy. Po pierwsze ustawiamy rozmiary elementu nav. Następnie dodajemy style dla linków w menu.

nav {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #16a085;
  position: fixed;
}

nav div {
  max-width: 1200px;
  width: 80%;
  margin: 0 auto;
}

nav ul li {
  display: inline-block;
}

nav a {
  color: #ffffff;
  margin: 0 25px;
  font-size: 18px;
  text-decoration: none;
  display: block;
  opacity: .8;
}

nav a:hover {
  color: #ffffff;
  opacity: 1;
}

nav li:last-of-type a {
  margin-right: 0;
}

nav li:first-of-type a {
  margin-left: 0;
}

I to wszystko. Pozostała juz tylko jedna rzecz...