Сайт выдерживает узкий экран
Откройте страницу на ширинах 320, 375 и 768 пикселей. Проверьте длинные заголовки, форму, изображения и навигацию: ни один элемент не должен заставлять прокручивать всю страницу по горизонтали.
HTML5 · CSS3 · jQuery · русская озвучка
Создание современных адаптивных веб сайтов. HTML5, CSS3
Программа, практика и требования
«Создание современных адаптивных веб сайтов. HTML5, CSS3» Юрия Аллахвердова строится вокруг сайта Sushi Ocean. После базовой разметки и стилей вы разбираете визуальное оформление, собираете секции, адаптируете страницу для телефона и знакомитесь с публикацией. Уроки на русском, объём — 11 ч 44 мин.
RusUdemyПомогаем оформить выбранный курс в личном аккаунте Udemy — без общих аккаунтов и предоплаты.Подробнее- 4,7449 оценок на Udemy
- 1 982студента на Udemy
- 11 ч 44 минвидео · 82 лекции
- RUрусская речь преподавателя
Highest RatedРусский язык · обновление февраль 2025
Перед началом
Подойдёт ли вам этот курс
Кому подойдёт
Новичкам, которые хотят освоить структуру страницы, CSS, визуальную иерархию и адаптацию на одном проекте.
Что знать до старта
Опыт вёрстки не обязателен. Нужны компьютер, браузер и редактор кода. Для необязательной публикации на собственном адресе домен и хостинг оплачиваются отдельно.
Что сможете сделать
Сайт Sushi Ocean: первый экран, преимущества, изображения еды, города, отзывы, контактная форма и подвал; адаптация для телефона и публикация.
Учесть при выборе
Часть начальных уроков повторяет бесплатный HTML/CSS и Full Stack. Интерактивные эффекты сделаны на jQuery; наличие слов HTML5/CSS3 не означает обучение всем современным возможностям CSS. Хостинг и домен в курс не входят.
Содержание и открытый урок
Один сайт от пустого файла до мобильной версии
Главное отличие программы от короткого введения в HTML — работа над целой страницей. Сначала автор объясняет списки, ссылки, изображения, селекторы и отступы, затем добавляет принципы типографики, цвета и использования свободного пространства. На проекте появляются первый экран, преимущества, галерея еды, отзывы и контактная форма. Вёрстка проверяется на разных размерах экрана, а интерактивные эффекты и навигация добавляются через jQuery. Такой формат помогает увидеть связь между дизайном и кодом: изменение размера шрифта или отступа влияет на соседние блоки, а широкая картинка может сломать мобильную страницу. Начало частично совпадает с бесплатным курсом и Full Stack. Выбирайте эту программу ради последовательной сборки адаптивного сайта, а не ради повторного объяснения знакомых HTML-тегов.
Перед стартом оцените открытый урок и подготовьте инструменты. Часть начальных уроков повторяет бесплатный HTML/CSS и Full Stack. Интерактивные эффекты сделаны на jQuery; наличие слов HTML5/CSS3 не означает обучение всем современным возможностям CSS. Хостинг и домен в курс не входят.
Самопроверка · редакционные задания
Четыре проверки самостоятельной вёрстки
Эти упражнения предложены редакцией RusUdemy для самостоятельной проверки навыков. Они не являются дополнительными уроками преподавателя и не предполагают проверку работ автором.
У страницы есть понятная структура
Проверьте порядок заголовков, назначение секций и подписи полей. Просмотрите страницу без картинок: содержание и действия должны оставаться понятными благодаря тексту и семантической разметке.
Навигация доступна с клавиатуры
Пройдите меню и форму клавишей Tab. Убедитесь, что видно активный элемент, меню можно закрыть, а анимация не мешает пользоваться ссылками. Это дополнительная проверка качества собственного проекта.
Готова версия с вашим содержанием
Замените учебный бренд, тексты и изображения на собственный небольшой проект. Настройте размеры файлов, проверьте ссылки после публикации и объясните, какие решения пришлось изменить из-за нового содержания.
11 ч 44 мин видео · 82 лекцииСверить программу на Udemy
Программа курса по адаптивным сайтам
На Udemy указаны 8 разделов и 82 лекции. После основ HTML/CSS идут дизайн, сборка Sushi Ocean, адаптация, jQuery и размещение на сервере. Следующие проверки проекта — редакционные рекомендации для самостоятельной практики.
На дату проверки в открытых данных Udemy: 8 разделов, 82 лекции, 11 ч 44 мин видео. На установку инструментов, самостоятельную практику и разбор ошибок потребуется дополнительное время. Темы ниже сгруппированы редакцией; перед выбором сверяйте доступное оглавление на Udemy.
Закончите один сайт с собственными текстами и проверьте его на телефоне. Затем выбирайте JavaScript, если нужны сложные взаимодействия, или углубляйте CSS, если пока труднее всего даются сетка и адаптация.
- 01
Редактор, первая страница, ссылки, списки и изображения
- 02
CSS: селекторы, цвета, отступы, фон и типографика
- 03
Основы веб-дизайна: цвет, иконки, изображения и свободное пространство
- 04
Сборка секций сайта Sushi Ocean и контактной формы
- 05
Адаптация на мобильных устройствах, media queries и проверка браузеров
- 06
Закреплённая навигация, прокрутка и анимации на jQuery
- 07
Оптимизация файлов, вводные SEO-настройки и загрузка на хостинг
Когда программа подходит вашей задачеВы выбираете обучение. RusUdemy помогает с оформлением.
Пришлите ссылку на выбранный курс. Уточним текущую стоимость и поможем оформить его в вашем личном аккаунте Udemy. Материалы и прогресс останутся у вас.
01
Курс в Вашем аккаунте
Курс появляется в вашей личной библиотеке на Udemy. Никаких пиратских копий, общих аккаунтов или «серых» схем.
02
Без предоплаты
Вы оплачиваете покупку только после того, как курс появился в вашем аккаунте Udemy.
03
Покупка за 10 минут
Обычно от первого сообщения до появления курса в аккаунте проходит около 10 минут.
04
Живой человек, не бот
В Telegram отвечает живой человек: можно задать вопрос и получить качественную поддержку по покупке.
Сначала согласуем курс и условия. Оплата после появления курса в аккаунте.
Опыт работы с сервисом
Отзывы клиентов RusUdemy
Оплатить udemy, а ещё получить комплимент и дельный совет, как в той рекламе - почти бесценно. Если вы читаете этот отзыв и ещё раздумываете где и как купить курс на udemy - вам к Михаилу, не сомневайтесь
Отзыв от:
Хотела поблагодарить ,все прошло быстро и доступно. Отдельная благодарность за обратную связь! Вы лучшие ♥️
Отзыв от:
Оперативно подошли к покупке курса. Очень доволен. Большое спасибо.
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Купил курс по программированию. Михаил, спасибо за помощь с созданием нового аккаунта, быстроту ответа и оформления курса. Хороший сервис
Отзыв от:
Спасибо Михаилу за помощь! Все получилось быстро и легко!
Отзыв от:
Ответы перед стартом