Москва
Москва
С нуля до первого проекта. Этот курс научит тебя создавать современные и интерактивные сайты. Ты освоишь ключевые технологии фронтенд-разработки: HTML для разметки, CSS для стилей и JavaScript для оживления страниц. В конце обучения ты самостоятельно разработаешь и разместишь в интернете свой полноценный проект — настоящее портфолио для старта в IT.
1
Введение
2
Первые шаги в JavaScript
3
Знакомство с HTML и CSS
4
Функции и объекты в JavaScript
5
Взаимодействие с DOM и события
6
Финальный проект
7
Завершение курса
На уроке ты познакомишься с КодерЛаб — школой, где можно создавать игры, сайты и цифровые проекты. Ты узнаешь о направлениях обучения и о том, как здесь превращают идеи в работающие проекты. Урок помогает почувствовать вдохновение и подготовиться к следующему занятию, где ты начнёшь делать свою первую игру.
На уроке ты узнаешь, план самого курса для веб разработки. Какие технологии используются и дальнейшие планы для разработки личных проектов.
На данном уроке мы ознакомимся с несколькими вопросами по поводу веб-разработки. Из чего состоит сайт и Как он работает. Узнает поближе про язык разметки html, про стилизацию css и язык программирования javascript. Запуск сайта с помощью сервера.
Инструменты: консоль браузера и редактор кода. Установка плагина live server, установка vs code. Запуск локального сервера. Использование alert и console.log()
Вывод в консоль (console.log). Понятие переменной. Объявление, инициализация, отличия let от const.
Примитивные типы: string, number, boolean. Базовые операции.
Синтаксис if. Условие как вопрос. Простейшие сравнения (>, <, ===).
Расширение условий. Полное ветвление. Приоритет проверок.
Разбор логических операция И | ИЛИ | НЕ.
Анатомия цикла: инициализация, условие, шаг. Механика работы на примере.
Решение комбинированных задач: поиск чётных чисел, сумма элементов, фильтрация.
Синтаксис while. Отличия от for. Использование, когда число итераций неизвестно.
Создание полноценной консольной игры с использованием всех изученных концепций.
Базовые теги: <html>, <head>, <body>, <title>. Иерархия "родитель-потомок".
Семантические текстовые теги: <h1>-<h6>, <p>, <ul>, <ol>, <li>. Их важность для SEO и доступности.
Тег <a> (атрибуты href, target, title). Тег <img> (атрибуты src, alt, width/height).
Понятие потоков документа. Блочные (<div>, <p>) vs строчные (<span>, <a>) элементы. Их поведение.
Что такое CSS? Способы подключения (инлайновый, <style>, внешний файл). Свойства: color, font-size, font-family, margin, padding.
Базовые селекторы: по тегу, по классу (.), по id (#). Специфичность и лучшие практики (использовать классы).
Детальный разбор блока: content, padding, border, margin. Свойство box-sizing.
Свойство position. Особенности каждого значения. Простые примеры сдвига (top, left).
Понятие флекс-контейнера и флекс-элементов. Основные свойства контейнера: display: flex, justify-content, align-items.
Свойства элементов: flex-grow, flex-shrink, order. Управление многострочностью: flex-wrap.
Комплексная практика: семантическая HTML-разметка и стилизация навигационной панели и шапки.
Создание самодостаточного, стилизованного компонента (карточки) с изображением, текстом и кнопкой.
Создание одностраничного сайта-портфолио (визитки) с использованием всего изученного в модуле.
Понятие функции. Объявление (function) и вызов. Принцип DRY (Don't Repeat Yourself).
Передача данных в функцию через параметры. Локальная область видимости параметров.
Ключевое слово return. Отличие вывода в консоль от возврата значения.
Понятие объекта как набора свойств {ключ: значение}. Создание объекта литералом. Доступ через точку.
Понятие объекта как набора свойств {ключ: значение}. Создание объекта литералом. Доступ через точку.
Создание массивов []. Индексация (начинается с 0). Основные свойства и методы: length, push, pop.
Цикл for...of для итерации по массивам. Сравнение с обычным for.
Хранение объектов внутри массива. Пример: каталог товаров, список пользователей.
Основные функции высшего порядка для работы с массивами.Такие как: forEach, map, filter. Их назначение и синтаксис.
Создание функции, которая возвращает объект "список дел" с методами добавления, удаления и отображения.
Создание консольного приложения для управления коллекцией рецептов (объектов в массиве).
Понятие Document Object Model. Связь HTML-разметки и JS-объектов. Инспектор элементов.
Методы для поиска элементов по CSS-селекторам. Разница между одним элементом и коллекцией (NodeList).
Свойства .textContent, .innerHTML. Изменение CSS через .style и .classList.
Понятие события. Основные типы: click, mouseover, mouseout, input, submit.
Современный способ добавления обработчиков. Объект события (event) и его свойства (target).
Работа с элементами форм: ,
Отложенное и периодическое выполнение кода. Остановка таймеров (clearTimeout, clearInterval).
Сохранение данных в браузере пользователя между сессиями. Методы setItem, getItem, removeItem.
Знакомство с базовой реализацией перетаскивания через HTML5 Drag and Drop API. События dragstart, dragover, drop.
Создание популярного UI-компонента: модального окна, открывающегося по кнопке и закрывающегося по клику на крестик или фон.
Создание полноценного мини-приложения: добавление, удаление, отметка выполненных задач с сохранением в localStorage.
Создание стилизованных часов, показывающих текущее время и обновляющихся каждую секунду.
Создание работающего калькулятора с базовыми операциями (+, -, *, /) и интерфейсом на кнопках.
Обсуждение возможных идей (Quiz, Weather Widget, Personal Dashboard, Simple Game). Составление ТЗ: фичи, структура, данные.
Создание HTML-структуры проекта на основе ТЗ. Базовая CSS-стилизация для размещения элементов.
Реализация основной JS-логики, не связанной с DOM (например, работа с данными, вычисления).
Навешивание обработчиков событий, отображение данных в элементах, реакция на действия пользователя.
Анализ кода, улучшение читаемости, разбиение на функции, устранение дублирования, обработка ошибок.
Внедрение дополнительных улучшений: плавные переходы (CSS transitions), более сложная логика, работа с внешним API (по желанию).
Проверка проекта на разных устройствах и в разных браузерах. Поиск и исправление багов. Использование мобильной вёрстки.
Выгрузка проекта на GitHub Pages. Подготовка короткой презентации: что делает проект, как им пользоваться, чем гордимся.
Эмоциональное подведение итогов. Визуальный обзор всего пройденного пути: от первого console.log до финального проекта. Анализ ключевых достижений каждого студента.
Практический гид по дальнейшему развитию. Обзор технологий, ресурсов и конкретных шагов для поиска работы или фриланса.
от идеи до деплоя : Обобщающий урок: как профессионально организовать файлы, использовать Git для контроля версий, и автоматизировать деплой.
"Почему не работает?" — Живой разбор самых частых и обидных ошибок, которые совершают студенты курса: от опечаток до логических несоответствий.
из 4–6 обучающихся
90 минут
Компьютерная графика и веб-дизайн для детей и подростков
Малая IT-Академия
Разработка видеоигр на Unity для детей и подростков
Разработка видеоигр на Unity для детей и подростков
Занятия по программированию для детей и подростков
Занятия по программированию для детей и подростков
Компьютерная графика и веб-дизайн для детей и подростков
Преподаватель программирования и робототехники. Педагог, уситель начальных классов
Преподаватель программирования и робототехники. Программист, специалист по информационным технологиям
Преподаватель по шахматам, КМС по шахматам
Преподаватель, Профессиональный журналист, писатель, блоггер
Преподаватель по шахматам
Руководитель школы, МВА МГИМО
Преподаватель программирования, робототехники, киберспорта и английского языка, педагог.
Москва
Познакомим со школой
Определим уровень знаний
Поставим образовательные цели
Создай свою первую игру в GDevelop!
Персонажи, анимации, платформы, монеты, ловушки и механика Flappy Bird — всё это ты запрограммируешь сам с помощью наглядной системы событий. Курс идеально подходит для старта в геймдеве и развития логического мышления
Работа в среде GDevelop
Создание и настройка 2D-игр
Использование событий и условий
Работа с переменными и счётчиками
Настройка анимаций и столкновений
Создание игровых механик и логики уровней
%D1%8B%D0%B2%D1%8B%D0%B2.png)
Погружение в мир робототехники и программирования с нуля! 7 увлекательных модулей: от создания игр в Scratch до программирования настоящих мобильных роботов в TRIK Studio. Развиваем логику, креативность и инженерное мышление через постоянную практику и крутые проекты.
Превратите любимую игру в инструмент развития.
Курс по программированию в Minecraft учит логике, алгоритмам, геймдизайну и ИИ.
Создавайте умные механизмы, автоматизацию и собственные игровые миры.
• Основы программирования и алгоритмического мышления
• Работа с условиями, циклами и логикой
• Создание игровых механик в Minecraft
• Построение логических схем и автоматических механизмов
• Программирование на Lua (ComputerCraft)
• Основы искусственного интеллекта в играх
• Разработка игровых проектов и автоматизация процессов
2.png)
Геймдизайн — это шанс превратить свои идеи в настоящие игры, которые полюбятся многим. На этом мини-курсе мы будем создавать игры в Roblox Studio — одной из самых популярных и удобных платформ для разработки.
Понимание, что такое геймдизайн. Знакомство с проектами, которые будут созданы в ходе мини-курса. Мотивация для обучения.
.png)
Этот курс идеально подходит как для новичков, так и для тех, кто уже имеет базовые знания в геймдизайне. Не упустите шанс начать свой путь в мире создания игр и заработка на своих проектах прямо сейчас!
.png)
Научитесь создавать 3D-игры с нуля! Курс «Разработка игр на Unity» дает не шаблоны, а понимание: вы разбираетесь в инструментах и уверенно двигаетесь к созданию собственных проектов.
✅ Создание 3D-игр на Unity с нуля
✅ Работа с объектами, сценами, материалами и освещением
✅ Программирование механик на C#
✅ Подключение анимаций, эффектов и интерфейсов
✅ Оптимизация проекта и подготовка к публикации
79032275458
info@koderlab.ru
г Москва,ул. Саларьевская 16, корп. 3
Пн-Пт
10:00-20:00
Сб-Вс
11:00-18:00
%20(1).png)
2.png)
.png)
2.png)
2.png)