задачи для практики html и css
Знакомство с HTML и CSS
Тренажёр обновлён 21 мая 2021
Теория
Обязательный для прохождения материал, теория, задания и испытания.
Практика
Необязательные, но очень полезные задания. Доступны только по подписке.
16 заданий 1 испытание
Часть 1: Структура HTML-документа
Начинаем готовить разметку страницы блога, разбираемся из каких тегов она состоит и за что эти теги отвечают.
Часть 1: Структура HTML-документа
Как спроектировать сайт-портфолио
Из чего состоит сайт-портфолио и как правильно спроектировать структуру страницы.
19 заданий 1 испытание
Часть 2: Разметка текста
Продолжаем верстать страницу блога, изучаем, как правильно размечать текстовое содержание: абзацы, заголовки, подзаголовки, списки и многое другое.
Часть 2: Разметка текста
Как оформить сайт-портфолио
Подключаем базовые стили к сайту-портфолио, дорабатываем разметку.
Как опубликовать свой сайт на GitHub Pages
Разберёмся, как можно опубликовать сайт и привязать собственный домен на GitHub Pages.
15 заданий 1 испытание
Часть 3: Ссылки и изображения
Завершаем разметку страницы блога, добавляем навигационные ссылки, а также разбираемся с форматами изображений.
Часть 3: Ссылки и изображения
Навык: создание семантической разметки по макету
Это задача на проектирование информационной архитектуры страниц.
В качестве входных данных верстальщик получает от дизайнера графический макет и опираясь на него должен сделать разметку страницы. Разметка должна быть семантичной, выразительной, включать в себя все содержательные сущности, размеченные подходящими тегами, и не включать декоративные сущности.
Как добавить на сайт-портфолио ссылки и изображения
Скачиваем картинки для сайта, подключаем их и прописываем ссылки на странице.
15 заданий 1 испытание
Часть 4: Основы CSS
Начинаем оформление страниц блога и заодно разбираем базовые понятия CSS: правила, селекторы, свойства, значения, наследование и каскадирование.
Задачи на позиционирование элементов на CSS
Учебник HTML CSS
Практика
Продвинутый курс
Практика
Адаптив
Продвинутые вещи
Практика
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
На абсолютное позиционирование
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На z-index
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На relative
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На fixed
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Тренажёры
Начните проходить интерактивные задания прямо сейчас.
Если вы совсем новичок и хотите узнать, что такое HTML, CSS, JavaScript и PHP — этот тренажёр для вас.
Знакомство с веб-разработкой
На практике знакомимся с базовыми технологиями веб-разработки: HTML, CSS, JavaScript и PHP.
Тренажёр обновлён 23 июня 2021
Если вы хотите разобраться с основами HTML, CSS, JavaScript и PHP — вам сюда.
Знакомство с HTML и CSS
Изучаем основы HTML и CSS. На практике разбираемся с семантической разметкой и базовыми механизмами стилизации на примере небольшого сайта.
Тренажёр обновлён 21 мая 2021
Знакомство с JavaScript
Узнаем, как работает JavaScript в браузере. Научимся оживлять интерфейсы.
Тренажёр обновлён 3 февраля 2021
Знакомство с PHP
Добавляем PHP в разметку, работаем с веб-сценариями, данными и адресом.
Тренажёр обновлён 23 июня 2021
И ещё море крутых тренажёров для новичков и для опытных
Чтобы увидеть все тренажёры, нужно зарегистрироваться.
Практикум
Профессии
Информация
Услуги
Остальное
Регистрация
Нажимая кнопку «Зарегистрироваться», вы даёте своё согласие на обработку персональных данных в соответствии с «Политикой конфиденциальности» и соглашаетесь с «Условиями оказания услуг».
Восстановление доступа
Забыли пароль или потеряли доступ к профилю? Введите привязанную к профилю эл. почту, мы отправим вам письмо со ссылкой для восстановления.
Забыли привязать эл. почту к профилю? Напишите нам, мы поможем.
Задачи на основы работы со ссылками и границами через CSS
Учебник HTML CSS
Практика
Продвинутый курс
Практика
Адаптив
Продвинутые вещи
Практика
Перед решением задач изучите теорию к данному уроку.
Задачи для решения
На селекторы со ссылками
Сделайте селектор, который выберет все ссылки из id=test с классом www. Цвета состояний выберите самостоятельно.
Сделайте селектор, который выберет все ссылки из class=eee с классом www. Цвета состояний выберите самостоятельно.
На text-decoration
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На границы
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
На ссылки
Повторите страницу по данному по образцу:
Вы можете открыть этот пример в отдельной вкладке браузера.
10 лучших проектов для начинающих по отработке навыков HTML и CSS
Обучение программированию всегда захватывающе и весело для всех, и когда дело доходит до мира программирования, большинство людей начинают с самого простого HTML и CSS. Путешествие каждого новичка в программирование во внешнем интерфейсе начинается с этих двух основных строительных блоков, и вам нужно проявить творческий подход, когда дело доходит до разработки красивого приложения.
Первоначально новичкам нравится создавать кнопки, добавлять ссылки, добавлять изображения, работать с макетом и делать много интересных вещей в веб-дизайне, но, когда дело доходит до создания проекта с использованием только HTML и CSS, они застревают и путаются в том, что им следует делать. практиковать все эти вещи. В конце концов, их знания ограничиваются только HTML и CSS. Что бы ни случилось, после изучения всего в какой-то момент вы поймёте, что создание проекта важно для практики навыков HTML и CSS. Вам нужно проверить, как HTML и CSS работают вместе, чтобы создать красивое веб-приложение. Итак, вопрос в том, какие проекты для начинающих вы можете создать, чтобы практиковать всё, что вы узнали.
Страница памяти
Самый простой веб-сайт, который вы можете создать как новичок, — это страница памяти того, кем вы восхищаетесь в своей жизни. Требуются только базовые знания HTML и CSS. Сделайте веб-страницу с описанием этого человека, добавив его / её изображение. Вверху веб-страницы добавьте изображение и имя человека, а ниже — макет для остальных деталей. Вы можете использовать абзацы, списки, ссылки, изображения с помощью CSS, чтобы придать ему достойный вид. Добавьте подходящий цвет фона и стиль шрифта на свою веб-страницу. Большинство частей вы можете сделать с помощью HTML, но чтобы придать ему лучший вид, используйте немного CSS.
Веб-страница, включая форму
Формы всегда являются неотъемлемой частью любого проекта, и вы будете работать с большим количеством форм в большинстве приложений, так почему бы не попрактиковаться в этом раньше и проверить свои знания. Как только вы познакомитесь с полем ввода или основными тегами в HTML для создания формы, создайте проект, используя все эти теги. Как использовать текстовое поле, флажок, переключатель, дату и другие важные элементы в одной форме. Вы научитесь правильно структурировать веб-страницу при создании формы. Знания HTML / HTML5 достаточно хорошо, но вы можете использовать немного CSS, чтобы проект выглядел лучше.
Веб-сайт Parallax
Веб-сайт с параллаксом включает в себя фиксированные изображения в фоновом режиме, которые вы можете оставить на месте, и вы можете прокручивать страницу вниз, чтобы увидеть различные части изображения. Обладая базовыми знаниями HTML и CSS, вы можете придать сайту эффект параллакса. Использование эффекта параллакса в веб-дизайне действительно популярно и придаёт веб-странице красивый внешний вид. Попробуйте и разделите всю страницу на три-четыре разных раздела. Установите 3-4 фоновых изображения, выровняйте текст для разных разделов, установите поля и отступы, добавьте background-position и другие элементы и свойства CSS для создания эффекта параллакса.
Целевая страница
Целевая страница — ещё один хороший проект, который вы можете создать с использованием HTML и CSS, но для этого требуется твёрдое знание этих двух строительных блоков. При создании целевой страницы вы проявите много творчества. Вы научитесь добавлять нижний колонтитул и верхний колонтитул, создавать столбцы, выравнивать элементы, разделять разделы и многое другое. Вам нужно будет осторожно использовать CSS, помня, что разные элементы не пересекаются друг с другом. Вы также позаботитесь о цветовых сочетаниях, отступах, полях, промежутках между разделами, абзацами и полями. Цветовые комбинации должны хорошо сочетаться друг с другом для разных участков или фона.
Веб-сайт ресторана
Продемонстрируйте свои глубокие знания HTML и CSS, создав красивую веб-страницу для ресторана. Сделать макет ресторана будет немного сложнее, чем в предыдущих примерах проектов. Вы будете выравнивать различные блюда и напитки, используя сетку макета CSS. Также будете добавлять цены, изображения, и вам нужно также придать ему красивый вид, используя правильное сочетание цветов, стиля шрифта и изображений. Вы можете добавить галерею изображений для различных продуктов питания, вы также можете добавить скользящие изображения для лучшего вида. Добавьте ссылки для перенаправления на внутренние страницы. Сделайте его адаптивным, задав окно просмотра, используя медиа-запросы и сетку.
Веб-страница мероприятия или конференции
Вы можете сделать статическую страницу с мероприятием или конференцией. Люди, которые заинтересованы в участии в конференции, создают для них кнопку регистрации. Упомяните различные ссылки на докладчика, место проведения и расписание вверху в разделе заголовка. Опишите цель конференции или категорию людей, которые могут получить пользу от этой конференции. Добавьте на свою веб-страницу введение и изображения докладчика, детали места проведения и основную цель конференции. Разделите страницу на разделы, добавьте верхний и нижний колонтитулы, демонстрирующие меню. Используйте правильный цвет фона, который может хорошо сочетаться друг с другом для различных разделов. Выберите подходящий стиль и цвет шрифта, соответствующие теме вашей веб-страницы. Это требует глубоких знаний HTML / HTML5 и CSS.
Страница музыкального магазина
Сайт фотографии
Если у вас есть глубокие знания HTML5 и CSS3, вы можете создать одностраничный адаптивный сайт с фотографиями. Используйте flexbox и медиа-запросы для быстрого реагирования. Добавьте название компании с изображением (относящимся к фотографии) вверху (целевой странице). Ниже демонстрируется ваша работа с добавлением нескольких изображений. Укажите контактную информацию фотографа внизу (нижний колонтитул). Добавьте кнопку для просмотра своей работы. Эта кнопка приведёт вас прямо в раздел изображений. Вам нужно позаботиться о полях, отступах, сочетании цветов, размере шрифта, стиле шрифта, размере изображения и стиле кнопки.
Личное портфолио
Техническая документация
Если вы немного знакомы с Javascript, вы можете создать веб-страницу с технической документацией. Это требует знания HTML, CSS и базового JavaScript. Разделите всю веб-страницу на два раздела. Левая сторона создаёт меню со всеми темами, перечисленными сверху вниз. Справа нужно указать документацию или описание тем. Идея состоит в том, что после того, как вы нажмёте на одну из тем в левом разделе, она загрузит контент справа. Для щелчка вы можете использовать опцию закладки javascript или CSS. Не нужно делать его слишком навороченным, просто придайте ему простой и достойный вид, подходящий для технической документации.