Собрать страницу с другим содержанием
Возьмите структуру Omnifood, но выберите другую задачу и напишите собственные тексты. Обоснуйте порядок блоков: что посетитель должен узнать до основного действия?
HTML / CSS · английская озвучка
Build Responsive Real-World Websites with HTML and CSS
Программа, практика и требования
Build Responsive Real-World Websites with HTML and CSS — большой начальный курс Йонаса Шмедтманна по вёрстке. В нём путь от простого HTML-документа до адаптивного сайта Omnifood соединён с основами визуального дизайна. Программирование заранее знать не требуется; объяснения и озвучка — на английском.
RusUdemyПомогаем оформить выбранный курс в личном аккаунте Udemy — без общих аккаунтов и предоплаты.Подробнее- 4,8119 267 оценок на Udemy
- 470 443студента на Udemy
- 37 ч 27 минвидео · 149 лекций
- ENанглийская речь преподавателя
Bestseller · Highest RatedАнглийский язык · обновление ноябрь 2024
Перед началом
Подойдёт ли вам этот курс
Кому подойдёт
Новичкам и самоучкам, которые хотят перестать собирать страницу случайным набором CSS-правил и научиться адаптивной вёрстке.
Что знать до старта
Опыт программирования и дизайна не нужен. Достаточно компьютера с Windows, macOS или Linux и бесплатного редактора кода.
Что сможете сделать
Адаптивный сайт Omnifood: от структуры и визуального стиля до мобильной версии, оптимизации и публикации.
Учесть при выборе
Последнее указанное обновление — ноябрь 2024. Это курс по HTML, CSS и веб-дизайну, а не полноценное обучение JavaScript или React. Некоторые исторические способы раскладки рассматриваются рядом с Flexbox и Grid.
Содержание и открытый урок
Как перейти от отдельных тегов к законченному сайту
Задача курса шире, чем запомнить свойства CSS: нужно научиться превращать содержание в понятную страницу. После основ разметки и каскада появляются раскладки, типографика, цвет и повторно используемые компоненты. Проект Omnifood позволяет пройти последовательность от настольного макета до мобильной версии и публикации. Важно повторять её с собственным текстом и изображениями: учебная страница часто выглядит аккуратно, пока в неё не попадают длинный заголовок или нестандартное фото. Курс не заменяет JavaScript: здесь основная работа связана со структурой, стилями и адаптивностью.
Перед стартом оцените открытый урок и подготовьте инструменты. Последнее указанное обновление — ноябрь 2024. Это курс по HTML, CSS и веб-дизайну, а не полноценное обучение JavaScript или React. Некоторые исторические способы раскладки рассматриваются рядом с Flexbox и Grid.
Самопроверка · редакционные задания
Как проверить навык самостоятельной практикой
Эти упражнения предложены редакцией RusUdemy для самостоятельной проверки навыков. Они не являются дополнительными уроками преподавателя и не предполагают проверку работ автором.
Проверить устойчивую адаптивность
Проверьте страницу на узком телефоне, планшете и широком экране. Увеличьте текст и замените названия длинными: горизонтальная прокрутка и обрезанные кнопки покажут слабые места.
Выбрать Flexbox или Grid осознанно
Сделайте ряд преимуществ и сетку карточек. Объясните, где важнее один поток, а где отношения строк и столбцов; затем сравните поведение при нечётном числе элементов.
Провести маленькую проверку доступности
Пройдите страницу клавиатурой, проверьте подписи полей, смысл заголовков и alt у содержательных изображений. Исправляйте причину проблемы, сохраняя понятный визуальный стиль.
37 ч 27 мин видео · 149 лекцийСверить программу на Udemy
Программа HTML/CSS: основа, дизайн и адаптивный Omnifood
Основные блоки проверенной программы собраны ниже. Полное оглавление и превью доступны на Udemy. Задания для самопроверки предложены редакцией RusUdemy: они дополняют уроки и не выдаются за обещания автора.
На дату проверки в открытых данных Udemy: 10 разделов, 149 лекций, 37 ч 27 мин видео. На установку инструментов, самостоятельную практику и разбор ошибок потребуется дополнительное время. Темы ниже сгруппированы редакцией; перед выбором сверяйте доступное оглавление на Udemy.
Сначала опубликуйте собственную адаптивную страницу. Затем выбирайте по задаче: Advanced CSS для сложной вёрстки или JavaScript для поведения интерфейса.
- 01
HTML: структура документа, текст, ссылки и изображения
- 02
CSS: селекторы, каскад, размеры, цвета и типографика
- 03
Раскладки: вводный обзор floats, Flexbox и CSS Grid
- 04
Принципы веб-дизайна, компоненты и шаблоны страниц
- 05
Omnifood: сборка настольной и адаптивной версии
- 06
Эффекты, оптимизация, проверка и публикация сайта
Оригинал курса — на английском
Понимать решение важнее дословного перевода.
Откройте бесплатный фрагмент и объясните своими словами, что делает пример и зачем нужен каждый шаг. Смотрите небольшими частями, ведите словарь терминов и повторяйте показанные действия самостоятельно. Перевод помогает понимать речь, но проверка результата всё равно остаётся частью практики.
Как проходить курсы Udemy на английскомАнглийская озвучка; английские субтитры указаны в каталоге Udemy. Русских субтитров в проверенном списке нет. Доступность автоматического перевода проверяйте в плеере.
Когда программа подходит вашей задачеВы выбираете обучение. RusUdemy помогает с оформлением.
Пришлите ссылку на выбранный курс. Уточним текущую стоимость и поможем оформить его в вашем личном аккаунте Udemy. Материалы и прогресс останутся у вас.
01
Курс в Вашем аккаунте
Курс появляется в вашей личной библиотеке на Udemy. Никаких пиратских копий, общих аккаунтов или «серых» схем.
02
Без предоплаты
Вы оплачиваете покупку только после того, как курс появился в вашем аккаунте Udemy.
03
Покупка за 10 минут
Обычно от первого сообщения до появления курса в аккаунте проходит около 10 минут.
04
Живой человек, не бот
В Telegram отвечает живой человек: можно задать вопрос и получить качественную поддержку по покупке.
Сначала согласуем курс и условия. Оплата после появления курса в аккаунте.
Опыт работы с сервисом
Отзывы клиентов RusUdemy
Оперативно подошли к покупке курса. Очень доволен. Большое спасибо.
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Спасибо Михаилу за помощь! Все получилось быстро и легко!
Отзыв от:
Помогли с приобретением курса за 5 мин. Буду обращаться ещё. Михаилу респект!
Отзыв от:
Прекрасный сервис, буквально за пару минут купил курс. Всем советую
Отзыв от:
Ответы перед стартом