Реальная верстка 1.0 ( черновик для себя любимого )
Следовать командному плану! Кидать в данную тему заметки и список дел.
Критерий завершения
Мы готовы к выходу на работу или в мир фриланса.
Личные ресурсы
желание
Экологичность цели
хочу стать Front-End Developer программистом
-
Вступление в закрытую группу вк
-
Вступление в чат Telegram.
-
записи в командную цель "Реальная верстка 1.0"
-
Скачать базу НТМЛ академии
-
Скачать макет дз ( пробный )
-
Методичка (что скачать и установить на комп и др.)
-
Тесты до 1 дек.
-
Расширения для браузера
SimpleExtManager- позволяет удобно включать / выключать все прочие расширения
1.2.Web developer - большой набор полезных инструментов
1.3.ColorZilla - узнаём цвет элемента
1.4.Clear Cache или Disable cache (DevTools) - быстрая очистка кэша
1.5.PerfectPixel- позволяет накладывать jpeg и png макет на вашу верстку
1.6.Yslow- проверяем скорость загрузки сайта
1.7.Page Ruler - линейка
1.8.uBlock Origin- блокирует рекламу
2.Видео уроки
Посмотреть дополнительные уроки по chrome dev tools от Зара Захарова. Доступны вматериалах на подготовку
-
Дополнительные материалы из чата
-
Плагины
Emmet - сокращает время на ввод кода
●SideBarEnhancement - расширяет возможность сайт бара
●SyncedSideBar - синхронизирует SideBar с открытыми файлами по клику на них
●AdvancedNewFile - создаём новые файлы и папки при помощи горячих клавиш
●BracketHighlighter - открытие/закрытие любого фрагмента в коде
●jQuery - набор снипgетов для jquery
●AutoFileName - автозаполнение путей к подключаемым файлам
●CSSсomb - делает код красивым
-
Настройка Brackets
1.Быстрая работа с Brackets ( обучающий курс eng )
2. Список полезных расширений: File > Extension Manager: В поле Search вводим им расширения
●QuickFormToolпозволяет в редакторе быстро вставлять элементы форм
●Emmet– расширение для быстрого кодинга (основанное на ZenCoding)
●Autoprefixer используется для автоматического добавления префиксов, инструмент, который анализирует ваш CSS и добавляет / удаляет префиксы в случае необходимости. Это означает, что вы можете писать свой CSS код, не беспокоясь о том, какие префиксы вы должны поставить. Как только вы сохраните файл, это будет сделано за вас.
●LESS AutoCompile это расширение создает автоматическую компиляцию LESS файлов после сохранения
● Indent Guides показывает направляющие выравнивания в редакторе кода
●Response for Brackets позволяет создавать отзывчивые и адаптивные дизайны для всех разрешений мониторов
●Gist Manager позволяет осуществлять поиск и вставку сниппетов с сайта https://gist.github.com/
●Brackets SASS Code Hints обеспечивает подсказки кода для документов SASS
●QuickDocsJS обеспечивает быстрый доступ к каждой функции документации JavaScript
● Pixlr Полностью функциональная профессиональная фото программа для редактирования изображений внутри Brackets
● Brackets ColorPalette позволяет выбрать цвета из изображений и вставить в редактор
-
codepen.io
-
Сверстать вступительный макет
![]()
-
Просмотреть методички
-
Программы и утилиты
Перечень в методичке
-
Спецификации на русском
-
Пройтись по особенностям нтмл5
-
Пройтись еще раз по сss3
-
Тест на знание всего HTML и всего CSS
-
HTML&CSS. тесты
HTML&CSS. Начальный уровень https://geekbrains.ru/tests/2
HTML&CSS. Средний уровень https://geekbrains.ru/tests/17
-
учимся печатать в слепую
-
Git
-
https://git-scm.com/book/ru/v1/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5
-
https://githowto.com/ru
-
http://learngitbranching.js.org/
-
-
Домашка с 1 дек по 4 декабря
1)Просмотреть GO IT курс 2016
1_Tech Skills:
- Папка HTML : Модули 1 и 2 + выполнить задания и тестирование
(задания и тесты то что в файлах которые вы скачали с торрента)
http://nnmclub.to/forum/viewtopic.php?t=1065555
-Работу сохранить на codepen и выложить ссылку (и тест тоже, все ответы перед прохождением удалить из файла test)
2) HTML Academy
1.0 Создать папку для верстки макета Барбершоп, в папке сделать файл index.html, в этой папке еще две папки с названиями img и css. В папке css файл с названием style.css
2.0 Просмотреть лекции:
- Вводный
- Разметка
- При просмотре сверстать главную страницу макета Барбершоп (видео ставим на паузу и повторяем код в своем редакторе, сохраняем у себя на компе).
3) Пункты 1 и 2 выкладываем на codepen (вот инструкция https://www.youtube.com/watch?v=WT0z8SPJ8Kc)
4) Ссылку на ДЗ выкладываем в комменты с пометкой "минимум/максимум"
5) Если есть вопросы, что то не получается, пользуемся чатом или гуглим
Задание "максимум"
1) HTML Academy
1.0 Просмотр лекций: (кто знает эти лекции наизусть, может приступать к практике)
-Вводная
-Разметка
-Фотошоп
-Сетки
2.0 Мы верстаем все макеты в этом базовом курсе
НАЧИНАЕМ с Nerds и потом будет Sedona
- Разметка всех страниц макета
- Сетки (все страницы)
3.0 Результат тоже выложить ссылку в комментах с пометкой "минимум/максимум"
Дополнительно (По желанию):
Git - для новичков - #1 - основы
https://www.youtube.com/watch?v=PEKN8NtBDQ0&list=..
Git. Быстрый старт. Назначение и возможности. Урок 1 [GeekBrains]
https://www.youtube.com/watch?v=4-NX17Ip-xQ&list=..
-Интерактивные курсы HTML Academy (до раздела Знакомство с таблицами)
https://htmlacademy.ru/program
-Скачать Дэвид Макфарланд | Новая большая книга CSS (2016) и начать читать
http://nnmclub.to/forum/viewtopic.php?t=1012851
P.S.
Проверить на валидность HTML https://validator.w3.org/
Проверить на валидность CSS http://jigsaw.w3.org/css-validator/ -
Как начать работать с GitHub: быстрый старт
-
Домашка от 5 декабря
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением
