$ sandbox --open
Piaskownica HTML i CSS na żywo
Wybierz gotowy przykład albo zacznij od zera. Kod HTML i CSS uruchamia się w izolowanej ramce, więc możesz eksperymentować bez obaw – nic nie zepsujesz.
$ sandbox --live
Edytor z podglądem
gotowe
Jak działa piaskownica
Po lewej stronie znajdziesz dwa pola: jedno na HTML, drugie na CSS. Każda zmiana odświeża podgląd po krótkiej chwili. Przyciskiem z ikoną telefonu zwęzisz podgląd do 375 pikseli i sprawdzisz, jak Twój układ wygląda na małym ekranie.
Podgląd działa w ramce z atrybutem sandbox, dlatego skrypty są w niej zablokowane, a kod nie ma dostępu do tej strony ani Twoich danych. To celowe: piaskownica służy do nauki struktury i stylów. JavaScript najlepiej ćwiczyć w konsoli przeglądarki, o czym piszemy w przewodniku o pierwszych krokach w JavaScripcie.
Przycisk „Resetuj” przywraca wybrany przykład do stanu początkowego. Twój kod nie jest nigdzie wysyłany – jeśli chcesz go zachować, skopiuj go do własnego pliku.
Pięć ćwiczeń na rozgrzewkę
- W przykładzie „Karta” zmień kolor akcentu i zaokrąglenie rogów.
- W „Flexbox” przestaw menu tak, żeby linki były wyśrodkowane.
- W „Grid” zmień minimalną szerokość kafelka z 120 na 180 pikseli i przełącz podgląd na telefon.
- Dodaj do „Przycisku” styl dla stanu
:focus-visible. - Zbuduj od zera kartę z nagłówkiem, akapitem i linkiem, korzystając z przewodnika po HTML.