Świeże treści
Artykuły i materiały o podstawach HTML, CSS i JavaScript. Pisane z myślą o dorosłych, którzy zaczynają od zera.
Czym różni się element od tagu w HTML?
Kiedy zaczynasz pisać HTML, te dwa słowa pojawiają się naprzemiennie. Rozróżnienie między nimi pomaga rozumieć kod, który czytasz i piszesz.
Tag to znacznik - na przykład <p> otwierający i </p> zamykający. Element to całość: tag otwierający, treść i tag zamykający razem. Kiedy mówisz "element akapitu", masz na myśli całą tę strukturę. To niuans, ale ważny dla rozumienia dokumentacji i komunikacji z innymi programistami.
Flexbox - kiedy i jak go używać?
Flexbox zmienił sposób, w jaki projektuje się układy stron. Dla początkujących to jeden z pierwszych momentów, kiedy CSS przestaje być zagadką.
Zanim Flexbox stał się standardem, układanie elementów obok siebie wymagało trików z float i clearfix. Dziś wystarczy napisać display: flex na kontenerze i elementy ustawiają się automatycznie. Można je wyrównywać, rozciągać, zawijać do nowych wierszy. Jeden atrybut otwiera całą nową warstwę kontroli nad układem.
Zmienne, wartości i typy danych - od początku
Zanim napiszesz swoją pierwszą funkcję, warto zrozumieć, jak JavaScript przechowuje informacje.
Zmienna to jak szuflada z etykietą. Możesz w niej przechować numer, tekst, wartość prawda/fałsz albo bardziej skomplikowane struktury. W nowoczesnym JavaScript używamy let i const. const dla wartości, które się nie zmienią, let dla tych, które mogą. To proste rozróżnienie, ale pozwala pisać czytelniejszy kod.
Jaki edytor kodu wybrać na start?
Kiedy zaczynasz naukę kodowania, stoisz przed pierwszym wyborem: w czym pisać kod? Notatnik nie wystarczy, ale nie potrzebujesz też profesjonalnego środowiska programistycznego z dziesiątkami wtyczek.
Visual Studio Code to edytor, który polecamy na start. Jest bezpłatny, dostępny na Windows, Mac i Linux. Podświetla składnię kodu różnymi kolorami, co bardzo ułatwia czytanie. Podpowiada nazwy tagów i właściwości CSS. Pokazuje błędy. Można go rozszerzyć wtyczkami, ale w podstawowej formie jest wystarczający do przejścia przez cały program Muvdexalrek.
Drugie popularne narzędzie to Brackets lub Notepad++. Ale VS Code ma aktywną społeczność i mnóstwo materiałów po polsku.
HTML semantyczny - po co i dlaczego to ważne?
Możesz zbudować stronę używając wyłącznie tagów <div>. Technicznie zadziała. Ale HTML semantyczny to coś innego.
Znaczniki takie jak <header>, <nav>, <main>, <article>, <footer> mówią przeglądarce i wyszukiwarkom, co pełni jaką rolę na stronie. Dla wyszukiwarek to informacja, jak indeksować treść. Dla czytników ekranowych, z których korzystają osoby niewidome, to sposób na nawigację po stronie. Dla programisty czytającego kod - to czytelna mapa struktury.
Kiedy uczysz się HTML, warto od razu budować nawyk myślenia semantycznego. Pytaj siebie: "Czy ten element to nagłówek? Lista? Artykuł?" - a potem używaj odpowiedniego tagu.
Box Model: każdy element to pudełko
Jedną z pierwszych rzeczy, które odkrywasz w CSS, jest to, że każdy element na stronie zajmuje prostokątną przestrzeń. Tę przestrzeń opisuje Box Model.
Składa się z czterech warstw: treść (content), dopełnienie (padding), ramka (border) i margines (margin). Kiedy chcesz zwiększyć odległość między elementem a jego ramką, dodajesz padding. Kiedy chcesz odsunąć element od sąsiadów, dodajesz margin. Różnica może się wydawać subtelna, ale ma duże znaczenie przy projektowaniu układu.
Narzędzia deweloperskie w przeglądarce (F12) wizualizują Box Model dla każdego elementu. Sprawdź to dla dowolnej strony - to jeden z najlepszych sposobów na naukę CSS przez obserwację.