Strona internetowa w 3 minuty

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.

Czcionka

Domyślna czcionka Times New Roman jest czcionką szeryfową i będzie słabo wyglądać na większości stron. Prosta zmiana czcionki na czcionkę bezszeryfową taką jak Lato znacznie poprawi wygląd strony. Więcej czcionek 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: #38e4c2;
}

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.