Задания по css: Работа с текстом | Справочник 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 макета.

Задание: Стилизирование школьного сайта — Изучение веб-разработки

• Назад
• Обзор: Styling text

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

Предварительные требования:	Вы должны были изучить все статьи в этом модуле, прежде чем приступать к оценке.
Задача:	Проверить понимание методов CSS по стилизации текста.

Чтобы начать эту оценку, вам необходимо:

• Перейти и взять файлы HTML и CSS для упражнения, а также предоставленную иконку внешней ссылки.
• Сделайте их копии на вашем компьютере.

В качестве альтернативы, вы можете пользоваться сайтами как JSBin или Glitch чтобы выполнить оценку. Вы можете вставить HTML и заполнить CSS в одном из этих онлайн-редакторов и использовать этот URL чтобы указать фоновое изображение. Если же онлайн-редактор, которым вы пользуетесь, не имеет отдельной CSS панели, тогда вводите его в элемент <style> в head документа.

Примечание: Если вы застрянете, то попросите помощи — см. секцию Оценка или дальнейшая помощь в конце этой страницы.

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

Вы должны писать ваш дополнительный CSS после комментария в низу CSS файла, чтобы убедиться, что вы с лёгкостью заметите части проделанные вами. Не переживайте если некоторые селекторы повторяются; мы отпустим вас с этим случаем.

Шрифты:

• Во-первых, загрузите парочку бесплатных для использования шрифтов. Так как это колледж, шрифты должны быть выбраны так чтоб они придавали достаточной серьёзности, формальности и чувства заслуживающего доверия — может подойти шрифт с засечками (serif) для всего основного текста, в сочетании с шрифтами sans-serif или serif для заголовков.
• Используйте подходящий сервис для генерации пуленепробиваемого @font-face кода для этих двух шрифтов.
• Примените ваш основной шрифт для всей страницы и шрифт заголовка для заголовков.

Общая стилизация текста:

• Дайте всей странице font-size
  10px.
• Дайте вашему заголовку и другим типам элементов подходящие размеры шрифта задаваемые используя соответствующие относительные единицы.
• Дайте основному тексту подходящую line-height.
• Отцентрируйте ваш заголовок верхнего уровня на странице.
• Дайте вашим заголовкам немного letter-spacing чтобы они не были слишком сжатыми, позвольте буквам немного дышать.
• Дайте основному тексту немного letter-spacing и word-spacing, при необходимости.
• Дайте первым параграфам после каждого заголовка в <section> немного отступа, скажем 20px.

Ссылки:

• Дайте состояниям link, visited, focus, и hover какой-нибудь цвет, который будет сочетается с цветом горизонтальных линий на верху и в низу страницы.
• Сделайте так чтобы ссылки были подчёркнутыми по умолчанию, но, чтобы подчёркивание исчезало, когда вы фокусируетесь или наводите мышь на них.
• Удалите установленный по умолчанию контурный фокус со ВСЕХ ссылок на странице.
• Дайте состоянию active заметно отличимый стиль так чтоб он красиво выделялся, но чтоб он все ещё вписывался в общий дизайн страницы.
• Сделайте так чтоб внешние ссылки имели иконку внешней ссылки, вставленную рядом с ними.

Списки:

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

Меню навигации:

• Стилизуйте ваше меню навигации так чтоб оно соответствовало внешнему виду страницы.

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

Следующий скриншот показывает пример того, как может выглядеть законченный дизайн.

Если вы хотите, чтобы вашу работу оценили, или вы застряли и хотите попросить помощи:

1. Разместите свою работу в онлайн редакторе в которым можно поделиться работами в таком как CodePen, jsFiddle, или Glitch.
2. Напишите пост с просьбой оценки и/или помощи на MDN Discourse forum Learning category. Ваш пост должен включать:
   • Описательный заголовок такой как «Требуется оценка вёрстки домашней страницы общественный школы».
   • Детали о том, что вы уже попытались сделать и что бы вы хотели, чтобы мы сделали, например, если вы застряли и вам нужна помощь, либо вы хотите оценку.
   • Ссылку на онлайн редактор (как упомянуто выше в пункте 1) с примером, который нуждается в оценке или с которым нужна помощь. Это хорошая практика чтобы вникнуть — очень сложно помочь кому-либо с проблемным кодом если вы не видите их код.
   • Ссылку на актуальную задачу или страницу оценки, чтобы мы могли найти вопрос, по которому вам нужна помощь.

• Назад
• Обзор: Styling text

• Фундаментальная стилизация текста и шрифта
• Стилизация списков
• Стилизация ссылок
• Веб-шрифты
• Задании: Стилизация школьного сайта

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 11 февр. 2023 г. by MDN contributors.

Страница не найдена — Skillcrush

Онлайн-школа кодирования и дизайна с A

Войти

Извините, мы не смогли найти страницу, которую вы ищете!

Перейти на домашнюю страницу

Хотите узнать об ошибках HTTP?

404 (Эта страница!)

Когда вы запрашиваете у веб-сервера веб-сайт, он сообщает вам, как все прошло. Это обновление статуса называется кодом состояния HTTP — 404 — это код состояния для «веб-сайт не найден». Существует около 50 различных возможных кодов состояния HTTP, и все они изложены в скучно звучащих документах интернет-стандартов.

Давайте рассмотрим некоторые другие распространенные

200 OK

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

400 Плохой запрос

Подойдет, если я попрошу купить мне «fSF4kjnw» завтра. Поскольку это не что иное, как ерунда, веб-сервер может только посмотреть на вас искоса и сказать «Что?». Обычно вы увидите ошибку 400 только в том случае, если с вашим браузером что-то не так или вы перешли по действительно неработающей ссылке.

403 Forbidden

Это довольно забавно, потому что вы получите его только в том случае, если вы явно пытаетесь нарушить некоторые правила. Если я попрошу вас угостить меня обедом завтра — вполне приемлемая просьба — вы можете сказать 403 Запрещено! и закрыл меня.

301 Перемещено навсегда

Предназначено для страниц, которые были в одном месте, а затем перемещены в другое место. Скажем, мы решили, что skillcrush.com/bumblebees слишком длинный для ввода, и нам нужно было перенести его на skillcrush.com/bees. В следующий раз, когда ваш компьютер запросит skillcrush.com/bumblebees, наш веб-сервер скажет что-то вроде: «Привет, партнер! 301 Перемещено навсегда. Вы можете найти эту страницу по адресу skillcrush.com/bees», и ваш браузер перейдет на новое место. Опять же, вы никогда не увидите это!

500 Internal Server Error

К этому вы привыкнете, если станете веб-программистом. Это веб-сервер взывает о помощи, потому что что-то сломалось в коде. Впрочем, это не ваша вина, не волнуйтесь. Итак, это самые популярные коды состояния HTTP.

Хотите продолжать учиться?

Присоединяйтесь к нашему бесплатному лагерю программистов!

Чему вы научитесь:

Основы HTML и CSS

Пользовательский опыт (UX)

Основы визуального и веб-дизайна

Введение в WordPress

JavaScript 101

Страница не найдена — Skillcrush

Онлайн-школа кодирования и дизайна с A

Войти

Извините, мы не смогли найти страницу, которую вы ищете!

Перейти на домашнюю страницу

Хотите узнать об ошибках HTTP?

404 (Эта страница!)

Когда вы запрашиваете у веб-сервера веб-сайт, он сообщает вам, как все прошло. Это обновление статуса называется кодом состояния HTTP — 404 — это код состояния для «веб-сайт не найден». Существует около 50 различных возможных кодов состояния HTTP, и все они изложены в скучно звучащих документах интернет-стандартов.

Давайте рассмотрим некоторые другие распространенные

200 OK

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

400 Плохой запрос

Подойдет, если я попрошу купить мне «fSF4kjnw» завтра. Поскольку это не что иное, как ерунда, веб-сервер может только посмотреть на вас искоса и сказать «Что?». Обычно вы увидите ошибку 400 только в том случае, если с вашим браузером что-то не так или вы перешли по действительно неработающей ссылке.

403 Forbidden

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