Об этом курсе: Этот курс продолжает обучение тех, кто уже познакомился с основами 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>
- Practice Quiz: Проверьте себя
- Reading: Ссылки из видео
Оцениваемый: Браузер
НЕДЕЛЯ 5
Фотошоп и графика
Вы научитесь работать с изображениями и графикой. Узнаете о цветовых моделях, форматах изображений в вебе и как их оптимихировать. Итоговая практическая работа — сверстать с нуля макет.
8 видео, 4 материала для самостоятельного изучения
- Видео: Цветовые модели
- Видео: Форматы графических файлов
- Видео: Архивация и компрессия
- Видео: Графический редактор
- Видео: Графика в HTML
- Видео: Градиенты
- Видео: Спрайты и base64
- Reading: FAQ по заданиям на взаимную оценку
- Reading: Ссылки из видео
- Reading: Ваши впечатления о курсе
- Reading: Стань ментором специализации "Разработка интерфейсов: вёрстка и JavaScript"
Оцениваемый: Вёрстка макета
Часто задаваемые вопросы
Как это работает
Coursework
Each course is like an interactive textbook, featuring pre-recorded videos, quizzes and projects.
Help from Your Peers
Connect with thousands of other learners and debate ideas, discuss course material, and get help mastering concepts.
Certificates
Earn official recognition for your work, and share your success with friends, colleagues, and employers.
Авторы
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 Все права защищены.
Это было непросто