Пройти месячные онлайн-курсы от 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 тоже выложу, для наглядности.
Критерий завершения
Все уроки по курсу просмотрены, выполнены все задания из курса, сверстаны все макеты и выложены на github/codepen
Личные ресурсы
Сам курс, время, желание, phpstorm, photoshop
Экологичность цели
Эта цель позволит мне закрепить мои знания по 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
-
Глейси
-
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
