ВЕБ-РАЗРАБОТКА НА ПОНЯТНОМ ЯЗЫКЕ
Понимать код.
Создавать своё.
От первого тега до работающей страницы. Учебники, справочники и практика по HTML, CSS и JavaScript — с примерами, которые можно менять.
Нужно быстро вспомнить?
Найдите тег, свойство или метод.
01 / УЧИМСЯ И НАХОДИМ ОТВЕТЫ
У каждой задачи — свой язык.
Изучайте с нуля или открывайте нужную тему в справочнике.
</>СТРУКТУРА
HTML
Теги, ссылки, изображения и формы. Всё, из чего складывается страница.
{ }ОФОРМЛЕНИЕ
CSS
Цвет, типографика и раскладка. Придайте своей идее форму.
JSПОВЕДЕНИЕ
JavaScript
Объекты, массивы и методы. Добавьте странице возможности.
$()БИБЛИОТЕКА
jQuery
Селекторы, события и эффекты. Разберитесь в знакомом коде.
02 / ПЕРВЫЙ САЙТ — ШАГ ЗА ШАГОМ
Не знаете, с чего начать?
Начните с маленькой страницы.
В учебнике HTML создадим сайт Тони: добавим заголовок, фотографию и ссылки. Затем перейдём к CSS и оформлению.
Приступить- 01Разметка
- 02Оформление
- 03Практика
<h1>Привет, я Тони!</h1>
<p>
Это моя первая страница.
</p>РЕЗУЛЬТАТПривет, я Тони!
Это моя первая страница.
}.tan{fill:var(--tony-tan,%23bf783f)}.inner{fill:var(--tony-ear,%23995b3c);stroke:none}.line{stroke:var(--tony-ink,%23191b20);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}%3c/style%3e%3cdefs%3e%3cfilter%20id='border'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%20color-interpolation-filters='sRGB'%3e%3cfeMorphology%20in='SourceAlpha'%20operator='dilate'%20radius='8'%20result='expanded'/%3e%3cfeFlood%20flood-color='%23fff'/%3e%3cfeComposite%20in2='expanded'%20operator='in'/%3e%3cfeMerge%3e%3cfeMergeNode/%3e%3cfeMergeNode%20in='SourceGraphic'/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3cg%20class='line'%20filter='url(%23border)'%3e%3cg%20id='body'%3e%3cpath%20class='fur'%20d='M210%20267%20Q179%20296%20163%20354%20Q148%20391%20164%20429%20Q194%20448%20251%20448%20Q318%20451%20348%20427%20Q356%20386%20332%20341%20L298%20268Z'/%3e%3cpath%20fill='%23555157'%20stroke='none'%20d='M217%20280%20Q250%20299%20290%20280%20L307%20339%20Q293%20371%20255%20371%20Q221%20367%20205%20340Z'/%3e%3cpath%20class='tan'%20stroke='none'%20d='M184%20347%20Q214%20364%20242%20357%20L249%20381%20Q205%20391%20181%20368Z%20M263%20358%20Q296%20368%20322%20346%20L326%20371%20Q300%20391%20265%20382Z'/%3e%3cpath%20class='tan'%20d='M165%20404%20Q142%20414%20153%20436%20Q169%20449%20210%20439%20L216%20422Z'/%3e%3cpath%20class='tan'%20d='M326%20402%20Q352%20408%20356%20430%20Q347%20447%20306%20439%20L296%20423Z'/%3e%3c/g%3e%3cg%20id='paw-left'%3e%3cpath%20class='fur'%20d='M190%20368%20L194%20432%20Q179%20446%20191%20458%20Q216%20467%20238%20457%20Q249%20449%20233%20432%20L237%20383'/%3e%3cpath%20class='tan'%20d='M194%20412%20L195%20433%20Q180%20448%20193%20457%20Q216%20466%20237%20456%20Q249%20448%20232%20431%20L233%20413'/%3e%3cpath%20fill='none'%20stroke-width='3'%20d='M205%20449%20L205%20460%20M220%20449%20L221%20461'/%3e%3c/g%3e%3cg%20id='paw-right'%3e%3cpath%20class='fur'%20d='M277%20383%20L282%20433%20Q267%20446%20279%20458%20Q304%20467%20326%20457%20Q337%20449%20321%20432%20L320%20366'/%3e%3cpath%20class='tan'%20d='M280%20413%20L283%20433%20Q268%20448%20281%20457%20Q304%20466%20325%20456%20Q337%20448%20320%20431%20L319%20412'/%3e%3cpath%20fill='none'%20stroke-width='3'%20d='M293%20449%20L293%20461%20M307%20449%20L310%20461'/%3e%3c/g%3e%3cg%20id='head'%3e%3cg%20id='ears'%3e%3cpath%20class='fur'%20d='M185%20177%20Q166%20119%20175%2045%20Q203%2077%20211%20161Z%20M291%20160%20Q300%2090%20329%2039%20Q339%20115%20320%20179Z'/%3e%3cpath%20class='inner'%20d='M187%20145%20Q179%20112%20181%2072%20Q195%20101%20199%20151Z%20M305%20149%20Q312%20102%20323%2069%20Q328%20115%20317%20152Z'/%3e%3c/g%3e%3cpath%20class='fur'%20d='M179%20188%20Q181%20154%20218%20146%20Q252%20137%20288%20148%20Q321%20157%20326%20191%20L317%20237%20Q303%20258%20285%20277%20L272%20296%20Q251%20309%20230%20297%20L216%20278%20Q197%20264%20188%20239Z'/%3e%3cpath%20fill='%2341434a'%20stroke='none'%20d='M196%20169%20Q214%20149%20250%20150%20L235%20166Z'/%3e%3cg%20class='tan'%20stroke='none'%3e%3cellipse%20cx='212'%20cy='181'%20rx='10'%20ry='6'/%3e%3cellipse%20cx='291'%20cy='180'%20rx='10'%20ry='6'/%3e%3c/g%3e%3cg%20id='eyes'%3e%3cellipse%20fill='%2378523a'%20cx='210'%20cy='204'%20rx='13'%20ry='16'/%3e%3cellipse%20fill='%2313171c'%20stroke='none'%20cx='211'%20cy='203'%20rx='10'%20ry='14'/%3e%3ccircle%20fill='%23fffaf0'%20stroke='none'%20cx='206'%20cy='198'%20r='4'/%3e%3cellipse%20fill='%2378523a'%20cx='291'%20cy='203'%20rx='13'%20ry='16'/%3e%3cellipse%20fill='%2313171c'%20stroke='none'%20cx='292'%20cy='202'%20rx='10'%20ry='14'/%3e%3ccircle%20fill='%23fffaf0'%20stroke='none'%20cx='287'%20cy='197'%20r='4'/%3e%3c/g%3e%3cg%20id='muzzle'%3e%3cpath%20class='tan'%20d='M222%20231%20Q211%20246%20213%20270%20L221%20292%20Q250%20311%20279%20291%20Q291%20279%20288%20257%20L277%20232%20Q265%20243%20251%20242Z'%20stroke='none'/%3e%3cpath%20fill='%2334363b'%20stroke='none'%20d='M237%20211%20Q250%20205%20263%20211%20L274%20261%20Q249%20275%20226%20261Z'/%3e%3cpath%20fill='%2317191e'%20d='M229%20261%20Q251%20251%20273%20261%20L269%20277%20Q253%20290%20235%20277Z'/%3e%3cpath%20fill='none'%20stroke='%2368676b'%20stroke-width='3'%20d='M238%20262%20Q250%20259%20260%20262'/%3e%3cg%20id='expression-mouth'%3e%3cpath%20fill='%2317191e'%20stroke-width='3'%20d='M232%20287%20Q252%20294%20273%20286%20Q270%20308%20252%20309%20Q237%20307%20232%20287Z'/%3e%3cpath%20fill='%23d88b86'%20stroke='none'%20d='M243%20300%20Q253%20295%20263%20300%20L262%20308%20Q253%20316%20245%20309Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
03 / ОТ ИДЕИ К КОДУ