Html css online обучение

Курс «Старт в программировании»

Самый простой и надёжный вход в IT с помощью тренажёров и при поддержке от опытных разработчиков.
Изучите основы веб-технологий и попробуйте себя в роли фронтендера. НУЛЕВОЙ УРОВЕНЬ → УРОВЕНЬ ПЕРВОКУРСНИКА Карта обучения Подробнее о курсе

Знакомство с фронтендом

На практике знакомимся с базовыми технологиями веб-разработки и узнаём, как эти технологии работают. Размечаем страницу, оформляем её с помощью стилей. Пишем свой первый скрипт.

Тренажёр обновлён 12 мая 2023

Знакомство с HTML и CSS

Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.

Тренажёр обновлён 12 мая 2023

Мастер-класс. Создание семантической разметки по макету

Узнаем, что такое разметка по макету, подробно разберём алгоритм её создания, посмотрим на процесс создания разметки опытным верстальщиком в пошаговой демонстрации. Начнём работать над личным проектом этого курса — лендингом яхт-клуба «Под парусом».

Мастер-класс обновлён 23 октября 2022

Базовые механики стилизации

Разбираемся с селекторами и каскадностью. Учимся задавать фоновые изображения.

Тренажёр обновлён 12 мая 2023

Мастер-класс. Экспорт графики и параметров из Figmа

Познакомимся с интерфейсом графического редактора Figma, научимся экспортировать из макета графику, а также параметры текста и фонов. Продолжим работу над личным проектом: экспортируем графику, внедрим её в проект и зададим базовые стили страницы.

Мастер-класс обновлён 23 октября 2022

Боксовая модель и позиционирование

Знакомимся с боксовой моделью. Учимся управлять потоком документа. Разбираемся с позиционированием и управляем координатами позиционированных элементов.

Тренажёр обновлён 12 мая 2023

Базовые механики построения сеток

Познакомимся с техниками создания крупных сеток страниц и мелких сеток компонентов. Разберём возможности двух технологий создания раскладок: флексбоксов и гридов.

Тренажёр обновлён 12 мая 2023

Мастер-класс. Создание сеток страниц по макету с помощью флексбоксов

Выделим базовые типы сеток, научимся их комбинировать для создания более сложных сеток страниц. Рассмотрим приёмы для получения «сеточных» размеров из редактора Figma. Выполним третий этап работы над личным проектом: опираясь на макет, построим сетку страницы.

Мастер-класс обновлён 23 октября 2022

Мастер-класс. Вёрстка компонентов интерфейса по макету

Научимся строить сетки компонентов, стилизовать интерфейсные тексты, разберёмся с тонкостями стилизации текстового потока и с особенностями создания мелких декоративных элементов. Доведём компоненты личного проекта до полного соответствия макету.

Мастер-класс обновлён 23 октября 2022

Знакомство с JavaScript

Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы. Будем решать задачи, с которыми регулярно сталкиваются веб-разработчики.

Тренажёр обновлён 12 мая 2023

Мастер-класс. Создание интерактивных компонентов интерфейса

Научимся управлять элементами веб-страницы через JavaScript. Выполним пятый, финальный, этап работы над проектом: c помощью JavaScript мы оживим некоторые элементы интерфейса, опираясь на макет и техническое задание.

Мастер-класс обновлён 23 октября 2022

Курс «Погружение в вёрстку»

Познакомились с азами HTML и CSS? Погрузитесь в тонкости вёрстки. А учиться вам помогут опытные верстальщики.
После прохождения курса вы сможете стажироваться в небольшой веб-студии или брать небольшие заказы по вёрстке на фрилансе.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Продвинутые возможности HTML

Вспомним, какие элементы есть в стандарте HTML и как их правильно использовать. Потренируемся вставлять на страницу аудио, видео и векторные изображения, подключать и использовать нестандартные шрифты, а также познакомимся с крутыми возможностями CSS.

Тренажёр обновлён 12 мая 2023

Погружение в формы

Разберёмся, как работать с формами от простейших возможностей до продвинутых приёмов.

Тренажёр обновлён 12 мая 2023

Погружение в селекторы

Рассмотрим продвинутые селекторы, такие как :nth-last-of-type или :only-child. Также научимся использовать псевдоэлементы, такие как ::before и ::after.

Тренажёр обновлён 12 мая 2023

Погружение в декоративные эффекты

Разбираемся с тенями, линейными градиентами и тонкостями оформления текста. Закрепляем полученные знания в мастерской.

Тренажёр обновлён 12 мая 2023

Погружение в техники раскладок

Погрузимся в основные механизмы создания раскладок: флексбоксы и гриды. Разберём основы и тонкости. Закрепим знания, сверстав несколько раскладок с помощью каждой технологии.

Тренажёр обновлён 12 мая 2023

Работа с таблицами

Узнаем, из каких тегов состоит таблица, как управлять количеством строк и столбцов, как оформлять таблицы и объединять ячейки.

Тренажёр обновлён 12 мая 2023

Курс «Погружение в программирование на JavaScript»

Познакомились с азами JavaScript и написали несколько скриптов? Погрузитесь в программирование для браузера с помощью сильных программистов.
После завершения курса вы сможете стажироваться в небольшой веб-студии или брать заказы по разработке интерактивных компонентов на фрилансе.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Программирование на JavaScript — основы языка

Изучим основные принципы программирования на JavaScript. Познакомимся с переменными, условиями и циклами. Закрепим знания, написав несколько программ: фитнес-калькулятор, драйвер принтера, симулятор дартс-машины.

Тренажёр обновлён 12 мая 2023

Базовые структуры данных

Разберём базовые структуры данных и алгоритмы их обработки. Научимся работать с массивами, функциями и объектами. Напишем программы для расшифровки сообщений, несколько калькуляторов и конструктор компьютера.

Тренажёр обновлён 12 мая 2023

Погружение в браузерный JavaScript

Углубляемся во взаимодействие с пользователями и оживление интерфейсов.

Тренажёр обновлён 12 мая 2023

Практика: фотоприложение с фильтрами

Создадим небольшое приложение с фотофильтрами. Подготовим разметку и стили, необходимые для отрисовки приложения, а затем опишем логику работы на JavaScript.

Тренажёр обновлён 12 мая 2023

Сборник задач по программированию

Попрактикуемся в решении задач по программированию на JavaScript. Мы собрали 51 задачу разного уровня сложности. Каждая задача содержит подробный разбор и автоматические тесты для проверки решения.

Тренажёр обновлён 12 мая 2023

Курс «Введение в React»

Освоили вёрстку веб-страниц и знакомы с JavaScript? Освойте реакт и разработайте свои первые приложения при поддержке опытных реакт-разработчиков.
После завершения курса вы сможете создавать сложные интерактивные компоненты для веб-приложений и выполнять более дорогие заказы.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Основы React: JSX, компоненты, передача данных

Познакомимся с основами React — одной из самых популярных библиотек для разработки пользовательских интерфейсов. Узнаем о синтаксическом расширении JavaScript — JSX, компонентах и передаче данных в компоненты. Создадим первое приложение на React.

Тренажёр обновлён 28 марта 2023

Интерактивные компоненты в React: состояние, события и React Hooks

Узнаем о работе с состоянием компонентов и обработке событий в React. Познакомимся с новым подходом к управлению состоянием — React Hooks. Создадим первые интерактивные компоненты, которые умеют обрабатывать пользовательский ввод.

Тренажёр обновлён 28 марта 2023

Описание бизнес-логики в React

Рассмотрим, как написать бизнес-логику приложения в декларативном стиле. Изучим принципы разделения на компоненты для создания гибкого и масштабируемого приложения. Научимся разделять логику и отображение с помощью хуков.

Тренажёр обновлён 28 марта 2023

Навигация и передача данных в React

Разберём на примере многостраничных приложений, как переключать экраны в React-приложении. Узнаем, как передавать данные между компонентами, которые находятся на разных уровнях иерархии. Научимся создавать высокоуровневые компоненты и использовать их для управления передачей данных.

Тренажёр обновлён 28 марта 2023

Типовые приёмы разработки

Познакомимся с типовыми приёмами разработки в React, которые упрощают процесс создания сложных приложений. Рассмотрим использование внешних сервисов данных в компонентах. Дополним функциональность приложения.

Тренажёр обновлён 28 марта 2023

React в коммерческой разработке

Разберём почему важна правильная сборка проекта. Узнаем зачем нужно делить проект на модули и как использовать для этого webpack. Познакомимся с Create React App и рассмотрим преимущества и недостатки этого инструмента.

Тренажёр обновлён 28 марта 2023

Курс «Продвинутые техники и инструменты вёрстки»

Курс для тех, кто верстает на уровне фрилансера и хочет расти в сторону продуктовой разработки.
После прохождения курса вы сможете верстать сложные компоненты, которые встречаются в продуктовых интерфейсах.

СТАЖЁРСКИЙ УРОВЕНЬ → ПРОДУКТОВЫЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Продвинутые декоративные эффекты

Разберёмся с двумерными трансформациями. Эти техники используются для оптимизации производительности интерфейсов и создания нестандартных декоративных эффектов.

Тренажёр обновлён 12 мая 2023

Продвинутая работа с фонами и рамками

Погрузимся в тонкости работы с рамками и фонами. Эти техники используются при создании сложной CSS-графики, чтобы снизить количество запросов к серверу. Также они нужны для создания декоративных элементов.

Тренажёр обновлён 12 мая 2023

Продвинутые селекторы атрибутов и состояний

Продвинутые селекторы используются для улучшения UX форм. Они могут использоваться как в сочетании с JavaScript, так и без. Также с помощью продвинутого поиска по атрибутам можно создавать «умные» элементы интерфейса и диагностические инструменты.

Тренажёр обновлён 12 мая 2023

Табличные раскладки

Табличные раскладки необходимы для работы с табличными компонентами в адаптивной вёрстке, а именно для «разрушения» и «пересборки» таблиц в разных версиях макета. Также их используют в некоторых приёмах вёрстки, например, для «идеальной» центровки.

Тренажёр обновлён 12 мая 2023

Интерфейсные анимации

Простые интерфейсные анимации и микроанимации сейчас делаются на чистом CSS. Для этого используются плавные переходы и покадровая анимация.

Тренажёр обновлён 12 мая 2023

Инструменты автоматизации: препроцессор

Главный инструмент для ускорения работы верстальщика и организации эффективной командной разработки над библиотекой компонентов — это препроцессор. Разбираем работу с препроцессором на примере Less.

Тренажёр обновлён 12 мая 2023

Внутреннее устройство SVG

Одна из популярных задач, для которой нужно знать устройство SVG, — это интерактивные иконки, меняющие цвет при наведении. Более продвинутые техники, в которых используется SVG, связаны с использованием масок, созданием адаптивных элементов интерфейса, а также сложных декоративных эффектов.

Тренажёр обновлён 12 мая 2023

Мини-курс «Погружение в бэкенд»

Погружение в бэкенд для людей со стартовыми знаниями в программировании.
После прохождения курса вы будете знать основы языка PHP и сможете на любительском уровне заниматься бэкенд-разработкой — создавать собственные проекты.

УРОВЕНЬ ПЕРВОКУРСНИКА → СТАЖЁРСКИЙ УРОВЕНЬ Карта обучения Подробнее о курсе

Знакомство с PHP

Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.

Тренажёр обновлён 12 мая 2023

Курс «Ретровёрстка»

Для тех, кому нужно поддерживать старые интерфейсы, делать специфичную вёрстку под старые браузеры или кому просто интересно, как верстали до 2017 года.

Ретросетки

Изучим приёмы создания сеток с помощью флоатов и блочно-строчных боксов. Клеарфиксы, хаки с созданием колонок одинаковой высоты, борьба с пробелами между блочно-строчными боксами — всё здесь.

Тренажёр обновлён 12 мая 2023

Ретромастерские

Разбираемся, как верстать типовые элементы интерфейса на флоатах и блочно-строчных боксах, без упора на семантику.

Тренажёр обновлён 12 мая 2023

Великий Кексби, этап 1

Помогаем Кексу запустить магазин кошачьих аксессуаров и фэшена.

Тренажёр обновлён 12 мая 2023

Великий Кексби, этап 2

Помогаем Кексу запустить магазин кошачьих аксессуаров и фэшена.

Тренажёр обновлён 12 мая 2023

Источник