Вёрстка HomeWork *

Шрифт

наклонный шрифт font-style: italic; | normal;

заглавные буквы font-variant: small-caps; | lowercase; | uppercase; | none;

толщина шрифта font-weight: normal; | bold; | bolder; | lighter;|normal;|100;|200;|300;|400;|500;| 900;

размер шрифта font-size: 25px;

выравнивание text-align: left; | center; | right; | justify;

оформление шрифта text-decoration: line-through; | underline; | overline; | none; (там где подчёркнуто всегда должна быть ссылка)

отступ в начале параграфа (красная строка) text-indent: 25px;

первый символ каждого слова заглавный text-transform: capitalize; 

переносы запрещены white-space nowrap; | pre;

интервал между словами word-spacing: 20px;

интервал мужду буквами letter-spacing: 2px;

интервал между строчками line-height: 1.5;

импорт шрифта в начале файла стиля:

@import url(‘https://fonts.googleapis.com/css?family=Sedgwick+Ave+Display’);

там где используется шрифт:

font-family: ‘Sedgwick Ave Display’, cursive;

FONT2WEB

Google Fonts

Фон

цвет фона background-color: hex; | red; | rgb(a); | transparent;

градиент background: linear-gradient(to top, #dd4422, #552288);

импорт градиента http://www.colorzilla.com/gradient-editor/

рисунок или градиент фона background-image: url; | none;

фон, который не скролится background-attachment: fixed; | scroll;

повторение фона background-repeat: no-repeat; | repeat; | repeat-x; | repeat-y;

позиция фона background-position: left; | center; | right; | bottom; | %; | px;

вложить изображение background-size: cover; | contain;

Двойной фон (слева и справа):

body { background:

url(images/pattern-left.png) repeat-y,

url(images/pattern-right.png) 100% 0 repeat-y;

margin: 10px 100px; }

Colorzilla  — сервис генерации градиентов фона

Autoprefixer — поможет с префиксами для animations, transition, transform, grid, flex, flexbox

Иконки

Perfect Pixel

ColorZilla

Web Developer

Photoshop CS6  + установить плагины для фотошопа: ‘CSS Hat’, ‘PNG Hat’

Gulp

Gulp.js — это потоковый сборщик проектов на JS. Он использует Stream и действительно является очень быстрым. Для примера у меня есть проект где около тысячи stylus файлов, GruntJS нужно примерно 2.5 секунды на сборку и 2 секунды на обработку autoprefixer’ом. Gulp все это делает за 0.5 секунды выигрывая у GruntJS минимум в 4 раза. Попробуйте GulpJS и начните уже использовать по-настоящему быстрые вещи в своих проектах.

Раскрутка и продвижение сайта, оптимизация SEO

Что такое Django?