Задачи по css и html: Работа с позиционированием. Абсолютное и относительное | Справочник HTML CSS

Задания по HTML — HTMLLab

Задания по основам работы с HTML и CSS

Задачи по основам HTML призваны закрепить работу с набором следующих тем: структура HTML, комментарии в HTML, основные теги, основные атрибуты HTML. Задачи по основам.

Задачи по работе с гиперссылками освещают вопросы: понятия гиперссылки, внешние гиперссылки, внутренние гиперссылки. Задачи на гиперссылки.

Задачи по изображениям в HTML: вставка изображения в HTML (HTML код изображения), размер HTML изображения, выравнивание изображения… Задачи по работе с изображениями в HTML.

Задания по углубленной работе с HTML и CSS

Задания по HTML с Emmet. Быстрая верстка, команды Emmet (так называемая шпаргалка Emmet). После выполнения задач с плагином Emmet скорость вашей верстки/разработки вырастет в разы. Задания по Emmet.

Задания по CSS-селекторам. Селекторы CSS: css селекторы классов, css селекторы атрибутов, соседние селекторы css, контекстные селекторы css, дочерние селекторы +в css, приоритет селекторов. Задания на CSS-селекторы.

Задания по float css. Обтекание в HTML и CSS — хорошая возможность разместить блоки на одном уровне или построить многоколоночную страницу. Владея свойством float, можно отчасти управлять блочностью элемента, а зная как решать проблемы с обтеканием — не тратить время на поиски «ошибок». Задания на CSS Float.

Работа CSS-позиционирования важна для понимания сложной верстки. Здесь приводятся задачи на понимание и работу с: position absolute, position relative, position fixed и position static, CSS-свойств top left bottom right. Задания по CSS-позиционированию.

Задания по верстке форм

1. Сверстайте форму аутентификации на сайте, такую же как в Twitter Bootstrap (не используя этот фреймворк). Например, как в  панели навигации Bootstrap.
2. Сверстайте форму диспетчера на сайте
3. Подключить jQuery-плагин для выбора даты/месяца из поля
4. Создайте чекбокс по аналогии с социальной сетью.
5. Создайте форму регистрации посетителя сайта
6. Создайте форму подобной той, что сортирует товары в Яндекс.Маркет

Одна из задач верстальщика — писать кроссбраузерный код. Код, который позволит страницам выглядеть в наибольшем количестве браузеров одинаково или максимально похоже. Задания на кроссбраузерность.

Современные возможности CSS позволяют создавать замечательные CSS-анимации и работать с фоном раскрашивая его градиентной заливкой. Небольшой набор задач на CSS-анимацию.

Задания на медиа запросы (мобильные сайты). Создание мобильной версии сайта

— важная часть умений веб-разработчиков. Задания посвящены темам: создание мобильного сайта, проверка мобильной версии сайта. Задания на media queries.

Задания по верстке psd макета и CSS-фреймворкам. Верстка сайта на основе psd макета — важнейшая часть работы веб-верстальщика. На уроках HTML мы рассматриваем основные шаги верстки из psd в HTML. Задания по верстке psd макета.

Упражнения по HTML+CSS — Stack Overflow на русском

Вопрос задан 10 лет 11 месяцев назад

Изменён 4 года 3 месяца назад

Просмотрен 22k раз

Доброго дня!

Требуется срочно подтянуть свои знания по HTML+CSS. Никто не встречал ресурс, где можно решать определенные задачи по HTML+CSS и отправлять их на автоматическую проверку? Требуется что-то типа этого: http://www. sql-ex.ru/ или http://beyondrelational.com/puzzles/default.aspx.

Спасибо!

• html
• css

2

Привет. Автоматическую проверку не встречал, но что бы перед недавними олимпиадами вспомнить всё использовал всем известный http://htmlbook.ru/ .Сначала читал некоторую теорию, потом практиковался, после — протестировался, вспомнил всё за 1 день, неплохо выступил!

Есть хороший учебник по HTML. Если нужны основные знания по языку, это то, что нужно. Там используются интеллект-карты. А это вообще штука прикольная.

Вот учебник. А это почитай про интеллект-карты

Попробуй протестируй валидатором просто введи адрес или загрузи файл и нажми проверить после проверки вылетят все ошибки и их описания если все в норме можешь даже поставить на сайт значек из предложенных, что мол проверку прошел. Насколько я знаю это самый популярный валидатор. Правда сам давно не пользовался, раньше он ругался на html5 Тэги.

Для обучения

HTML Academy представляет собой интерактивный курс по HTML и CSS, всё обучение разбито на уроке с теорией и практикой. После ознакомления с теорией сразу приступаешь к практике, видишь результат своей работы, выполняешь поставленные задания.

FLEXBOX FROGGY позволяет изучить CSS Flexbox в интерактиве. FLEXBOX FROGGY представляет собой игру, в которой необходимо позиционировать лягушонка Фроги и других вымышленных героев игры при помощи Flexbox.

GRID GARDEN позволил изучить CSS Grid в интерактиве. Аналог FLEXBOX FROGGY только для Grid. Тут нужно позиционировать элементы, чтобы вырастить морковный сад

Для проверки

validator.w3.org используется для проверки верстки на соответствие HTML-кода страниц сайта и CSS-кода на соответствие современным стандартам.

Для написания

jsfiddle.net онлайн-инструмент, который поможет решать задачи в браузере без установки ПО на компьютер. Таких инструментов множество, в интернете их можно найти по запросам онлайн IDE, онлайн песочница.

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

7 проектов для отработки навыков HTML и CSS для начинающих | by Avic Ndugu

Первый раз, когда вы пытаетесь освоить новый навык, всегда интересно. Особенно кодирование.

Однако, если у вас нет практики, вы забываете большую часть того, чему научились. Поэтому в какой-то момент вы понимаете, что вам нужно практиковать то, что вы узнали. Иначе вы все забудете.

Вот где на помощь приходят проекты. Проекты — это хороший способ попрактиковаться в том, чему вы научились. И поверь мне, ты хочешь поработать над некоторыми проектами. Вы можете использовать проекты, чтобы продемонстрировать, над чем вы работали.

Женщина работает над проектом с помощью компьютера

Как новичок, выбор проектов, соответствующих вашему текущему уровню знаний, может быть пугающим. Вы можете выбрать проект. Тогда проект становится слишком большим, чтобы его можно было реализовать с вашим текущим ноу-хау. По крайней мере, это то, через что я прошел в этом учебном путешествии.

Я курировал несколько проектов, которые, как мне показалось, подходят, даже если ваши знания ограничены только HTML и CSS . Эти проекты доступны на популярных учебных веб-сайтах, где вы найдете дополнительную информацию о том, чем вы будете заниматься.

1. Страница памяти

Скриншот страницы памяти

Напишите дань уважения тому, кем вы восхищаетесь, и опубликуйте его на веб-странице. Этот проект будет включать работу с добавлением изображений, ссылок, списков и абзацев. Этот проект потребует знания HTML для создания. Однако вы можете использовать немного CSS, чтобы проект выглядел лучше.

2. Форма опроса

Формы полезны при сборе данных в Интернете. Этот проект в основном будет проверять ваши навыки на всех видах входных данных. Это проверит ваше знание форм и структурирование вашей веб-страницы. Форма не требует отправки каких-либо данных.

Это сборка со страницы трибьюта. Для создания этого проекта потребуются знания html/html5.

3. Создайте целевую страницу продукта

Целевая страница продукта — Авторский проект

Это проверит ваши знания как HTML, так и CSS. Вам потребуется попрактиковаться в создании столбцов и выравнивании элементов внутри столбцов. Вам также нужно будет выполнить базовое редактирование изображений, например. обрезка и изменение размера, чтобы сделать идеальные изображения для вашей веб-страницы.
Вам потребуются хорошие знания HTML/CSS.

4. Создайте страницу технической документации

Страница проектной документации

Для этого потребуются некоторые знания HTML CSS и начальной загрузки или JavaScript. Основная идея такова: когда вы нажимаете на любую тему слева, она загружает этот контент справа.

В настоящее время я пробую этот проект, и я опубликую окончательный проект, как только он будет готов.

5. Создайте веб-страницу личного портфолио

Портфолио, демонстрирующее проекты, над которыми вы работали.

Вы будете практиковать все навыки, которые вы изучили в HTML и CSS. Вам также необходимо знать, как обрезать изображения и изменять их размер. Если у вас нет вариантов, используйте Gimp. Он бесплатный, с открытым исходным кодом и доступен для Windows и Linux.

Если вы спешите создать портфолио, вы можете прочитать статью Брайана о создании онлайн-портфолио с использованием готовой темы/шаблона.

6. Страница Google.com

Скриншот страницы google.com

Да, вы видели это много раз. Но сможете ли вы повторить это. Простая страница google.com со значками, логотипом Google, текстовым полем и двумя кнопками. Вы можете сделать двойник страницы google.com. В этом проекте вы делаете его похожим на google.com, а не на google.com.

Вам необходимо знать как HTML, так и CSS.

7. google.com Страница результатов поиска

Скриншот страницы результатов поиска Google

Вы создадите страницу в формате результатов поиска Google. Ваша страница должна иметь обычные 10 результатов и переход к следующим страницам внизу.

Это обновление базовой страницы google.com выше. Однако вы должны иметь возможность повторно использовать часть кода в этом проекте.

Кроме того, сделайте так, чтобы страница выглядела немного, но функциональность сейчас не должна вызывать беспокойства.

Если вы хотите изучить основы HTML, вы можете ознакомиться с моим коротким вводным уроком по HTML.

Вы сделали базовый проект , когда изучали HTML и CSS? Если вы поделитесь ими ниже и поможете другим учащимся найти «простые», но сложные идеи, которые можно попробовать.

8 лучших проектов HTML и CSS для начинающих

Независимо от того, считаются ли они языками программирования или нет, нет никаких сомнений в том, что HTML и CSS вместе с JavaScript составляют краеугольный камень Всемирной паутины. К счастью, это одни из самых простых технологий для изучения и демонстрации.

Как начинающий веб-разработчик, как вы практикуете и демонстрируете свои навыки? Во-первых, вам нужен один или несколько проектов, чтобы проверить свои способности и стимулировать процесс обучения, выходящий за рамки простого изучения синтаксиса.

Эти восемь проектов идеально подходят для того, чтобы вы могли отточить свои навыки работы с HTML и CSS и продемонстрировать свои знания.

Создание личного веб-сайта является одним из самых популярных, но сложных проектов для начинающих HTML и CSS. Это всесторонний проект, который проверяет большинство навыков, приобретенных в процессе обучения. Кроме того, личный веб-сайт — отличное место для отображения вашего резюме и привязки вашей учетной записи GitHub.

Многие новички используют программное обеспечение, такое как SquareSpace или WordPress, для решения более технических аспектов создания веб-сайтов. Используя эти инструменты, вы можете сосредоточиться на оттачивании навыков разметки и стилей. Или вы можете создать веб-сайт с нуля и испытать все свои навыки.

Личный сайт может служить портфолио для всех ваших работ. Заголовок идеально подходит для представления себя, отображения контактной информации и ссылки на другие работы. Точно так же нижний колонтитул может содержать ссылки на учетные записи социальных сетей и дополнительную информацию о вас и ваших услугах.

Трибьют-страница — это одностраничный веб-сайт, на котором описываются качества человека, которого вы считаете кумиром или образцом для подражания. Этот проект требует только базовых навыков HTML и CSS и является одной из самых простых задач, которые вы можете использовать для демонстрации своих способностей.

Наиболее заметной особенностью страницы дани является фотография субъекта. Таким образом, правильное позиционирование этого изображения требует технических навыков, дизайнерских навыков и внимания к деталям. Вы должны выбрать правильные цвета фона, чтобы дополнить изображение.

Имя субъекта так же важно, как и изображение, часто выделенное уникальными шрифтами и цветами в заголовке. Кроме того, трибьют-страница содержит один или два абзаца по теме, ссылки и общедоступную контактную информацию.

Проект формы опроса проверит ваши знания и навыки в области интерактивного управления. Он охватывает весь спектр UI/UX, включая получение и отправку пользовательского ввода. Кроме того, в этом проекте вы будете использовать элементы HTML, такие как переключатели, текстовые поля, флажки и метки.

В форме опроса не нужно задавать реальные вопросы или хранить ответы в базе данных. Вместо этого вы можете использовать текст-заполнитель, чтобы продемонстрировать свое владение правильной структурой веб-страницы. Кроме того, вы можете создать адаптивную форму, которая подстраивает свое содержимое в зависимости от размера экрана.

Целевая страница — это еще один одностраничный веб-сайт, специально разработанный для маркетинговых кампаний. Он направлен на привлечение клиентов в компанию или создание лидов. Таким образом, целевая страница часто является первой точкой контакта с веб-сайтами, оптимизированными для поисковых систем.

Вы можете использовать аналитику, чтобы определить, насколько эффективна ваша целевая страница. Дизайн целевой страницы для обеспечения максимального вовлечения имеет первостепенное значение. Лендинг пейдж — один из самых сложных проектов для новичков, несмотря на его простоту.

Для этого проекта вам потребуются творческие навыки, чтобы максимально использовать различные HTML-элементы, имеющиеся в вашем распоряжении. Вам понадобится мастерство CSS, чтобы обслуживать сложные макеты на разных устройствах.

Ваша целевая страница должна быть интерактивной и достаточно отзывчивой, чтобы увлечь вашу аудиторию и вызвать активность пользователей.

На первый взгляд страница событий выглядит как любой проект статической веб-страницы в этом списке. Однако его определяющей особенностью является кнопка регистрации для посетителей, заинтересованных в посещении мероприятия. Еще одна выдающаяся особенность — ссылки на место проведения, маршрут и спикеров.

Этот проект проверяет вашу способность помещать большой объем информации в ограниченное пространство. Следовательно, на вашей веб-странице должны быть четко указаны цель и преимущества мероприятия, если это применимо. Вы также можете включить соответствующие изображения места проведения, спикеров и темы мероприятия.

Страница события требует, чтобы вы знали, как использовать HTML и CSS для разделения страницы на разделы. Кроме того, заголовок должен содержать интерактивное меню, а нижний колонтитул должен отображать дополнительную информацию.

Веб-сайт ресторана должен использовать правильное сочетание цветов, чтобы еда и напитки выглядели более привлекательными для клиентов. Вы также можете сделать веб-сайт интерактивным, чтобы повысить вовлеченность клиентов. Например, при наведении курсора на изображение блюда может отобразиться карточка меню с ценой и наличием.

Этот проект дает возможность проверить свои навыки верстки. Например, вы можете использовать слайдеры изображений, чтобы продемонстрировать варианты меню ресторана. Кроме того, вы можете использовать сетку CSS или flexbox для выравнивания продуктов питания. Простая анимация кнопок и изображений также может придать вашему сайту захватывающий вид.

Веб-сайт ресторана может потребовать навыков помимо простого HTML и CSS, таких как jQuery и @keyframes.

Клон веб-сайта часто считается окончательным испытанием ваших навыков HTML и CSS, требующим больше времени и усилий, чем любой другой проект. Сайты обмена видео, такие как YouTube и Netflix, являются популярными кандидатами на клонирование веб-сайтов из-за их сложности и профессионального вида.

Процесс клонирования начинается со скриншотов пользовательского интерфейса веб-сайта, особенно интерактивных элементов. Затем вы используете все имеющиеся в вашем распоряжении навыки, чтобы воспроизвести внешний вид различных частей веб-сайта.

Ваш сайт-клон должен включать такие функции, как поисковые системы, разделы комментариев, каналы и планы платежей. Вы также можете встроить фоновое видео HTML5, чтобы имитировать функции воспроизведения видео на этих веб-сайтах.

Этот проект дает представление о мыслительном процессе больших профессиональных команд веб-разработчиков. Более того, вы можете использовать Инструмент Inspect в веб-браузере, чтобы просмотреть исходный код HTML и CSS для этих сайтов.

Параллаксная прокрутка — широко распространенный эффект на современных веб-сайтах, где элементы фона перемещаются с разной скоростью по сравнению с элементами переднего плана при прокрутке. Несмотря на ошеломляющий внешний вид, веб-сайт с параллаксом — один из самых простых проектов для начинающих.