Полезные материали

Materials

https://drive.google.com/drive/folders/0B43w-0j633uLMlZHY08tU0FzYlU?usp=sharing

Generalized

• caniuse.com

• Unicorn - Совмещенный валидатор W3C

• Валидатор HTML

• Валидатор CSS

• "Песочницы": 1) codepen, 2) jsfiddle, 3) jsbin.

• Email encoder

• Специальные символы HTML

• Быстрая вставка изображений на страницу

• htmlshell.com - помогает выбрать начальные элементы html-страницы

Tutorials

• webref.ru(Улучшенная и переработанная htmlbook) Пользуйтесь той, которую посчитаете для себя наиболее подходящей и структурированной.

• tutorialspoint.com

Head

https://wsd.events/2016/11/26/pres/heads-up/#

Complete List of HTML Meta Tags

Reset

• normalize.css

• meyer css reset

Fonts

• Common fonts to all versions of Windows & Mac equivalents(шрифты общие для всех версий Windows и их заменители Mac)

Где взять хорошие веб-шрифты?(resource)

• Google Fonts — Каталог свободных шрифтов

• Fontsquirrel — известный конвертер и каталог веб-шрифтов

• Myfonts — огромный магазин шрифтов с удобной системой оплаты

• Fonts.com — главный конкурент MyFonts

• Typekit — сервис для аренды шрифтов от Adobe

• Typecast — вышеупомянутый магазин с сервисом тестирования

• WebFont.ru — еще один полезный ресурс.

Графика для web - изображения, иконки

Растровая графика

• Иконки от flaticons.net , от icons8

• Картинки от pixabay

Векторная графика - иконки

• От Google - Material icons

• От FontAwesome

• materialdesignicons

Image optimization

• General article

• http://optimizilla.com/

• https://tinypng.com/

• http://www.jpegmini.com/

Cheat sheet

• https://docs.emmet.io/cheat-sheet/

• http://www.customguide.com/cheat_sheets/windows-10-quick-reference.pdf

Photoshop

• Photoshop для html‑верстальщика

• ускоряем нарезку

• https://assets.adobe.com/link/b8ecd6b6-94ac-468c-9cfa-b2c666c81a6c?section=extract

• https://avocode.com/

IDE + Livereload

• livestyle.io

Generators

• css3generator - генератор CSS3 свойств/эффектов

• Генератор Favicon

• Быстрая вставка изображений на страницу

• Генератор текста рыбы

• CSS triangle generator

• css arrow please - треугольник с обводкой

• Vertical Alignment

• Vertical Alignment Page

• Vertical Alignment Elements 01

• Vertical Alignment Elements 02

• Alignment elements[inline, float, flex]

• Resizeble text above image

• Все способы верт выравнивания Хабр

Menu/Nav

• https://codepen.io/MOgorodnik/pen/aLGERw

• Ex. hamburger

CSS3 animation

• animate.css

• Woah.css

• Hover.css

• Effeckt.css