HTML и CSS. Каталог ссылок для верстки

Подборка ссылок для верстки сайтов

верстка

Путь верстальщика

  1. http://glivera-team.github.io/how-to/2016/05/02/how-to-start.html
  2. https://medium.com/russian/
  3. http://krekotun.ru/ui-developer-skills
  4. http://krekotun.ru/level-up
  5. http://krekotun.ru/project-stages
  6. http://blog.flppv.me/all/frontend/
  7. Все вышеперечисленные статьи на одной странице

Уроки

  1. Как верстать на html5/css3 https://webref.ru/layout/howtocodeinhtml
  2. Уроки по html и css https://webref.ru/layout/learn-html-css/
  3. Как сверстать веб-страницу https://habrahabr.ru/post/202408/

Инструменты

  1. Коды HTML цветов и  коды HTML символов и еще символы HTML
  2. Коллекции HTML цветов (Material Design, iOS, Twitter и др)
  3. Подбор цвета HTML (генераторы цвета)
  4. Подбор цвета от Adobe https://color.adobe.com/ru
  5. Семейства шрифтов для сайта
  6. Photoshop. Горячие клавиши.
  7. CSS Сброс стилей reset.css (16 вариантов)
  8. Стартовый шаблон c сеткой bootstrap и js-плагинами
  9. HTML и CSS. Работа с формой
  10. Кратко про gulp
  11. http://fontello.com/  собрать иконки
  12. Валидаторы CSS и HTML http://jigsaw.w3.org/css-validator/ и http://validator.w3.org/
  13. Спецсимволы http://www.copypastecharacter.com/
  14. LiveReload http://go.livereload.com/extensions
  15. Emmet http://docs.emmet.io/abbreviations/syntax/
  16. GIMP http://gimp.org/
  17. Фото PlaceKitten http://placekitten.com/  и http://placehold.it/
  18. Фото http://lorempixel.com/
  19. Фон http://subtlepatterns.com/
  20. CSS3 Patterns http://lea.verou.me/css3patterns/
  21. Генератор CSS3 онлайн http://enjoycss.com/
  22. Генератор спрайтов http://ru.spritegen.website-performance.org/ и http://spritepad.wearekiss.com/ и http://css.spritegen.com/
  23. Шрифты http://webfont.ru/  и http://www.fontsquirrel.com/ и http://www.font2web.com/ и http://fontzone.net/
  24. Русские шрифты http://fonts4web.ru/
  25. Cufon http://cufon.shoqolate.com/generate/
  26. CSS Compress http://csscompressor.com/
  27. Format CSS Code http://www.cssportal.com/format-css/format.php
  28. CSS Shrink http://cssshrink.com/
  29. html to css http://bearcss.com/
  30. bxSlider http://bxslider.com/
  31. Modernizr http://modernizr.com/
  32. Form Builder http://www.wufoo.com/form-builder/
  33. Определение технологий сайта http://builtwith.com/
  34. Плагин masonry для верстки галереи http://masonry.desandro.com/
  35. Генератор иконок http://favicon-generator.org/ и http://realfavicongenerator.net/
  36. Советы по оптимизации https://developers.google.com/speed/pagespeed/insights/
  37. Text-shadow генератор http://westciv.com/tools/shadows/
  38. Генератор градиентов CSS
  39. Деминимизация CSS http://www.styleneat.com/
  40. Структура сайта http://csstemplater.com/
  41. Связка SASS и phpStorm

Теория

  1. БЭМ http://ru.bem.info/
  2. Can I use http://caniuse.com/

Статьи

  1. Общие советы по верстке c просторов интернета
  2. Чеклист верстки и наименование классов
  3. Критерии отсева резюме на junior-верстальщика
  4. Советы сеньоров для начинающих frontend программистов
  5. Тривиальные задачи по верстке http://habrahabr.ru/post/50065/
  6. Чек-лист верстки http://habrahabr.ru/post/114256/
  7. Границы и отступы в потоке http://softwaremaniacs.org/blog/2005/09/05/css-layout-flow-margins/#collapsing-margins
  8. Reset CSS  Meyer http://meyerweb.com/eric/tools/css/reset/index.html
  9. PhpStorm. Повышаем производительность http://habrahabr.ru/post/212077/
  10. CSS Паттерны http://css.yoksel.ru/css-patterns/
  11. Когда Photoshop отображает совсем не то, что надо  http://habrahabr.ru/post/67831/
  12. CSS спрайты http://habrahabr.ru/post/159027/
  13. Про подчеркивание http://prgssr.ru/development/sposoby-podcherkivaniya.html
  14. Про border https://www.quackit.com/html/codes/html_borders.cfm
  15. Про отступы в inline-block http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html

Видео

  1. HTML верстка на примере бизнес сайта http://www.youtube.com/watch?v=tGwoV_q4Mp4&list=PLyf8LgkO_8q_Lp86dcA3VWdtKa53RqIc4
  2. HTML/CSS Специалист Уровень 2 https://www.youtube.com/watch?v=eJiXQpatOVQ

Блоги

  1. Lea Verou  http://lea.verou.me/
  2. CSS-Tricks  http://css-tricks.com/