1

Step 1

_Также посмотреть:

2

Step 2

С первых дней работа над портфолио:

3

Step 3

Не для портфолио, но для практики:

4

Step 4

Завести знакомства в индустрии:

5

Step 5

Сбор рабочего места для web-разработки:

6

Step 6

_Также прочесть:

7

Step 7

Книжная полочка:

8

Step 8

Навыки работы с большими объемами информации:

9

Step 9

Ступени производства web-сайта:

10

Step 10

Труд в Photoshop с дизайн-макетом:

11

Step 11

База HTML. Каталог с веб-сайтом. Автоматизированное обновление веб-страницы:

12

Step 12

Ознакомление с CSS:

13

Step 13

Программирования:

14

Step 14

AJAX:

15

Step 15

JQuery:

16

Step 16

JS фреймворки: Flux & React, AngularJS, Ember, Symfony, Codeigniter, Yii, Zend Framework, Flask:

17

Step 17

Владение Unix shell и скриптовыми языками:

18

Step 18

PHP, MySQL:

19

Step 19

GitHub

20

Step 20

Material Design UI:

21

Step 21

Верстка:

22

Step 22

Портфолио и резюме:

23

Step 23

Поиск заказчика:

24

Step 24

Ведение клиентов. Общение и CRM:

25

Step 25

Набивать портфолио:

26

Step 26

Правильно составьте резюме:

1

Step 1

_Также посмотреть:

2

Step 2

С первых дней работа над портфолио:

3

Step 3

Не для портфолио, но для практики:

4

Step 4

Завести знакомства в индустрии:

5

Step 5

Сбор рабочего места для web-разработки:

6

Step 6

_Также прочесть:

7

Step 7

Книжная полочка:

8

Step 8

Навыки работы с большими объемами информации:

9

Step 9

Ступени производства web-сайта:

10

Step 10

Труд в Photoshop с дизайн-макетом:

11

Step 11

База HTML. Каталог с веб-сайтом. Автоматизированное обновление веб-страницы:

12

Step 12

Ознакомление с CSS:

13

Step 13

Программирования:

14

Step 14

AJAX:

15

Step 15

JQuery:

16

Step 16

JS фреймворки: Flux & React, AngularJS, Ember, Symfony, Codeigniter, Yii, Zend Framework, Flask:

17

Step 17

Владение Unix shell и скриптовыми языками:

18

Step 18

PHP, MySQL:

19

Step 19

GitHub

20

Step 20

Material Design UI:

21

Step 21

Верстка:

22

Step 22

Портфолио и резюме:

23

Step 23

Поиск заказчика:

24

Step 24

Ведение клиентов. Общение и CRM:

25

Step 25

Набивать портфолио:

26

Step 26

Правильно составьте резюме:

01 June 2020 30 November 2024

0 4


days
before completion
Details Briefly

Goal abandoned

The author does not write in the goal 10 months 23 days

Goal author

Михаил

Ukraine, Каменец-Подольский

28 years old

Send message

Add to friends

General

Веб-разработчик

С чего начать карьеру разработчика: пошаговый мой план:

 Goal Accomplishment Criteria

Найти работу.

 Goal ecological compatibility

Почему веб:

Это очень востребовано.

Больше всего свободы в плане удаленной работы.

Хорошая точка для старта: низкий порог входа, при желании можно дальше развиваться в других направлениях

  1. _Также посмотреть:

    1. Введение в web разработку - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMDyNxzXkfhkfHxh8mTAkVVm)
    2. Ключевые компетенции веб-разработчика - YouTube (https://www.youtube.com/watch?v=lmrd4IkTv0A)

    1. Введение в web разработку - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMDyNxzXkfhkfHxh8mTAkVVm)

    2. Ключевые компетенции веб-разработчика - YouTube (https://www.youtube.com/watch?v=lmrd4IkTv0A)

  2. С первых дней работа над портфолио:

    1. Разработать свой проект. (Маленький, но достаточно сложный, чтобы начать осваивать инфраструктуру того языка, на котором пишу. Желательно, чтобы это был opensource-проект: так работодатель сможет изучить код.)
    2. Выложите его на:
      1. GitHub.
      2. Bitbucket.

    1. Разработать свой проект.

    2. Выложите его на:

  3. Не для портфолио, но для практики:

    1. Адаптивная верстка сайта с нуля для начинающих - MoGo - YouTube
    2. ActiveBox - верстка сайта с нуля для начинающих - YouTube
    3. Верстка сайта-портфолио с нуля - YouTube
    4. Дизайн сайта в Photoshop - YouTube
    5. HTML верстка на примере бизнес сайта - YouTube
    6. Создание дизайна сайта в бизнес стиле - YouTube
    7. Создание Landing Page на WordPress - YouTube
    8. Джедай верстки #5
    9. Создание сайта под ключ на заказ - YouTube
    10. Джедай вёрстки #6 - YouTube
    11. Джедай вёрстки #7 - YouTube
    12. Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. - YouTube
    13. HTML верстка реального макета от А до Я. Джедай верстки #7 (Все выпуски) - YouTube
    14. Курс: HTML верстка сайта-портфолио - YouTube
    15. Верстка адаптивного сайта - YouTube

    1. ActiveBox - верстка сайта с нуля для начинающих - YouTube

    2. Адаптивная верстка сайта с нуля для начинающих - MoGo - YouTube

    3. Верстка сайта-портфолио с нуля - YouTube

    4. Дизайн сайта в Photoshop - YouTube

    5. HTML верстка на примере бизнес сайта - YouTube

    6. Создание дизайна сайта в бизнес стиле - YouTube

    7. Создание Landing Page на WordPress - YouTube

    8. Джедай верстки #5

    9. Создание сайта под ключ на заказ - YouTube

    10. Джедай вёрстки #6 - YouTube

    11. Джедай вёрстки #7 - YouTube

    12. Верстка HTML + CSS За 2 Часа. Из PSD. С Нуля. Полная Запись. - YouTube

    13. HTML верстка реального макета от А до Я. Джедай верстки #7 (Все выпуски) - YouTube

    14. Курс: HTML верстка сайта-портфолио - YouTube

    15. Верстка адаптивного сайта - YouTube

  4. Завести знакомства в индустрии:

    Сейчас все ищут кадры в социальных сетях и через знакомых. И чем больше разработчиков в моем списке друзей, тем выше вероятность найти крутую вакансию.

  5. Сбор рабочего места для web-разработки:

    На данном этапе нужно установить всё, что находится в этом списке и настроить под себя.

    1. Photoshop.
    2. Sublime Text 3:

    1. Photoshop

    2. Sublime Text 3:

  6. _Также прочесть:

    1. С чего начинается путь в веб-разработку (https://netology.ru/blog/web-development-begin)
    2. Что веб-разработчику нужно знать о современном вебе (https://netology.ru/blog/developers-know)
    3. Что должен уметь фронтенд-разработчик (https://netology.ru/blog/frontend-skills)
    4. Что должен уметь бэкенд-разработчик (https://netology.ru/blog/02-2019-umeet-bekend)
    5. JavaScript: с чего начать (https://netology.ru/blog/learn-javascript-basics)
    6. Как получить работу в IT-компании (https://netology.ru/blog/guid-job-interview)

    1. С чего начинается путь в веб-разработку (https://netology.ru/blog/web-development-begin)

    2. Что веб-разработчику нужно знать о современном вебе (https://netology.ru/blog/developers-know)

    3. Что должен уметь фронтенд-разработчик (https://netology.ru/blog/frontend-skills)

    4. Что должен уметь бэкенд-разработчик (https://netology.ru/blog/02-2019-umeet-bekend)

    5. JavaScript: с чего начать (https://netology.ru/blog/learn-javascript-basics)

    6. Как получить работу в IT-компании (https://netology.ru/blog/guid-job-interview)

  7. Книжная полочка:

    1. «Эффективная работа с унаследованным кодом», Майкл К. Физерс
    2. «Приёмы объектно-ориентированного проектирования. Паттерны проектирования», Эрих Гамма и другие
    3. «Чистый код. Создание, анализ и рефакторинг», Роберт К. Мартин
    4. «Предметно-ориентированное проектирование», Эрик Эванс
    5. «JavaScript: сильные стороны», Дуглас Крокфорд
    6. «Совершенный код. Мастер-класс», Стив Макконнелл
    7. «Рефакторинг. Улучшение существующего кода», Мартин Фаулер и другие
    8. «Паттерны проектирования», Эрик Фримен, Элизабет Фримен и другие
    9. «Язык программирования C», Брайан У. Керниган, Деннис М. Ритчи
    10. «Эффективное использование С++. 55 верных способов улучшить структуру и код ваших программ», Скотт Майерс
    11. «Экстремальное программирование: разработка через тестирование», Кент Бек
    12. «Алгоритмы. Построение и анализ», Томас Х. Кормен и другие
    13. «Регулярные выражения», Джеффри Фридл
    14. «Современное проектирование на C++», Андрей Александреску
    15. «Компиляторы. Принципы, технологии и инструментарий», Альфред В. Ахо и другие

    1. «Эффективная работа с унаследованным кодом», Майкл К. Физерс

    2. «Приёмы объектно-ориентированного проектирования. Паттерны проектирования», Эрих Гамма и другие

    3. «Чистый код. Создание, анализ и рефакторинг», Роберт К. Мартин

    4. «Предметно-ориентированное проектирование», Эрик Эванс

    5. «JavaScript: сильные стороны», Дуглас Крокфорд

    6. «Совершенный код. Мастер-класс», Стив Макконнелл

    7. «Рефакторинг. Улучшение существующего кода», Мартин Фаулер и другие

    8. «Паттерны проектирования», Эрик Фримен, Элизабет Фримен и другие

    9. «Язык программирования C», Брайан У. Керниган, Деннис М. Ритчи

    10. «Эффективное использование С++. 55 верных способов улучшить структуру и код ваших программ», Скотт Майерс

    11. «Экстремальное программирование: разработка через тестирование», Кент Бек

    12. «Алгоритмы. Построение и анализ», Томас Х. Кормен и другие

    13. «Регулярные выражения», Джеффри Фридл

    14. «Современное проектирование на C++», Андрей Александреску

    15. «Компиляторы. Принципы, технологии и инструментарий», Альфред В. Ахо и другие

  8. Навыки работы с большими объемами информации:

    1. Как записывать лекции по методу Корнелла - Лайфхакер (https://lifehacker.ru/metod-kornella/)
    2. Как работать с большими объемами информации — Edu notes (edu-notes.ru/how-to-work-with-a-huge-amount-of-information/)
    3. Основные принципы работы с информацией | Развивай Мегаинтеллект (http://razvitie-intellecta.ru/osnovnye-principy-raboty-s-informaci/)
    4. Дружит ли многозадачность с нашим мозгом - Лайфхакер (https://lifehacker.ru/druzhit-li-mnogozadachnost-s-nashim-mozgom/)
    5. 8 поисковиков, которые лучше, чем Google - Лайфхакер (https://lifehacker.ru/google-alternatives/)
    6. 16 советов для эффективной работы от дизайнеров Facebook, Google и других известных компаний - Лайфхакер (https://lifehacker.ru/tips-from-designers/)
    7. Учимся учиться: как лучше усваивать знания? - Лайфхакер (https://lifehacker.ru/uchimsya-uchitsya-kak-luchshe-usvaivat-znaniya/)
    8. 10 простых советов для более эффективной работы - Лайфхакер (https://lifehacker.ru/10-advices/)
    9. Советы по эффективной работе с несколькими проектами - Лайфхакер (https://lifehacker.ru/sovety-po-ehffektivnojj-rabote-s-neskolkimi-proektami/)
    10. Как запоминать больше, используя метод 50/50 - Лайфхакер (https://lifehacker.ru/metod-50-50/)
    11. 5 секретов памяти: как запоминать легко и надолго - Лайфхакер (https://lifehacker.ru/5-sekretov-pamyati/)
    12. Как запоминать новую информацию за 40 секунд - Лайфхакер (https://lifehacker.ru/how-to-memorize/)
    13. Как лучше запоминать и применять в жизни прочитанное - Лайфхакер (https://lifehacker.ru/kak-zapominat-prochitannoe/)
    14. Лучший метод запоминать новую информацию - Лайфхакер (https://lifehacker.ru/spaced-repetition/)

    1. Как записывать лекции по методу Корнелла - Лайфхакер (https://lifehacker.ru/metod-kornella/)

    2. Как работать с большими объемами информации — Edu notes (edu-notes.ru/how-to-work-with-a-huge-amount-of-information/)

    3. Основные принципы работы с информацией | Развивай Мегаинтеллект (http://razvitie-intellecta.ru/osnovnye-principy-raboty-s-informaci/)

    4. Дружит ли многозадачность с нашим мозгом - Лайфхакер (https://lifehacker.ru/druzhit-li-mnogozadachnost-s-nashim-mozgom/)

    5. 8 поисковиков, которые лучше, чем Google - Лайфхакер (https://lifehacker.ru/google-alternatives/)

    6. 16 советов для эффективной работы от дизайнеров Facebook, Google и других известных компаний - Лайфхакер (https://lifehacker.ru/tips-from-de

    7. Учимся учиться: как лучше усваивать знания? - Лайфхакер (https://lifehacker.ru/uchimsya-uchitsya-kak-luchshe-usvaivat-znaniya/)

    8. 10 простых советов для более эффективной работы - Лайфхакер (https://lifehacker.ru/10-advices/)

    9. Советы по эффективной работе с несколькими проектами - Лайфхакер (https://lifehacker.ru/sovety-po-ehffektivnojj-rabote-s-neskolkimi-proektam

    10. Как запоминать больше, используя метод 50/50 - Лайфхакер (https://lifehacker.ru/metod-50-50/)

    11. 5 секретов памяти: как запоминать легко и надолго - Лайфхакер (https://lifehacker.ru/5-sekretov-pamyati/)

    12. Как запоминать новую информацию за 40 секунд - Лайфхакер (https://lifehacker.ru/how-to-memorize/)

    13. Как лучше запоминать и применять в жизни прочитанное - Лайфхакер (https://lifehacker.ru/kak-zapominat-prochitannoe/)

    14. Лучший метод запоминать новую информацию - Лайфхакер (https://lifehacker.ru/spaced-repetition/)

  9. Ступени производства web-сайта:

    Тут рассмотрю: Какие вообще есть ступени производства, опять-таки web-сайта; Какие вопросы в беседе с заказчиком нужно задавать и для чего; Для чего нужен прототип сайтам и естественно, что это вообще такое; И под конец, где этот прототип вообще можно изобразить;

    1. 5+2 ступеней производства web-сайта. От беседы до выпуска web-сайта:
      1. Основные этапы создания сайта - веб студия Impulse Design (https://impulse-design.com.ua/etapy-razrabotki-sajta.html)
      2. Этапы создания сайта: основные процессы разработки веб ресурсов (https://wezom.com.ua/blog/etapy-razrabotki-sajta)
    2. Что есть прототип web-сайта и для чего он необходим:
      1. Для чего нужен прототип сайта? (https://arbuz.moscow/blog-prototype)
      2. Зачем нужен прототип сайта: 5 причин, почему одностраничник не продает (https://landing.uni.co.ua/blog/zachem-nuzhen-prototip-sajta/)
    3. Места для изображения прототипа:
      1. Создание прототипа сайта: 7 инструментов для маркетолога | Блог YAGLA (https://yagla.ru/blog/marketing/sozdanie-prototipa-sayta-7-instrumentov-dlya-marketologa/)
      2. Как создать прототип сайта и зачем он вам нужен (https://serpstat.com/ru/blog/prototip-sajta-zachem-on-nuzhen-i-kak-sozdat/)

    1. 5+2 ступеней производства web-сайта. От беседы до выпуска web-сайта:

    2. Что есть прототип web-сайта и для чего он необходим:

    3. Места для изображения прототипа:

  10. Труд в Photoshop с дизайн-макетом:

    1. Требования, которые предъявляются к дизайн-макету сайта:
      1. _Также прочесть:
        1. Требования к дизайн-макетам web-страниц для верстки или делаем идеальный psd-макет - Студия Peppers Digital (https://peppers.digital/blog/requirements-to-design-layouts-of-web-pages-for-layout-sites-html)
        2. Требования к дизайн-макетам сайтов | Веб студия Флаг. Разработка сайтов в Екатеринбурге. (https://flagstudio.ru/blog/trebovania-k-dizain-maketam-saitov)
        3. Требования к дизайн-макету сайта — студия Палыча (https://palpalych.ru/blog/trebovaniya-k-dizajn-maketu-sajta)
        4. Собранные требования к psd-макету веб-сайта / Хабр (https://habr.com/ru/post/197588/)
        5. 18 правил идеального psd-макета — полезный чек-лист для дизайнеров / Хабр (https://habr.com/ru/post/353430/)
    2. Верхня ширина содержимого.
    3. Группирование по слоям и директориям.
    4. Исходные файлы шрифтов и графики.
    5. Соблюдение сетки в 12 колонок.
    6. Нарисованные эффекты при наведении.
    7. Труд в Photoshop:
      1. Hotkeys для работы веб-дизайнера:
        1. Горячие клавиши в Фотошопе для веб-дизайнеров | Обучение веб-дизайну | Юлия Вильчинская (vilchinskaya.com/goryachie-klavishi-v-fotoshope-dlya-veb-dizajnerov/)
        2. Полезные горячие клавиши для фотошопа (design-mania.ru/tools/programs/photoshop-hotkeys/)
        3. Горячие клавиши Photoshop — 50 способов ускорить работу (https://skillbox.ru/media/design/50_goryachikh_klavish_photoshop/)
    8. Производство документа:
      1. Создание документов в Photoshop с использованием шаблонов и стилей (https://helpx.adobe.com/ru/photoshop/using/create-documents.html)
    9. Работа со слоями и директориями:
      1. Изучение основ работы со слоями в Photoshop (https://helpx.adobe.com/ru/photoshop/using/layer-basics.html)
    10. Smart-objects в макете:
      1. Smart Object в Photoshop – поможет и верстальщикам, и дизайнерам / Хабр (https://habr.com/ru/post/161111/)
    11. Шрифты и начертания (куда смотреть?):
      1. Типографика в вебе / Хабр (https://habr.com/ru/post/324944/)
    12. Как верно вырезать графику:
      1. Быстрая нарезка psd макета для верстки. - YouTube (https://www.youtube.com/watch?v=pLWAzoDvWsc)
    13. Иконки и изображения с прозрачным фоном для веба:
      1. Использование прозрачности PNG формата в веб дизайне (https://handynotes.ru/2007/10/png.html)
    14. Как сберечь графику для сайта (формат, имя, размер и т.п.):
      1. Оптимизация графики для веба: самое важное / Хабр (https://habr.com/ru/post/422531/)
    15. Требования к дизайн-макету.

    1. Требования, которые предъявляются к дизайн-макету сайта:

    2. Труд в Photoshop:

    3. Требования к дизайн-макету.

  11. База HTML. Каталог с веб-сайтом. Автоматизированное обновление веб-страницы:

    1. Разобраться с HTML:
      1. Как писать 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)
    2. Виды тегов (Требующие/не требующие закрытия):
      1. 18 тегов не требующих обязательного закрытия — Olunka ♥ layout of sites and emails (www.olunka.ru/18-tegov-ne-trebuyushhix-obyazatelnogo-zakrytiya/)
    3. "Голова документа" - скрытая часть. Служебные теги.
    4. "Тело документа" - видимая часть.
    5. Теги header, nav, section, article, footer.
    6. Учебник HTML - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-html/uchebnik-html)
    7. Учебник по HTML5 - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-html5/uchebnik-po-html5)
    8. Самоучитель HTML (http://htmlbook.ru/files/samhtml_pdf.zip)
    9. Уроки HTML:
      1. HTML5 уроки с нуля для начинающих! - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUpe6yMyXAlcrfT6AO0KW1a)
      2. HTML5 для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FN_QkwB5UIcVcP61yaj1HKc)
      3. HTML5 уроки. Полный курс (2019) Light - YouTube (https://www.youtube.com/playlist?list=PL30ZzYn5yk1nAdS8rPqF-Plufndh5cJKg)
      4. HTML5 уроки для начинающих - YouTube (https://www.youtube.com/playlist?list=PLQOaTSbfxUtDSLxoc9vpOHNu8BrijOcmk)
      5. Введение в HTML - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMANAaBP1p_OB39zVgsqvqNg)
      6. HTML-мастер - YouTube (https://www.youtube.com/playlist?list=PLPpaecEYRC8ZUr9Avu3_BLAFa8tsAxAzr)
      7. Основы HTML - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUGjl_u0FaYIIF_BfXcD3oWq)
    10. Создать каталог с веб-сайтом с необходимой структурой внутри:
      1. Папка css в которой будет находится файл style.css.
      2. Папка fonts - в ней будут храниться шрифты для веб-сайта.
      3. Папка js.
      4. Папка img.
      5. Файл index.html — это главный файл веб-сайта, нужно проследить, чтобы он не выглядел, как index.html.txt или что-то в этом роде.

    1. Разобраться с HTML:

    2. Уроки HTML:

    3. Создать каталог с веб-сайтом с необходимой структурой внутри:

  12. Ознакомление с CSS:

    1. Уроки CSS:
      1. Изучение CSS/CSS3 от нуля до гуру! - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXoN83I4uVez8rIB25O4rk0)
      2. Основы CSS/CSS3 - YouTube (https://www.youtube.com/playlist?list=PL026CCEB5125879C2)
      3. CSS3 для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FM7WkhQO8x9PSHI4OFDWC5r)
      4. Практические уроки по CSS и CSS3 - YouTube (https://www.youtube.com/playlist?list=PL8pp2EAvIK-LQgy4sgJE6zxabsIyYQAWi)
      5. Все про CSS - YouTube (https://www.youtube.com/playlist?list=PLZfRjCZl2NuQzChEACaA8wZ1Z8OFO7Xdf)
      6. Уроки CSS - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGWYnBnKd42xrynzEegXzgxv)
      7. Уроки Materialize CSS - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGUwU-qRYkDgTZz1pbDdLc45)
      8. CSS Grid уроки - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGVZdDQA_rMkoGvJTdvYqCjA)
      9. Основы CSS - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUHcbcuaSkFSLtlFEj4V21xe)
    2. Ознакомление с основами CSS:
      1. Пути присоединения CSS:
        • Через тег link.
        • Через тег style.
        • Через @import.
    3. Труд с текстом в CSS:
      1. Выравнивание текста.
      2. Цвет текста.
      3. Все заглавными буквами.
      4. Подчеркнутый текст.
      5. Зачеркнутый текст.
    4. Работа с цветом в CSS:
      1. Кодировки цвета.
      2. Цвет в rgb.
      3. Кодировка #hex.
    5. Box-model CSS:
      1. Блочные теги.
      2. Строчные теги.
      3. Строчно-блочные теги.
    6. Скачать самоучитель CSS (http://htmlbook.ru/files/samcss_pdf.zip)
    7. Задачи:
      1. Оформить мою миникнигу.
      2. Добавить стили.
      3. Выровнять заголовки по центру.
      4. Добавить фон, рамки.
      5. Жирный шрифт, курсив и подчеркивания обязательно перенести в CSS.
    8. Позиционирование в CSS:
      1. Масштабность и вышина для элементов.
      2. margin + padding + border.
      3. Способы позиционирования элементов.
      4. z-index.
      5. Обтекание элементов в потоке.
      6. Задачи:
        1. Масштабность и вышина для элементов.
        2. margin + padding + border.
        3. Способы позиционирования элементов.
        4. z-index.
        5. Обтекание элементов в потоке.
        6. Создать документ HTML внутри которого должен находится элемент (шапка сайта с навигацией):
          1. Шапка должна иметь fixed position и всегда находиться на самом верху страницы независимо от прокрутки и занимать всю ширину страницы:
            1. Шапка должна иметь fixed position и всегда находиться на самом верху страницы независимо от прокрутки и занимать всю ширину страницы.
            2. Background-color шапки - black.
            3. Color гиперссылок внутри header - white.
            4. На веб-странице должен находится абзац с lorem ipsum на 20 * 5 * 10 слов.
            5. В header находится nav с 1 + 4 ссылками:
              1. Новости.
              2. Портфолио.
              3. О нас.
              4. Контакты.
              5. Карта проезда.
    9. Все гиперссылки размещены как block-inline элементы.
    10. Создать документ HTML, в котором находится блочный элемент масштабностью 150 + 150 пикселей и вышиной 200 + 200 пикселей:
      1. Элемент находится ровно по центру страницы по вертикали + горизонтали.
      2. Этот блочный элемент имеет white background-color и grey border толщиной 1+1px.
      3. Внутри блока есть внутренние отступы:
        1. Сверху и снизу по 10 + 10px.
        2. Слева и справа по 4 + 18 + 8px.

    1. Уроки CSS:

    2. Ознакомление с основами CSS:

    3. Позиционирование в CSS:

  13. Программирования:

    Познакомлюсь с азами программирования, напишу первые строки кода и создам первые простые проекты на популярном языке JavaScript.

    1. Определиться с пониманием программист:
      1. Прочитать книгу ДеМарко "Дедлайн.Управление_проектами."
      2. Прочитать книгу Джона Сонмеза "Путь программиста"
      3. Видеоролик "Почему не удается стать программистом" (https://www.youtube.com/watch?v=bh55p2wAI1s)
      4. Всё о Java / Войти в IT после 30 и Kotlin / Интервью с Senior Java Developer (https://www.youtube.com/watch?v=iM445BnBhpw&t=22s)
    2. Видео уроки. Основы программирования:
      1. Программирование с нуля! - YouTube (https://www.youtube.com/playlist?list=PLVBQ16nKzRwqD8qPOldSYBUWEjjFOCPXu)
      2. Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLR4wcBxrUGPAmndrGEiN0wiaFqG-L5Yd-)
      3. Основы основ программирования - YouTube (https://www.youtube.com/playlist?list=PL6LDsbZOeyrwLLZYsBMT6zVS_0jqIf3E6)
      4. Курс "Основы программирования" - YouTube (https://www.youtube.com/playlist?list=PLwcDOdrCYh2sqN75QLD7TuM9MlGuDWTEn)
      5. CS50 на русском (Гарвардский курс по основам программирования) - YouTube (https://www.youtube.com/playlist?list=PLawfWYMUziZqyUL5QDLVbe3j5BKWj42E5)
      6. Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLyeqauxei6jfKHgefLiYxMQye331JZuqb)
      7. Курс "Основы программирования" - YouTube (https://www.youtube.com/playlist?list=PLmRNNqEA7JoM5mPIW7qITEbYEEFMSTu1n)
      8. Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLY4rE9dstrJwoVF-svoIBhKzE-Ok39Zg_)
      9. Курс "Объектно-ориентированное программирование" - YouTube (https://www.youtube.com/playlist?list=PLmRNNqEA7JoPhVQCUisflWWhjdoKucDuf)
      10. Основы программирования - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUGJCtoFltyUQYuaA78KvC5o)
    3. JavaScript:
      1. Введение в JavaScript - YouTube (https://www.youtube.com/playlist?list=PLLhZvA0NHjMAfBVjns-Pth3386QOzd411)
      2. JavaScript для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FNmdnnSgW91SfMqFVnrz90y)
      3. Уроки JavaScript - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGUaEtJ_fOUz0F7TJtidE7Qw)
      4. Основы JavaScript - YouTube (https://www.youtube.com/playlist?list=PL363QX7S8MfSxcHzvkNEqMYbOyhLeWwem)
      5. Основы javascript - YouTube (https://www.youtube.com/playlist?list=PLY4rE9dstrJymG1GyPLgOKsJNq9r-p6pX)
      6. Изучение JavaScript от нуля до гуру - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUGX9k45bZFuz1ixTvUhd7b)
      7. Уроки JS - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnFtINH_dCUW6-wLSauygif2)
      8. Курс Практический JavaScript - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnFxysA3eKw3yj3exkw-qFMR)
      9. Java script ..Урок 1. Переменные, ветвления, циклы - YouTube (https://www.youtube.com/watch?v=ye_kTY__nx0)
      10. Основы JS - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUF5gARurVE4gtC5qtdS6PIL)
      11. JavaScript Решает - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnG-oMkclNX0FIcLZR18hFDM)
    4. Узнать что это?
      • Алгоритмы?
      • Переменные, числа и строки?
      • Логика и математика?
      • Ветвление кода?
      • Алгоритм с множественным выбором?
      • Ошибки в коде?
      • Массивы?
      • Циклы?
      • Подпрограмма, функция?
      • Объекты?
      • Синхронное и асинхронное выполнение алгоритма?
      • Выполнение проекта по итогам модуля?

    1. Определиться с пониманием программист:

    2. Видео уроки. Основы программирования:

    3. JavaScript:

    4. Узнать что это?

  14. AJAX:

    1. Изучение технологий Ajax - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUgBqIpiaES9vhZLJbucdUa)
    2. AJAX - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnEIJadIGpBVm1yaPJPlFaeS)
    3. Учебник по AJAX - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-ajax/uchebnik-po-ajax)
    4. Javascipt. AJAX. Основы асинхронных запросов. - YouTube (https://www.youtube.com/watch?v=x2DTiziYq7g)

    1. Изучение технологий Ajax - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFUgBqIpiaES9vhZLJbucdUa)

    2. AJAX - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnEIJadIGpBVm1yaPJPlFaeS)

    3. Учебник по AJAX - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-ajax/uchebnik-po-ajax)

    4. Javascipt. AJAX. Основы асинхронных запросов. - YouTube (https://www.youtube.com/watch?v=x2DTiziYq7g)

  15. JQuery:

    1. Прочесть книгу "jQuery учебник для начинающих " (https://www.kobzarev.com/wp-content/uploads/books/jquery/jQuery-tutorial-for-beginners-1.0.0beta.pdf)
    2. JQuery Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/jquery/jquery-tutorial)
    3. Изучение библиотек jQuery - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXQk_TTlSO7y7J1l5e-RMgi)
    4. jQuery - YouTube (https://www.youtube.com/playlist?list=PLyf8LgkO_8q995GGnMf26P321RSZjgwjH)
    5. Уроки jQuery - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGXQcouhIblV910Rv7lRscH3)

    1. Прочесть книгу "jQuery учебник для начинающих " (https://www.kobzarev.com/wp-content/uploads/books/jquery/jQuery-tutorial-for-begi

    2. JQuery Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/jquery/jquery-tutorial)

    3. Изучение библиотек jQuery - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXQk_TTlSO7y7J1l5e-RMgi)

    4. jQuery - YouTube (https://www.youtube.com/playlist?list=PLyf8LgkO_8q995GGnMf26P321RSZjgwjH)

    5. Уроки jQuery - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGXQcouhIblV910Rv7lRscH3)

  16. JS фреймворки: Flux & React, AngularJS, Ember, Symfony, Codeigniter, Yii, Zend Framework, Flask:

    1. Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора / Блог компании RUVDS.com / Хабр (https://habr.com/ru/company/ruvds/blog/343894/)
    2. Flux
      1. Разбираемся с Flux, реактивной архитектурой от facebook / Хабр (https://habr.com/ru/post/246959/)
      2. Flux. Что? Как? Зачем? - YouTube (https://youtu.be/9nVxf2vIfu8)
      3. Flux для глупых людей / Хабр (https://habr.com/ru/post/249279/)
    3. ReactJS:
      1. Изучение React. Полное руководство по React (https://learn-reactjs.ru/home)
      2. Учебник ReactJS - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/uznaite-reactjs/uchebnik-reactjs)
      3. Основы React.JS - YouTube (https://www.youtube.com/playlist?list=PLDyvV36pndZEz2unvD0a2Spv7RehBrpDO)
    4. AngularJS:
      1. AngularJS Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-angularjs/angularjs-tutorial)
      2. Изучение Angular для начинающих - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFX2CXg7tZvmsY48-R5UvQ1V)
    5. EmberJS:
      1. Ember.js — идеальный фреймворк для веб приложений - devSchacht - Medium (https://medium.com/devschacht/graham-cox-ember-the-perfect-framework-for-web-applications-970e817ded98)
      2. EmberJS Учебник - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/uznaite-emberjs/emberjs-uchebnik)
      3. Frontend Meetup #3 - "EmberJS - ещё один лучший js-фреймворк", Максим Конин - YouTube (https://www.youtube.com/watch?v=SjEsPZHUG-A)
    6. Symfony:
      1. Учебник по Symfony - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/uchit-symfony/uchebnik-po-symfony)
      2. Начало работы с Symfony 4 - YouTube (https://www.youtube.com/watch?v=Rfz4jioNedY)
    7. Codeigniter:
      1. CodeIgniter Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-codeigniter/codeigniter-tutorial)
      2. Курс CODEIGNITER для начинающих - уроки создания сайта на фреймворке - YouTube (https://www.youtube.com/playlist?list=PLIMbZPmmhFav7FZiaY_cl6jKAOWgUmi09)
    8. Yii:
      1. Yii Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchi-yii/yii-tutorial)
      2. Фреймворк Yii2 с Нуля до Профи. Часть 1 - YouTube (https://www.youtube.com/playlist?list=PL9XdPIVgBVVmYWGF3BFZwHu4Fz9fa6GJd)
    9. Zend Framework:
      1. Zend Framework Tutorial - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/izuchite-zend-framework/zend-framework-tutorial)
      2. Видеокурс - Zend Framework 2. Для профессионалов (48 видео) - YouTube (https://www.youtube.com/playlist?list=PLoonZ8wII66j76OU66nzKdKy1kYp0fWK0)
    10. Flask:
      1. What the flask? / Хабр (https://habr.com/ru/post/320360/)
      2. Создание блога на Flask (уроки) - YouTube (https://www.youtube.com/playlist?list=PLlWXhlUMyooZr5R2u2Zwxt6Pw6iwBo5y5)

    1. Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора / Блог компании RUVDS.com / Хабр (https://habr.com/ru/company/ruvds/blog/34

    2. Flux:

    3. ReactJS:

    4. AngularJS:

    5. EmberJS:

    6. Symfony:

    7. Codeigniter:

    8. Yii:

    9. Zend Framework:

    10. Flask:

  17. Владение Unix shell и скриптовыми языками:

    1. Unix shell: абсолютно первые шаги / Хабр (https://habr.com/ru/post/267825/)
    2. ОСНОВЫ РАБОТЫ В КОМАНДНОМ ПРОЦЕССОРЕ SHELL BASH - YouTube (https://www.youtube.com/playlist?list=PLLyG9JTjVd9VTEKisukGLJhl8H2YeIN09)

    1. Unix shell: абсолютно первые шаги / Хабр (https://habr.com/ru/post/267825/)

    2. ОСНОВЫ РАБОТЫ В КОМАНДНОМ ПРОЦЕССОРЕ SHELL BASH - YouTube (https://www.youtube.com/playlist?list=PLLyG9JTjVd9VTEKisukGLJhl8H2YeIN09)

  18. PHP, MySQL:

    1. Учебник по PHP - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-php/uchebnik-po-php):
      1. PHP для начинающих - YouTube (https://www.youtube.com/playlist?list=PLypd1VrGv7FMBt_CCURNZQtkuR_InqjFP)
      2. Основы ООП - PHP - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGV1kj1gEGTgdzXt2jHwg-if)
      3. Курс "PHP. Быстрый старт" - YouTube (https://www.youtube.com/playlist?list=PLmRNNqEA7JoM_Xp2EI24lVXt8MyXu0r16)
      4. Курс Обучение PHP - YouTube (https://www.youtube.com/playlist?list=PLOFNiVk8RnFfujWqwsvrchjQRO6l8UMpW)
      5. PHP UP | Теория | Курс продвинутого программирования (20 уроков) - YouTube (https://www.youtube.com/playlist?list=PLSdH7dYnlGYht0eGi9-14X87hrSl9plCc)
      6. Основы PHP - YouTube (https://www.youtube.com/playlist?list=PLQwXjjTVqyUEZxRivy2YweIb4nACCG14i)
      7. PHP для начинающих - YouTube (https://www.youtube.com/playlist?list=PLPpaecEYRC8Z7WLNSxiuJKeA0fsFC-AIQ)
      8. PHP - YouTube (https://www.youtube.com/playlist?list=PLM7wFzahDYnFbCIkW-tLHsEuwUk_z1n8P)
      9. CakePHP - мощь и гибкость современного PHP-фреймворка - YouTube (https://www.youtube.com/playlist?list=PLD-piGJ3Dtl3bD73ZAwLz43VOYo2jq55R)
      10. Создание звездного рейтинга статей для сайта на PHP - YouTube (https://www.youtube.com/playlist?list=PLD-piGJ3Dtl29Z7QGJdNngRReFX9wAOPP)
      11. Вебинары - курс по PHP - YouTube (https://www.youtube.com/playlist?list=PLY4rE9dstrJyHWvjunamyZnL4iqwuEYf4)
      12. Уроки PHP практика - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGWQBiDkIua37dCgO5rOsw0T)
      13. Уроки PHP 7 - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGWCBTca7m-snWrZZkjX2jGB)
    2. Учебник по MySQL - CoderLessons.com (https://coderlessons.com/tutorials/bazy-dannykh/izuchai-mysql/uchebnik-po-mysql):
      1. Учим PHP, а также MySQL - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFXm69bqj5JTCS1XGTNkhTch)
      2. Изучение SQL для начинающих - YouTube (https://www.youtube.com/playlist?list=PL0lO_mIqDDFVnLvR39VpEtphQ8bPJ-xR9)
      3. Видео уроки / курс: базы данных MySQL 5.7 сервера и реализация SQL в MySQL. Уроки администрирования сервера баз данных MySQL. - YouTube (https://www.youtube.com/playlist?list=PLeYxjiX1MAIk1yC8Jb489zRRuN6HoS4FB)
      4. Изучение программирования. SQL - YouTube (https://www.youtube.com/playlist?list=PLDywto_IU4_4RU0sKfID6OY-np6uGmhlf)
      5. Уроки MySQL + PHP - YouTube (https://www.youtube.com/playlist?list=PLVfMKQXDAhGV6OnuUM5QTfmAQqRDCskmT)
    3. Понимание теории построения баз данных:
      1. 1. Базы данных. Введение | Технострим - YouTube (https://www.youtube.com/watch?v=SfYaAQ9-RnE)
      2. Лекция 1. Основные понятия теории баз данных - YouTube (https://www.youtube.com/watch?v=6wYk-0uA8B4)

    1. Учебник по PHP - CoderLessons.com (https://coderlessons.com/tutorials/veb-razrabotka/vyuchit-php/uchebnik-po-php):

    2. Учебник по MySQL - CoderLessons.com (https://coderlessons.com/tutorials/bazy-dannykh/izuchai-mysql/uchebnik-po-mysql):

    3. Понимание теории построения баз данных:

  19. GitHub

    1. Узнать:
      1. Предназначение системы контроля версий.
      2. Основные операции (фиксация и откат изменений, поиск, история).
      3. Работа с сервисом GitHub.
      4. Ветки, слияние веток и разрешение конфликтов.
      5. Командная работа.
    2. Навыки, которые необоходимо получить:
      1. научиться создавать репозиторий, добавлять и игнорировать файлы, фиксировать изменения.
      2. научиться работать с историей, поиском изменений, откатом изменений.
      3. освоите работу с ветками и разрешением конфликтов.
      4. научиться работать с удалёнными ветками и сервисом GitHub.
      5. освоите командную работу над кодом.

    1. Узнать:

    2. Навыки, которые необоходимо получить:

  20. Material Design UI:

    1. Изучаем Photoshop за 7 дней - YouTube (https://www.youtube.com/playlist?list=PLZ9vf4gXjsvlxF--0zm3uw3f3GQ4mYdJx)
    2. Эксперт в Photoshop за 30 дней - https://www.youtube.com/watch?v=fKHTGnxqv7g&list=PLZ9vf4gXjsvkvFjPhAao0Y5d5Ni-bHqLr
    3. Adobe Photoshop - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fglEkoPkfjTFkJdje6ZwiTm)
    4. Что такое ux и ui дизайн - YouTube (https://www.youtube.com/watch?v=G7deKyjzPPY)
    5. UI UX Дизайн Сайта 2018 - С Чего Начать? (Базовые Навыки) - YouTube (https://www.youtube.com/watch?v=uTljXWKTukM)
    6. Что такое UX/UI дизайн на самом деле? / Хабр (https://habr.com/ru/post/321312/)
    7. В чем отличие UI от UX? Подробный разбор часто используемых терминов / Блог компании Pixli / Хабр (https://habr.com/ru/company/pixli/blog/324794/)
    8. UX/UI-дизайн: что это такое? — статьи на Skillbox (https://skillbox.ru/media/design/ux_ui_dizayn_chto_eto_takoe/)
    9. Landing Page дизайн в фотошопе - YouTube (https://www.youtube.com/playlist?list=PLzGX_ggMZ5ExZfzg6bbHazjG0ol1Qv8IS)
    10. Web Design - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fjjB5Vl34KETeHey7TiQTIF)

    1. Изучаем Photoshop за 7 дней - YouTube (https://www.youtube.com/playlist?list=PLZ9vf4gXjsvlxF--0zm3uw3f3GQ4mYdJx)

    2. ​Эксперт в Photoshop за 30 дней ​

    3. Adobe Photoshop - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fglEkoPkfjTFkJdje6ZwiTm)

    4. Что такое ux и ui дизайн - YouTube (https://www.youtube.com/watch?v=G7deKyjzPPY)

    5. UI UX Дизайн Сайта 2018 - С Чего Начать? (Базовые Навыки) - YouTube (https://www.youtube.com/watch?v=uTljXWKTukM)

    6. Что такое UX/UI дизайн на самом деле? / Хабр (https://habr.com/ru/post/321312/)

    7. В чем отличие UI от UX? Подробный разбор часто используемых терминов / Блог компании Pixli / Хабр (https://habr.com/ru/company/pixli/blog/32

    8. UX/UI-дизайн: что это такое? — статьи на Skillbox (https://skillbox.ru/media/design/ux_ui_dizayn_chto_eto_takoe/)

    9. Landing Page дизайн в фотошопе - YouTube (https://www.youtube.com/playlist?list=PLzGX_ggMZ5ExZfzg6bbHazjG0ol1Qv8IS)

    10. Web Design - YouTube (https://www.youtube.com/playlist?list=PLD6_Uy0nG2fjjB5Vl34KETeHey7TiQTIF)

  21. Верстка:

    1. Верстка дизайн-макета:
      1. Попробовать вёрстку:
        1. Визуальная разметка страницы.
        2. Создание скелета.
        3. Для чего нужны reset.css и normalize.css?
        4. Стилизация страницы.
        5. Завершение работы. Готовый сайт.
    2. Задачи:
      1. Скачать макет.
      2. Создать каталог с проектом.
      3. Подключить normalize или reset CSS.
      4. Сверстать макет на чистом HTML и CSS с использованием normalize или reset.
    3. Форсирование верстки в несколько крат:
      1. Включение Bootstrap для прорывного верстания.
        1. Что такое верстка колонами?
        2. Container.
        3. 1 из 12 колон.
        4. Пространство в колонах.
        5. Завершенные классы в Bootstrap.
        6. Buttons, forms и blocks.
        7. Slider, windows и т.п.
    4. Задача:
      1. Скачать дизайн-макет.
      2. Сверстать ряд, который имеет (5 + (0.5+0.5)) иконок. Отображаться они должны следующим образом:
        1. на ультра малых дисплеях - в ряд по (0.5 + 0.5) иконке.
        2. на малых дисплеях — в ряд по (0.5*4) иконки.
        3. на средних дисплеях — в ряд по ((0.5*4) + (0.5+0.5)) иконки.
        4. на больших дисплеях — в ряд по (0.5*12) колонок.
    5. В колоне всё отцентровать.
    6. Доп. задача:
      1. Разузнать, если успею быстро выполнить вышепоставленную миссию, о flexbox, с чем это едят и что это вообще такое.
    7. Верстание с помощью Twitter Bootstrap 4:
      1. Видимая маркировка документа.
        1. Формирование скелета и маркировка по grid.
          1. Использование класса .container.
          2. Для каждой новой строки — .row.
          3. Что разделяет страницу — .col-.
    8. Украшение документа.
      1. Сочинение CSS.
      2. Окончание задачи. В итоге: сделанный веб-сайт.
    9. Упражнения.
    10. Cкачать дизайн-макет.
    11. Сделать вёрстку с использованием фреймворка Twitter Bootstrap 4 под разные разрешения дисплеев.
    12. LESS:
      1. Для чего нужен LESS и его основы.
        1. Что такое:
          1. Миксины?
          2. Компилятор?
          3. Переменные?
          4. Цвет и как с ним работать?
          5. Вложенность?
    13. Задачи:
      1. Написать(с использованием миксин и переменных) LESS код, который будет таким же как и в файле lesson.css.
    14. Сниппеты:
      1. Основы сниппетов.
        1. Как и для чего нужен:
          1. Синтаксис сниппета.
          2. Создается сниппет.
          3. Пользоваться gist.
          4. Установить сниппеты от Twitter Bootstrap 4.
    15. Задача:
      1. Создать сниппет стартового шаблона HTML:
        1. Предвидеть позицию положения курсоров в сниппете.
        2. Предписать все нужные метатеги.
    16. GitHub:
      1. Что такое и как этим пользоваться:
        1. Github Pages.
        2. Разметка для README.
    17. Задача:
    18. Загрузить ДЗ в подпапки в основном репозитории.
    19. Дать этим папкам понятное имя.
    20. Сделать страницу на README которая будет отсылаться на прошлые ДЗ.
    21. Адаптивная вёрстка:
      1. Что такое и как его есть:
        1. Расширение PerfectPixel.
        2. Вёрстка Pixel Perfect.
        3. Применение вёрстки Pixel Perfect.
        4. Резиновая верстка.
        5. Адаптивная верстка.
        6. Медиа запросы.
    22. Задачи:
      1. Скачать макет формы.
      2. Сверстать этот макет.
    23. Шрифты:
      1. Как или что такое:
        1. Определять шрифты в макете.
        2. Подключать шрифты через сервис Google Fonts.
        3. Подключать специфичные шрифты.
        4. Атрибуты шрифтов в таблицах стилей.
    24. Задачи:
      1. Скачать исходники.
      2. Подключить шрифты.
    25. Псевдоклассы и псевдоэлементы:
      1. Псевдоклассы:
        • :hover.
        • :focus.
        • :visited.
        • и т.д.
    26. Псевдоэлементы:
      1. ::before.
      2. ::after.
      3. применение на практике.
    27. Задачи:
      1. Сделать эффект затемнения изображений при наведении на них курсором мыши.
      2. Сделать этот же эффект, только при наведении курсором на кнопки.
    28. Слайдер:
      1. Как делать:
        1. Подключить сторонние библиотеки к сайту.
        2. Стандартный слайдер от Twitter Bootstrap 4.
        3. Слайдер для фотографий Fotorama.
        4. Слайдер для контента Slick Slider.
    29. Задача:
      1. Сделать вёрстку слайдера для фотографий.
      2. С возможностью:
        1. Просмотра миниатюры + развертывания на всю страницу.
        2. Бесконечного прокручивания.
        3. Прокручивания автоматически через каждые 2 секунды.
    30. Модальное окно:
      1. Окно от Twitter Bootstrap 4:
        1. Должна быть подключена сначала библиотека jQuery.
        2. Подключены стили от Bootstrap (CSS).
        3. Подключены js-файлы от Bootstrap.
    31. Окно от Magnific Popup:
      1. Должна быть подключена сначала библиотека jQuery.
      2. Подключены стили от Magnific Popup (CSS).
      3. Подключены js-файлы от Magnific Popup.
    32. Окно на весь экран:
      1. Должна быть подключена сначала библиотека jQuery.
      2. Перенести стили из демо-архива (CSS).
      3. Подключить js-файлы snap-svg и main.
    33. Задача:
      1. Сверстать кнопку "Загрузить файл":
        • При клике на кнопку всплывает диалоговое окно с вопросом "Ты точно этого хочешь?"
        • Должны быть 2 варианта ответов: Нет и Да.
        • Окно должно иметь при себе крестик в верхнем углу, причём при клике на него можно закрыть данное модальное окно.
    34. Табы и аккордеон:
      1. Табы от Twitter Bootstrap 4:
        • Для работы должны быть подключены:
          • Библиотека jQuery.
          • Стили от Twitter Bootstrap 4.
          • javascript-файлы от Twitter Bootstrap 4.
    35. Стандартный аккордеон от Twitter Bootstrap 4:
      1. Для работы должны быть подключены:
        1. Библиотека jQuery.
        2. Стили от Twitter Bootstrap 4.
        3. Файлы javascript от Twitter Bootstrap 4.
    36. Задача:
      1. Сделать форму регистрации с помощью табов.
      2. Сделать аккордеон.
    37. Анимация на CSS3:
      1. Правило @keyframes
      2. Ключевые кадры from,to.
      3. Название анимации, длительность, задержка и т.п.
      4. Временная функция анимации.
      5. Множественные анимации.
      6. Подключение animate.css.
      7. Срабатывание анимации при пролистывании страницы.
      8. Задача:
        1. Установить библиотеку animate.css и wow.js.
        2. Анимировать форму регистрации.
    38. Видеофон на сайт:
      1. Подключение видеофона с помощью vide.js:
        1. Подключение jQuery.
        2. Инициализация плагина.
        3. Подготовка видеофона.
        4. Настройка видеофона и картинки на замену.
        5. Выбор видеофона для сайта.
        6. Задача:
          1. Скачать с сайта видеофон и установить его на странице сайта в качестве видеофона с помощью vide.js.
    39. Эффект Parallax:
      1. Parallax при движении мышью:
        1. Подключение фона с Parallax.
    40. Relax при прокрутке страницы:
      1. Настройка и подключение Parallax.
    41. Задача:
      1. Сделать эффект параллакс с помощью двух библиотек, при этом на одной странице.
    42. Карты на сайте:
      1. Карты от яндекса.
      2. Карты от google.
      3. Карты от jsbox.
      4. Карты от 2gis.
      5. Задача:
        1. Добавить интерактивную карту на веб-страницу.
    43. Хостинг:
      1. Что такое и как с этим справляться:
        1. Хостинг.
        2. Домен.
        3. FTP.
        4. FTP конфигурирование.
        5. Публикация сайта на хостинге.
    44. Задача:
      1. Всё сделанное на GitHub опубликовать на нём.
    45. Аналитика для сайта:
      1. Что такое или как?
        1. Счетчик аналитики и веб-визор.
        2. Установка счетчика от яндекса.
        3. Настройка целей.
        4. Установка счетчика от google.
        5. Вставка пикселя ретаргетинга вк.
    46. Задача:
      1. Установить счетчик яндекса.
      2. В метрике настроить цели (нажатие на кнопку или переход на страницу).
      3. Проверить с помощью дебаггера работоспособность счетчика.
    47. Формы:
      1. Как работают формы на сайтах:
        1. Синтаксис у форм:
          1. Синтаксис у PHP.
          2. Ошибки при составлении форм.
          3. Обработчик форм на сервере.
    48. Что такое и зачем:
      1. Локальный сервер.
    49. Скрипт отправки письма через SMTP сервер:
      1. Скрипт SMTP-отправки письма.
    50. Задача:
      1. Сделать отправление данных из формы в почту.
      2. Залить полученное на хостинг.
    51. Как делаются многостраничные сайты:
      1. PHP на многостраничнике.
      2. Как выглядит простой многостраничный сайт.
      3. Динамика на сайте.
      4. Панель администратора на сайте.
      5. Задача:
        1. Сделать многостраничный сайт.
        2. Залить всё на хостинг.
    52. WordPress - движок для сайта. Часть 1:
      1. Что такое и как?
        1. Движок.
        2. WordPress на сервер.
        3. Подготовка HTML.
        4. Тема для WordPress.
        5. Подключение изображений и сценариев.
        6. Заполнение сайта.
    53. Задача:
      1. Натянуть верстку на Wordpress. (https://startbootstrap.com/themes)
      2. При этом должны работать сценарии и изображения.
    54. WordPress - движок для сайта. Часть 2:
      1. Что такое и как?
        1. Произвольные поля?
        2. Сотворение и конфигурирование произвольных полей.
        3. Верное присоединение сценариев и каскадных таблиц стилей.
    55. Задача:
      1. На всех страницах должны работать изображения и сценарии.
      2. Сценарии должны быть подключены верно с помощью functions.php
      3. На сайте должны быть произвольные поля.
    56. Тестирование верстки:
      1. Что такое:
        1. Тестирование на валидность.
        2. W3C стандарты.
        3. Тесты на скорость загрузки.
        4. Оптимизация сайта для быстрой загрузки.
    57. Задача:
      1. Проверить сайт на валидность и исправить абсолютно все возможные ошибки.
      2. Оптимизировать скорость загрузки сайта максимально хорошо.

    1. Верстка дизайн-макета:

    2. Форсирование верстки в несколько крат:

    3. Верстание с помощью Twitter Bootstrap 4:

    4. LESS:

    5. Сниппеты:

    6. GitHub:

    7. Адаптивная вёрстка:

    8. Шрифты:

    9. Псевдоклассы и псевдоэлементы:

    10. Слайдер:

    11. Модальное окно:

    12. Табы и аккордеон:

    13. Анимация на CSS3:

    14. Видеофон на сайт:

    15. Эффект Parallax:

    16. Карты на сайте:

    17. Хостинг:

    18. Аналитика для сайта:

    19. Формы:

    20. Как делаются многостраничные сайты:

    21. WordPress - движок для сайта. Часть 1:

    22. WordPress - движок для сайта. Часть 2:

    23. Тестирование верстки:

  22. Портфолио и резюме:

    1. Как составить хорошее резюме.
    2. Сайт-портфолио.
    3. Где еще размещать портфолио.
    4. Страница в социальных сетях.
    5. Блоггинг.
    6. Задача:
      • Сделать прототип своего портфолио.
      • Законспектировать видео.

    1. Как составить хорошее резюме.

    2. Сайт-портфолио.

    3. Где еще размещать портфолио.

    4. Страница в социальных сетях.

    5. Блоггинг.

    6. Задача:

  23. Поиск заказчика:

    1. Группа вконтакте.
    2. Аккаунт в Инстаграм.
    3. Группа или страница на Фейсбук.
    4. Канал на ютуб.
    5. Блог на Wordpress.
    6. Контекстная реклама (Яндекс и Google).
    7. Таргетинг Вконтакте.
    8. Посев постов и промо посты Вконтакте
    9. Таргетинг на Facebook и Instagram.
    10. Холодные звонки по клиентам на авито.
    11. Холодные звонки по базам 2Gis, Яндекс.Карты, Google Maps.
    12. Выставки (Москва и регионы).
    13. Техника «ТнЛинП».
    14. Ссылки на сайтах клиентов.
    15. Партнерский маркетинг (Дизайнеры, копирайтеры, директологи и т.д.).
    16. Email рассылки по базам партнеров (или по подписчикам).
    17. Форумы и чаты (Экспертность).
    18. Реферальная система продаж.
    19. Размещение на авито и др. Площадках.
    20. Допродажи своим клиентам (не для новичков).
    21. Размещение портфолио на behance.net (http://behance.net/) и других площадках.
    22. Тематические статьи в онлайн изданиях (или оффлайн).
    23. Бумажное письмо.
    24. Полиграфия (визитки, листовки и т.д.).
    25. Своя книга, журнал и т.д.
    26. Ответы Гугл, ответы Мейл, toster, habrahabr и т.д.
    27. Продажа шаблнов.
    28. Задача:
      1. Выписать список рекламных каналов
      2. Применить технику ТЛИНП

  24. Ведение клиентов. Общение и CRM:

    1. Как получать заказы и обратить на себя внимание заказчика?
    2. Как назвать стоимость своей работы?
    3. Как сделать так, чтобы тебя не кинули?
    4. Правила работы с клиентами?
    5. Что делать с недовольным заказчиком?
    6. База клиентов?
    7. Как сдавать проект, чтобы стоить дорого?

    1. Как получать заказы и обратить на себя внимание заказчика?

    2. Как назвать стоимость своей работы?

    3. Как сделать так, чтобы тебя не кинули?

    4. Правила работы с клиентами?

    5. Что делать с недовольным заказчиком?

    6. База клиентов?

    7. Как сдавать проект, чтобы стоить дорого?

  25. Набивать портфолио:

    Нужен опыт, а также портфолио, чтобы было хотя бы какое-то доверие от заказчика На каждый день буду пытаться делать по 1 работе, если не успеваю за день, то за два А если вообще буду хуже успевать, то также буду удлинять сроки.

    1. Первый этап:
      1. Ресурсы с шаблонами буду брать отсюда:
        1. https://psdfreebies.com/
        2. https://themewagon.com/theme_tag/bootstrap-4-templ...
        3. https://colorlib.com/wp/cat/bootstrap/
        4. https://cssauthor.com/bootstrap-templates/#Blog
    2. Шаблоны:
      1. Material design —https://templateflip.com/templates/material-landing/
      2. Infinity —https://themewagon.com/themes/best-free-coming-soon-bootstrap-4-template-2017/
      3. Funder —https://themewagon.com/themes/free-bootstrap-4-html5-insurance-website-template-funder/
      4. DrCare —https://themewagon.com/themes/free-html5-bootstrap-4-medical-website-template-drcare/
    3. Второй этап:
      1. Шаблоны:
        1. Chimper —https://themewagon.com/themes/free-html5-bootstrap-4-business-website-template-chimper/
        2. Roberto —https://themewagon.com/themes/free-html5-hotel-website-template-roberto/
        3. Rapid —https://themewagon.com/themes/free-bootstrap-business-website-template-rapid/
        4. Real Estate —https://themewagon.com/themes/free-html5-bootstrap-4-business-website-template-real-estate/
        5. Medino —http://demo.themewagon.com/preview/free-html5-boot...
        6. Steak Shop —https://themewagon.com/themes/free-bootstrap-4-html5-restaurant-website-template-steakshop/
        7. The Event —https://bootstrapmade.com/theevent-conference-event-bootstrap-template/
        8. Digital Web —https://w3layouts.com/digital-a-business-category-flat-bootstrap-responsive-web-template/
        9. Loaft —https://technext.github.io/loaft/index.html
        10. eBusiness —https://bootstrapmade.com/demo/themes/eBusiness/
        11. Carting —https://demo.w3layouts.com/demos_new/template_demo/17-05-2019/carting-demo_Free/1248462135/web/index.html
        12. Pointer —https://technext.github.io/pointer/index.html
        13. Maxim —https://bootstrapmade.com/demo/themes/Maxim/
        14. Savage —https://demo.w3layouts.com/demos_new/template_demo/17-05-2019/savage_demo_Free/2112248620/web/index.html
        15. Amplify —https://technext.github.io/amplify/index.html#process-section
        16. BizPage —https://bootstrapmade.com/demo/themes/BizPage/
    4. Третий этап и делать сниппеты:
      1. Шаблоны:
        1. Demand —https://w3layouts.com/demand-corporate-category-flat-bootstrap-responsive-website-template/
        2. OneSchool —https://themewagon.com/themes/free-bootstrap-4-html5-educational-website-template-oneschool/
        3. NewBiz —https://bootstrapmade.com/demo/NewBiz/
        4. Mechanized —https://w3layouts.com/mechanized-an-industrial-category-bootstrap-responsive-web-template/
        5. BizCraft —https://themefisher.com/products/bizcraft-multipurpose-business-template/
        6. Ecoland —https://technext.github.io/ecoland/index.html
        7. Knight —https://bootstrapmade.com/demo/themes/Knight/
        8. Educenter —http://demo.themefisher.com/educenter/

  26. Правильно составьте резюме:

    1. _Также прочесть:
      1. Как составить резюме? - Лайфхакер (https://lifehacker.ru/cv/0
      2. 33 лайфхака для резюме, которые удвоят твою заработную плату - Лайфхакер (https://lifehacker.ru/33-lajfhaka-dlya-rezyume/)
      3. 50 лайфхаков для успешного прохождения собеседования - Лайфхакер (https://lifehacker.ru/50-lajfhakov-dlya-sobesedovaniya/)
      4. Вот поэтому вас и не берут на работу: 10 провальных ошибок на собеседовании - Лайфхакер (https://lifehacker.ru/kak-ne-oshibitsya-na-sobesedovanii/)
      5. 7 признаков, которые должны насторожить при общении с потенциальным клиентом - Лайфхакер (https://lifehacker.ru/problemnyj-klient/)
      6. Обновление резюме как регулярный анализ своей работы - Лайфхакер (https://lifehacker.ru/cv-updates/)
      7. 7 советов, которые помогут вам пройти собеседование и получить работу - Лайфхакер (https://lifehacker.ru/7-sovetov-projti-sobesedovanie/)
      8. Как стать хорошим работником - Лайфхакер (https://lifehacker.ru/kak-stat-xoroshim-rabotnikom/)
      9. Как написать резюме: образец 2019 — Work.ua (https://www.work.ua/ru/articles/jobseeker/1596/)
      10. 25 Креативных шаблонов резюме: как стильно получить новую работу (https://business.tutsplus.com/ru/articles/25-creative-resume-templates-to-land-a-new-job-in-style--cms-26395)
      11. Идеальное резюме Junior'а: как найти лучшую работу в сфере информационных технологий | AIN.UA (https://ain.ua/2015/01/14/idealnoe-rezyume-juniora-kak-najti-luchshuyu-rabotu-v-sfere-informacionnyx-texnologij/)
      12. Как написать резюме веб-разработчика, которое поможет вам попасть на собеседование | Techrocks (https://techrocks.ru/2018/10/02/how-to-write-a-web-developer-resume/)
      13. Резюме программистов. Часть 1 (плохие) / Хабр (https://habr.com/ru/post/184332/)
      14. 15 лучших HTML шаблонов резюме для потрясающих персональных сайтов (https://business.tutsplus.com/ru/articles/best-html-resume-templates--cms-28115)
      15. Как получить работу в IT-компании (https://netology.ru/blog/guid-job-interview#А кто нужен в интернет-бизнесе?)
    2. Признаки хорошего резюме: _Хорошее резюме не должно быть больше 1-2 страниц. Откликаясь на вакансию, напишите сопроводительное письмо: почему вам интересна вакансия, почему ваш опыт релевантен, любимые профессиональные книги и ресурсы //
      1. Список технологий, в которых вы действительно разбираетесь. Не нужно распыляться и писать обо всем, что немного изучали. Еще дилетанта может выдать структура резюме: когда знание офисных программ, языков программирования и СУБД просто идут одним списком — располагайте технологии так, как они связаны на рынке:
        1. Неправильно:
          1. Знаю: PHP, Brackets, MongoDB, MVC, HTML, CSS, Node JS, Angular, Backbone, MySql, Oracle, WebPack, React JS, Codeigniter.
        2. Правильно:
          1. Знаю: HTML, CSS, PHP. Немного знаком: JavaScript, Codeigniter.
      2. Описание опыта через достижения, решенные задачи, интересные технические подробности. Укажите, какую часть проекта разработали именно вы:
        1. Неправильно:
          1. Разработка архитектуры приложения, баг фиксинг и другие общие слова.
        2. Правильно:
          1. Занимался бэкенд-разработкой приложений для оптимизации бизнес-процессов. Разрабатывал архитектуру облачной платформы SmartWay. За время работы оптимизировал время и качество разработки типовой API, снизив время разработки с 16-20 до 10-12 часов.
      3. Ваши работы и их код:
        1. Неправильно:
          1. Скриншоты без ссылок на работы.
        2. Правильно:
          1. Портфолио на GitHub с наиболее сложными проектами, где можно увидеть качество вашего кода.
  • 1717
  • 01 June 2020, 08:52

The goal is in the group

Веб-разработка

  • 1714

    members

  • 2435

    goals
Sign up

Signup

Уже зарегистрированы?
Quick sign-up through social networks.
Sign in

Sign in.
Allowed.

Not registered yet?
 
Log in through social networks
Forgot your password?
Settings

Widget for your goal

Big (450×150 px)

Small (250×100 px)

To insert a widget on your website or blog, copy the code and embed it in the original html-code to your blog/site.

For PRO only

You can buy a PRO account, or get it for free by inviting 3 friends to SmartProgress

Invite friends

Raising
goals up

Buy PRO-account

Email for any cases

  • Maxim Malikov

    founder

  • Sergey Zakharov

    founder