HTML Code Play: Learn HTML

Naucz się tworzenia stron internetowych, zmieniając kod i obserwując jego działanie. HTML Code Play łączy lekcje HTML, CSS i JavaScript z mobilnym edytorem kodu, przykładami do uruchomienia, quizami i grami programistycznymi. Użyj go do nauki koncepcji, wypróbuj ją samodzielnie i śledź swoją naukę na tym samym urządzeniu.

CZYTAJ, EDYTUJ I URUCHOM

Przejrzyj katalog materiałów szkoleniowych, otwórz samouczek i przeczytaj jego wyjaśnienie wraz z pełnym przykładem kodu. Wyślij przykład do edytora, uruchom oryginał, a następnie zmień tag, styl lub wyrażenie i porównaj wynik. Ten praktyczny przepływ pracy łączy odczytaną składnię ze stroną lub tworzonym przez nią zachowaniem.

Obszar roboczy obsługuje edycję HTML, CSS i JavaScript z podświetlaniem składni. Używaj funkcji cofania i ponawiania podczas eksperymentowania, znajdowania tekstu, przechodzenia do wiersza i dostosowywania rozmiaru czcionki w edytorze. Rozpocznij nową stronę lub wybierz dostępny szablon, aby rozpocząć. Otwórz pliki HTML, zapisz swoją pracę, użyj opcji Zapisz jako, aby utworzyć kolejną kopię lub udostępnij plik z kodem za pomocą opcji udostępniania na swoim urządzeniu.

NAUKA I PRAKTYKA POD KIEROWANYM NAUCZANIEM

Katalog obejmuje 11 tematów z zakresu technologii internetowych, od struktury i stylizacji stron, przez skrypty, grafikę wektorową, po responsywne układy i interaktywne przykłady. Wyszukaj lekcje według tytułu lub sekcji, aby znaleźć potrzebny materiał. Przypinaj przydatne samouczki do szczegółowego przeglądu, dodawaj własne notatki z lekcji i przełączaj się między samouczkami za pomocą przycisków Poprzedni i Następny.

Każdy samouczek zawiera wyjaśnienia, składnię i działający przykład. Uzupełnij quiz tematyczny lub zadanie praktyczne. Ćwiczenia praktyczne wymagają uzupełnienia brakującego kodu, a wskazówki i odpowiedzi pomogą Ci wniknąć w pominięte szczegóły. Wyniki quizu pozwalają sprawdzić zrozumienie przed powrotem do lekcji.

SZEŚĆ SPOSOBÓW NA ĆWICZENIE

Wybierz grę programistyczną, aby popracować nad inną umiejętnością:

- Kreator kodu: zmień kolejność bloków, aby odbudować działający kod.

- Detektyw wyjścia: przewiduj, co generuje fragment kodu.

- Polowanie na błędy: zidentyfikuj błędną linię.

- Uzupełnij lukę: wybierz brakujący token kodu.

- Match Lab: łącz terminy z ich znaczeniami.

- Rapid Fire: odpowiadaj na pytania prawda/fałsz z timerem.

Poziomy aktywności rejestrują wyniki i odblokowują kolejny krok. Powtarzaj dostępne poziomy, aby poprawić swój wynik, lub korzystaj z playlist z ćwiczeniami mieszanymi, gdy tylko będą dostępne.

ZORGANIZUJ SWOJĄ NAUKĘ

Ekran postępu podsumowuje przejrzane lekcje, quizy i ćwiczenia według technologii. Sprawdź swoją mapę umiejętności i sugerowany kolejny plan nauki, kontynuuj lekcję z ekranu głównego i podejmij codzienne wyzwanie. Serie i odznaki za wyzwania sprawiają, że Twoja aktywność jest widoczna. Opcjonalne przypomnienia o nauce wymagają zgody na powiadomienia i można je wyłączyć.

Postępy w lekcjach, notatki i wyniki gry są przechowywane na urządzeniu. Elementy sterowania na ekranie nauki obejmują większe czcionki, wysoki kontrast i redukcję ruchu. Oddzielne oceny HTML, CSS i JavaScript oferują certyfikaty osiągnięć w aplikacji; są to zapisy nauki w aplikacji, a nie akredytowane kwalifikacje.

Posty w społeczności online oferują dodatkowe źródło kodu do eksploracji po połączeniu. Treści obsługiwane przez sieć i przykłady, które ładują zasoby zewnętrzne, wymagają dostępu do internetu; Lokalne przechowywanie postępów nie zapewnia synchronizacji w chmurze.

Początkujący, studenci i osoby uczące się, które powracają do koncepcji front-endu, powinni zacząć od jednego przykładu, wprowadzić niewielką zmianę i budować zrozumienie poprzez praktykę.