Давайте изучим веб -дизайн всего за 5 минут в этой части 1 нашей серии.
Шаг за шагом мы рассмотрим основные концепции веб -дизайна.
Содержание — король, держи меня, это так.
Цель дизайна — улучшить представление контента, к которому он применяется. Это может показаться очевидным, но содержание является основным элементом веб -сайта, он не должен быть установлен как запоздалая мысль.
Письменный контент, такой как абзац, который вы читаете в настоящее время, составляет более 90% Интернета. Стилизация этого текстового контента будет иметь большое значение.
Давайте предположим, что вы уже завершили контент, который хотите опубликовать, и только что создали пустой файл style.css, какое правило вы можете написать?
Эта серия была рассмотрена на 2 части, это часть 1 серии.
Длинные строки текста могут быть трудно проанализировать, и, следовательно, трудно читать. Установка предела символов на строку значительно улучшает читабельность и привлекательность стены текста.
body {
margin: 0 auto;
max-width: 50em;
}
After styling the text blocks, what about styling the text itself?
Лучший из JavaScript, HTML и CSS
Шпаргалка JavaScript содержит полезные примеры кода на одной странице.
Семейство шрифтов «Шрифт браузера» по умолчанию «времена», что может выглядеть непривлекательно (в основном потому, что это «неустойчивый» шрифт). Переход на шрифт Sans-Serif, такой как «Helvetica» или «Arial», может значительно улучшить внешний вид вашей страницы.
body {
font-family: "Helvetica", "Arial", sans-serif;
}
Если вы хотите придерживаться шрифта Serif, попробуйте «Грузия».
Хотя это делает текст более привлекательным, давайте также сделаем его более читабельным.
Расстояние, когда страница выглядит «сломана» для пользователя, это обычно проблема между расстоянием. Предоставление места как вокруг, так и внутри вашего контента может увеличить привлекательность вашей страницы.
body {
line-height: 1.5;
padding: 4em 1em;
}
h2 {
margin-top: 1em;
padding-top: 1em;
}
В то время как макет до сих пор значительно улучшился, давайте применим более тонкие изменения.
Черный текст на белом фоне может быть резким на глазах. Выбор более мягкого оттенка черного для текста тела делает страницу более удобной для чтения.
body {
color: #555;
}
And in order to keep a decent level of contrast, let's pick a darker shade for important words
h1,
h2,
strong {
color: #333;
}
В то время как большая часть страницы была улучшена визуально, некоторые элементы (например, фрагменты кода) все еще кажутся неуместными.
Следующая часть будет выпущена в ближайшее время!
Оригинал: «https://dev.to/anicode/master-web-designing-in-just-10-minutes-part-1-1gl1»