Освоить верстку, html, css. Часть 1. Начало

оф.сайт + подборка других статей

1. Документация - здесь написаны основные понятия БЭМ, Б- блок, Э- элемент, М- модификатор.
2. Статьи - здесь приводятся статьи, почему БЭМ это круто
3. Учимся любить БЭМ
4. Проекты на БЭМ
5. MindBEMding – getting your head ’round BEM syntax
6. В чем проблема «проблемы БЭМ'а»? - в комментах срач такой х)
7. Почему вы пользуетесь или не пользуетесь БЭМ?
8. BEM 101

старт 07.01.2018

Ресурсы

• Git Path
• ProGit 2
• Command Line Power User

1. Codeschool : Git Path
2. Codeschool : ProGit 2
3. Курс по основам командной строки : Command Line Power User

ПРОЙТИ ТУТОРИАЛ по ГИТу https://guides.github.com/introduction/flow/

Что нужно знать и уметь front end разработчику в 2015/2016

статьи:

http://krekotun.ru/ui-developer-skills

http://copist.ru/blog/2014/12/26/study-web-program...

1. Туториал
2. Оптимизация изображений/
3. GulpJS — фантастически быстрый сборщик проектов [Статья на хабре]
4. gulp-debug
5. Организация Gulp-file
6. Последовательное выполнение задач в Gulp JS [Статья на хабре]
7. Самые нужные плагины для Gulp

1. LESS CSS — Руководство для начинающих
2. LESS и адаптивный дизайн
3. SORAX LESS
4. http://lesscss.org/

1. AMD (RequireJS)
2. Common JS (browserify)

Сами лекции

1. Лекция 1
2. Лекция 2
3. Лекция 3
4. Лекция 4
5. Лекция 5
6. Лекция 6
7. Лекция 7
8. Лекция 8
9. Лекция 9
10. Лекция 10
11. Лекция 11
12. Лекция 12

Ссылка на плейлист

1. 001. Роль разработчика интерфейсов в продукте – Сергей Сергеев
2. 002. bem components — как Bootstrap, только лучше – Владимир Гриненко
3. 003. Мгновенная Морда – Иван Карев
4. 004. Эксперимент как инструмент для принятия решений – Виктор Карпов
5. 005. Приручаем SVG – Лев Солнцев
6. 006. Производительность WebGL приложений – Кирилл Дмитренко
7. 007. Создание модулей для API Яндекс.Карт – Всеволод Шмыров
8. 008. API как древнеримский акведук – Сергей Константинов

1. 001. Изучение и редактирование кода - Игорь Новак
2. 002. Развертывание верстки - Роман Андриади
3. 003. http-протокол - Алексей Бережной
4. 004. Механизм работы браузера - Георгий Мостоловица
5. 005. Кеширование на клиенте и сервере - Евгений Дорошенко
6. 006. Безопасность веб-приложений - Тарас Иващенко
7. 007. Регулярные выражения - Алексей Бережной
8. 008. Командная строка Unix - Виктор Ашик
9. 009. Языки программирования - Денис Бугарчев
10. 010. Тестирование - Марина Широчкина
11. 011. Вики-синтаксис - Сергей Черкасов
12. 012. Общий цикл разработки (dev-cycle) - Михаил Трошев
13. 013. Вводная по ШРИ - Анна Чеботкевич
14. 014. История успеха выпускников ШРИ - Дмитрий Поляков
15. 015. CSS - Роман Комаров
16. 016. JavaScript Асинхронность - Михаил Давыдов
17. 017. JavaScript. Базовые знания - Михаил Давыдов
18. 018. MVC - Антон Киршанов
19. 019. Шаблонизаторы (templates) - Сергей Бережной
20. 020. jQuery (jquery) - Алексей Бережной
21. 021. Методология БЭМ и обзор БЭМ платформы - Владимир Гриненко
22. 022. БЭМ мастер класс - Артём Курбатов
23. 023. Приёмка задач: общее и бэкенд разработка - Михаил Трошев
24. 024. Приёмка задач: дизайн - Михаил Трошев
25. 025. Парное программирование - Сергей Бережной
26. 026. CSS - Вадим Пацев
27. 027. Основы модели визуального форматирования - Вадим Пацев
28. 028. Эксперимент с версткой - Роман Комаров
29. 029. Code style - Михаил Давыдов
30. 030. JavaScript, События - Михаил Давыдов
31. 031. Документирование информации - Сергей Черкасов
32. 032. Unit тестирование - Александр Тармолов
33. 033. I bem - Алексей Бережной
34. 034. Layouts. At rules - Вадим Пацев
35. 035. Значения и единицы измерения. Шрифт. Свойства текста - Вадим Пацев
36. 036. Code review - Игорь Новак
37. 037. Дизайн (design) - Настя Ларкина
38. 038. Profiler (profiler) - Михаил Корепанов
39. 039. Фреймворки (js-frameworks) - Евгений Дорошенко
40. 040. Клиентская оптимизация (performance) - Иван Карев
41. 041. Debugger (debug) - Константин Васильев
42. 042. Цвета и фон. Transition. Animation. - Вадим Пацев
43. 043. Свободное перемещение и позиционирование - Вадим Пацев
44. 044. Cистемы контроля версий - Сергей Сергеев
45. 045. Архитектура веб сервисов - Денис Бугарчев
46. 046. Транспорт, ajax (js ajax) - Михаил Давыдов
47. 047. Графика в вебе - Иван Карев

Мини-пост. Список ссылок (Catherine Winner)

Список ресурсов на вооружение frontend-разработчику.
Часть 1

HTML

- Не используйте запрещенные теги и аттирбуты. Если не уверны , то сверьтесь со списком —http://goo.gl/0w5O41
- Подключайте внешние таблицы стилей — http://goo.gl/yXPjoQ
- Не используйте разметку для оформления — https://goo.gl/PMZj0z
- Помните о правильном подключении внешних файлов — http://goo.gl/vvxpgM
- Давайте понятные имена классам - https://goo.gl/ArvBJZ
- Не злоупотребляйте id и помните, что это уникальный идентификатор, который может быть на странице только в единственном экземпляре — http://goo.gl/1RwqAl
- Не забывайте закрывать теги. Просто не забывайте.

CSS
- Обнулите дефолтные стили браузера — http://goo.gl/6EICuY
- Не используйте css-фреймворки. Точнее, применяйте их там, где это разумно: например, для прототипов. В конце этой статьи очень точно, на мой взгляд, написано — http://goo.gl/54wUFd
- Изучите боксовую модель — https://goo.gl/S0MHgp
- Помните про специфичность селекторов — https://goo.gl/EIBM6X
- Понятие потока — https://goo.gl/JsTLbL и как с ним работать — http://goo.gl/NiNiAh
- Инлайновый контекст форматирования — http://goo.gl/jNwuam
- Используйте css-спрайты — https://goo.gl/XqAhJ2

Часть 2

Также не забывайте про оформление ваших документов. Важно, чтобы не только другим людям было приятно работать с вашим аккуратным кодом, но и вы сами, через какое-то время вернувшись к нему, не запутались.

http://developer.mozilla.org/ru/docs/Web — Cправочники и руководства по HTML, CSS, ...
http://css-tricks.com — Посвящается миру CSS и связанных с ними технологий. Сниппеты, видео, трюки и учебники.
http://w3schools.com — Руководства, справочники, примеры по веб-технологиям.
http://stackoverflow.com — Платформа для поиска решения с помощью сообщества.
http://awwwards.com — Список сайтов талантливых разработчиков, полезных для изучения и отвлечения от справочников.
http://themeforest.net/popular_item/by_category?categ.. — Список самых продаваемых HTML, CSS и шаблонов страниц на платформе envatomarket. Отличные примеры для изучения.
http://mediaqueri.es — Коллекция сайтов использующих media queries.
http://tympanus.net/codrops/category/blueprints — Коллекция основных компонентов, модулей и макетов в минимальным стиле для легкой адаптации и использования, или просто для вдохновения.
http://htmlbook.ru — Русскоязычный ресурс про HTML.
http://javascript.ru — Русскоязычный ресурс про JavaScript.
http://css3ps.com — Плагин для PhotoShop для преобразования преобразования ваших слоев в CSS3.
http://bento.io — Сборник ссылок на полезные ресурсы.
http://caniuse.com — Таблицы совместимости для поддержки HTML5, CSS3, SVG и других технологий в различных браузерах.

Сама презентация -http://slides.com/valentineshkarlet/deck-1#/

Сайты для самообучения:
codeschool.com
https://teamtreehouse.com/
http://htmlacademy.ru/
http://www.codeavengers.com/
http://www.codecademy.com/
https://www.udacity.com/
https://dash.generalassemb.ly/
http://hasbrains.org/

YouTube каналы:
Hexlet - http://www.youtube.com/channel/UCqLPYxuAz-WbdEBLBk_Tb7g
LevelUp Tuts -http://www.youtube.com/channel/UCyU5wkjgQYGRB0hIHMwm2Sg
LoftBlog -http://www.youtube.com/channel/UCIIt69f5D44s2cdb9vXQNzA
Magisters -http://www.youtube.com/channel/UCUzksGhlJU0rNF5KneUZkSA
Sorax -http://www.youtube.com/channel/UCdnFX7mzgup9moXG2fULOog
Tuts+ Web Design -http://www.youtube.com/channel/UCTP1DN8Us94z0ciuCx71scg
uWebDesign -http://www.youtube.com/channel/UCZeU17nbVfzczAkJVTay9vw
webtheory -http://www.youtube.com/channel/UCD15yBvmQElLP7EFL8vW6Ywhttp://vk.com/doc77821220_361542739?hash=a860e6f3fcf6..

https://psdrepo.com/

Ютуб канал Веб-стандарты

выделила этот пункт в отдельную цель LoftSchool. WebBeginner