В этом уроке вы научитесь рисовать и анимировать графику с помощью <canvas> и JavaScript. Мы настроим холст в DOM, получим его контекст 2D-рендеринга и отобразим фигуры, текст и изображения. Вы попрактикуетесь в создании контуров (moveTo, lineTo, arc), заливки и обводки, цвета и градиенты, соединения линий и рисование текста. Мы рассмотрим рисование изображений/спрайтов, управление соотношением пикселей устройства для чёткого рендеринга, а также очистку/перерисовку каждого кадра с помощью requestAnimationFrame для плавной анимации. Вы также увидите базовую интерактивность с помощью мыши/сенсорных событий и научитесь сохранять/экспортировать рисунки через toDataURLК концу вы будете знать основной рабочий процесс Canvas: инициализацию, отрисовку, обновление и анимацию.
Урок 1
Этот курс — ваш первый шаг в веб-разработке. Мы познакомим вас с основными строительными блоками каждой веб-страницы: HTML-тегами и тем, как они структурируют контент. Вы научитесь форматировать текст, добавляя заголовки и абзацы, создавать списки и таблицы для организации контента, а также добавлять изображения для визуального эффекта. Мы также рассмотрим формы, обеспечивающие интерактивность, и расскажем о роли HTML5 в современном веб-дизайне. По мере продвижения вы увидите, как HTML взаимодействует с CSS и JavaScript, оживляя веб-сайты, включая такие функции, как HTML5 Canvas. К концу этого урока у вас будет прочная основа для продолжения обучения по всему курсу веб-разработки.
0/2
Урок 2
На этом занятии мы рассмотрим набор HTML-элементов, которые делают веб-страницы интерактивными и динамичными. Вы научитесь создавать формы, позволяющие пользователям вводить и отправлять данные, а также текстовые области для более крупных блоков ввода. Мы также рассмотрим необычный, но исторический тег marquee и выясним, почему он редко используется в современной веб-разработке. Затем мы рассмотрим, как расширить функциональность с помощью тега script и почему тег noscript важен для посетителей, чьи браузеры блокируют или не поддерживают JavaScript. Наконец, мы вернёмся к элементу title в — небольшая, но важная деталь для каждой страницы. Эти концепции стирают разрыв между статическим HTML и интерактивным миром JavaScript, HTML5 Canvas и современными методами веб-разработки.
0/2
Урок 3
В этом уроке мы расширим наш инструментарий, добавив различные теги HTML и HTML5, которые придают веб-страницам смысл, структуру и медиаэффект. Вы узнаете, как выделяет определение и почему предпочтительнее использовать , чем для важного текста. Мы попрактикуемся в основах верстки с
, и узнаем, как ,
, and также как наглядно отображать код и примеры вывода. Затем мы переходим к ссылкам и мультимедиа: для навигации, для внешних ресурсов, а также элементыэлементами и
0/2
Урок 4
В этом уроке мы рассмотрим дополнительные теги HTML5, которые делают формы, макеты и структурированный контент более эффективными и удобными для пользователя. Вы увидите, как позволяет пользователям загружать файлы, и как и Показывать визуальные индикаторы, такие как выполнение задачи или измеряемые значения. Мы также будем работать с , который предлагает пользователям варианты выбора при заполнении формы. В рамках структуры документа мы изучим семантические элементы , , и
0/2
Урок 5
В этом уроке вы научитесь рисовать и анимировать графику с помощью элемента <canvas> и JavaScript. Мы настроим холст в DOM, получим его контекст 2D-рендеринга и будем визуализировать фигуры, текст и изображения. Вы попрактикуетесь в работе с контурами (moveTo, lineTo, arc), заливками и обводками, цветами и градиентами, соединениями линий и отрисовкой текста. Мы рассмотрим рисование изображений/спрайтов, управление соотношением пикселей устройства для чёткого рендеринга и очистку/перерисовку каждого кадра с помощью requestAnimationFrame для плавной анимации. Вы также познакомитесь с основными функциями взаимодействия с событиями мыши/сенсорного ввода и научитесь сохранять/экспортировать рисунки через toDataURL. К концу урока вы будете знать основной рабочий процесс холста: инициализацию, отрисовку, обновление и анимацию.
0/2
Урок 6
SVG (масштабируемая векторная графика). SVG — это векторная графика на основе XML, которую вы размещаете на странице с помощью тега <svg>. Он масштабируется чётко при любом размере, доступен/семантичен, а отдельные фигуры (например, <rect>, <circle>, <path>, <text>) — это элементы DOM, которые можно стилизовать с помощью CSS и изменять с помощью JavaScript. Ключевые атрибуты включают viewBox, ширину, высоту, заливку, обводку, ширину обводки. SVG отлично подходит для значков, диаграмм, логотипов и интерактивных диаграмм. Сущности (отображающие зарезервированные символы). Чтобы отобразить символы, которые обычно интерпретирует HTML, используйте сущности: < → < , > → > , & → & , " → " , ' → ' , → неразрывный пробел. Работают как именованные, так и числовые сущности (например, ©). (устарело). <center> устарел. Центрирование с помощью CSS: текст с text-align: center;, блоки с margin: 0 auto; или современная вёрстка (Flex/Grid). Перетаскивание HTML5. Включается установкой draggable="true" для элемента и прослушиванием события dragstart. Разрешается перетаскивание, отключение значения по умолчанию в dragover. Используйте API DataTransfer внутри событий для setData во время dragstart и getData в drop. Типичные события: dragstart, dragover, drop, а также dragenter, dragleave, dragend.
0/2
Урок 7
Хранилище пар «ключ-значение» (только строки) ограничено источником страницы и сохраняется при перезагрузке и перезапуске. Основные методы: setItem(key, value), getItem(key), removeItem(key), clear(), key(index) и свойство length. Храните объекты с помощью JSON.stringify / JSON.parse. Квоты обычно составляют несколько МБ на источник. Оно синхронное (блокирует основной поток), защищено от того же источника, и изменения вызывают событие хранения на других вкладках того же источника (не той вкладки, которая внесла изменение). Используйте sessionStorage для хранения на одной вкладке. Избегайте хранения секретных данных; данные доступны для чтения любым скриптом в том же источнике и могут синхронизироваться в некоторых браузерах. Приватный просмотр может снизить квоты или очистить данные при выходе.
0/2
English 
Français 
Русский 
العربية 