Об этом курсе: Этот курс продолжает обучение тех, кто уже познакомился с основами HTML и CSS. На очереди всякие изыски: отображение сложных элементов, изучение различий между браузерами и графика. В конечном итоге вы сможете сами сверстать страницу любой сложности. Авторы курса — разработчики из Яндекса.
Для кого этот курс: В первую очередь курс рассчитан на тех, кто закончил предыдущий — «Основы HTML и CSS». Но если вы изучили программу «Основ» и не нашли там ничего нового, смело приступайте к «Тонкостям».
Автор: Moscow Institute of Physics and Technology, Yandex
Преподаватели: Олег Семичев, разработчик интерфейсов, Яндекс
Преподаватели: Артем Кувалдин, разработчик интерфейсов, Яндекс
Преподаватели: Мохов Олег, разработчик интерфейсов, Яндекс
| Основные сведения | |
| Уровень | Учащийся среднего уровня |
| Язык | Russian |
| Как пройти курс | Чтобы пройти курс, выполните все оцениваемые задания. |
| Оценки пользователей |
Программа курса
НЕДЕЛЯ 1
Модель отображения, часть 1
На первой неделе курса вы увидите, что всё есть прямоугольники. И разберётесь с ключевыми понятиями отображения элементов на странице: боксы, отступы, границы. В конце недели вам предстоит сверстать макет необычного интернет-магазина.
5 видео, 6 материала для самостоятельного изучения
- Видео: Создание боксов
- Видео: Нюансы работы с margin, padding и border
- Видео: Немного о математике блочных элементов
- Reading: Задание для тренировки в работе с боксовой моделью
- Видео: Боксы инлайн-уровня
- Reading: Мяндекс.Муррркет: решение
- Reading: FAQ по заданиям на взаимную оценку
- Reading: Ссылки из видео
- Reading: Telegram специализации
- Reading: Анкета для слушателя
Оцениваемый: Мяндекс.Муррркет
НЕДЕЛЯ 2
Модель отображения, часть 2
Позиционированием называется положение элемента в системе координат. Различают четыре типа позиционирования: нормальное, абсолютное, фиксированное и относительное — от них зависит и система координат. На этой неделе вы познакомитесь со всеми типами и научитесь выбирать подходящий для ваших задач.
7 видео, 5 материала для самостоятельного изучения
- Видео: Абсолютная система позиционирования
- Видео: Позиционирование fixed и sticky
- Reading: Задание для тренировки в работе с различными видами позиционирования
- Видео: Контекст наложения
- Видео: Плавающие элементы
- Видео: Блочный контекст форматирования
- Видео: Практические примеры
- Reading: Задание для тренировки
- Reading: Бабуленькин урожай. Решение
- Reading: FAQ по заданиям на взаимную оценку
- Reading: Ссылки из видео
Оцениваемый: Бабуленькин урожай
НЕДЕЛЯ 3
Модель отображения. Часть 3
Flexbox и Grid — современные инструменты для вёрстки макетов, о них и поговорим. Оба инструмента хороши по своему и должны использоваться совместно, а не как альтернатива друг другу. В конце недели ещё одно практическое задание: добавление к магазину красивой витрины.
3 видео, 4 материала для самостоятельного изучения
- Видео: Спецификация flexbox
- Видео: Спецификация grid
- Reading: Бабуленькины котятки. Решение
- Reading: FAQ по заданиям на взаимную оценку
- Reading: Ссылки из видео
- Reading: Конспект лекций
Оцениваемый: Бабуленькины котятки
НЕДЕЛЯ 4
Браузеры
Четвёртая неделя посвящена браузерам: вы узнаете об их базовой архитектуре, познакомитесь с устройством движка рендеринга браузера, разберётесь, как браузеры применяют CSS и HTML.
5 видео, 1 материал для самостоятельного изучения, 1 тренировочный тест
- Видео: Как браузер читает HTML и CSS?
- Видео: Как применяется CSS?
- Видео: Компоновка
- Видео: Отрисовка и <script>
- Cuestionario de práctica: Проверьте себя
- Reading: Ссылки из видео
Оцениваемый: Браузер
НЕДЕЛЯ 5
Фотошоп и графика
Вы научитесь работать с изображениями и графикой. Узнаете о цветовых моделях, форматах изображений в вебе и как их оптимихировать. Итоговая практическая работа — сверстать с нуля макет.
8 видео, 4 материала для самостоятельного изучения
- Видео: Цветовые модели
- Видео: Форматы графических файлов
- Видео: Архивация и компрессия
- Видео: Графический редактор
- Видео: Графика в HTML
- Видео: Градиенты
- Видео: Спрайты и base64
- Reading: FAQ по заданиям на взаимную оценку
- Reading: Ссылки из видео
- Reading: Ваши впечатления о курсе
- Reading: Стань ментором специализации "Разработка интерфейсов: вёрстка и JavaScript"
Оцениваемый: Вёрстка макета
Часто задаваемые вопросы
Как это работает
Trabajo del curso
Cada curso es como un libro de texto interactivo, con videos pregrabados, cuestionarios y proyectos.
Ayuda de tus compañeros
Conéctate con miles de estudiantes y debate ideas y materiales del curso, y obtén ayuda para dominar los conceptos.
Certificados
Obtén reconocimiento oficial por tu trabajo y comparte tu éxito con amigos, compañeros y empleadores.
Авторы
Moscow Institute of Physics and Technology
Московский физико-технический институт (неофициально известный как МФТИ или Физтех) является одним из самых престижных в мире учебных и научно-исследовательских институтов. Он готовит высококвалифицированных специалистов в области теоретической и прикладной физики, прикладной математики, информатики, биотехнологии и смежных дисциплин. Физтех был основан в 1951 году Нобелевской премии лауреатами Петром Капицей, Николаем Семеновым, Львом Ландау и Сергеем Христиановичем. Основой образования в МФТИ является уникальная «система Физтеха»: кропотливое воспитание и отбор самых талантливых абитуриентов, фундаментальное образование высшего класса и раннее вовлечение студентов в реальную научно-исследовательскую работу. Среди выпускников МФТИ есть Нобелевские лауреаты, основатели всемирно известных компаний, известные космонавты, изобретатели, инженеры.
Yandex
Yandex is a technology company that builds intelligent products and services powered by machine learning. Our goal is to help consumers and businesses better navigate the online and offline world.
Стоимость
| Приобрести курс | |
|---|---|
| Получить доступ к материалам курса | Доступен |
| Получить доступ к оцениваемым материалам курса | Доступен |
| Получить итоговую оценку | Доступен |
| Получите сертификат о прохождении курса, ссылкой на который можно делиться с другими людьми | Доступен |
Рейтинги и отзывы
Это было непросто
Хороший курс. Сплошные плюсы. Существенных минусов два. Критерии оценки становятся понятны только при оценке задания и из постановки задачи нифига не выводятся. Ты аплоадишь работу, при проверке узнаешь, что на полный балл цвет фона надо было менять с transition, чертыхаешься, правишь свою работу, аплоадишь заново - и надеешься, что она успеет набрать положенные три голоса. Не то чтобы это было ужасно, но слегка подбешивает. Ну и система оценки. Понимаю, что HTML проверить без человеческого участия трудно. Но кажную божию неделю кросс-проверка при не слишком большом количестве народа - IMHO не самая хорошая идея. Это вынуждает ставить баллы по максимуму закрывая глаза на недочеты - потому что ты щас поставишь 2 из 20, соратник работу переделает, зааплоадит, а проверять ее уже будет некому. И будет он ждать следующей волны. Вобщем грусть. Но сам по себе курс отличный. Рекомендую.
Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.
© Coursera Inc., 2018 Все права защищены.
s
Полезный курс, особенно для тех, кто уже разбирается в вопросе хотя бы немного. Лаконично проходится по всей необходимой для вёрстки инфе. Можно освежить память и паралельно подучить новые, ранее пропущенные моменты. Рекомендую.