Цель заброшена
Автор не отписывался в цели 11 месяцев 19 дней
Веб-разработчик
С чего начать карьеру разработчика: пошаговый мой план:
Критерий завершения
Найти работу.
Экологичность цели
Почему веб:
Это очень востребовано.
Больше всего свободы в плане удаленной работы.
Хорошая точка для старта: низкий порог входа, при желании можно дальше развиваться в других направлениях
-
_Также посмотреть:
- Введение в web разработку - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMDyNxzXkfhkfHxh8mTAkVVm)
- Ключевые компетенции веб-разработчика - YouTube (https://www.youtube.com/watch?v=lmrd4IkTv0A)
-
Введение в web разработку - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMDyNxzXkfhkfHxh8mTAkVVm)
-
Ключевые компетенции веб-разработчика - YouTube (https://www.youtube.com/watch?v=lmrd4IkTv0A)
-
С первых дней работа над портфолио:
- Разработать свой проект. (Маленький, но достаточно сложный, чтобы начать осваивать инфраструктуру того языка, на котором пишу. Желательно, чтобы это был opensource-проект: так работодатель сможет изучить код.)
- Выложите его на:
- GitHub.
- Bitbucket.
-
Разработать свой проект.
-
Выложите его на:
-
Не для портфолио, но для практики:
- Адаптивная верстка сайта с нуля для начинающих - MoGo - YouTube
- ActiveBox - верстка сайта с нуля для начинающих - YouTube
- Верстка сайта-портфолио с нуля - YouTube
- Дизайн сайта в Photoshop - YouTube
- HTML верстка на примере бизнес сайта - YouTube
- Создание дизайна сайта в бизнес стиле - YouTube
- Создание Landing Page на WordPress - YouTube
- Джедай верстки #5
- Создание сайта под ключ на заказ - YouTube
- Джедай вёрстки #6 - YouTube
- Джедай вёрстки #7 - YouTube
- Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. - YouTube
- HTML верстка реального макета от А до Я. Джедай верстки #7 (Все выпуски) - YouTube
- Курс: HTML верстка сайта-портфолио - YouTube
- Верстка адаптивного сайта - YouTube
-
ActiveBox - верстка сайта с нуля для начинающих - YouTube
-
Адаптивная верстка сайта с нуля для начинающих - MoGo - YouTube
-
Верстка сайта-портфолио с нуля - YouTube
-
Дизайн сайта в Photoshop - YouTube
-
HTML верстка на примере бизнес сайта - YouTube
-
Создание дизайна сайта в бизнес стиле - YouTube
-
Создание Landing Page на WordPress - YouTube
-
Джедай верстки #5
-
Создание сайта под ключ на заказ - YouTube
-
Джедай вёрстки #6 - YouTube
-
Джедай вёрстки #7 - YouTube
-
Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. - YouTube
-
HTML верстка реального макета от А до Я. Джедай верстки #7 (Все выпуски) - YouTube
-
Курс: HTML верстка сайта-портфолио - YouTube
-
Верстка адаптивного сайта - YouTube
-
Завести знакомства в индустрии:
Сейчас все ищут кадры в социальных сетях и через знакомых. И чем больше разработчиков в моем списке друзей, тем выше вероятность найти крутую вакансию.
-
Сбор рабочего места для web-разработки:
На данном этапе нужно установить всё, что находится в этом списке и настроить под себя.
- Photoshop.
- Sublime Text 3:
- Sublime Text 3 настройка установка плагины // Sublime Text 3 видео обучение // Фрилансер по жизни - YouTube (https://www.youtube.com/watch?v=xWhTf_o86Lg&t=55s)
- Видеокурс по редактору Sublime Text 3 - YouTube (https://www.youtube.com/playlist?list=PLPpaecEYRC8ZjBQ1OsGOKmxBF8lTTO4BZ)
- Sublime text топ 10 плагины которые обязательно нужны. Emmet, LiveReload. - YouTube (https://www.youtube.com/watch?v=HZ4BUcogWCQ&t=24s)
- Настройка Sublime Text 3 для веб-разработки: LiveReload, плагины, фишки - YouTube (https://www.youtube.com/watch?v=BXcK3Xvp3-g)
- Быстрая настройка Sublime Text 3 для вёрстки сайтов - YouTube) (https://www.youtube.com/watch?v=qlueo6wFikM&t=39s)
-
Photoshop
-
Sublime Text 3:
-
_Также прочесть:
- С чего начинается путь в веб-разработку (https://netology.ru/blog/web-development-begin)
- Что веб-разработчику нужно знать о современном вебе (https://netology.ru/blog/developers-know)
- Что должен уметь фронтенд-разработчик (https://netology.ru/blog/frontend-skills)
- Что должен уметь бэкенд-разработчик (https://netology.ru/blog/02-2019-umeet-bekend)
- JavaScript: с чего начать (https://netology.ru/blog/learn-javascript-basics)
- Как получить работу в IT-компании (https://netology.ru/blog/guid-job-interview)
-
С чего начинается путь в веб-разработку (https://netology.ru/blog/web-development-begin)
-
Что веб-разработчику нужно знать о современном вебе (https://netology.ru/blog/developers-know)
-
Что должен уметь фронтенд-разработчик (https://netology.ru/blog/frontend-skills)
-
Что должен уметь бэкенд-разработчик (https://netology.ru/blog/02-2019-umeet-bekend)
-
JavaScript: с чего начать (https://netology.ru/blog/learn-javascript-basics)
-
Как получить работу в IT-компании (https://netology.ru/blog/guid-job-interview)
-
Книжная полочка:
- «Эффективная работа с унаследованным кодом», Майкл К. Физерс
- «Приёмы объектно-ориентированного проектирования. Паттерны проектирования», Эрих Гамма и другие
- «Чистый код. Создание, анализ и рефакторинг», Роберт К. Мартин
- «Предметно-ориентированное проектирование», Эрик Эванс
- «JavaScript: сильные стороны», Дуглас Крокфорд
- «Совершенный код. Мастер-класс», Стив Макконнелл
- «Рефакторинг. Улучшение существующего кода», Мартин Фаулер и другие
- «Паттерны проектирования», Эрик Фримен, Элизабет Фримен и другие
- «Язык программирования C», Брайан У. Керниган, Деннис М. Ритчи
- «Эффективное использование С++. 55 верных способов улучшить структуру и код ваших программ», Скотт Майерс
- «Экстремальное программирование: разработка через тестирование», Кент Бек
- «Алгоритмы. Построение и анализ», Томас Х. Кормен и другие
- «Регулярные выражения», Джеффри Фридл
- «Современное проектирование на C++», Андрей Александреску
- «Компиляторы. Принципы, технологии и инструментарий», Альфред В. Ахо и другие
-
«Эффективная работа с унаследованным кодом», Майкл К. Физерс
-
«Приёмы объектно-ориентированного проектирования. Паттерны проектирования», Эрих Гамма и другие
-
«Чистый код. Создание, анализ и рефакторинг», Роберт К. Мартин
-
«Предметно-ориентированное проектирование», Эрик Эванс
-
«JavaScript: сильные стороны», Дуглас Крокфорд
-
«Совершенный код. Мастер-класс», Стив Макконнелл
-
«Рефакторинг. Улучшение существующего кода», Мартин Фаулер и другие
-
«Паттерны проектирования», Эрик Фримен, Элизабет Фримен и другие
-
«Язык программирования C», Брайан У. Керниган, Деннис М. Ритчи
-
«Эффективное использование С++. 55 верных способов улучшить структуру и код ваших программ», Скотт Майерс
-
«Экстремальное программирование: разработка через тестирование», Кент Бек
-
«Алгоритмы. Построение и анализ», Томас Х. Кормен и другие
-
«Регулярные выражения», Джеффри Фридл
-
«Современное проектирование на C++», Андрей Александреску
-
«Компиляторы. Принципы, технологии и инструментарий», Альфред В. Ахо и другие
-
Навыки работы с большими объемами информации:
- Как записывать лекции по методу Корнелла - Лайфхакер (https://lifehacker.ru/metod-kornella/)
- Как работать с большими объемами информации — Edu notes (edu-notes.ru/how-to-work-with-a-huge-amount-of-information/)
- Основные принципы работы с информацией | Развивай Мегаинтеллект (http://razvitie-intellecta.ru/osnovnye-principy-raboty-s-informaci/)
- Дружит ли многозадачность с нашим мозгом - Лайфхакер (https://lifehacker.ru/druzhit-li-mnogozadachnost-s-nashim-mozgom/)
- 8 поисковиков, которые лучше, чем Google - Лайфхакер (https://lifehacker.ru/google-alternatives/)
- 16 советов для эффективной работы от дизайнеров Facebook, Google и других известных компаний - Лайфхакер (https://lifehacker.ru/tips-from-designers/)
- Учимся учиться: как лучше усваивать знания? - Лайфхакер (https://lifehacker.ru/uchimsya-uchitsya-kak-luchshe-usvaivat-znaniya/)
- 10 простых советов для более эффективной работы - Лайфхакер (https://lifehacker.ru/10-advices/)
- Советы по эффективной работе с несколькими проектами - Лайфхакер (https://lifehacker.ru/sovety-po-ehffektivnojj-rabote-s-neskolkimi-proektami/)
- Как запоминать больше, используя метод 50/50 - Лайфхакер (https://lifehacker.ru/metod-50-50/)
- 5 секретов памяти: как запоминать легко и надолго - Лайфхакер (https://lifehacker.ru/5-sekretov-pamyati/)
- Как запоминать новую информацию за 40 секунд - Лайфхакер (https://lifehacker.ru/how-to-memorize/)
- Как лучше запоминать и применять в жизни прочитанное - Лайфхакер (https://lifehacker.ru/kak-zapominat-prochitannoe/)
- Лучший метод запоминать новую информацию - Лайфхакер (https://lifehacker.ru/spaced-repetition/)
-
Как записывать лекции по методу Корнелла - Лайфхакер (https://lifehacker.ru/metod-kornella/)
-
Как работать с большими объемами информации — Edu notes (edu-notes.ru/how-to-work-with-a-huge-amount-of-information/)
-
Основные принципы работы с информацией | Развивай Мегаинтеллект (http://razvitie-intellecta.ru/osnovnye-principy-raboty-s-informaci/)
-
Дружит ли многозадачность с нашим мозгом - Лайфхакер (https://lifehacker.ru/druzhit-li-mnogozadachnost-s-nashim-mozgom/)
-
8 поисковиков, которые лучше, чем Google - Лайфхакер (https://lifehacker.ru/google-alternatives/)
-
16 советов для эффективной работы от дизайнеров Facebook, Google и других известных компаний - Лайфхакер (https://lifehacker.ru/tips-from-de
-
Учимся учиться: как лучше усваивать знания? - Лайфхакер (https://lifehacker.ru/uchimsya-uchitsya-kak-luchshe-usvaivat-znaniya/)
-
10 простых советов для более эффективной работы - Лайфхакер (https://lifehacker.ru/10-advices/)
-
Советы по эффективной работе с несколькими проектами - Лайфхакер (https://lifehacker.ru/sovety-po-ehffektivnojj-rabote-s-neskolkimi-proektam
-
Как запоминать больше, используя метод 50/50 - Лайфхакер (https://lifehacker.ru/metod-50-50/)
-
5 секретов памяти: как запоминать легко и надолго - Лайфхакер (https://lifehacker.ru/5-sekretov-pamyati/)
-
Как запоминать новую информацию за 40 секунд - Лайфхакер (https://lifehacker.ru/how-to-memorize/)
-
Как лучше запоминать и применять в жизни прочитанное - Лайфхакер (https://lifehacker.ru/kak-zapominat-prochitannoe/)
-
Лучший метод запоминать новую информацию - Лайфхакер (https://lifehacker.ru/spaced-repetition/)
-
Ступени производства web-сайта:
Тут рассмотрю: Какие вообще есть ступени производства, опять-таки web-сайта; Какие вопросы в беседе с заказчиком нужно задавать и для чего; Для чего нужен прототип сайтам и естественно, что это вообще такое; И под конец, где этот прототип вообще можно изобразить;
- 5+2 ступеней производства web-сайта. От беседы до выпуска web-сайта:
- Основные этапы создания сайта - веб студия Impulse Design (https://impulse-design.com.ua/etapy-razrabotki-sajta.html)
- Этапы создания сайта: основные процессы разработки веб ресурсов (https://wezom.com.ua/blog/etapy-razrabotki-sajta)
- Что есть прототип web-сайта и для чего он необходим:
- Для чего нужен прототип сайта? (https://arbuz.moscow/blog-prototype)
- Зачем нужен прототип сайта: 5 причин, почему одностраничник не продает (https://landing.uni.co.ua/blog/zachem-nuzhen-prototip-sajta/)
- Места для изображения прототипа:
- Создание прототипа сайта: 7 инструментов для маркетолога | Блог YAGLA (https://yagla.ru/blog/marketing/sozdanie-prototipa-sayta-7-instrumentov-dlya-marketologa/)
- Как создать прототип сайта и зачем он вам нужен (https://serpstat.com/ru/blog/prototip-sajta-zachem-on-nuzhen-i-kak-sozdat/)
-
5+2 ступеней производства web-сайта. От беседы до выпуска web-сайта:
-
Что есть прототип web-сайта и для чего он необходим:
-
Места для изображения прототипа:
- 5+2 ступеней производства web-сайта. От беседы до выпуска web-сайта:
-
Труд в Photoshop с дизайн-макетом:
- Требования, которые предъявляются к дизайн-макету сайта:
- _Также прочесть:
- Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет - Студия Peppers Digital (https://peppers.digital/blog/requirements-to-design-layouts-of-web-pages-for-layout-sites-html)
- Требования к дизайн-макетам сайтов | Веб студия Флаг. Разработка сайтов в Екатеринбурге. (https://flagstudio.ru/blog/trebovania-k-dizain-maketam-saitov)
- Требования к дизайн-макету сайта — студия Палыча (https://palpalych.ru/blog/trebovaniya-k-dizajn-maketu-sajta)
- Собранные требования к psd-макету веб-сайта / Хабр (https://habr.com/ru/post/197588/)
- 18 правил идеального psd-макета — полезный чек-лист для дизайнеров / Хабр (https://habr.com/ru/post/353430/)
- _Также прочесть:
- Верхня ширина содержимого.
- Группирование по слоям и директориям.
- Исходные файлы шрифтов и графики.
- Соблюдение сетки в 12 колонок.
- Нарисованные эффекты при наведении.
- Труд в Photoshop:
- Hotkeys для работы веб-дизайнера:
- Горячие клавиши в Фотошопе для веб-дизайнеров | Обучение веб-дизайну | Юлия Вильчинская (vilchinskaya.com/goryachie-klavishi-v-fotoshope-dlya-veb-dizajnerov/)
- Полезные горячие клавиши для фотошопа (design-mania.ru/tools/programs/photoshop-hotkeys/)
- Горячие клавиши Photoshop — 50 способов ускорить работу (https://skillbox.ru/media/design/50_goryachikh_klavish_photoshop/)
- Hotkeys для работы веб-дизайнера:
- Производство документа:
- Создание документов в Photoshop с использованием шаблонов и стилей (https://helpx.adobe.com/ru/photoshop/using/create-documents.html)
- Работа со слоями и директориями:
- Изучение основ работы со слоями в Photoshop (https://helpx.adobe.com/ru/photoshop/using/layer-basics.html)
- Smart-objects в макете:
- Smart Object в Photoshop – поможет и верстальщикам, и дизайнерам / Хабр (https://habr.com/ru/post/161111/)
- Шрифты и начертания (куда смотреть?):
- Типографика в вебе / Хабр (https://habr.com/ru/post/324944/)
- Как верно вырезать графику:
- Быстрая нарезка psd макета для верстки. - YouTube (https://www.youtube.com/watch?v=pLWAzoDvWsc)
- Иконки и изображения с прозрачным фоном для веба:
- Использование прозрачности PNG формата в веб дизайне (https://handynotes.ru/2007/10/png.html)
- Как сберечь графику для сайта (формат, имя, размер и т.п.):
- Оптимизация графики для веба: самое важное / Хабр (https://habr.com/ru/post/422531/)
- Требования к дизайн-макету.
-
Требования, которые предъявляются к дизайн-макету сайта:
-
Труд в Photoshop:
-
Требования к дизайн-макету.
- Требования, которые предъявляются к дизайн-макету сайта:
-
База HTML. Каталог с веб-сайтом. Автоматизированное обновление веб-страницы:
- Разобраться с HTML:
- Как писать HTML:
- Как писать на HTML5 и какие у него возможности — руководства на Skillbox (https://skillbox.ru/media/code/sozdaem_sayt_na_html/)
- Введение в HTML | htmlbook.ru (htmlbook.ru/samhtml/vvedenie-v-html)
- Структура HTML-кода | htmlbook.ru (htmlbook.ru/samhtml/struktura-html-koda)
- Как писать HTML:
- Виды тегов (Требующие/не требующие закрытия):
- 18 тегов не требующих обязательного закрытия — Olunka ♥ layout of sites and emails (www.olunka.ru/18-tegov-ne-trebuyushhix-obyazatelnogo-zakrytiya/)
- "Голова документа" - скрытая часть. Служебные теги.
- "Тело документа" - видимая часть.
- Теги header, nav, section, article, footer.
- Учебник HTML - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-html/uchebnik-html)
- Учебник по HTML5 - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-html5/uchebnik-po-html5)
- Самоучитель HTML (http://htmlbook.ru/files/samhtml_pdf.zip)
- Уроки HTML:
- HTML5 уроки с нуля для начинающих! - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUpe6yMyXAlcrfT6AO0KW1a)
- HTML5 для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FN_QkwB5UIcVcP61yaj1HKc)
- HTML5 уроки. Полный курс (2019) Light - YouTube (https://www.youtube.com/playlist?list=PL30ZzYn5yk1nAdS8rPqF-Plufndh5cJKg)
- HTML5 уроки для начинающих - YouTube (https://www.youtube.com/playlist?list=PLQOaTSbfxUtDSLxoc9vpOHNu8BrijOcmk)
- Введение в HTML - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMANAaBP1p_OB39zVgsqvqNg)
- HTML-мастер - YouTube (https://www.youtube.com/playlist?list=PLPpaecEYRC8ZUr9Avu3_BLAFa8tsAxAzr)
- Основы HTML - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUGjl_u0FaYIIF_BfXcD3oWq)
- Создать каталог с веб-сайтом с необходимой структурой внутри:
- Папка css в которой будет находится файл style.css.
- Папка fonts - в ней будут храниться шрифты для веб-сайта.
- Папка js.
- Папка img.
- Файл index.html — это главный файл веб-сайта, нужно проследить, чтобы он не выглядел, как index.html.txt или что-то в этом роде.
-
Разобраться с HTML:
-
Уроки HTML:
-
Создать каталог с веб-сайтом с необходимой структурой внутри:
- Разобраться с HTML:
-
Ознакомление с CSS:
- Уроки CSS:
- Изучение CSS/CSS3 от нуля до гуру! - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXoN83I4uVez8rIB25O4rk0)
- Основы CSS/CSS3 - YouTube (https://www.youtube.com/playlist?list=PL026CCEB5125879C2)
- CSS3 для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FM7WkhQO8x9PSHI4OFDWC5r)
- Практические уроки по CSS и CSS3 - YouTube (https://www.youtube.com/playlist?list=PL8pp2EAvIK-LQgy4sgJE6zxabsIyYQAWi)
- Все про CSS - YouTube (https://www.youtube.com/playlist?list=PLZfRjCZl2NuQzChEACaA8wZ1Z8OFO7Xdf)
- Уроки CSS - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGWYnBnKd42xrynzEegXzgxv)
- Уроки Materialize CSS - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGUwU-qRYkDgTZz1pbDdLc45)
- CSS Grid уроки - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGVZdDQA_rMkoGvJTdvYqCjA)
- Основы CSS - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUHcbcuaSkFSLtlFEj4V21xe)
- Ознакомление с основами CSS:
- Пути присоединения CSS:
- Через тег link.
- Через тег style.
- Через @import.
- Пути присоединения CSS:
- Труд с текстом в CSS:
- Выравнивание текста.
- Цвет текста.
- Все заглавными буквами.
- Подчеркнутый текст.
- Зачеркнутый текст.
- Работа с цветом в CSS:
- Кодировки цвета.
- Цвет в rgb.
- Кодировка #hex.
- Box-model CSS:
- Блочные теги.
- Строчные теги.
- Строчно-блочные теги.
- Скачать самоучитель CSS (http://htmlbook.ru/files/samcss_pdf.zip)
- Задачи:
- Оформить мою миникнигу.
- Добавить стили.
- Выровнять заголовки по центру.
- Добавить фон, рамки.
- Жирный шрифт, курсив и подчеркивания обязательно перенести в CSS.
- Позиционирование в CSS:
- Масштабность и вышина для элементов.
- margin + padding + border.
- Способы позиционирования элементов.
- z-index.
- Обтекание элементов в потоке.
- Задачи:
- Масштабность и вышина для элементов.
- margin + padding + border.
- Способы позиционирования элементов.
- z-index.
- Обтекание элементов в потоке.
- Создать документ HTML внутри которого должен находится элемент (шапка сайта с навигацией):
- Шапка должна иметь fixed position и всегда находиться на самом верху страницы независимо от прокрутки и занимать всю ширину страницы:
- Шапка должна иметь fixed position и всегда находиться на самом верху страницы независимо от прокрутки и занимать всю ширину страницы.
- Background-color шапки - black.
- Color гиперссылок внутри header - white.
- На веб-странице должен находится абзац с lorem ipsum на 20 * 5 * 10 слов.
- В header находится nav с 1 + 4 ссылками:
- Новости.
- Портфолио.
- О нас.
- Контакты.
- Карта проезда.
- Шапка должна иметь fixed position и всегда находиться на самом верху страницы независимо от прокрутки и занимать всю ширину страницы:
- Все гиперссылки размещены как block-inline элементы.
- Создать документ HTML, в котором находится блочный элемент масштабностью 150 + 150 пикселей и вышиной 200 + 200 пикселей:
- Элемент находится ровно по центру страницы по вертикали + горизонтали.
- Этот блочный элемент имеет white background-color и grey border толщиной 1+1px.
- Внутри блока есть внутренние отступы:
- Сверху и снизу по 10 + 10px.
- Слева и справа по 4 + 18 + 8px.
-
Уроки CSS:
-
Ознакомление с основами CSS:
-
Позиционирование в CSS:
- Уроки CSS:
-
Программирования:
Познакомлюсь с азами программирования, напишу первые строки кода и создам первые простые проекты на популярном языке JavaScript.
- Определиться с пониманием программист:
- Прочитать книгу ДеМарко "Дедлайн.Управление_проектами."
- Прочитать книгу Джона Сонмеза "Путь программиста"
- Видеоролик "Почему не удается стать программистом" (https://www.youtube.com/watch?v=bh55p2wAI1s)
- Всё о Java / Войти в IT после 30 и Kotlin / Интервью с Senior Java Developer (https://www.youtube.com/watch?v=iM445BnBhpw&t=22s)
- Видео уроки. Основы программирования:
- Программирование с нуля! - YouTube (https://www.youtube.com/playlist?list=PLVBQ16nKzRwqD8qPOldSYBUWEjjFOCPXu)
- Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLR4wcBxrUGPAmndrGEiN0wiaFqG-L5Yd-)
- Основы основ программирования - YouTube (https://www.youtube.com/playlist?list=PL6LDsbZOeyrwLLZYsBMT6zVS_0jqIf3E6)
- Курс "Основы программирования" - YouTube (https://www.youtube.com/playlist?list=PLwcDOdrCYh2sqN75QLD7TuM9MlGuDWTEn)
- CS50 на русском (Гарвардский курс по основам программирования) - YouTube (https://www.youtube.com/playlist?list=PLawfWYMUziZqyUL5QDLVbe3j5BKWj42E5)
- Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLyeqauxei6jfKHgefLiYxMQye331JZuqb)
- Курс "Основы программирования" - YouTube (https://www.youtube.com/playlist?list=PLmRNNqEA7JoM5mPIW7qITEbYEEFMSTu1n)
- Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLY4rE9dstrJwoVF-svoIBhKzE-Ok39Zg_)
- Курс "Объектно-ориентированное программирование" - YouTube (https://www.youtube.com/playlist?list=PLmRNNqEA7JoPhVQCUisflWWhjdoKucDuf)
- Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUGJCtoFltyUQYuaA78KvC5o)
- JavaScript:
- Введение в JavaScript - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMAfBVjns-Pth3386QOzd411)
- JavaScript для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FNmdnnSgW91SfMqFVnrz90y)
- Уроки JavaScript - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGUaEtJ_fOUz0F7TJtidE7Qw)
- Основы JavaScript - YouTube (https://www.youtube.com/playlist?list=PL363QX7S8MfSxcHzvkNEqMYbOyhLeWwem)
- Основы javascript - YouTube (https://www.youtube.com/playlist?list=PLY4rE9dstrJymG1GyPLgOKsJNq9r-p6pX)
- Изучение JavaScript от нуля до гуру - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUGX9k45bZFuz1ixTvUhd7b)
- Уроки JS - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnFtINH_dCUW6-wLSauygif2)
- Курс Практический JavaScript - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnFxysA3eKw3yj3exkw-qFMR)
- Java script ..Урок 1. Переменные, ветвления, циклы - YouTube (https://www.youtube.com/watch?v=ye_kTY__nx0)
- Основы JS - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUF5gARurVE4gtC5qtdS6PIL)
- JavaScript Решает - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnG-oMkclNX0FIcLZR18hFDM)
- Узнать что это?
- Алгоритмы?
- Переменные, числа и строки?
- Логика и математика?
- Ветвление кода?
- Алгоритм с множественным выбором?
- Ошибки в коде?
- Массивы?
- Циклы?
- Подпрограмма, функция?
- Объекты?
- Синхронное и асинхронное выполнение алгоритма?
- Выполнение проекта по итогам модуля?
-
Определиться с пониманием программист:
-
Видео уроки. Основы программирования:
-
JavaScript:
-
Узнать что это?
- Определиться с пониманием программист:
-
AJAX:
- Изучение технологий Ajax - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUgBqIpiaES9vhZLJbucdUa)
- AJAX - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnEIJadIGpBVm1yaPJPlFaeS)
- Учебник по AJAX - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-ajax/uchebnik-po-ajax)
- Javascipt. AJAX. Основы асинхронных запросов. - YouTube (https://www.youtube.com/watch?v=x2DTiziYq7g)
-
Изучение технологий Ajax - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUgBqIpiaES9vhZLJbucdUa)
-
AJAX - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnEIJadIGpBVm1yaPJPlFaeS)
-
Учебник по AJAX - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-ajax/uchebnik-po-ajax)
-
Javascipt. AJAX. Основы асинхронных запросов. - YouTube (https://www.youtube.com/watch?v=x2DTiziYq7g)
-
JQuery:
- Прочесть книгу "jQuery учебник для начинающих " (https://www.kobzarev.com/wp-content/uploads/books/jquery/jQuery-tutorial-for-beginners-1.0.0beta.pdf)
- JQuery Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/jquery/jquery-tutorial)
- Изучение библиотек jQuery - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXQk_TTlSO7y7J1l5e-RMgi)
- jQuery - YouTube (https://www.youtube.com/playlist?list=PLyf8LgkO_8q995GGnMf26P321RSZjgwjH)
- Уроки jQuery - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGXQcouhIblV910Rv7lRscH3)
-
Прочесть книгу "jQuery учебник для начинающих " (https://www.kobzarev.com/wp-content/uploads/books/jquery/jQuery-tutorial-for-begi
-
JQuery Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/jquery/jquery-tutorial)
-
Изучение библиотек jQuery - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXQk_TTlSO7y7J1l5e-RMgi)
-
jQuery - YouTube (https://www.youtube.com/playlist?list=PLyf8LgkO_8q995GGnMf26P321RSZjgwjH)
-
Уроки jQuery - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGXQcouhIblV910Rv7lRscH3)
-
JS фреймворки: Flux & React, AngularJS, Ember, Symfony, Codeigniter, Yii, Zend Framework, Flask:
- Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора / Блог компании RUVDS.com / Хабр (https://habr.com/ru/company/ruvds/blog/343894/)
- Flux
- Разбираемся с Flux, реактивной архитектурой от facebook / Хабр (https://habr.com/ru/post/246959/)
- Flux. Что? Как? Зачем? - YouTube (https://youtu.be/9nVxf2vIfu8)
- Flux для глупых людей / Хабр (https://habr.com/ru/post/249279/)
- ReactJS:
- Изучение React. Полное руководство по React (https://learn-reactjs.ru/home)
- Учебник ReactJS - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/uznaite-reactjs/uchebnik-reactjs)
- Основы React.JS - YouTube (https://www.youtube.com/playlist?list=PLDyvV36pndZEz2unvD0a2Spv7RehBrpDO)
- AngularJS:
- AngularJS Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-angularjs/angularjs-tutorial)
- Изучение Angular для начинающих - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFX2CXg7tZvmsY48-R5UvQ1V)
- EmberJS:
- Ember.js — идеальный фреймворк для веб приложений - devSchacht - Medium (https://medium.com/devschacht/graham-cox-ember-the-perfect-framework-for-web-applications-970e817ded98)
- EmberJS Учебник - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/uznaite-emberjs/emberjs-uchebnik)
- Frontend Meetup #3 - "EmberJS - ещё один лучший js-фреймворк", Максим Конин - YouTube (https://www.youtube.com/watch?v=SjEsPZHUG-A)
- Symfony:
- Учебник по Symfony - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/uchit-symfony/uchebnik-po-symfony)
- Начало работы с Symfony 4 - YouTube (https://www.youtube.com/watch?v=Rfz4jioNedY)
- Codeigniter:
- CodeIgniter Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-codeigniter/codeigniter-tutorial)
- Курс CODEIGNITER для начинающих - уроки создания сайта на фреймворке - YouTube (https://www.youtube.com/playlist?list=PLIMbZPmmhFav7FZiaY_cl6jKAOWgUmi09)
- Yii:
- Yii Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchi-yii/yii-tutorial)
- Фреймворк Yii2 с Нуля до Профи. Часть 1 - YouTube (https://www.youtube.com/playlist?list=PL9XdPIVgBVVmYWGF3BFZwHu4Fz9fa6GJd)
- Zend Framework:
- Zend Framework Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/izuchite-zend-framework/zend-framework-tutorial)
- Видеокурс - Zend Framework 2. Для профессионалов (48 видео) - YouTube (https://www.youtube.com/playlist?list=PLoonZ8wII66j76OU66nzKdKy1kYp0fWK0)
- Flask:
- What the flask? / Хабр (https://habr.com/ru/post/320360/)
- Создание блога на Flask (уроки) - YouTube (https://www.youtube.com/playlist?list=PLlWXhlUMyooZr5R2u2Zwxt6Pw6iwBo5y5)
-
Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора / Блог компании RUVDS.com / Хабр (https://habr.com/ru/company/ruvds/blog/34
-
Flux:
-
ReactJS:
-
AngularJS:
-
EmberJS:
-
Symfony:
-
Codeigniter:
-
Yii:
-
Zend Framework:
-
Flask:
-
Владение Unix shell и скриптовыми языками:
- Unix shell: абсолютно первые шаги / Хабр (https://habr.com/ru/post/267825/)
- ОСНОВЫ РАБОТЫ В КОМАНДНОМ ПРОЦЕССОРЕ SHELL BASH - YouTube (https://www.youtube.com/playlist?list=PLLyG9JTjVd9VTEKisukGLJhl8H2YeIN09)
-
Unix shell: абсолютно первые шаги / Хабр (https://habr.com/ru/post/267825/)
-
ОСНОВЫ РАБОТЫ В КОМАНДНОМ ПРОЦЕССОРЕ SHELL BASH - YouTube (https://www.youtube.com/playlist?list=PLLyG9JTjVd9VTEKisukGLJhl8H2YeIN09)
-
PHP, MySQL:
- Учебник по PHP - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-php/uchebnik-po-php):
- PHP для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FMBt_CCURNZQtkuR_InqjFP)
- Основы ООП - PHP - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGV1kj1gEGTgdzXt2jHwg-if)
- Курс "PHP. Быстрый старт" - YouTube (https://www.youtube.com/playlist?list=PLmRNNqEA7JoM_Xp2EI24lVXt8MyXu0r16)
- Курс Обучение PHP - YouTube (https://www.youtube.com/playlist?list=PLOFNiVk8RnFfujWqwsvrchjQRO6l8UMpW)
- PHP UP | Теория | Курс продвинутого программирования (20 уроков) - YouTube (https://www.youtube.com/playlist?list=PLSdH7dYnlGYht0eGi9-14X87hrSl9plCc)
- Основы PHP - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUEZxRivy2YweIb4nACCG14i)
- PHP для начинающих - YouTube (https://www.youtube.com/playlist?list=PLPpaecEYRC8Z7WLNSxiuJKeA0fsFC-AIQ)
- PHP - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnFbCIkW-tLHsEuwUk_z1n8P)
- CakePHP - мощь и гибкость современного PHP-фреймворка - YouTube (https://www.youtube.com/playlist?list=PLD-piGJ3Dtl3bD73ZAwLz43VOYo2jq55R)
- Создание звездного рейтинга статей для сайта на PHP - YouTube (https://www.youtube.com/playlist?list=PLD-piGJ3Dtl29Z7QGJdNngRReFX9wAOPP)
- Вебинары - курс по PHP - YouTube (https://www.youtube.com/playlist?list=PLY4rE9dstrJyHWvjunamyZnL4iqwuEYf4)
- Уроки PHP практика - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGWQBiDkIua37dCgO5rOsw0T)
- Уроки PHP 7 - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGWCBTca7m-snWrZZkjX2jGB)
- Учебник по MySQL - CoderLessons.com (https://coderlessons.com/tutorials/bazy-dannykh/izuchai-mysql/uchebnik-po-mysql):
- Учим PHP, а также MySQL - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXm69bqj5JTCS1XGTNkhTch)
- Изучение SQL для начинающих - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFVnLvR39VpEtphQ8bPJ-xR9)
- Видео уроки / курс: базы данных MySQL 5.7 сервера и реализация SQL в MySQL. Уроки администрирования сервера баз данных MySQL. - YouTube (https://www.youtube.com/playlist?list=PLeYxjiX1MAIk1yC8Jb489zRRuN6HoS4FB)
- Изучение программирования. SQL - YouTube (https://www.youtube.com/playlist?list=PLDywto_IU4_4RU0sKfID6OY-np6uGmhlf)
- Уроки MySQL + PHP - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGV6OnuUM5QTfmAQqRDCskmT)
- Понимание теории построения баз данных:
- 1. Базы данных. Введение | Технострим - YouTube (https://www.youtube.com/watch?v=SfYaAQ9-RnE)
- Лекция 1. Основные понятия теории баз данных - YouTube (https://www.youtube.com/watch?v=6wYk-0uA8B4)
-
Учебник по PHP - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-php/uchebnik-po-php):
-
Учебник по MySQL - CoderLessons.com (https://coderlessons.com/tutorials/bazy-dannykh/izuchai-mysql/uchebnik-po-mysql):
-
Понимание теории построения баз данных:
- Учебник по PHP - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-php/uchebnik-po-php):
-
GitHub
- Узнать:
- Предназначение системы контроля версий.
- Основные операции (фиксация и откат изменений, поиск, история).
- Работа с сервисом GitHub.
- Ветки, слияние веток и разрешение конфликтов.
- Командная работа.
- Навыки, которые необоходимо получить:
- научиться создавать репозиторий, добавлять и игнорировать файлы, фиксировать изменения.
- научиться работать с историей, поиском изменений, откатом изменений.
- освоите работу с ветками и разрешением конфликтов.
- научиться работать с удалёнными ветками и сервисом GitHub.
- освоите командную работу над кодом.
-
Узнать:
-
Навыки, которые необоходимо получить:
- Узнать:
-
Material Design UI:
- Изучаем Photoshop за 7 дней - YouTube (https://www.youtube.com/playlist?list=PLZ9vf4gXjsvlxF--0zm3uw3f3GQ4mYdJx)
- Эксперт в Photoshop за 30 дней - https://www.youtube.com/watch?v=fKHTGnxqv7g&list=PLZ9vf4gXjsvkvFjPhAao0Y5d5Ni-bHqLr
- Adobe Photoshop - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fglEkoPkfjTFkJdje6ZwiTm)
- Что такое ux и ui дизайн - YouTube (https://www.youtube.com/watch?v=G7deKyjzPPY)
- UI UX Дизайн Сайта 2018 - С Чего Начать? (Базовые Навыки) - YouTube (https://www.youtube.com/watch?v=uTljXWKTukM)
- Что такое UX/UI дизайн на самом деле? / Хабр (https://habr.com/ru/post/321312/)
- В чем отличие UI от UX? Подробный разбор часто используемых терминов / Блог компании Pixli / Хабр (https://habr.com/ru/company/pixli/blog/324794/)
- UX/UI-дизайн: что это такое? — статьи на Skillbox (https://skillbox.ru/media/design/ux_ui_dizayn_chto_eto_takoe/)
- Landing Page дизайн в фотошопе - YouTube (https://www.youtube.com/playlist?list=PLzGX_ggMZ5ExZfzg6bbHazjG0ol1Qv8IS)
- Web Design - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fjjB5Vl34KETeHey7TiQTIF)
-
Изучаем Photoshop за 7 дней - YouTube (https://www.youtube.com/playlist?list=PLZ9vf4gXjsvlxF--0zm3uw3f3GQ4mYdJx)
-
Эксперт в Photoshop за 30 дней
-
Adobe Photoshop - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fglEkoPkfjTFkJdje6ZwiTm)
-
Что такое ux и ui дизайн - YouTube (https://www.youtube.com/watch?v=G7deKyjzPPY)
-
UI UX Дизайн Сайта 2018 - С Чего Начать? (Базовые Навыки) - YouTube (https://www.youtube.com/watch?v=uTljXWKTukM)
-
Что такое UX/UI дизайн на самом деле? / Хабр (https://habr.com/ru/post/321312/)
-
В чем отличие UI от UX? Подробный разбор часто используемых терминов / Блог компании Pixli / Хабр (https://habr.com/ru/company/pixli/blog/32
-
UX/UI-дизайн: что это такое? — статьи на Skillbox (https://skillbox.ru/media/design/ux_ui_dizayn_chto_eto_takoe/)
-
Landing Page дизайн в фотошопе - YouTube (https://www.youtube.com/playlist?list=PLzGX_ggMZ5ExZfzg6bbHazjG0ol1Qv8IS)
-
Web Design - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fjjB5Vl34KETeHey7TiQTIF)
-
Верстка:
- Верстка дизайн-макета:
- Попробовать вёрстку:
- Визуальная разметка страницы.
- Создание скелета.
- Для чего нужны reset.css и normalize.css?
- Стилизация страницы.
- Завершение работы. Готовый сайт.
- Попробовать вёрстку:
- Задачи:
- Скачать макет.
- Создать каталог с проектом.
- Подключить normalize или reset CSS.
- Сверстать макет на чистом HTML и CSS с использованием normalize или reset.
- Форсирование верстки в несколько крат:
- Включение Bootstrap для прорывного верстания.
- Что такое верстка колонами?
- Container.
- 1 из 12 колон.
- Пространство в колонах.
- Завершенные классы в Bootstrap.
- Buttons, forms и blocks.
- Slider, windows и т.п.
- Включение Bootstrap для прорывного верстания.
- Задача:
- Скачать дизайн-макет.
- Сверстать ряд, который имеет (5 + (0.5+0.5)) иконок. Отображаться они должны следующим образом:
- на ультра малых дисплеях - в ряд по (0.5 + 0.5) иконке.
- на малых дисплеях — в ряд по (0.5*4) иконки.
- на средних дисплеях — в ряд по ((0.5*4) + (0.5+0.5)) иконки.
- на больших дисплеях — в ряд по (0.5*12) колонок.
- В колоне всё отцентровать.
- Доп. задача:
- Разузнать, если успею быстро выполнить вышепоставленную миссию, о flexbox, с чем это едят и что это вообще такое.
- Верстание с помощью Twitter Bootstrap 4:
- Видимая маркировка документа.
- Формирование скелета и маркировка по grid.
- Использование класса .container.
- Для каждой новой строки — .row.
- Что разделяет страницу — .col-.
- Формирование скелета и маркировка по grid.
- Видимая маркировка документа.
- Украшение документа.
- Сочинение CSS.
- Окончание задачи. В итоге: сделанный веб-сайт.
- Упражнения.
- Cкачать дизайн-макет.
- Сделать вёрстку с использованием фреймворка Twitter Bootstrap 4 под разные разрешения дисплеев.
- LESS:
- Для чего нужен LESS и его основы.
- Что такое:
- Миксины?
- Компилятор?
- Переменные?
- Цвет и как с ним работать?
- Вложенность?
- Что такое:
- Для чего нужен LESS и его основы.
- Задачи:
- Написать(с использованием миксин и переменных) LESS код, который будет таким же как и в файле lesson.css.
- Сниппеты:
- Основы сниппетов.
- Как и для чего нужен:
- Синтаксис сниппета.
- Создается сниппет.
- Пользоваться gist.
- Установить сниппеты от Twitter Bootstrap 4.
- Как и для чего нужен:
- Основы сниппетов.
- Задача:
- Создать сниппет стартового шаблона HTML:
- Предвидеть позицию положения курсоров в сниппете.
- Предписать все нужные метатеги.
- Создать сниппет стартового шаблона HTML:
- GitHub:
- Что такое и как этим пользоваться:
- Github Pages.
- Разметка для README.
- Что такое и как этим пользоваться:
- Задача:
- Загрузить ДЗ в подпапки в основном репозитории.
- Дать этим папкам понятное имя.
- Сделать страницу на README которая будет отсылаться на прошлые ДЗ.
- Адаптивная вёрстка:
- Что такое и как его есть:
- Расширение PerfectPixel.
- Вёрстка Pixel Perfect.
- Применение вёрстки Pixel Perfect.
- Резиновая верстка.
- Адаптивная верстка.
- Медиа запросы.
- Что такое и как его есть:
- Задачи:
- Скачать макет формы.
- Сверстать этот макет.
- Шрифты:
- Как или что такое:
- Определять шрифты в макете.
- Подключать шрифты через сервис Google Fonts.
- Подключать специфичные шрифты.
- Атрибуты шрифтов в таблицах стилей.
- Как или что такое:
- Задачи:
- Скачать исходники.
- Подключить шрифты.
- Псевдоклассы и псевдоэлементы:
- Псевдоклассы:
- :hover.
- :focus.
- :visited.
- и т.д.
- Псевдоклассы:
- Псевдоэлементы:
- ::before.
- ::after.
- применение на практике.
- Задачи:
- Сделать эффект затемнения изображений при наведении на них курсором мыши.
- Сделать этот же эффект, только при наведении курсором на кнопки.
- Слайдер:
- Как делать:
- Подключить сторонние библиотеки к сайту.
- Стандартный слайдер от Twitter Bootstrap 4.
- Слайдер для фотографий Fotorama.
- Слайдер для контента Slick Slider.
- Как делать:
- Задача:
- Сделать вёрстку слайдера для фотографий.
- С возможностью:
- Просмотра миниатюры + развертывания на всю страницу.
- Бесконечного прокручивания.
- Прокручивания автоматически через каждые 2 секунды.
- Модальное окно:
- Окно от Twitter Bootstrap 4:
- Должна быть подключена сначала библиотека jQuery.
- Подключены стили от Bootstrap (CSS).
- Подключены js-файлы от Bootstrap.
- Окно от Twitter Bootstrap 4:
- Окно от Magnific Popup:
- Должна быть подключена сначала библиотека jQuery.
- Подключены стили от Magnific Popup (CSS).
- Подключены js-файлы от Magnific Popup.
- Окно на весь экран:
- Должна быть подключена сначала библиотека jQuery.
- Перенести стили из демо-архива (CSS).
- Подключить js-файлы snap-svg и main.
- Задача:
- Сверстать кнопку "Загрузить файл":
- При клике на кнопку всплывает диалоговое окно с вопросом "Ты точно этого хочешь?"
- Должны быть 2 варианта ответов: Нет и Да.
- Окно должно иметь при себе крестик в верхнем углу, причём при клике на него можно закрыть данное модальное окно.
- Сверстать кнопку "Загрузить файл":
- Табы и аккордеон:
- Табы от Twitter Bootstrap 4:
- Для работы должны быть подключены:
- Библиотека jQuery.
- Стили от Twitter Bootstrap 4.
- javascript-файлы от Twitter Bootstrap 4.
- Для работы должны быть подключены:
- Табы от Twitter Bootstrap 4:
- Стандартный аккордеон от Twitter Bootstrap 4:
- Для работы должны быть подключены:
- Библиотека jQuery.
- Стили от Twitter Bootstrap 4.
- Файлы javascript от Twitter Bootstrap 4.
- Для работы должны быть подключены:
- Задача:
- Сделать форму регистрации с помощью табов.
- Сделать аккордеон.
- Анимация на CSS3:
- Правило @keyframes
- Ключевые кадры from,to.
- Название анимации, длительность, задержка и т.п.
- Временная функция анимации.
- Множественные анимации.
- Подключение animate.css.
- Срабатывание анимации при пролистывании страницы.
- Задача:
- Установить библиотеку animate.css и wow.js.
- Анимировать форму регистрации.
- Видеофон на сайт:
- Подключение видеофона с помощью vide.js:
- Подключение jQuery.
- Инициализация плагина.
- Подготовка видеофона.
- Настройка видеофона и картинки на замену.
- Выбор видеофона для сайта.
- Задача:
- Скачать с сайта видеофон и установить его на странице сайта в качестве видеофона с помощью vide.js.
- Подключение видеофона с помощью vide.js:
- Эффект Parallax:
- Parallax при движении мышью:
- Подключение фона с Parallax.
- Parallax при движении мышью:
- Relax при прокрутке страницы:
- Настройка и подключение Parallax.
- Задача:
- Сделать эффект параллакс с помощью двух библиотек, при этом на одной странице.
- Карты на сайте:
- Карты от яндекса.
- Карты от google.
- Карты от jsbox.
- Карты от 2gis.
- Задача:
- Добавить интерактивную карту на веб-страницу.
- Хостинг:
- Что такое и как с этим справляться:
- Хостинг.
- Домен.
- FTP.
- FTP конфигурирование.
- Публикация сайта на хостинге.
- Что такое и как с этим справляться:
- Задача:
- Всё сделанное на GitHub опубликовать на нём.
- Аналитика для сайта:
- Что такое или как?
- Счетчик аналитики и веб-визор.
- Установка счетчика от яндекса.
- Настройка целей.
- Установка счетчика от google.
- Вставка пикселя ретаргетинга вк.
- Что такое или как?
- Задача:
- Установить счетчик яндекса.
- В метрике настроить цели (нажатие на кнопку или переход на страницу).
- Проверить с помощью дебаггера работоспособность счетчика.
- Формы:
- Как работают формы на сайтах:
- Синтаксис у форм:
- Синтаксис у PHP.
- Ошибки при составлении форм.
- Обработчик форм на сервере.
- Синтаксис у форм:
- Как работают формы на сайтах:
- Что такое и зачем:
- Локальный сервер.
- Скрипт отправки письма через SMTP сервер:
- Скрипт SMTP-отправки письма.
- Задача:
- Сделать отправление данных из формы в почту.
- Залить полученное на хостинг.
- Как делаются многостраничные сайты:
- PHP на многостраничнике.
- Как выглядит простой многостраничный сайт.
- Динамика на сайте.
- Панель администратора на сайте.
- Задача:
- Сделать многостраничный сайт.
- Залить всё на хостинг.
- WordPress - движок для сайта. Часть 1:
- Что такое и как?
- Движок.
- WordPress на сервер.
- Подготовка HTML.
- Тема для WordPress.
- Подключение изображений и сценариев.
- Заполнение сайта.
- Что такое и как?
- Задача:
- Натянуть верстку на Wordpress. (https://startbootstrap.com/themes)
- При этом должны работать сценарии и изображения.
- WordPress - движок для сайта. Часть 2:
- Что такое и как?
- Произвольные поля?
- Сотворение и конфигурирование произвольных полей.
- Верное присоединение сценариев и каскадных таблиц стилей.
- Что такое и как?
- Задача:
- На всех страницах должны работать изображения и сценарии.
- Сценарии должны быть подключены верно с помощью functions.php
- На сайте должны быть произвольные поля.
- Тестирование верстки:
- Что такое:
- Тестирование на валидность.
- W3C стандарты.
- Тесты на скорость загрузки.
- Оптимизация сайта для быстрой загрузки.
- Что такое:
- Задача:
- Проверить сайт на валидность и исправить абсолютно все возможные ошибки.
- Оптимизировать скорость загрузки сайта максимально хорошо.
-
Верстка дизайн-макета:
-
Форсирование верстки в несколько крат:
-
Верстание с помощью Twitter Bootstrap 4:
-
LESS:
-
Сниппеты:
-
GitHub:
-
Адаптивная вёрстка:
-
Шрифты:
-
Псевдоклассы и псевдоэлементы:
-
Слайдер:
-
Модальное окно:
-
Табы и аккордеон:
-
Анимация на CSS3:
-
Видеофон на сайт:
-
Эффект Parallax:
-
Карты на сайте:
-
Хостинг:
-
Аналитика для сайта:
-
Формы:
-
Как делаются многостраничные сайты:
-
WordPress - движок для сайта. Часть 1:
-
WordPress - движок для сайта. Часть 2:
-
Тестирование верстки:
- Верстка дизайн-макета:
-
Портфолио и резюме:
- Как составить хорошее резюме.
- Сайт-портфолио.
- Где еще размещать портфолио.
- Страница в социальных сетях.
- Блоггинг.
- Задача:
- Сделать прототип своего портфолио.
- Законспектировать видео.
-
Как составить хорошее резюме.
-
Сайт-портфолио.
-
Где еще размещать портфолио.
-
Страница в социальных сетях.
-
Блоггинг.
-
Задача:
-
Поиск заказчика:
- Группа вконтакте.
- Аккаунт в Инстаграм.
- Группа или страница на Фейсбук.
- Канал на ютуб.
- Блог на Wordpress.
- Контекстная реклама (Яндекс и Google).
- Таргетинг Вконтакте.
- Посев постов и промо посты Вконтакте
- Таргетинг на Facebook и Instagram.
- Холодные звонки по клиентам на авито.
- Холодные звонки по базам 2Gis, Яндекс.Карты, Google Maps.
- Выставки (Москва и регионы).
- Техника «ТнЛинП».
- Ссылки на сайтах клиентов.
- Партнерский маркетинг (Дизайнеры, копирайтеры, директологи и т.д.).
- Email рассылки по базам партнеров (или по подписчикам).
- Форумы и чаты (Экспертность).
- Реферальная система продаж.
- Размещение на авито и др. Площадках.
- Допродажи своим клиентам (не для новичков).
- Размещение портфолио на behance.net (http://behance.net/) и других площадках.
- Тематические статьи в онлайн изданиях (или оффлайн).
- Бумажное письмо.
- Полиграфия (визитки, листовки и т.д.).
- Своя книга, журнал и т.д.
- Ответы Гугл, ответы Мейл, toster, habrahabr и т.д.
- Продажа шаблнов.
- Задача:
- Выписать список рекламных каналов
- Применить технику ТЛИНП
-
Ведение клиентов. Общение и CRM:
- Как получать заказы и обратить на себя внимание заказчика?
- Как назвать стоимость своей работы?
- Как сделать так, чтобы тебя не кинули?
- Правила работы с клиентами?
- Что делать с недовольным заказчиком?
- База клиентов?
- Как сдавать проект, чтобы стоить дорого?
-
Как получать заказы и обратить на себя внимание заказчика?
-
Как назвать стоимость своей работы?
-
Как сделать так, чтобы тебя не кинули?
-
Правила работы с клиентами?
-
Что делать с недовольным заказчиком?
-
База клиентов?
-
Как сдавать проект, чтобы стоить дорого?
-
Набивать портфолио:
Нужен опыт, а также портфолио, чтобы было хотя бы какое-то доверие от заказчика На каждый день буду пытаться делать по 1 работе, если не успеваю за день, то за два А если вообще буду хуже успевать, то также буду удлинять сроки.
- Первый этап:
- Ресурсы с шаблонами буду брать отсюда:
- Шаблоны:
- Material design —https://templateflip.com/templates/material-landing/
- Infinity —https://themewagon.com/themes/best-free-coming-soon-bootstrap-4-template-2017/
- Funder —https://themewagon.com/themes/free-bootstrap-4-html5-insurance-website-template-funder/
- DrCare —https://themewagon.com/themes/free-html5-bootstrap-4-medical-website-template-drcare/
- Второй этап:
- Шаблоны:
- Chimper —https://themewagon.com/themes/free-html5-bootstrap-4-business-website-template-chimper/
- Roberto —https://themewagon.com/themes/free-html5-hotel-website-template-roberto/
- Rapid —https://themewagon.com/themes/free-bootstrap-business-website-template-rapid/
- Real Estate —https://themewagon.com/themes/free-html5-bootstrap-4-business-website-template-real-estate/
- Medino —http://demo.themewagon.com/preview/free-html5-boot...
- Steak Shop —https://themewagon.com/themes/free-bootstrap-4-html5-restaurant-website-template-steakshop/
- The Event —https://bootstrapmade.com/theevent-conference-event-bootstrap-template/
- Digital Web —https://w3layouts.com/digital-a-business-category-flat-bootstrap-responsive-web-template/
- Loaft —https://technext.github.io/loaft/index.html
- eBusiness —https://bootstrapmade.com/demo/themes/eBusiness/
- Carting —https://demo.w3layouts.com/demos_new/template_demo/17-05-2019/carting-demo_Free/1248462135/web/index.html
- Pointer —https://technext.github.io/pointer/index.html
- Maxim —https://bootstrapmade.com/demo/themes/Maxim/
- Savage —https://demo.w3layouts.com/demos_new/template_demo/17-05-2019/savage_demo_Free/2112248620/web/index.html
- Amplify —https://technext.github.io/amplify/index.html#process-section
- BizPage —https://bootstrapmade.com/demo/themes/BizPage/
- Шаблоны:
- Третий этап и делать сниппеты:
- Шаблоны:
- Demand —https://w3layouts.com/demand-corporate-category-flat-bootstrap-responsive-website-template/
- OneSchool —https://themewagon.com/themes/free-bootstrap-4-html5-educational-website-template-oneschool/
- NewBiz —https://bootstrapmade.com/demo/NewBiz/
- Mechanized —https://w3layouts.com/mechanized-an-industrial-category-bootstrap-responsive-web-template/
- BizCraft —https://themefisher.com/products/bizcraft-multipurpose-business-template/
- Ecoland —https://technext.github.io/ecoland/index.html
- Knight —https://bootstrapmade.com/demo/themes/Knight/
- Educenter —http://demo.themefisher.com/educenter/
- Шаблоны:
- Первый этап:
-
Правильно составьте резюме:
- _Также прочесть:
- Как составить резюме? - Лайфхакер (https://lifehacker.ru/cv/0
- 33 лайфхака для резюме, которые удвоят твою заработную плату - Лайфхакер (https://lifehacker.ru/33-lajfhaka-dlya-rezyume/)
- 50 лайфхаков для успешного прохождения собеседования - Лайфхакер (https://lifehacker.ru/50-lajfhakov-dlya-sobesedovaniya/)
- Вот поэтому вас и не берут на работу: 10 провальных ошибок на собеседовании - Лайфхакер (https://lifehacker.ru/kak-ne-oshibitsya-na-sobesedovanii/)
- 7 признаков, которые должны насторожить при общении с потенциальным клиентом - Лайфхакер (https://lifehacker.ru/problemnyj-klient/)
- Обновление резюме как регулярный анализ своей работы - Лайфхакер (https://lifehacker.ru/cv-updates/)
- 7 советов, которые помогут вам пройти собеседование и получить работу - Лайфхакер (https://lifehacker.ru/7-sovetov-projti-sobesedovanie/)
- Как стать хорошим работником - Лайфхакер (https://lifehacker.ru/kak-stat-xoroshim-rabotnikom/)
- Как написать резюме: образец 2019 — Work.ua (https://www.work.ua/ru/articles/jobseeker/1596/)
- 25 Креативных шаблонов резюме: как стильно получить новую работу (https://business.tutsplus.com/ru/articles/25-creative-resume-templates-to-land-a-new-job-in-style--cms-26395)
- Идеальное резюме Junior'а: как найти лучшую работу в сфере информационных технологий | AIN.UA (https://ain.ua/2015/01/14/idealnoe-rezyume-juniora-kak-najti-luchshuyu-rabotu-v-sfere-informacionnyx-texnologij/)
- Как написать резюме веб-разработчика, которое поможет вам попасть на собеседование | Techrocks (https://techrocks.ru/2018/10/02/how-to-write-a-web-developer-resume/)
- Резюме программистов. Часть 1 (плохие) / Хабр (https://habr.com/ru/post/184332/)
- 15 лучших HTML шаблонов резюме для потрясающих персональных сайтов (https://business.tutsplus.com/ru/articles/best-html-resume-templates--cms-28115)
- Как получить работу в IT-компании (https://netology.ru/blog/guid-job-interview#А кто нужен в интернет-бизнесе?)
- Признаки хорошего резюме: _Хорошее резюме не должно быть больше 1-2 страниц. Откликаясь на вакансию, напишите сопроводительное письмо: почему вам интересна вакансия, почему ваш опыт релевантен, любимые профессиональные книги и ресурсы //
- Список технологий, в которых вы действительно разбираетесь. Не нужно распыляться и писать обо всем, что немного изучали. Еще дилетанта может выдать структура резюме: когда знание офисных программ, языков программирования и СУБД просто идут одним списком — располагайте технологии так, как они связаны на рынке:
- Неправильно:
- Знаю: PHP, Brackets, MongoDB, MVC, HTML, CSS, Node JS, Angular, Backbone, MySql, Oracle, WebPack, React JS, Codeigniter.
- Правильно:
- Знаю: HTML, CSS, PHP. Немного знаком: JavaScript, Codeigniter.
- Неправильно:
- Описание опыта через достижения, решенные задачи, интересные технические подробности. Укажите, какую часть проекта разработали именно вы:
- Неправильно:
- Разработка архитектуры приложения, баг фиксинг и другие общие слова.
- Правильно:
- Занимался бэкенд-разработкой приложений для оптимизации бизнес-процессов. Разрабатывал архитектуру облачной платформы SmartWay. За время работы оптимизировал время и качество разработки типовой API, снизив время разработки с 16-20 до 10-12 часов.
- Неправильно:
- Ваши работы и их код:
- Неправильно:
- Скриншоты без ссылок на работы.
- Правильно:
- Портфолио на GitHub с наиболее сложными проектами, где можно увидеть качество вашего кода.
- Неправильно:
- Список технологий, в которых вы действительно разбираетесь. Не нужно распыляться и писать обо всем, что немного изучали. Еще дилетанта может выдать структура резюме: когда знание офисных программ, языков программирования и СУБД просто идут одним списком — располагайте технологии так, как они связаны на рынке:
- _Также прочесть:
- 1742
- 01 июня 2020, 08:52
Не пропустите новые записи!
Подпишитесь на цель и следите за ее достижением