├── sections-adaptive ├── section-faq.md ├── section-7.md ├── section-6.md ├── section-4.md ├── section-8.md ├── section-3.md ├── section-2.md ├── section-9.md ├── section-5.md └── section-1.md ├── articles ├── алгоритм-выбора-сетки │ └── алгоритм-выбора-сетки.jpg ├── ошибки-бэм │ └── article.md ├── верстаем-локально │ └── article.md ├── типовые-названия-классов │ └── article.md ├── css-селекторы │ └── article.md ├── атомарные-коммиты │ └── article.md ├── критерии-сдачи-финального-проекта │ └── article.md ├── какой-препроцессор-выбрать │ └── article.md ├── чем-заняться-после-интенсива │ └── article.md └── как-понравиться-своему-наставнику │ └── article.md ├── sections ├── section-8.md ├── section-7.md ├── section-6.md ├── section-2.md ├── section-3.md ├── section-4.md ├── section-5.md ├── section-1.md ├── all-sections.md └── section-faq.md └── README.md /sections-adaptive/section-faq.md: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /articles/алгоритм-выбора-сетки/алгоритм-выбора-сетки.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tsergeytovarov/htmlacademy-basic-additional-material/HEAD/articles/алгоритм-выбора-сетки/алгоритм-выбора-сетки.jpg -------------------------------------------------------------------------------- /sections-adaptive/section-7.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Производительность верстки 4 | Тестируем и оптимизируем верстку. 5 | 6 | #### Статьи 7 | ---------- 8 | 9 | 10 | #### Скринкасты 11 | ---------- 12 | 13 | 14 | #### Другие материалы 15 | ---------- 16 | -------------------------------------------------------------------------------- /sections-adaptive/section-6.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Адаптивность: графика 4 | Адаптивные графика и медиаконтент, оптимизация, ретина, работа с SVG. 5 | 6 | #### Статьи 7 | ---------- 8 | [Использование SVG](http://frontender.info/using-svg/) 9 | 10 | [Переосмысление отзывчивого SVG](http://frontender.info/rethinking-responsive-svg/) 11 | 12 | [SVG в вебе. Практическое руководство](https://svgontheweb.com/ru/) 13 | -------------------------------------------------------------------------------- /sections-adaptive/section-4.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Адаптивность: сетки 4 | Резиновая верстка, медиавыражения, разные виды адаптивности. 5 | 6 | #### Статьи 7 | ---------- 8 | [Контент по центру, фон по ширине](https://isqua.ru/blog/2016/06/23/content-po-sentru-fon-po-shirinie/) 9 | 10 | #### Скринкасты 11 | ---------- 12 | 13 | 14 | #### Другие материалы 15 | ---------- 16 | [Визуализатор разницы между типами сеток](http://liquidapsive.com/) 17 | -------------------------------------------------------------------------------- /sections-adaptive/section-8.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Автоматизация 4 | Машины должны страдать! 5 | 6 | #### Статьи 7 | ---------- 8 | [Gulp или Grunt, да всё равно](http://frontender.info/gulp-grunt-whatever/) 9 | 10 | [Grunt для тех, кто считает штуки вроде него странными и сложными](http://frontender.info/grunt-is-not-weird-and-hard/) 11 | 12 | [Gulp — как глоток свежего воздуха после Grunt](http://frontender.info/no-need-to-grunt-take-a-gulp-of-fresh-air/) 13 | 14 | #### Скринкасты 15 | ---------- 16 | [Детально про Gulp и рецепты его использования](https://learn.javascript.ru/screencast/gulp) 17 | 18 | #### Другие материалы 19 | ---------- 20 | -------------------------------------------------------------------------------- /sections-adaptive/section-3.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Препроцессоры CSS 4 | Взглянем на LESS и SASS и разберемся как с ними работать. 5 | 6 | #### Статьи 7 | ----- 8 | [Sass: Структура каталога, которая поможет вам поддерживать код.](http://vanseodesign.com/css/sass-directory-structures/) 9 | 10 | [Чуть больше Sass для (БЭ)Модификаторов](http://frontender.info/bem-sass-modifiers/) 11 | 12 | [Путеводитель для новичков по CSS-препроцессору Less](https://mrmlnc.gitbooks.io/less-guidebook-for-beginners/content/) 13 | 14 | #### Скринкасты 15 | ----- 16 | [Обзор языка препроцессора SASS](https://www.youtube.com/watch?v=9vuvqH1gvxs&index=1&list=PLQPQDQeOswiX4D7VpMt_C9Cz2Bzdi4Fn3) 17 | -------------------------------------------------------------------------------- /sections-adaptive/section-2.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Методологии 4 | Методологии **БЭМ** и **SMACSS**. Приемы создания надежной верстки. 5 | 6 | #### Статьи 7 | ------ 8 | [Верстка для самых маленьких. Верстаем страницу по БЭМу](https://habrahabr.ru/post/203440/) 9 | 10 | [Типичные ошибки, которые совершают студенты начиная использовать БЭМ](https://github.com/tsergeytovarov/htmlacademy-basic-additional-material/blob/master/articles/ошибки-бэм/article.md) 11 | 12 | #### Скринкасты 13 | ------ 14 | [Скринкаст: небольшое введение в БЭМ и разметка страницы по БЭМ](https://www.youtube.com/watch?v=txUZrAQnSLg&list=PLQPQDQeOswiX4D7VpMt_C9Cz2Bzdi4Fn3&index=2) 15 | 16 | #### Видео 17 | ------ 18 | [БЭМ — норм, Вадим Макеев](https://youtu.be/RM55tkWfHDc) 19 | -------------------------------------------------------------------------------- /sections-adaptive/section-9.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Инструменты ускорения вёрстки 4 | Ускоряемся. Обзор фреймворков и библиотек компонентов. 5 | 6 | #### Статьи 7 | ---------- 8 | [Gulp или Grunt, да всё равно](http://frontender.info/gulp-grunt-whatever/) 9 | 10 | [Grunt для тех, кто считает штуки вроде него странными и сложными](http://frontender.info/grunt-is-not-weird-and-hard/) 11 | 12 | [Gulp — как глоток свежего воздуха после Grunt](http://frontender.info/no-need-to-grunt-take-a-gulp-of-fresh-air/) 13 | 14 | #### Скринкасты 15 | ---------- 16 | [Детально про Gulp и рецепты его использования](https://learn.javascript.ru/screencast/gulp) 17 | 18 | #### Другие материалы 19 | ---------- 20 | [Что должен знать HTML-верстальщик?](http://krekotun.ru/ui-developer-skills) 21 | -------------------------------------------------------------------------------- /sections/section-8.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | #### **Прогрессивное улучшение** 4 | Оптимизируем и «доводим до блеска» вёрстку с помощью прогрессивного улучшения. 5 | 6 | #### Статьи 7 | ---------- 8 | 9 | [Блог наставника. «Чем заняться после прохождения интенсива»](../articles/чем-заняться-после-интенсива/article.md) 10 | 11 | [Что должен знать HTML-верстальщик?](http://krekotun.ru/ui-developer-skills) 12 | 13 | #### Скринкасты 14 | ---------- 15 | [Сергей Попов. «Проверка проекта перед отправкой на финальную оценку»](https://youtu.be/1Fs-L46dHpM) 16 | 17 | #### Другие материалы 18 | ---------- 19 | [browserStack](https://www.browserstack.com/screenshots) — скриншоты браузера на различных устройствах 20 | 21 | [CanIUse](http://caniuse.com/) – поддержка различных свойств браузерами (есть еще [плагин для саблайма](https://github.com/Azd325/sublime-text-caniuse)) 22 | 23 | [htmllinks](http://htmllinks.ru/) — еще больше ссылок! 24 | -------------------------------------------------------------------------------- /sections-adaptive/section-5.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Флексбокс 4 | Основные понятия. Применение на практике. 5 | 6 | #### Статьи 7 | ---------- 8 | [Полное руководство по Flexbox](http://frontender.info/a-guide-to-flexbox/) 9 | 10 | [Как попасть в макет и не сойти с ума](https://isqua.ru/blog/2016/05/30/kak-popast-v-makiet-i-nie-soiti-s-uma/) 11 | 12 | [Краш-тест вёрстки](https://isqua.ru/blog/2016/06/19/crash-test-viorstki/) 13 | 14 | #### Другие материалы 15 | ---------- 16 | [Тренажер Flexbox](http://flexboxfroggy.com/#ru) 17 | 18 | [Изучаем flexbox, играя в Tower Defense](http://www.flexboxdefense.com/) 19 | 20 | [Песочница с демонстрацией основных свойств Flexbox](http://codepen.io/enxaneta/full/adLPwv/) 21 | 22 | #### Курсы 23 | ---------- 24 | 25 | [HTML Academy. Курс «Флексбокс, часть 1» (доступен по подписке)](https://htmlacademy.ru/courses/96) 26 | 27 | [HTML Academy. Курс «Флексбокс, часть 2» (доступен по подписке)](https://htmlacademy.ru/courses/113) 28 | -------------------------------------------------------------------------------- /sections/section-7.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Введение в JavaScript** 4 | Введение в JavaScript, написание простейших скриптов. 5 | 6 | #### Статьи 7 | ---------- 8 | [«Try jQuery»](https://www.codeschool.com/courses/try-jquery) — интерактивный курс по jQuery от Code School. 9 | 10 | [«You might not need jQuery»](http://youmightnotneedjquery.com/) — тебе не нужно использовать jquery 11 | 12 | #### Сдача проекта 13 | ---------- 14 | [Критерии сдачи финального проекта](../articles/критерии-сдачи-финального-проекта/article.md) 15 | 16 | #### Скринкасты 17 | ---------- 18 | [Сергей Попов. «Вставляем интерактивную карту»](https://youtu.be/FXT0zpss2x4) 19 | 20 | [Сергей Попов. «Проверка проекта перед отправкой на финальную оценку»](https://youtu.be/1Fs-L46dHpM) 21 | 22 | #### Другие материалы 23 | ---------- 24 | [Cниппеты для Sublime Text для быстрого написания js.](https://packagecontrol.io/packages/JavaScript%20%26%20NodeJS%20Snippets) 25 | 26 | [Owl carousel](http://www.owlcarousel.owlgraphic.com/) — мощный слайдер с подробной документацией и примерами. 27 | -------------------------------------------------------------------------------- /sections/section-6.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Оформление контента** 4 | Завершаем вёрстку проекта. 5 | 6 | #### Статьи 7 | ---------- 8 | [Хабр. «Принципы анимации для веба»](http://habrahabr.ru/company/htmlacademy/blog/255583/) 9 | 10 | [Хабр. «Одиннадцатиклассница, или тестируем баги вёрстки»](http://habrahabr.ru/company/2gis/blog/246831/) 11 | 12 | #### Скринкасты 13 | ---------- 14 | [Сергей Попов. «Работаем с иконочным шрифтом»](https://youtu.be/2-UH0bnYPHY) 15 | 16 | [Сергей Попов. «Кастомизация чекбоксов. Спрайт»](https://youtu.be/1lyqVf4tftc) 17 | 18 | [Сергей Попов. «Кастомизация чекбоксов. Иконочный шрифт»](https://youtu.be/m0-c75v4xvs) 19 | 20 | [Сергей Попов. «Кастомизация чекбоксов. Чистый CSS»](https://youtu.be/EE5ZhZslhAQ) 21 | 22 | [Сергей Попов. «Верстка проекта — часть 5. Шлифовка»](https://youtu.be/_8kVxOXpM_s) 23 | 24 | #### Другие материалы 25 | ---------- 26 | [Fontello](http://fontello.com/) — генератор иконочных шрифтов. В разделе [Help/Wiki](https://github.com/fontello/fontello/wiki) можно найти толковые образовательные материалы. 27 | 28 | [Icomoon](https://icomoon.io/app/) — похожий генератор шрифтов с дополнительным функционалом и другой базой. 29 | 30 | [Генератор спрайтов](http://spritegen.website-performance.org/) 31 | -------------------------------------------------------------------------------- /sections/section-2.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Разметка** 4 | Создаём базовую HTML-разметку страниц проекта. 5 | 6 | #### Курсы HTML Academy 7 | ---------- 8 | [«Знакомство с HTML5»](https://htmlacademy.ru/courses/73) 9 | 10 | #### Статьи 11 | ---------- 12 | [Хабр. «Как использовать секционные элементы HTML5»](http://habrahabr.ru/post/214407) 13 | 14 | [Доклад с Web Standards Days. «Семантика или смерть»](https://events.yandex.ru/lib/talks/1520) 15 | 16 | [Небольшая дискуссия на форуме на тему HTML5-тегов](http://discuss.htmlacademy.ru/t/html5-tegi/2336) 17 | 18 | #### Инструменты 19 | ---------- 20 | [Быстрая вставка замены для картинок](https://placehold.it/) 21 | 22 | #### Скринкасты 23 | ---------- 24 | [Сергей Попов. «Обзор работы веб-инспектора»](https://youtu.be/l3IeCrGNwbM) 25 | 26 | [Сергей Попов. «Вёрстка проекта — часть 2. Разметка»](https://youtu.be/vsHnPYJDBEU) 27 | 28 | [Сергей Попов. Разметка проекта по БЭМ.](http://www.youtube.com/watch?v=txUZrAQnSLg) 29 | 30 | #### Полезные материалы 31 | ---------- 32 | [Типовые названия классов HTML](../articles/типовые-названия-классов/article.md) 33 | 34 | [Сниппеты HTML](https://css-tricks.com/snippets/html/) 35 | 36 | [Краткая шпаргалка по HTML5 от html5doctor](https://pp.vk.me/c310120/v310120418/da6c/E3052HIBVE4.jpg) 37 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Дополнительные материалы для интенсивов 2 | Коллекция дополнительных материалов (скринкасты, статьи, инфографика) для прохождения базового интенсива. 3 | 4 | ## Базовый интенсив 5 | 6 | [Вводный раздел](/sections/section-1.md). 7 | 8 | [Разметка](/sections/section-2.md). 9 | 10 | [Фотошоп для верстальщика](/sections/section-3.md). 11 | 12 | [Сетки](/sections/section-4.md). 13 | 14 | [Декоративные элементы](/sections/section-5.md). 15 | 16 | [Оформление контента](/sections/section-6.md). 17 | 18 | [Введение в JavaScript](/sections/section-7.md). 19 | 20 | [Прогрессивное улучшение](/sections/section-8.md). 21 | 22 | [FAQ](/sections/section-faq.md). 23 | 24 | ## Продвинутый интенсив 25 | 26 | [Вводный раздел](/sections-adaptive/section-1.md) 27 | 28 | [Методологии](/sections-adaptive/section-2.md) 29 | 30 | [Препроцессоры CSS](/sections-adaptive/section-3.md) 31 | 32 | [Адаптивность: сетки](/sections-adaptive/section-4.md) 33 | 34 | [Флексбокс](/sections-adaptive/section-5.md) 35 | 36 | [Адаптивность: графика](/sections-adaptive/section-6.md) 37 | 38 | [Производительность верстки](/sections-adaptive/section-7.md) 39 | 40 | [Автоматизация](/sections-adaptive/section-8.md) 41 | 42 | [Инструменты ускорения вёрстки](/sections-adaptive/section-9.md) 43 | 44 | [FAQ](/sections-adaptive/section-faq.md). 45 | -------------------------------------------------------------------------------- /sections/section-3.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Фотошоп для верстальщика** 4 | Изучаем фотошоп, готовим графику и текстовые стили проекта. 5 | 6 | #### Статьи 7 | ---------- 8 | [Фотошоп для верстальщика](https://htmlacademy.ru/blog/51) 9 | [Блог наставника. «Поговорим о CSS селекторах»](../articles/css-селекторы/article.md) 10 | 11 | [Специфичность селекторов CSS](http://sixrevisions.com/css/css-specificity/) 12 | 13 | [Клавиатурное сокращение для быстрого копирования текста из фотошопа](https://gist.github.com/praveenvijayan/b4c367f4b903a3f9f250) 14 | 15 | [Как ещё можно вставить картинку в документ. Используем base64](http://front-end.su/2015/09/08/image-to-base64/) 16 | 17 | #### Скринкасты 18 | ---------- 19 | [Сергей Попов. «Верстка проекта — часть 1. Подготовка проекта и нарезка графики»](https://youtu.be/zugLe8Xrpd8) 20 | 21 | [Сергей Попов. «Верстка проекта Maguwohost. Подготовка проекта и нарезка графики»](http://www.youtube.com/watch?v=LpnEKBiONRg) 22 | 23 | [Сергей Попов. «Работа со шрифтами»](https://youtu.be/vXxOcCBLX4w) 24 | 25 | [Андрей Алексеев. «Обзор плагина для получения классов из разметки»](https://youtu.be/PI9_XGKoVP8) 26 | 27 | #### Другие материалы 28 | ---------- 29 | [Безопасные веб-шрифты](http://www.wearymax.ru/webmasters/fonts/) 30 | 31 | [Скачать фотошоп, бесплатная 30 дневная версия](https://creative.adobe.com/ru/products/download/photoshop) 32 | -------------------------------------------------------------------------------- /sections-adaptive/section-1.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## Вводный 4 | Знакомимся с Гитом и рабочим процессом на интенсиве. 5 | 6 | #### Статьи 7 | ---------- 8 | [Как использовать консоль в Windows](http://nicothin.ru/page/console-windows) 9 | 10 | [Как комфортно работать с GitHub в консоли Windows](http://nicothin.ru/page/kak-komfortno-rabotat-s-github-v-konsoli-windows) 11 | 12 | [Атомарные коммиты](https://github.com/tsergeytovarov/htmlacademy-basic-additional-material/blob/master/articles/атомарные-коммиты/article.md) 13 | 14 | [Github Workflow](https://www.atlassian.com/git/tutorials/comparing-workflows/forking-workflow) 15 | 16 | [Установка терминала на Windows](https://htmlacademy.ru/blog/83-installing-the-console-on-windows) 17 | 18 | [Регистрация на Гитхабе, работа через консоль](https://htmlacademy.ru/blog/84-register-on-github-work-with-console) 19 | 20 | [Регистрация на Гитхабе, работа через GitHub Desktop](https://htmlacademy.ru/blog/85-register-on-github-work-with-github-desktop) 21 | 22 | [Полезные команды для работы с Git](https://htmlacademy.ru/blog/86-useful-commands-for-working-with-git) 23 | 24 | [Установка Node.js](https://htmlacademy.ru/blog/87-installing-nodejs) 25 | 26 | [Полезные команды для работы с Node.js](https://htmlacademy.ru/blog/88-useful-commands-for-working-with-nodejs) 27 | 28 | [Глоссарий терминов для Git и GitHub](https://htmlacademy.ru/blog/81-git-and-github-glossary) 29 | 30 | #### Скринкасты 31 | ---------- 32 | 33 | 34 | #### Полезные материалы 35 | ---------- 36 | -------------------------------------------------------------------------------- /sections/section-4.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Сетки** 4 | Создаём сетку страниц проекта. 5 | 6 | #### Курсы HTML Academy 7 | ---------- 8 | [«Блочная модель документа»](https://htmlacademy.ru/courses/44) 9 | 10 | [«Сетки»](https://htmlacademy.ru/courses/65) 11 | 12 | #### Статьи 13 | ---------- 14 | [Блог HTML Academy. «Борьба с пробелами между блочно-строчными элементами»](https://htmlacademy.ru/blog/21) 15 | 16 | [«Загадочные отступы между инлайн-элементами (все решения в 1м месте)»](http://css-live.ru/articles/zagadochnye-otstupy-mezhdu-inlajn-blokami.html) 17 | 18 | [Контент по центру, фон по ширине](https://isqua.ru/blog/2016/06/23/content-po-sentru-fon-po-shirinie/) 19 | 20 | #### Скринкасты 21 | ---------- 22 | [Сергей Попов. «Сетки»](https://youtu.be/ftGOG1SqMFg) 23 | 24 | [Сергей Попов. «Модульные сетки»](https://youtu.be/gdzOooO4Dxo) 25 | 26 | #### Другие материалы 27 | ---------- 28 | [Алгоритм выбора float или inline-block](../articles/алгоритм-выбора-сетки/алгоритм-выбора-сетки.jpg) 29 | 30 | [Интерактивная блочная модель](http://codepen.io/carolineartz/full/ogVXZj/) 31 | 32 | [Сниппеты CSS](https://css-tricks.com/snippets/css/) 33 | 34 | [Справочник свойств CSS](http://tympanus.net/codrops/css_reference/) 35 | 36 | [Специфичность CSS селекторов](http://cssspecificity.com/#) 37 | 38 | #### Продвинутые материалы 39 | ---------- 40 | [Руководство по Flexbox](http://frontender.info/a-guide-to-flexbox/) 41 | 42 | [HTML Academy. Курс «Флексбокс, часть 1» (доступен по подписке)](https://htmlacademy.ru/courses/96) 43 | 44 | [HTML Academy. Курс «Флексбокс, часть 2» (доступен по подписке)](https://htmlacademy.ru/courses/113) 45 | 46 | [Песочница с демонстрацией основных свойств Flexbox](http://codepen.io/enxaneta/full/adLPwv/) 47 | 48 | [Тренажер Flexbox](http://flexboxfroggy.com/#ru) 49 | -------------------------------------------------------------------------------- /articles/ошибки-бэм/article.md: -------------------------------------------------------------------------------- 1 | #Типичные ошибки, которые совершают студенты начиная использовать БЭМ 2 | 3 | ###Лесенка 4 | 5 | Каждый внутренний блок начинается с имени элемента родителя. При этом, получается, что вложенные элементы не имеют никакого отношения к родителю. 6 | ```html 7 |
8 |
9 |
10 | ... 11 |
12 |
13 |
14 | ``` 15 | 16 | В данном случае, правильный вариант заключается в замене всех новых блоков на вложенные элементы 17 | ```html 18 |
19 |
20 |
21 | ... 22 |
23 |
24 |
25 | ``` 26 | 27 | ###Множественные элементы 28 | Каждый вложенный элемент получает не только класс блока, но и класс элемента родителя. 29 | ```html 30 | 37 | ``` 38 | Классы с несколькими вложенными элементами не допускаются. Верный вариант кода ниже. 39 | ```html 40 | 47 | ``` 48 | 49 | ###Потеря базового класса при использовании модификатора 50 | ```html 51 | 56 | ``` 57 | В данном примере вторая ссылка получит только стили модификатора, при этом базовые стили потеряны. Верный вариант, когда ссылка имеет и базовый класс и класс модификатор. 58 | ```html 59 | 64 | ``` 65 | -------------------------------------------------------------------------------- /articles/верстаем-локально/article.md: -------------------------------------------------------------------------------- 1 | #Верстаем локально 2 | 3 | Локальная работа с файлами - это стандартная работа любого верстальщика. 4 | 5 | Первое что необходимо узнать — это как устроена файловая система вашего проекта. Я буду рассказывать об этом на примере той системы, которую использую я. Возможны различные отклонения, но в среднем верстальщиками используется именно такая файловая система. 6 | 7 | В основной папке проекта создается файл `index.html`, в котором будет находится ваш HTML код для главной страницы. Для внутренних страниц будут создаваться свои файлы с названием, соответствующие их содержанию. Например, `catalog.html`. 8 | 9 | Помимо основного файла разметки, нам понадобятся еще картинки, стили и скрипты. Для этого в проекте создаются еще папки: 10 | 11 | * `css` — для основных стилей страницы; 12 | * `js` — для скриптов 13 | * `img` — для картинок. Допускается так же название `images`, и даже `i`. 14 | 15 | В папке `css` мы создаем файл со стилями, `style.css`, папку со шрифтами и папку для картинок, которые будут подключатся в стилях. По поводу последнего замечу, что картинки можно не разделять, а хранить их всех в одной папке на первом уровне. 16 | 17 | В папке `js` потом будут файлы для скриптов. Итоговая структура проекта: 18 | ```html 19 | -css //папка со стилями 20 | --fonts // папка со шрифтами 21 | --img // картинки для подключения из css 22 | --style.css // основной файл стилей 23 | -js // папка для скриптов 24 | -img // основные картинки 25 | -index.html // основной файл разметки 26 | ``` 27 | 28 | После того, как вы создали свою структуру вам необходимо создать базовую, минимальную разметку HTML, которую вы будете в последующем будете использовать во всех проектах. 29 | 30 | ```html 31 | 32 | 33 | 34 | 35 | Заголовок страницы 36 | 37 | 38 | 39 | 40 | 41 | 42 | ``` 43 | 44 | Созданные файлы можно сохранить и в последующем использовать как заготовку для проектов. 45 | -------------------------------------------------------------------------------- /articles/типовые-названия-классов/article.md: -------------------------------------------------------------------------------- 1 | # Типовые названия классов для html 2 | 3 | ### Основные классы лэйаута 4 | ```css 5 | /* Основная обёртка для страницы */ 6 | .wrapper, .content-wrapper, .page-wrapper 7 | 8 | /* Контейнер для контента - ширина и центровка */ 9 | .container, .inner-container 10 | 11 | /* Строка для колонок */ 12 | .row 13 | 14 | /* Колонка */ 15 | .col, .column 16 | 17 | /* Распорка или сброс float */ 18 | .row, .clearfix, .clear 19 | 20 | /* Элемент */ 21 | .item 22 | ``` 23 | 24 | ### Типовые блоки 25 | ```css 26 | /* хедер */ 27 | .header, .main-header, .page-header, .content-header, .*-header 28 | 29 | /* футер */ 30 | .footer, .main-footer, .page-footer, .content-footer, .*-footer 31 | 32 | /* навигация */ 33 | .main-navigation, .page-navigation, .navigation, .menu, .main-menu 34 | 35 | /* основной конетнт */ 36 | .content, .main-content, .*-content 37 | 38 | /* боковая колонка */ 39 | .sidebar, .page-sidebar 40 | 41 | /* хлебные крошки */ 42 | .breadcrumbs, .breadcrumb 43 | 44 | /* постраничная навигация */ 45 | .pagination 46 | 47 | /* карта, интерактиваня карта */ 48 | .map, .map-canvas 49 | 50 | /* типовой блок с конетнтом */ 51 | .block, .box 52 | 53 | /* список */ 54 | .list, .*-list 55 | 56 | /* таблица */ 57 | .table, .*-table 58 | 59 | /* изображение */ 60 | .image, .img, .picture 61 | 62 | /* кнопка */ 63 | .btn, .button 64 | 65 | /* владелец */ 66 | .copyright 67 | 68 | /* контакты */ 69 | .contacts 70 | 71 | /* обратная связь */ 72 | .feedback 73 | ``` 74 | 75 | ### Состояния элементов 76 | ```css 77 | /* фиксированное положение на странице */ 78 | .fixed, .sticky 79 | 80 | /* активный элемент, пункт меню, вкладка и т.д.*/ 81 | .active, .selected 82 | 83 | /* неактивный, заблокированный */ 84 | .disabled, .inactive 85 | 86 | /* скрытый */ 87 | .hidden, .*-hidden 88 | ``` 89 | 90 | ### Указатели 91 | ```css 92 | /* Следующий */ 93 | .next, .forward 94 | 95 | /* Предыдущий */ 96 | .prev, .previous 97 | 98 | /* Назад */ 99 | .back 100 | ``` 101 | -------------------------------------------------------------------------------- /sections/section-5.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Декоративные элементы** 4 | Оформляем мелкие детали проекта. 5 | 6 | #### Статьи 7 | ---------- 8 | [Полное руководство по центрированию в CSS](http://frontender.info/centering-css-complete-guide/) 9 | 10 | [Как попасть в макет и не сойти с ума](https://isqua.ru/blog/2016/05/30/kak-popast-v-makiet-i-nie-soiti-s-uma/) 11 | 12 | [Краш-тест вёрстки](https://isqua.ru/blog/2016/06/19/crash-test-viorstki/) 13 | 14 | #### Аналоги google-font'а и генераторы 15 | ---------- 16 | [fonts4web](http://fonts4web.ru/) — поиск русскиx шрифтов 17 | 18 | [webfont](http://webfont.ru/) — поиск разных шрифтов 19 | 20 | [Fontsquirrel generator](http://www.fontsquirrel.com/tools/webfont-generator) — генератор шрифтов 21 | 22 | [Web font generator](https://www.web-font-generator.com/) — и ещё один 23 | 24 | #### Скринкасты 25 | ---------- 26 | [Сергей Попов. «Вёрстка проекта — часть 3(1). Стилизация»](https://youtu.be/RqKF9azJMZA) 27 | 28 | [Сергей Попов. «Вёрстка проекта — часть 3(2). Стилизация»](https://youtu.be/Towu-6QHc3g) 29 | 30 | [Сергей Попов. «Вёрстка проекта — часть 4. Стилизация»](https://youtu.be/5kCTWhnU4nM) 31 | 32 | [Сергей Попов. Обзор приложения Prepros](http://www.youtube.com/watch?v=trzyAu2KwUY) 33 | 34 | [Сергей Попов. Введение в препроцессор SASS](http://www.youtube.com/watch?v=9vuvqH1gvxs) 35 | 36 | #### Попиксельное соответствие 37 | ---------- 38 | [pixLayout](http://pixlayout.polycreative.ru/) – jquery плагин, накладывающий изображение на верстку. 39 | *Как подключить:* Создайте в корне проекта папку `«_assets»`, скопируйте туда скрипт и библиотеку [jquery](http://jquery.com/download/), [вставьте скрипты](http://codepad.co/s/e0b78a) перед закрывающим ``. 40 | 41 | [PerfectPixel](https://chrome.google.com/webstore/detail/perfectpixel-by-welldonec/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=ru) — плагин для Chrome 42 | 43 | [Pixel Perfect](https://addons.mozilla.org/en-us/firefox/addon/pixel-perfect/) — плагин для Firefox 44 | 45 | 46 | #### Другие материалы 47 | ---------- 48 | [Список распространенных ошибок, дилемм и затруднительных ситуаций в HTML и CSS.](http://wtfhtmlcss.com/)([перевод](http://elforastero.github.io/wtf-html-css/)) 49 | -------------------------------------------------------------------------------- /articles/css-селекторы/article.md: -------------------------------------------------------------------------------- 1 | # CSS селекторы 2 | 3 | ## Что такое CSS селекторы 4 | Селекторы — это то, как мы выбираем необходимый нам элемент HTML документа, для того, чтобы добавить к нему какие-либо стили. 5 | 6 | ## Какие бывают селекторы 7 | Рассмотрим селекторы, с которыми вы будете сталкиваться. 8 | 9 | #### Селектор по тегу 10 | 11 | ```css 12 | h1{} 13 | div{} 14 | article{} 15 | ``` 16 | 17 | #### Селектор по классу 18 | 19 | ```css 20 | .wrapper{} 21 | .main-header{} 22 | ``` 23 | 24 | ### Селектор по идентификатору 25 | 26 | ```css 27 | #main{} 28 | #header{} 29 | ``` 30 | 31 | #### Каскад селекторов 32 | 33 | ```css 34 | #main .container{} 35 | header nav ul .active{} 36 | .container .item{} 37 | ``` 38 | 39 | #### Спаренные селекторы 40 | 41 | ```css 42 | .navigation-item.active{} 43 | .header.big-header.green-header{} 44 | ``` 45 | 46 | Спаренные селекторы позволяют выбрать элемент ```html```, у которого есть все перечисленные классы. 47 | 48 | #### Дочерний селектор 49 | 50 | ```css 51 | .wrapper > .header{} /* выберет блок с классом header только на первом уровне внутри wrapper */ 52 | .container > h2{} 53 | ``` 54 | 55 | #### Селекторы состояния или действия 56 | 57 | ```css 58 | a:hover{} /* ссылка при наведении */ 59 | a:vizited{} /* посещённая ссылка */ 60 | .btn:active{} /* элемент с классом при нажатии */ 61 | .input[type='text']:focus{} /* фокус на текстовом поле */ 62 | ``` 63 | 64 | #### Псевдокласс для элементов по порядковому номеру 65 | 66 | ```css 67 | nav a:nth-child(2){} /*выберет вторую ссылку внутри блока nav */ 68 | .catalog .catolog-item:nth-child(8){} /*выберет восьмой элемент каталога */ 69 | ``` 70 | 71 | #### Псевдокласс для первого элемента 72 | 73 | ```css 74 | nav a:first-child{} /* выберет первую ссылку внутри блока nav */ 75 | .catalog .catolog-item:first-child{} /* выберет первый элемент каталога */ 76 | ``` 77 | 78 | #### Псевдокласс для последнего элемента 79 | 80 | ```css 81 | nav a:last-child{} /* выберет последнюю ссылку внутри блока nav */ 82 | .catalog .catolog-item:last-child{} /* выберет последний элемент каталога */ 83 | ``` 84 | 85 | #### Селектор соседних элементов 86 | 87 | ```css 88 | h1 + p /* параграф, следующий сразу за заголовком первого уровня */ 89 | ``` 90 | -------------------------------------------------------------------------------- /sections/section-1.md: -------------------------------------------------------------------------------- 1 | [Вернуться к списку разделов.](../README.md) 2 | 3 | ## **Вводный** 4 | Создаём скелет проекта: структуру папок и файлы-заготовки. 5 | 6 | #### Статьи 7 | ---------- 8 | [Блог HTML Academy. «Обзор текстовых редакторов для верстальщика»](https://htmlacademy.ru/blog/40) 9 | 10 | [Как понравиться своему наставнику](../articles/как-понравиться-своему-наставнику/article.md) 11 | 12 | [Верстаем локально](../articles/верстаем-локально/article.md) 13 | 14 | [Хабр. «Что на самом деле происходит, когда пользователь вбивает в браузер адрес»](http://habrahabr.ru/company/htmlacademy/blog/254825/) 15 | 16 | [История HTML](http://htmleditors.ru/Rasnoe/history/history1.html) 17 | 18 | [Совет разработчика: делайте "атомарные коммиты"](../articles/атомарные-коммиты/article.md) 19 | 20 | #### Emmet 21 | ---------- 22 | [Cайт проекта](http://emmet.io) 23 | 24 | [Шпаргалка](http://docs.emmet.io/cheat-sheet/). Cразу в закладки 25 | 26 | [Тренажёр](http://epixx.ru/emmet) 27 | 28 | #### Скринкасты 29 | ---------- 30 | [Сергей Попов. «Основы работы с Git»](https://youtu.be/Oyj5yVVrT4Q) 31 | 32 | #### Текстовые редакторы 33 | ---------- 34 | [Обзор работы в текстовом редакторе Sublime Text 3 и полезных плагинов для него](http://aalexeev239.github.io/sublime-presentation/) 35 | 36 | [Скачать текстовый редактор Sublime Text 3](http://www.sublimetext.com/3) 37 | 38 | [Скачать текстовый редактор Brackets](http://brackets.io/) 39 | 40 | [Скачать текстовый редактор Atom](https://atom.io/) 41 | 42 | [Установка и настройка текстового редактора Atom и дополнительных плагинов для него](https://medium.com/@zakharday/используем-atom-для-первой-вёрстки-8e2ff7aa9ffe#.rcm2b3p0r) 43 | 44 | #### Песочницы 45 | ---------- 46 | [codepen](http://codepen.io/) 47 | 48 | [jsfiddle](https://jsfiddle.net) — для совместной работы. 49 | 50 | #### Полезные материалы 51 | ---------- 52 | [Словарь терминов по фронтенду](https://github.com/web-standards-ru/dictionary) 53 | 54 | [Пост про вёрстку от Алексея Федосова](https://vk.com/wall300030_7828) 55 | 56 | [Копилка ссылок на форуме Академии](http://discuss.htmlacademy.ru/t/poleznye-ssylki-i-materialy/378) 57 | 58 | #### Справочники по HTML/CSS 59 | ---------- 60 | [developer.mozilla.org](https://developer.mozilla.org/ru) 61 | 62 | [css-tricks «almanac»](https://css-tricks.com/almanac) 63 | 64 | [html5doctor](http://html5doctor.com/) 65 | 66 | [tympanus «css_reference»](http://tympanus.net/codrops/css_reference) 67 | -------------------------------------------------------------------------------- /sections/all-sections.md: -------------------------------------------------------------------------------- 1 | #### Статьи 2 | ---------- 3 | #### Статьи академии 4 | 5 | [Принципы анимации для веба](http://habrahabr.ru/company/htmlacademy/blog/255583/) 6 | 7 | [Обзор текстовых редакторов для верстальщика](https://htmlacademy.ru/blog/40) 8 | 9 | [Что на самом деле происходит, когда пользователь вбивает в браузер адрес](http://habrahabr.ru/company/htmlacademy/blog/254825/) 10 | 11 | #### Мои статьи 12 | 13 | [Поговорим о CSS селекторах](../articles/css-селекторы/article.md) 14 | 15 | [Как понравиться своему наставнику](../articles/как-понравиться-своему-наставнику/article.md) 16 | 17 | [Верстаем локально](../articles/верстаем-локально/article.md) 18 | 19 | [Типичные ошибки, которые совершают студенты начиная использовать БЭМ](../articles/ошибки-бэм/article.md) 20 | 21 | [Какой препроцессор выбрать?](../articles/какой-препроцессор-выбрать/article.md) 22 | 23 | [Критерии сдачи финального проекта](../articles/критерии-сдачи-финального-проекта/article.md) 24 | 25 | [Чем заняться после прохождения интенсива](../articles/чем-заняться-после-интенсива/article.md) 26 | 27 | #### Другие статьи 28 | 29 | [Сниппеты HTML](https://css-tricks.com/snippets/html/) 30 | 31 | [Сниппеты CSS](https://css-tricks.com/snippets/css/) 32 | 33 | [Справочник свойств CSS](http://tympanus.net/codrops/css_reference/) 34 | 35 | #### Скринкасты 36 | ---------- 37 | [Основы работы с Git](https://www.youtube.com/watch?v=Oyj5yVVrT4Q) 38 | 39 | [Обзор текстового редактора Sublime Text](https://www.youtube.com/watch?v=zdQ8Lyg58ak) 40 | 41 | [Сетки](https://www.youtube.com/watch?v=ftGOG1SqMFg) 42 | 43 | [Модульные сетки](https://www.youtube.com/watch?v=gdzOooO4Dxo) 44 | 45 | [Обзор работы веб-инспектора](https://www.youtube.com/watch?v=l3IeCrGNwbM) 46 | 47 | [Работа со шрифтом](https://www.youtube.com/watch?v=vXxOcCBLX4w) 48 | 49 | [Работаем с иконочным шрифтом](https://www.youtube.com/watch?v=2-UH0bnYPHY) 50 | 51 | [Проверка проекта перед отправкой на финальную оценку](https://www.youtube.com/watch?v=1Fs-L46dHpM) 52 | 53 | [Вставляем интерактивную карту](https://www.youtube.com/watch?v=FXT0zpss2x4) 54 | 55 | [Кастомизация чекбоксов - спрайт](https://www.youtube.com/watch?v=1lyqVf4tftc) 56 | 57 | [Кастомизация чекбоксов - иконочный шрифт](https://www.youtube.com/watch?v=m0-c75v4xvs) 58 | 59 | [Кастомизация чекбоксов - чистый CSS](https://www.youtube.com/watch?v=EE5ZhZslhAQ) 60 | 61 | [Верстка проекта - часть 1 - подготовка проекта и нарезка графики](https://www.youtube.com/watch?v=zugLe8Xrpd8) 62 | 63 | [Верстка проекта - часть 2 - разметка](https://www.youtube.com/watch?v=vsHnPYJDBEU) 64 | 65 | [Верстка проекта - часть 3(1) - стилизация](https://www.youtube.com/watch?v=RqKF9azJMZA) 66 | 67 | [Верстка проекта - часть 3(2) - стилизация](https://www.youtube.com/watch?v=Towu-6QHc3g) 68 | 69 | [Верстка проекта - часть 4 - стилизация](https://www.youtube.com/watch?v=5kCTWhnU4nM) 70 | 71 | [Верстка проекта - часть 5 - шлифовка](https://www.youtube.com/watch?v=_8kVxOXpM_s) 72 | 73 | #### Другие материалы 74 | ---------- 75 | 76 | #### Презентации 77 | [Обзор работы в текстовом редакторе Sublime Text 3 и полезных плагинов для него](http://aalexeev239.github.io/sublime-presentation/) 78 | 79 | #### Ссылки на программы 80 | [Скачать текстовый редактор Sublime Text 3](http://www.sublimetext.com/3) 81 | 82 | [Скачать текстовый редактор Brackets](http://brackets.io/) 83 | 84 | [Скачать текстовый редактор Atom](https://atom.io/) 85 | -------------------------------------------------------------------------------- /articles/атомарные-коммиты/article.md: -------------------------------------------------------------------------------- 1 | #Совет разработчика: делайте "атомарные коммиты" (перевод) 2 | 3 | Контроль исходного кода - лучший друг разработчика. Возможности поделиться кодом с другими разработчиками, отслеживать изменения и возможность легко откатиться назад, когда возникают проблемы, необходимы в распределенном мире. 4 | 5 | Вопрос, который часто возникает при начале работы с системами контроля версий (независимо, что вы используете: Git, SVN, TFS и др.) - "Какие изменения фиксировать и как часто это делать?". Мой ответ - делать изменения настолько малыми и "атомарными" насколько возможно. 6 | 7 | ##"Атомарные" коммиты. 8 | 9 | "Атомарные" изменения производятся для одной задачи или одного исправления. 10 | 11 | Я получил письмо со списком изменений макета и исправлениями багов, которые нужно сделать в веб-приложении, над которым я работаю. Все эти изменения очень простые. Один из подходов был в том, чтобы сделать все простые изменения/исправления, закоммитить их в репозитории и закончить с этим. Однако, что произойдет, если исправления багов вызовут другие ошибки или не решат проблему на самом деле? 12 | 13 | Лучшие практики говорят, что вы должны откатить назад свой текущий коммит, сделать правильные исправления и затем закоммитить изменения/исправления снова. Однако, если бы вы так сделали, вы потеряли бы все изменения макета (которые работали хорошо) и вы бы делали дополнительную работу по повторному применению изменений макета. Дополнительно, создание коммита "исправление исправления багов" - не очень хороший подход. 14 | 15 | Вместо этого можно сделать один коммит для исправления ошибок и еще один коммит для изменения макета. В таком случае легко откатиться назад в исправлении ошибок без отката изменений макета. Я бы даже сказал, что стоит делать коммиты каждого изменения макета, потому что это упрощает изменение макета на лету или легко откатить назад изменение цвета без влияния на другие связанные изменения. 16 | 17 | Когда разрабатываются новые функции, атомарные коммиты будут часто содержать множество файлов: файл макета, behind-код файлы и дополнительные ресурсы, которые могут быть добавлены/модифицированы. Вы не захотите коммитить всех эти файлы отдельно, потому что если вы откатите приложения к состоянию до того, как была добавлена функция, это затронет множество коммитов и может привести к путанице. Также это поможет при слиянии с другими ветками, потому что Вы можете легко выбрать единственный коммит для слияния и все связанные файлы будут объединены. Я использовал это несколько раз с большим успехом. 18 | 19 | Обычные мысли новичков при работе с контролем исходного кода - это коммитить "в конце рабочего для" или "каждый раз, когда я захочу" или каждый раз, когда партия исправлений готова. Избегайте этого и учитывайте, что такое "атомарный" блок работы и выполняйте коммит только когда он завершен. Это может сделать вашу историю коммитов более многословной, но в конце концов это сделает ваш проект более гибким для исправления ошибок, миграций функций и откатов. 20 | 21 | ###Атомарный подход 22 | - Делать коммиты каждого исправления или задачи отдельно 23 | - Делать коммит только когда блок работы завершен 24 | - Делать коммит каждого изменения макета отдельно 25 | - Включать в коммит файлы макета, файлы behind-кода и дополнительные ресурсы 26 | 27 | ###Преимущества 28 | - Легкий откат без влияния на другие изменения 29 | - Легко делать другие изменения на лету 30 | - Легко сливать функции в другие ветки 31 | 32 | [Оригинальная статья: Developer tip: keep your commits “atomics”. Sean Patterson](http://www.freshconsulting.com/atomic-commits/) 33 | -------------------------------------------------------------------------------- /articles/критерии-сдачи-финального-проекта/article.md: -------------------------------------------------------------------------------- 1 | #Критерии сдачи финального проекта 2 | 3 | ##Базовые критерии: 4 | 5 | 1. Выполнена HTML-разметка всех страниц и всех элементов на страницах. 6 | 2. Один стилевой файл на все страницы (с учётом `normalize.css` можно два). 7 | 3. Вёрстка идентично отображается в последних версиях браузеров Chrome, Opera, Firefox, Safari, а также в Internet Explorer 10+. 8 | 4. Сайт должен нормально смотреться на минимальном для данного макета разрешении: 9 | * Нердс – 890px 10 | * Техномарт – 940px 11 | * Седона – 768px 12 | 5. В корне документа должны быть папки `css`, `img`, `js` или аналогичные. Главная страница имеет название `index.html`. В названиях и расширениях файлов нет заглавных букв и пробелов. 13 | 6. Единообразное написание и форматирование кода в HTML, CSS и JavaScript. 14 | 7. Грубые ошибки в разметке отсутствуют. Например: 15 | * Грубые ошибки: 16 | * ссылки сделаны не тегом ``, а другими тегами; 17 | * использование строчных элементов для создания крупных (сеточных) блоков. 18 | * Абзацы должны быть абзацами, а не `

`. 19 | * Не грубые ошибки: 20 | * отсутствие семантических тегов 21 | * ошибки касающиеся SEO оптимизации 22 | 8. Нельзя строить сетку с помощью таблиц и позиционирования. 23 | 9. Не использовать `!important` в CSS. 24 | 10. При наполнении контентом как на макете элементы каждой страницы должны соответствовать макету: 25 | * Допускаются различия в 5 пикселей по высоте и 2 пикселя по ширине; (проверять на глаз) 26 | * Допускаются отсутствия стилизации кастомных элементов форм; 27 | * Допускаются различия в отображении шрифтов, связанные со сглаживанием на различных платформах; 28 | * Должны быть подключены правильные шрифты, а их размеры и толщина должны соответствовать размерам в макетах и ТЗ. 29 | 11. Выбран правильный формат изображений: 30 | * JPEG для фотографий; 31 | * Всё остальное в PNG. 32 | 12. Документ должен проходить проверку на валидность http://validator.w3.org 33 | 34 | ##Дополнительные критерии 35 | 1. Нельзя использовать транслит в названиях классов, атрибутах и так далее. 36 | 2. Нельзя использовать `#id` для стилизации. 37 | 3. Нельзя использовать вложенность селекторов больше двух. 38 | 4. Необходимо подключить `normalize.css` к вёрстке отдельным файлом. 39 | 5. Необходимо явно указать подходящее `vertical-align` для всех блоков с `display: inline-block`. 40 | 6. Необходимо указать альтернативные варианты шрифта и тип семейства в конце перечисления. 41 | 7. Необходимо расположить CSS-префиксы в правильном порядке. 42 | 8. Необходимо явно прописывать цвет фона для блока у которого есть фоновое изображение. Цвет должен соответствовать преобладающему цвету фонового изображения. 43 | 9. Необходимо, чтобы все состояния элементов из styleguide.psd были использованы. 44 | 10. Необходимо, чтобы при взаимодействии с элементами (наведение, нажатие) ни сам элемент, ни окружающие его блоки не меняли своего положения (если иное не прописано в ТЗ или slyleguide.psd). (ничего не должно прыгать) 45 | 11. Необходимо использовать: 46 | * Спрайты для изображений или иконочный шрифт; 47 | * минимизация CSS-кода; 48 | * минимизация JavaScript-кода. 49 | 12. Необходимо у всех изображений в теге `` прописать размер. 50 | 13. Вёрстка проходит тест на переполнение контентом. Вёрстка не ломается: 51 | * При добавлении в элементы большего количества текста; 52 | * При использовании картинок с неподходящими размерами; 53 | * Текст не должен выпадать из объектов; 54 | * Переполнение контентными блоками не приводит к нарушению сетки 55 | 14. Необходимо подключить все скрипты непосредственно перед ``` 56 | 15. С помощью JavaScript реализовано открытие/закрытие окна с формой (без JS-библиотек). 57 | 16. С помощью JavaScript добавлена интерактивная карта. 58 | 17. С помощью JavaScript добавлена анимация формы (без JS-библиотек). 59 | 18. Необходимо использовать минимально возможное количество элементов HTML. 60 | 19. Необходимо использовать подход Progressive Enhancement, например: 61 | * Кнопка с формой ведёт на отдельную страницу; 62 | * Интерактивная карта без JavaScript показывает статичную картинку с картой. 63 | -------------------------------------------------------------------------------- /articles/какой-препроцессор-выбрать/article.md: -------------------------------------------------------------------------------- 1 | #Какой препроцессор выбрать? 2 | 3 | ##Из каких препроцессоров будем выбирать? 4 | 5 | Рекомендации по выбору препроцессора я буду давать только на основании собственного мнения и опыта использования. В своей работе, в разные периоды, я использовал `LESS`, `SASS` и `SCSS`. 6 | 7 | ###SASS и SCSS 8 | Мы не будем рассматривать `SASS` в чистом виде, так как его старый синтаксис был заменен на синтаксис `SCSS`, и в данный момент `SCSS` по сути и есть `SASS`. 9 | 10 | Напомню синтаксис `SASS`: 11 | 12 | ```SASS 13 | nav 14 | ul 15 | margin: 0 16 | list-style: none 17 | 18 | li 19 | display: inline-block 20 | ``` 21 | 22 | Для сравнения этот же кусок на `SCSS`: 23 | 24 | ```SCSS 25 | nav{ 26 | ul{ 27 | margin: 0; 28 | list-style: none; 29 | } 30 | 31 | li{ 32 | display: inline-block; 33 | } 34 | } 35 | ``` 36 | Синтаксис `SCSS` более похож на `CSS`. 37 | 38 | Таким образом мы будем рассматривать **LESS** и **SASS, в виде синтаксиса SCSS**. 39 | 40 | ##Синтаксис 41 | Синтаксис `LESS` и `SASS` практически идентичен, во-всяком случае в том, что касается базовых функций. Разницу составляет только объявление переменных. 42 | 43 | ```SASS 44 | $primary-color: #333; /* SASS */ 45 | @primary-color: #333; /* LESS */ 46 | ``` 47 | ##Технологии 48 | Компилятор `LESS` написан на `JS` и не требует дополнительных библиотек для своей работы. Его даже можно запускать прямо в браузере, на компьютере клиента. 49 | 50 | В свою очередь, компилятор `SASS` написан на `Ruby`, а это значит, что для его работы необходима соответствующая библиотека. Например, на Windows при компиляции через стандартный плагин для `Grunt`, он будет требовать установки этой библиотеки. 51 | 52 | Недавно появился компилятор `libSass`, написанный на языке C. 53 | 54 | ##Распространенные заблуждения 55 | 56 | ###У SASS есть Compass, поэтому он круче. 57 | Compass, грубо говоря, это библиотека готовых миксинов для написания кроссбраузерных свойств `CSS`. В данный момент с учетом существования постпроцессоров, в частности, `autoprefixer`, данное преимущество `SASS` уже не выглядит преимуществом. 58 | 59 | ###В LESS нет циклов, а у SASS они есть. 60 | Для создания циклов в `SASS` используется следующий синтаксис: 61 | 62 | ```SASS 63 | @for $i from 1 through 3 { 64 | .item-#{$i} { width: 2em * $i; } 65 | } 66 | ``` 67 | 68 | Результат: 69 | ```CSS 70 | .item-1{ width: 2em;} 71 | .item-2{ width: 4em;} 72 | .item-3{ width: 6em;} 73 | ``` 74 | Для создания циклов в `LESS` используется следующий синтаксис: 75 | 76 | ```LESS 77 | .loop(@counter) when (@counter > 0) { 78 | .loop((@counter - 1)); // следующая итерация 79 | width: (10px * @counter); // код, которые генерируется итерацией 80 | } 81 | 82 | div { 83 | .loop(5); // вызов цикла 84 | } 85 | ``` 86 | 87 | Результат: 88 | ```CSS 89 | div { 90 | width: 10px; 91 | width: 20px; 92 | width: 30px; 93 | width: 40px; 94 | width: 50px; 95 | } 96 | ``` 97 | 98 | ###В `LESS` нет логических условий, а у `SASS` они есть. 99 | Скорее в `SASS` они задаются проще и логичнее. 100 | 101 | ```SASS 102 | $type: monster; 103 | p { 104 | @if $type == ocean { 105 | color: blue; 106 | } @else if $type == monster { 107 | color: green; 108 | } 109 | } 110 | ``` 111 | 112 | Результат: 113 | ```CSS 114 | p{ border: 1px solid;} 115 | ``` 116 | 117 | В `LESS` логическое выражение можно задать через циклы. 118 | ```LESS 119 | @type: monster; 120 | p { 121 | .mixin(@type) when (@type == ocean) { 122 | color: blue; 123 | } 124 | .mixin(@type) when (@type == monster) { 125 | color: green; 126 | } 127 | } 128 | ``` 129 | 130 | Поэтому условные выражения на `LESS` реальны, но не так удобны. 131 | 132 | ##Реальные преимущества `SASS` 133 | 134 | ###@extend 135 | Функция `@extend` позволяет не просто скопировать содержимое одного класса в другой, но и вынести их общие стили в один селектор. Например: 136 | 137 | ```SASS 138 | .reset{ 139 | margin: 0; 140 | padding: 0; 141 | } 142 | 143 | .class{ 144 | @extend .reset; 145 | font-size: 2em; 146 | line-height: 2; 147 | } 148 | ``` 149 | 150 | Результат: 151 | ```CSS 152 | .reset, 153 | .class{ 154 | margin: 0; 155 | padding: 0; 156 | } 157 | 158 | .class{ 159 | font-size: 2em; 160 | line-height: 2; 161 | } 162 | ``` 163 | 164 | Однако использовать его надо аккуратно, чтобы не возникало огромных селекторов с большим количеством элементов, указанных через запятую. 165 | 166 | ###Функциональные возможности 167 | `SASS` все-таки более близок к языкам программирования. Даже то, насколько проще задаются условные выражения по-сравнению с `LESS` уже говорит о больших функциональных возможностях. При этом в `SASS` есть еще разные типы циклов и множество других интересных возможностей. 168 | 169 | ##Выводы 170 | Не смотря на перевес `SASS` с точки зрения доступного функционала, необходимо отметить, что `LESS` обладает всеми необходимыми функциями, которые помогают верстальщику в работе. Большинство функций `SASS` я так и не стал использовать в повседневной практике, большинство задач можно решить и без них. 171 | Учитывая это, на данный момент времени, я считаю `SASS` более продвинутым, но отдаю предпочтение `LESS`. 172 | -------------------------------------------------------------------------------- /articles/чем-заняться-после-интенсива/article.md: -------------------------------------------------------------------------------- 1 | #Чем заняться после прохождения интенсива 2 | 3 | Для многих, прохождения интенсива недостаточно, чтобы стать верстальщиком. Если перед началом интенсивом знания отсутствовали, то потребуется время на саморазвитие. В такой ситуации вам пригодятся следующие советы. 4 | 5 | ##Не лезьте на рожон 6 | Студенты, заканчивающие базовый интенсив, еще не готовы к серьезной работе верстальщиком в студии или на фрилансе. Отправлять резюме сразу после окончания интенсива не вариант. У вас недостаточно знаний, либо они не закреплены, а студии в первую очередь нацеливаются на собственный результат и их не волнует ваше развитие. Им нужен результат. Вам же нужно развитие. 7 | 8 | ##Не лезьте вперед 9 | Изучение новых технологий — необходимая вещь. Но не прямо сейчас. В вашей голове много информации, которая требует закрепления. Препроцессоры, методологии, адаптивные шаблоны — это необходимо изучить позже. Для начала важно закрепить те знания, что вы получили сейчас, чтобы на этом прочном фундаменте уже строить остальное. 10 | 11 | ##Не бросать практику 12 | Полученные знания обширны, свежи и не закреплены. Перерыв в две-три недели и половина полученной информации успеет благополучно забыться и потеряться. Для закрепления полученных навыков надо плотно заняться практикой. На интенсиве представлены три личных учебных макета — сверстайте их! Сверстали? Найдите еще макеты. Да, пусть макеты будут простые, фиксированные и без обилия элементов, и тем не менее — это практика. Ваша задача перестать делать ошибки в базовых компонентах. Попробуйте сайты с разными типами шаблонов, попробуйте резиновые шаблоны. Ни один встречающийся вам шаблон не должен в будущем вызывать у вас проблемы и вопросы, вы будете просто переводить PSD в HTML. 13 | 14 | Рассмотренные советы показывают, что для дальнейшего продвижения нужно потратить еще как минимум полтора-два месяца на саморазвитие. За это время вы должны научиться хорошо верстать, делая минимум ошибок и недоработок. После этого начинайте изучать другие технологии, которые позволят вам ускорить написание кода, а соответственно и скорость верстки макетов. 15 | 16 | Алгоритм действий на ближайшее время такой: 17 | 18 | * Сверстайте учебные макеты Академии. Верстайте максимально похоже на макет. Проверяйте по критериям приема финальных макетов, которые остаются доступны в личном кабинете. 19 | * Сверстайте еще несколько макетов. В интернете большое количество ресурсов, на которых вы найдете PSD шаблоны готовые для верстки. Например [Freebiesbug](http://freebiesbug.com/psd-freebies/website-template/) и [Dbfreebies](http://dbfreebies.co/templates). 20 | * Сверстайте хотя бы один резиновый шаблон. Если вы не верстали резиновую Седону — сверстайте. Уже верстали резиновую Седону? Все равно сверстайте еще один резиновый макет. Не можете найти резиновый макет — возьмите любой и попробуйте сделать его резиновым.  21 | * Добавляйте в свой workflow инструменты для автоматизации. Скачайте себе [Prepros](https://prepros.io/) он пригодится вам в будущем, когда начнете работать с препроцессорами. В данный момент он понадобится для прогона CSS-кода через [автопрефиксер](http://habrahabr.ru/company/evilmartians/blog/176909/) и сжатия кода. 22 | * Научитесь использовать [EMMET](http://docs.emmet.io/) — это поможет вам ускорить написание кода разметки. 23 | * Начинайте использование препроцессоров. Начните с [LESS](http://lesscss.org/features/). Пройдите [курс](https://htmlacademy.ru/courses/85) на академии. Попробуйте его в деле: используйте переменные, вложенности, миксины и функции. Используйте PrePros для компиляции файлов. Сверстайте еще один макет используя LESS. 24 | * *(дополнительно) Если вы считаете, что препроцессоры могли бы иметь больше возможностей. Попробуйте [SASS](http://sass-lang.com/guide). Используйте тоже, что и в LESS. Попробуйте extend, циклы и логические условия. Сверстайте макет используя SASS.* 25 | * Разберитесь с адаптивностью. Верстальщику необходимо уметь верстать адаптивные шаблоны. В интернете множество туториалов и [статей](http://habrahabr.ru/post/119127/) на эту тему. Сверстайте первый адаптивный макет. 26 | * Разобрались с адаптивными сетками? Разберитесь с адаптивной графикой и типографикой. Посмотрите, что такое подготовка графики под ретина [дисплеи](http://habrahabr.ru/post/150071/), прочитайте о [теге picture](http://habrahabr.ru/post/145376/), поищите сервисы оптимизации графики. Прочитайте про единицы EM и REM для CSS. 27 | * Вы уже знаете достаточно для хорошего верстальщика. Пора верстать по методологиям. Посмотрите методологии [БЭМ](http://frontender.info/MindBEMding/), [MCSS](http://rhr.me/pres/mcss/). Независимость, многослойность — множество подходов, каждый из которых имеет свою суть. Запомните, что методология — это не только нейминг, а подход к написанию кода. 28 | * Пора посмотреть, как пишут код другие. Знакомимся и разбираемся с фреймворками [Bootstrap](http://getbootstrap.com/) и [Foundation](http://foundation.zurb.com/). Пользоваться ими не обязательно, но понимать стоит. 29 | * Автоматизация. Все это время вы тщательно работали над проектами, выполняя большое количество действий, чтобы итог был качественным. Алгоритм работы над проектом выглядел примерно так: 30 | * Нарезка макета в Photoshop. 31 | * Создание спрайтов с помощью сервисов и подготовка графики под ретину. 32 | * Оптимизация графики на сторонних сервисах. 33 | * Написание разметки. 34 | * Написание стилей на языке препроцессора, компиляция через PrePros или другую стороннюю программу. 35 | * Прогон готового файла стилей через автопрефиксер для лучшей поддержки верстки браузера. 36 | * Приведение файла стилей к единому виду. 37 | * Создание сжатой версии файла. 38 | * Удаление лишних файлов из проекта и подготовка проекта к сдаче. 39 | 40 | А теперь представьте, что некоторые этапы вашей работы делает за вас один инструмент. Сборщики проектов, такие как [Grunt](http://gruntjs.com/) или [Gulp](http://gulpjs.com/) требуют установки и настройки. Вы можете настроить под себя необходимые плагины, которые будут собирать вам спрайты, оптимизировать графику, компилировать файл стилей, прогонять их через автопрефиксеры, причесывать, минифицировать и выдавать в готовом виде. Большая экономия времени. 41 | 42 | Не переходите на следующий шаг до тех пор, пока не закончите и не усвоите предыдущей этап. 43 | 44 | Это примерный и необходимый список для изучения. На всем этапе развития сохраняйте исходники кода и собирайте портфолио. Будущему работодателю интересно все, что вы можете, а каждый навык прибавляет вам в цене. Не важно в виде личного сайта или [сервиса](http://brainstorage.me/).  Сохраняйте знания. 45 | И помните — главное развитие. Разработчик, который перестает узнавать новое — это мертвый разработчик. Следите за обновлениями стандартов, появлениями новых тегов и технологий. Пробуйте их, даже если они еще не имеют всеобщей поддержки, и тогда, в момент их принятия вы будете на коне. 46 | -------------------------------------------------------------------------------- /articles/как-понравиться-своему-наставнику/article.md: -------------------------------------------------------------------------------- 1 | # Как понравиться своему наставнику 2 | Для того, чтобы стать хорошим специалистом, необходимо не только уметь переводить `PSD` макеты в готовый документ, но и делать это правильно и понятно для других специалистов. В данной заметке указаны основные ошибки и рекомендации к оформлению кода для начинающих верстальщиков. 3 | 4 | ## Будьте уверенны в себе и в своих силах 5 | 6 | ## Единообразно оформляйте написанный код 7 | 8 | Важное качество каждого верстальщика - наличие собственного стиля. Верстка в соответсвии с определённой методологией позволяет самому верстальщику проще и понятнее формировать конечный документ, а другим верстальщикам понимать этот документ. Существует большое количество методологий, которые описывают правила создания документов и стилевых файлов. Они достаточно объемные и требуют изучения на более поздних стадиях становления верстальщика. 9 | 10 | Хорошим началом будет единообразное оформление документа: 11 | 12 | * определитесь с разделителями названия классов `_` или `—`; 13 | * определитесь с типами кавычек `""` или `''`; 14 | * определитесь с последовательность атрибутов и тега и свойств в CSS; 15 | * определитесь с количеством пробелов, которое вы будете использовать для каскада. Два или четыре пробела. 16 | 17 | В дальнейшем ваша задача использовать эти правила во всех последующих документах. 18 | 19 | ## Используйте красивый каскад для вложенности элементов 20 | 21 | Каскад полезен не только для внешнего вида документа, но и для самого верстальщика. На первое время он поможет избегать ошибок с неправильным закрытием тегов. 22 | 23 | Несколько правил хорошего каскада (данные правила являются примером, а не парадигмой): 24 | 25 | * Каждый вложенный элемент начинается с новой строки и имеет отступ(`tab`) от родительского элемента. 26 | * Текстовые элементы не нуждаются в дополнительной табуляции. 27 | * Каждое описание в CSS имеет название на первой строчке и свойства на последующих строчках с отступом. 28 | 29 | Пример плохого каскада 30 | 31 | ```html 32 |
33 | 38 |
39 | ``` 40 | ```css 41 | h1{font-size: 36px; 42 | line-height: 44px; 43 | color: $black;font-weight: 800;} 44 | ``` 45 | 46 | Пример хорошего каскада 47 | 48 | ```html 49 |
50 | 57 |
58 | ``` 59 | ```css 60 | h1 { 61 | font-size: 36px; 62 | line-height: 44px; 63 | color: #000000; 64 | font-weight: 800; 65 | } 66 | ``` 67 | 68 | ## Давайте понятные и правильные названия для классов 69 | 70 | Название класса должно отражать суть содержимого или объекта. Например: 71 | 72 | ```css 73 | .wrapper{} //обертка 74 | .feedback{} //отзыв 75 | .button{} //кнопка 76 | ``` 77 | 78 | Названия классов не должны быть написаны транслитом, с русского языка. Например: 79 | ```css 80 | .zagolovok{} 81 | .reklama{} 82 | .osnovnoi-blok{} 83 | .levo{} 84 | ``` 85 | 86 | Классы указывают на то, чем объект является, а не что в нем лежит. То есть если у вас есть блок с текстом у которого заголовок “Почему мы?” и произвольный текст, то его стоит назвать, например, `advantages-text`, а не `why-we-text`. 87 | 88 | Если в первое время вам сложно придумать названия для классов, то можно воспользоваться [вот таким помощником](https://github.com/tsergeytovarov/htmlacademy-basic-additional-material/blob/master/articles/%D1%82%D0%B8%D0%BF%D0%BE%D0%B2%D1%8B%D0%B5-%D0%BD%D0%B0%D0%B7%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D0%BE%D0%B2/article.md). 89 | 90 | ## Не используйте `
` в разметке 91 | 92 | Перенос строки придумали для переноса строки внутри текстового элемента и только для него. Даже если внутри текстового элемента есть возможность перенести строку другими способами, например, ограничением ширины текстового элемента, то использовать этот тег не нужно. Тем более не нужно использовать его для переноса блочных элементов. 93 | 94 | ## Правильно используйте сетки 95 | 96 | Достаточно обширное правило, но мне бы хотелось указать на два момента. 97 | 98 | Первый - правильное определение типа сетки, `inline-block` или `float`. Сетка на `float` подходит для крупных сеточных элементов, которые занимают одну строку. Если же у вас блоки идут в несколько строк, например каталог, то лучше использовать `inline-block`. 99 | 100 | Второй — типичные ошибки. При работе с `inline-block` родительскому элементу, который их оборачивает надо сбрасывать размер шрифта, а для самих элементов восстанавливать его. 101 | 102 | При работе с `float` обязательно использование распорки для контейнера в котором они лежат. 103 | 104 | Для более удобного восприятия информации воспользуйтесь [шпаргалкой](https://github.com/tsergeytovarov/htmlacademy-basic-additional-material/blob/master/articles/%D0%B0%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC-%D0%B2%D1%8B%D0%B1%D0%BE%D1%80%D0%B0-%D1%81%D0%B5%D1%82%D0%BA%D0%B8/%D0%B0%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC-%D0%B2%D1%8B%D0%B1%D0%BE%D1%80%D0%B0-%D1%81%D0%B5%D1%82%D0%BA%D0%B8.jpg). 105 | 106 | ## Проверяйте верстку на переполнение 107 | 108 | Важно запомнить, что макет который мы верстаем может быть с тестовым набором данных, поэтому необходимо проверять свою верстку с другим количеством текста. Желательно делать такую верстку, которая не развалится при добавлении в нее другого текста, большего размера. Это касается не только текстовых элементов, но и, например, пунктов навигационного меню. 109 | 110 | ## Проверяйте верстку на кроссбраузерность 111 | 112 | Головная боль всех верстальщиков — вопрос кроссбраузерности. Каждый браузер написан на своем движке, из-за чего некоторые свойства работаю по-разному. Другие свойства начинают работать только после добавления префиксов, а некоторые не работают вовсе. 113 | 114 | Например свойство `box-sizing` с префиксами выглядит так: 115 | 116 | ```css 117 | .class { 118 | -webkit-box-sizing: border-box; 119 | -moz-box-sizing: border-box; 120 | box-sizing: border-box; 121 | } 122 | ``` 123 | 124 | На самом деле смысл разбирать какие свойства как работают, в этой статье, я не вижу. Это займет миллион страниц. Для вас задача на первое время научиться пользоваться Google. 125 | 126 | Алгоритм ваших действий такой: 127 | 128 | 1. Вы определяете браузер до которого вам нужна поддержка. 129 | 2. Заходите на сервис http://caniuse.com. 130 | 3. Выбираете нужный вам тег или свойство CSS. 131 | 4. Смотрите его поддержку. 132 | 5. Если у вас тег не поддерживается, то вы либо отказываетесь от него, либо ищите в Google как сделать его поддерживаемым. 133 | 134 | Стоит отметить, что в Интернете много сервисов на эту тему. Например http://css3please.com или http://css-tricks.com/snippets/ с пометкой cross-browser. 135 | 136 | ## Испольуйте семантику 137 | 138 | Одним из нововведений HTML5 являлись семантические теги. Отличаются от обычного `div` тем, что наделяют блок определенным смыслом. Для того чтобы научится использовать семантические теги нужно прочитать про них статью на английском http://www.w3schools.com/html/html5_semantic_elements.asp и закрепить это статьей на русском http://codeacademy.ru/blog/62/semanticheskaya-verstka-html5-nachalo-budushchego. 139 | -------------------------------------------------------------------------------- /sections/section-faq.md: -------------------------------------------------------------------------------- 1 | В. — *Как лучше верстать breadcrumbs списком или ссылками?* 2 | О. — посмотрите, как делают типовые элементы в Бутстрапе http://getbootstrap.com/components/ Можно взять за основу код, написанный профессионалами. Копируйте с пониманием - свой код вы должны знать на 120% 3 | 4 | В. — *Что такое flex-box?* 5 | О. — http://frontender.info/a-guide-to-flexbox/ и https://www.youtube.com/watch?v=x0fcNDaE7Z0, и http://html5.by/blog/flexbox, и http://bennettfeely.com/flexplorer, и https://youtu.be/tge9YQDAasc А так гугл в помощь. 6 | 7 | В. — *Я закинул на FTP папку с html и css файлом, плюс 4 картинки. Открываю index.html - они не работают?* 8 | О. — Проверьте адреса подключаемых css файлов и картинок. Кстати, мы пользуемся относительной адресацией - когда путь отсчитывается от текущего пути файла, а не от домена или адреса файла в файловой системе. 9 | 10 | В. — *Имеем в верстке блок под img в него кинем картинку в дальнейшем. Вырезать картинку из макета какого размера — по размерам заданного контейнера, а если она при этом изменяется?* 11 | О. — 1. Вырезаем картинку по её границам и центруем внутри блока. 2. Вырезаем картинку по размеру контейнера. 12 | В обоих случаях стоит уделить внимание защите от переполнения, т.е. добавить ограничение ширины img и добавить height:auto. 13 | 14 | В. — *Зачем нужно оборачивать поля формы вместе с `