Пройти месячные онлайн-курсы от HTML Academy "Базовый HTML и CSS" и "Продвинутый HTML и CSS"
Полезные ссылки в этапах цели!
Постоянно натыкаюсь на отзывы (на различных ресурсах) о курсах HTML Academy, где пишут, что у них самое лучшее обучение HTML и CSS. Стало интересно, чем же они отличаются от остальных, заинтересовал их метод. Когда-то раньше проходил пару бесплатных интерактивных мини-курсов на их сайте, но так как я знал большинство из имеющейся там информации - меня процесс изучения особо не впечатлил и не зацепил. Но отзывы на форумах веб-разработчиков все не прекращались, и вот в итоге решил пройти их курсы, закрепив тем самым знания, что-то вспомнить, что-то узнать из упущенного ранее.
В данной цели будет рассматриваться Базовый Месячный онлайн-интенсив.
На данный момент дошел до 4-го раздела.
Верстать буду следующим образом:
- PhpStorm;
- UPDATE 21.03.2016: AngularJS;
- TypeScript (изучаю его сейчас как раз, пока основы);
- Gulp с настроенными плагинами и Live Reload;
- Jade;
- Stylus.
Все файлы будут выложены на Github, включая файлы сборщика.
На Codepen тоже выложу, для наглядности.
Goal Accomplishment Criteria
Все уроки по курсу просмотрены, выполнены все задания из курса, сверстаны все макеты и выложены на github/codepen
Personal resources
Сам курс, время, желание, phpstorm, photoshop
Goal ecological compatibility
Эта цель позволит мне закрепить мои знания по HTML и CSS и, в принципе, пополнить портфолио тестовыми проектами :)
-
Вводный раздел
Полезные ссылки из раздела:
1) Обзор редакторов для верстальщика
2) Что на самом деле происходит, когда пользователь вбивает в браузер адрес google.com.
3) HTML5Rocks: принципы работы современных веб-браузеров.
Firefox и его расширения для разработчиков.
Chrome и его расширения для разработчиков.
Opera и её расширения для разработчиков.
Safari и его расширения для разработчиков.
WinSCP(доступен только для Windows).
CyberDuck(доступен для Windows и OS X).
FileZilla(доступен для Windows и OS X).
-
Разметка
Полезные ссылки:
Ставить или не ставить закрывающий слеш— статья-рассуждение по поводу закрывающего слеша в одиночных тегах.
CSS Guidelines from CSS Wizardry (перевод).
-
Фотошоп для верстальщика
Полезные ссылки:
Фотошоп для верстальщика.
Image Formats: The Nerdy Parts (by Lara Hogan).
http://htmllinks.ru - сборник полезных ссылок на все случаи жизни веб-разработчика. -
Сетки
Полезные ссылки:
Плавающие элементы (float)
Раскладка в CSS— старая, но подробная статья про флоаты.
All about floats— cтатья про флоаты на английском.
И пара статей на Хабре —раз и два.
Блочно-строчные элементы (display: inline-block)
Приёмы борьбы с пробелами между блочно-строчными элементами.
-
Декоративные элементы
Полезные ссылки:
Подключение нестандартных шрифтов. Часть первая.
Подключение нестандартных шрифтов. Часть вторая.
-
Оформление контента
Полезные ссылки:
Инлайновый контекст форматирования— целая книга на русском про тонкости строчных элементов.
-
Введение в JavaScript
Полезные ссылки:
Что такое DOM? http://frontender.info/dom/
Что такое переменные?http://learn.javascript.ru/variables
Что такое условия?http://learn.javascript.ru/logical-ops
Улучшаем опыт взаимодействия с формам. http://simonenko.su/38146501854/improving-ux-for-web-form
Как узнать код клавиши. http://keycod.es
Выразительный JavaScript. http://karmazzin.gitbooks.io/eloquentjavascript_ru/
Справочник Mozilla Developer Network. http://developer.mozilla.org/ru/docs/Web/JavaScript
-
Прогрессивное улучшение
Полезные ссылки:
Progressive enhancement https://htmlacademy.ru/blog/7
Так ли дорого прогрессивное улучшение? https://htmlacademy.ru/blog/8
Graceful degradation https://htmlacademy.ru/blog/6
Progressive enhancement: практичный подход к современной кроссбраузерной разработке. Видео доклада и презентация. https://events.yandex.ru/lib/talks/373/
Определение возможностей, которые можно использовать в браузере
Modernizr http://modernizr.com
Минификаторы
-
Финал
-
Продвинутый интенсив
-
Вводный
-
Методологии
-
CSS-препроцессоры
-
Адаптивность сетки
-
Флексбокс
-
Адаптивность: графика
-
Производительность вёрстки
-
Автоматизация
-
Инструменты ускорения вёрстки
-
Финал
-
-
Верстка и выкладывание проектов на Github
-
Barbershop
-
Техномарт
-
Sedona
-
Nerds
-
Глейси
-
Don't miss new posts!
Subscribe for the Goal and follow through to its completion
