Nauka HTML
Nauka HTML — Kurs HTML z edytorem z podglądem na żywo w kieszeni
Nauka HTML to kurs HTML na iPhone i Android, który zapewnia dostęp do edytora HTML z podglądem na żywo jednym stuknięciem z każdej lekcji. Wpisz tag, zobacz renderowanie strony, a następnie przejdź od pierwszego nagłówka do formularzy, tabel, semantycznego HTML5, ułatwień dostępu i komponentów internetowych w ramach 40 krótkich kursów.
- Cena
- Bezpłatna, uaktualnienie do Pro
- Platformy
- iOS i Android
- Języki
- 22
- Klasyfikacja wiekowa
- 4+
- Wymaga
- iOS 15.1 lub nowszy
- App Store
- 3.0 ★ (1)
Tag nabiera znaczenia, gdy zobaczysz, jak coś rysuje.
HTML to język znaczników, więc najszybszym sposobem na zrozumienie nowego elementu jest wpisanie go i sprawdzenie rezultatu. Każda lekcja w tej aplikacji kończy się już otwartym edytorem, z podglądem obok znaczników, a pliki CSS lub JavaScript dodajesz dopiero wtedy, gdy jesteś na nie gotowy.
Co to jest
Nauka HTML to dostępny bezpłatnie na start kurs HTML na iOS i Android, który uczy znaczników stron internetowych w ramach 40 kursów i 159 krótkich lekcji, ułożonych od poziomu początkującego (A1) do zaawansowanego (C1). Każdy temat łączy z wbudowanym edytorem kodu HTML i natychmiastowym podglądem, 20 projektami z instrukcjami, takimi jak formularz kontaktowy i dostępna tabela cen, 20 misjami debugowania oraz mentorem AI, dzięki czemu osoba zaczynająca od zera może przejść od pustego dokumentu do semantycznych, dostępnych i dobrze uporządkowanych stron.
W aplikacji
Jak to wygląda
Kurs
Co obejmuje kurs HTML
40 kursów i 159 lekcji z własnej listy kursów aplikacji, ułożonych w kolejności, w jakiej ścieżka je przedstawia.
Struktura dokumentu, tekst, linki, obrazy i listy
Szkielet każdej strony: struktura dokumentu, nagłówki i akapity, linki i nawigacja, obrazy i ilustracje oraz listy uporządkowane i nieuporządkowane.
Tabele, atrybuty i atrybuty globalne
Układanie danych w tabelach, a następnie atrybuty dostosowujące element, w tym atrybuty globalne działające z każdym tagiem.
Formularze: podstawy, zaawansowane kontrolki i walidacja
Najpierw podstawowe pola, potem bardziej rozbudowane kontrolki, a na końcu atrybuty walidacji, dzięki którym przeglądarka może sprawdzić pole przed jego wysłaniem.
Semantyczny HTML5, sekcja head i metadane, audio i wideo
Elementy semantyczne, sekcja head dokumentu i jej metadane oraz elementy audio i wideo.
Dostępność, role ARIA i zaawansowane wzorce ARIA
Podstawy dostępności, role i atrybuty ARIA oraz zaawansowane wzorce używane w niestandardowych widżetach.
Atrybuty danych, szablony, Canvas, SVG i ramki iframe
Niestandardowe atrybuty danych, szablony HTML, element canvas, SVG wewnątrz HTML oraz osadzona zawartość w ramkach iframe.
Web Storage, przeciąganie i upuszczanie, SEO i szablony wiadomości e-mail
Web Storage i API przeciągania i upuszczania, SEO i metatagi społecznościowe oraz szczególne zasady dotyczące szablonów wiadomości e-mail HTML.
Web Components, wydajność i HTML na dużą skalę
Niestandardowe elementy, shadow DOM, mapy importu i progressive enhancement, a także wydajność, bezpieczeństwo, PWA i testowanie — aż po HTML na dużą skalę.
Jak to działa
Jak uczysz się tagu — od czytania do renderowania
Lekcja jest krótka, a edytor znajduje się obok niej, więc przeczytanie o danym zagadnieniu i wypróbowanie go odbywają się podczas tej samej sesji.
Przeczytaj jedną krótką lekcję
Kontynuuj ścieżkę nauki od miejsca, w którym skończyłeś. Każda lekcja obejmuje jeden pomysł, na przykład listę nieuporządkowaną lub obraz z tekstem alternatywnym, i zajmuje kilka minut.
Wpisz kod w edytorze i obserwuj podgląd
Otwórz edytor i napisz znaczniki. Podgląd ponownie renderuje stronę, a karty CSS i JavaScript są dostępne, gdy chcesz nadać stronie styl lub sprawić, by reagowała na działania użytkownika.
Sprawdź, popraw i twórz
Każdy temat kończy się quizem i wyzwaniem z kodowania. Gdy tag lub błąd jest niejasny, mentor AI wyjaśnia jego działanie, misja debugowania przekazuje Ci uszkodzoną stronę do naprawy, a projekt z instrukcjami pozwala zbudować coś, co możesz pokazać innym.
Co zawiera
Co znajdziesz w Learn HTML
40
Kursy od A1 do C1
159 lekcji prowadzi od struktury dokumentu, tekstu, linków, obrazów i list przez tabele, formularze i semantyczny HTML5 aż po ułatwienia dostępu, komponenty internetowe, bezpieczeństwo oraz History and Navigation API.
Na żywo
Edytor HTML z podglądem
Pisz znaczniki i obserwuj aktualizowaną stronę. Możesz dodać pliki CSS i JavaScript do tego samego projektu, dzięki czemu zwykły dokument zmieni się w małą, działającą stronę internetową.
20
Projekty z instrukcjami
Projekty tworzone krok po kroku, w tym strona z przepisami, formularz kontaktowy, galeria zdjęć, pasek nawigacji i dostępna tabela cen.
20
Misje debugowania
Prawdziwe usterki do wykrycia: formularz rejestracji, który niczego nie wysyła, etykieta, której nie da się dotknąć, oraz strona, która na telefonie ładuje się w pomniejszeniu.
80
Ściąga tagów
Lista 80 tagów, elementów i atrybutów HTML do wyszukania w chwili, gdy wiesz, czego chcesz użyć, ale nie wiesz, jak się to nazywa.
50
Pytania rekrutacyjne
Pięćdziesiąt pytań rekrutacyjnych dla web developerów z jasnymi odpowiedziami, a także biblioteka kodu z krótkimi przykładami, które możesz otwierać i edytować, oraz miejsce na zapisywanie własnego kodu i notatek.
Informacje
Czym jest HTML i czy można nauczyć się go, wpisując kod na telefonie?
HTML (HyperText Markup Language) to język opisujący strukturę strony internetowej: który tekst jest nagłówkiem, który akapitem, dokąd prowadzi link i o co pyta formularz. Nie jest językiem programowania, więc nie trzeba mierzyć się z pętlami ani zmiennymi, dlatego zwykle stanowi pierwszy krok w nauce tworzenia stron internetowych. Ponieważ rezultat jest widoczny natychmiast po napisaniu kodu, HTML dobrze sprawdza się podczas krótkich sesji na telefonie: tag jest wystarczająco krótki, by wpisać go kciukiem, a podgląd od razu pokazuje, czy wszystko działa.
Elementy, tagi i atrybutytrzy słowa obecne w każdej lekcji
Element to fragment treści o określonym znaczeniu, zapisany między tagiem otwierającym a zamykającym, na przykład akapit lub element listy. Atrybuty znajdują się w tagu otwierającym i modyfikują jego działanie, na przykład określają adres, na który prowadzi link, lub tekst opisujący obraz. Niemal każdy błąd początkującego to brak tagu zamykającego albo nieprawidłowo umieszczony atrybut.
Semantyczny HTMLnagłówki, nawigacja, treść główna i stopka
Elementy semantyczne określają, czym jest dany blok strony, zamiast opisywać jego wygląd. Pasek nawigacji, artykuł i stopka mają własne elementy, co pomaga czytnikom ekranu, wyszukiwarkom oraz każdej osobie, która później będzie edytować stronę. To nawyk, który odróżnia uporządkowaną stronę od stosu ogólnych kontenerów.
HTML, CSS i JavaScriptco za co odpowiada
HTML przechowuje strukturę i treść, CSS określa wygląd tej treści, a JavaScript dodaje zachowanie, na przykład reakcję na kliknięcie. Nauka HTML w pierwszej kolejności daje pozostałym dwóm technologiom coś, do czego mogą się odwołać. Edytor w aplikacji udostępnia osobne karty HTML, CSS i JavaScript, dzięki czemu od początku możesz rozdzielić te trzy zadania.
Formularze i ułatwienia dostępumiejsce, w którym proste strony zaczynają być poważne
Formularze służą stronie do zadawania odwiedzającemu dowolnych pytań i to właśnie w nich zaczyna się większość problemów z dostępnością: etykieta, której nie da się dotknąć, albo pole, którego czytnik ekranu nie potrafi nazwać. Etykiety, atrybuty walidacji i role ARIA to niewielkie fragmenty znaczników, które decydują o tym, czy strona działa dla wszystkich.
Dopasowanie
Dla kogo jest — i dla kogo nie jest
To dobry wybór, jeśli
- Piszesz swoją pierwszą stronę internetową i chcesz, aby każdy tag został wyjaśniony, zanim go użyjesz
- Uczysz się najlepiej, gdy możesz od razu zobaczyć rezultat każdej linii
- Prowadzisz bloga, stronę sklepu lub portfolio i chcesz edytować kod znaczników, który się za nimi kryje
- Planujesz przejść do CSS, JavaScript lub pracy front-endowej i najpierw chcesz zdobyć solidne podstawy
- Przygotowujesz się do rozmowy kwalifikacyjnej na stanowisko web developera i chcesz przećwiczyć pytania
To nie jest odpowiednie narzędzie, jeśli
- Potrzebujesz pełnego środowiska pracy na komputerze z plikami, folderami i lokalnym serwerem
- Oczekujesz, że każdy kurs będzie bezpłatny; pierwszy kurs, pierwszy projekt z przewodnikiem i dwie misje są bezpłatne, a Pro odblokowuje resztę
- Na co dzień tworzysz produkcyjny kod HTML i szukasz raczej podręcznego kompendium niż kursu
- Chcesz nauczyć się obsługi narzędzia do projektowania; ta aplikacja dotyczy znaczników i kodu stojącego za stronami
Pytania
Najczęściej zadawane pytania
Czym jest Nauka HTML?
Nauka HTML to aplikacja na iPhone i Android, która uczy HTML — od pierwszego tagu po zaawansowane zagadnienia. Łączy 40 krótkich kursów z wbudowanym edytorem HTML i podglądem na żywo, 20 projektami z przewodnikiem, 20 misjami debugowania i mentorem AI. Możesz zacząć bezpłatnie, a aplikacja jest dostępna w 22 językach.
Czy naprawdę mogę pisać i wyświetlać podgląd HTML na telefonie?
Tak. Edytor w Nauka HTML ma karty HTML, CSS i JavaScript, a podgląd pokazuje stronę wygenerowaną przez Twój kod. Telefon dobrze sprawdza się podczas skoncentrowanej nauki, której wymaga HTML, ponieważ tagi są krótkie. Większy ekran przydaje się dopiero wtedy, gdy jednocześnie pracujesz z wieloma plikami.
Czy przed rozpoczęciem potrzebuję doświadczenia w programowaniu?
Nie. Ścieżka zaczyna się od wyjaśnienia, jak zbudowany jest dokument HTML, a każde pojęcie jest opisane prostym językiem, zanim zostanie użyte. HTML nie wymaga wcześniejszej nauki pętli ani zmiennych, dlatego Nauka HTML traktuje osobę zupełnie początkującą jako standardowy przypadek, a nie wyjątek.
Jaka jest różnica między HTML a CSS?
HTML określa, co znajduje się na stronie i jakie znaczenie ma każda część, na przykład czy jest nagłówkiem, linkiem lub polem formularza. CSS określa wygląd, w tym kolory, odstępy i układ. Aplikacja najpierw uczy HTML i pozwala dodawać pliki CSS w edytorze, dzięki czemu możesz zobaczyć, jak oba języki współpracują, bez mieszania ich zadań.
Ile czasu zajmuje nauka podstaw HTML?
Większość osób potrafi napisać prostą, poprawną stronę po kilku krótkich sesjach, ponieważ podstawowych elementów jest niewiele: nagłówki, akapity, linki, obrazy, listy i podstawowe formularze. Bardziej zaawansowane zagadnienia, takie jak dostępność, struktura semantyczna i web components, wymagają więcej czasu. Lekcje są tu przygotowane tak, aby można było ukończyć je w kilka minut, dzięki czemu codzienna nauka jest realistyczna.
Jakiego rodzaju projekty mogę tworzyć w aplikacji?
20 projektów z przewodnikiem obejmuje stronę z przepisami, formularz kontaktowy, galerię zdjęć, pasek nawigacyjny i dostępną tabelę cen. Każdy projekt powstaje krok po kroku. Są celowo niewielkie, aby można było je ukończyć i zachować kod we własnych zapisanych fragmentach.
Czy Learn HTML obejmuje dostępność i formularze?
Tak, i to szczegółowo. Formularze obejmują trzy kursy: podstawy, zaawansowane kontrolki i atrybuty walidacji. Dostępność ma własne kursy poświęcone podstawom, rolom ARIA i zaawansowanym wzorcom ARIA. Misje debugowania obejmują także problemy takie jak etykieta, której nikt nie może kliknąć, dzięki czemu te zagadnienia są praktyczne, a nie abstrakcyjne.
Czy aplikacja jest bezpłatna i co daje Pro?
Możesz pobrać ją bezpłatnie i od razu zacząć: pierwszy kurs, pierwszy projekt z przewodnikiem, dwie misje i edytor na żywo są dostępne, podobnie jak dzienny limit mentora AI. Pro odblokowuje wszystkie kursy, projekty i misje, egzamin certyfikacyjny oraz nielimitowane pytania do mentora AI, a także usuwa reklamy.
Zacznij
Wpisz swój pierwszy tag i obserwuj, jak się renderuje
Możesz zacząć bezpłatnie na iOS i Android, w 22 językach.
Więcej od CoddyKit
Dostępna na iOS i Android.