Artykuł przygotował: Jakub - opiekun kursów HTML/CSS 31.08.2021

Jest takie standardowe pytanie, które na każdym kroku się przewija: chcę zacząć tworzyć strony ale nie wiem jak. Nie wiem co muszę umieć i czego mam się nauczyć. Mam nadzieję, że ten artykuł choć trochę rozjaśni temat i pokaże ci właściwy kierunek.

Dwie kluczowe warstwy

U podstaw każda strona składa się z dwóch kluczowych warstw: struktury oraz wyglądu. Za pierwszą warstwę odpowiada język HTML a za drugą język CSS.

• HTML odpowiada za treść strony
• CSS określa jak ta treść będzie wyglądała

HTML u podstaw

HTML działa na prostej zasadzie. Używa on tzw. znaczników do budowania treści strony. Popatrz na przykład:

<h1>Nagłówek</h1>

Ten powyższy kod zostanie przez przeglądarkę zinterpretowany jako nagłówek. Będzie on wyglądał mniej więcej tak:

Jak widzisz nie ma tu nic skomplikowanego. To kwestia opanowania podstawowych znaczników i użycia ich potem do budowania właściwych elementów na stronie.

Co trzeba umieć jeśli chodzi o HTML

Na początek wystarczy opanowanie najważniejszych, najczęściej używanych znaczników.

• Znaczniki tekstowe: nagłówki, akapity, listy;
• Znaczniki obrazków oraz odnośników;
• Znaczniki semantyczne opisujące strukturę takie jak article, header czy section;
• Znaczniki div oraz span;
• Znaczniki tabel oraz formularzy;

Taki podstawowy zestaw da się ogarnąć w krótkim czasie i za jego pomocą można budować niemal wszystko. HTML jest fajny bo nawet podstawowa wiedza pozwoli ci tworzyć własne strony - przynajmniej jeśli chodzi o ich treść oraz strukturę. A tą podstawową wiedzę możesz potem nieustannie wzbogacać.

CSS u podstaw

Oczywiście sama treść to mało. Na pewno chcesz aby twoje strony po prostu ładnie wyglądały. Do tego służy kolejny język czyli CSS. Działa on na prostej zasadzie. Mamy tzw. reguły, które określają wygląd elementów strony:

h1 {
    font-size: 34px;
    color: blue;
}

Ta reguła sprawia, że nagłówek stworzony za pomocą znacznika h1 będzie miał rozmiar tekstu 34 piksele oraz kolor niebieski. Tak to może wyglądać w przeglądarce:

Nagłówek

I tak ta zabawa wygląda. HTML umożliwi ci stworzenie elementu a CSS pozwoli określić jak ten element będzie wyglądał.

Co trzeba umieć jeśli chodzi o CSS

W CSS jest kilka kluczowych obszarów, które na początek trzeba dobrze poznać.

• Użycie najważniejszych selektorów: elementu, klasy;
• Formatowanie elementów tekstowych (rozmiar, kolor, wysokość linii itp);
• Model pudełkowy: określanie rozmiarów, odstępów;
• Pozycjonowanie elementów;
• Jakiś system do układania treści np. flexbox.;
• Style dla odnośników, tabel, formularzy;

Taki zestaw umiejętności pozwoli ci swobodnie i bez problemu zacząć pracę. To się da opanować w krótkim czasie i potem rozwijać bez końca o bardziej zaawansowane techniki np. tworzenie stron responsywnych, animacje itp.

Co dalej?

Zaproponowany przeze mnie zestaw umiejętności jest kluczowy jeśli chcesz zacząć pracę nad własnymi stronami. Oczywiście samo opanowanie języków HTML i CSS to mało. Najlepiej zacząć jak najszybciej pracę nad własnymi stronami. Nie muszą być skomplikowane. Po prostu wymyśl sobie jakiś projekt i spróbuj go zrealizować wykorzystując nowo zdobyte umiejętności. To może być twoja osobista strona, wizytówka realnej albo fikcyjnej firmy, strona prezentującą jakiś produkt - dosłownie cokolwiek. Najważniejsze jest to aby spróbować w praktyce wykorzystać to co umiesz bo tylko wtedy można mówić o zdobywaniu realnych, przydatnych umiejętności. Powodzenia!

Jakub - opiekun kursów HTML/CSS