Alexander Kallaway

Можете выполнить такие задачки на чистом JS, к примеру:
1. ToDo-лист с сохранением задач в localStorage (пример).
2. Интерактивный календарь с возможностью добавлять события на любую дату.
3. Система тестирования/анкетирования с хранением вопросов и вариантов ответов в JSON.
4. Простая игра (тетрис, змейка, рулетка, крестики-нолики и т.д.) с использованием Canvas/SVG.
5. Калькулятор (обычный, кредитный и т.д.).

Очень просто найти задачки для практики, вы их не видите)

Если с фантазией туго, помогут сайты:
www.freecodecamp.com
www.codewars.com

Я рекомендую изучать JS примерно таким путем:
– чтение learn.javascript.ru (чтение и, естественно, практика);
– параллельное прохождение модулей по JS на codeschool;
– держите перед глазами актуальные вопросы для собеседования JS-разработчика (habrahabr.ru/post/239065/), стараясь на них ответить;
– читайте хороших авторов: Дуглас Крокфорд, Джон Рейзиг, Стоян Стефанов;
– найдите на GitHub людей, которые согласятся ревьюить Ваш код, я серьезно!

Ну и не забывайте: чем чаще Вы пишите код, тем лучше получается; чем сильнее стараетесь разобраться в основах языка, тем легче будут даваться в освоении фреймворки и паттерны.

Желаю успеха!

Учиться по книгам можно бесконечно. Судя по Вашим словам, Вы вполне подготовлены, чтобы начать работу над несложным проектом / задачей.

Изучите какой-нибудь web framework на Python (Django, Flask, ... - лично я предпочитаю Django, но он довольно тяжелый как framework, хотя освоить его на начальном уровне нетрудно), и поднимите на нем простое web-приложение для личного использование (ну скажем, календарь, или планировщик задач, или учет личных финансов). Развивать можно бесконечно, и в процессе сможете самые разные задачи порешать. Чтобы не возиться с сервером дома, очень рекомендую сервис

https://www.pythonanywhere.com/

У них есть базовые бесплатные аккаунты, Вам дадут тестовый адрес, там можно поднять веб-приложение. У них на сайте все расписано в деталях, как все настроить - плюс на сети про то как поднять у них приложение много ресурсов есть.

Ну и еще несколько советов:

1. Ползуйтесь хорошим IDE (я использую PyCharm Pro, но в принципе и бесплатный PyCharm community edition прекрасно подойдет). Там можно настроить Python консоль, так что интерактивность не пострадает.
2. Если возьметесь за что-либо, что можно назвать проектом, пользуйтесь системой контроля версий. Это не так страшно как кажется. Я бы советовал Git. Можно из командной строки (для изучения предпочтительна, лично я предпочитаю и для работы), либо UI клиент (я пользуюсь SourceTree). Изучить Git на начальном этапе можно за полдня. Вот хорошая книжка:

https://git-scm.com/book/en/v2

достаточно первые пару глав прочесть для начала

3. Храните код в каком-нибудь распределенном репозитории (Github, Bitbucket). Если готовы его открыть для всех, то я бы советовал Github, если нет - BitBucket позволяет создавать бесплатно закрытые репозитории.

4. При разработке в Python, пользуйтесь virtualenv. Это нужно для того, чтобы не замусоривать ваш основной дистрибутив Python установленными сторонними модулями и библиотеками.

5. Это вопрос личного вкуса и удобства, но лично мне в работе сильно помогают системы project management. Я пользуюсь Blossom.io, но он платный. Из бесплатных, могу порекомендовать Trello.

Все эти вещи могут показаться тягомотными, но это нужно пройти лишь один раз. После этого у Вас будет настроенное рабочее пространство для профессиональной работы. Это сделает Вам рабочий процесс намного удобнее, и знакомство с этим будет плюсом, если потом захотите работу искать в Python.

Собственно по Python, очень рекомендую вот это:

docs.python-guide.org/en/latest

куча реально полезной информации. По всем конкретным вопросам нет ничего лучше StackOverflow.

Ну и уже когда практического опыта на реальном проекте поднаберетесь, вот тогда делайте upgrade, читайте еще книжки, код других проектов, участвуйте в других open source проектах, и т.д. В итоге гораздо быстрее все освоите, чем если прямолинейным чтением книг / прохождением курсов будете заниматься.

У вас хорошая база. Я бы посоветовал написать небольшое приложение на Django с использованием методологий TDD и Gitflow, например, микроблог - пользователи, сообщения, подписка. И выложите код на github, чтобы показывать работодателям. Интерфейс можно сделать просто на bootstrap. Потом ищите проект на фрилансе или в офис, где в команду требуется джуниор на бекенд и начинайте решать поставленные задачи, смотрите как работают другие. Изучайте теорию и функциональное программирование. Так от простого к сложному дорастете до сеньора и высоких нагрузок.

Я Вам советую пройти курсы по html, css, js пригодиться в работе или нет, не известно, но плюсик будет в резюме что есть представление о фронтенде, лучше изучить еще jquery, так как он используется очень во многих конторах. Далее читайте доки по django и пишите тестовое приложение которое там представлена. Ваш опыт плюс эти знания сделают из вас уверенного джуниора, а может даже выше. Основная проблема это конечно зп, ищите условия допустим на подработку, если деньги не главное то можете устроится джуниором, прикладывая усилия за год можно вырасти очень прилично. Конечно это руководство к действию, можно не заниматься фронтендом но тогда и шансы ниже, да и стремиться надо я думаю Full-stack.
Если начнется изучать фронтенд советую сильно не углубляться, там можно глубоко завязнуть. Потом с опытом придут и более глубинные познания. Не бойтесь писать свои приложения и выложить на гитхаб, это тоже плюс в резюме. Не помешает знание MVC, и хорошее понимание ООП.

ссылки: https://htmlacademy.ru/ https://www.codecademy.com https://www.codeschool.com/ www.wisdomweb.ru htmlbook.ru

Ну и желаю удачи)

Паттерны в JS уже прочитали?
Возможно, вы не уделяете внимание рефакторингу по мере написания приложения. Про рефакторинг можно много читать, например вот

что бы быть full stack вы должны понимать что происходит на каждом уровне вашего приложения. от кнопочек которые вы верстаете, до того как обрабатываются запросы на сервере, в плодь до взаимодействия с базой данных через все прослойки.

Вне зависимости от выбранного языка или фреймворка, принципы остаются примерно те же. С Symfony мы можем говорить о гексагональной архитектуре, луковой архитектуре, data mapper и т.д. С nodejs мы тоже можем обо всем этом говорить но там не особо развиты идеи data mapper (на данный момент). Приходится жить с active record или dbal. Ну и опять же управление зависимостями в js и в php по разному организованы, хотя суть (dependency inversion) остается той же.

Единственный совет дам - не распыляйтесь. Старайтесь не переключаться между фронтэндом и бэкэндом слишком часто, это уменьшит скорость обучения. Большая часть знаний в принципе спокойно мигрирует из одной сферы в другую, так что не переживайте.

Какие задачи нужно уметь решать на чистом JS, перед тем как переходить к изучению библиотек и фреймворков?

Кроме синтаксических конструкций, математических и логических выражений, нужно знать:

• Область видимости переменных
  
• Замыкания
  
• Объектно-ориентированное программирование, в частности наследование через прототипы
  
• Шаблон проектирования "модуль"
  
• Операции над DOM
  
• Понимание принципов событийно-ориентированного программирования
  

Важно - нужно знать, откуда копипастить.
Тебе нужно быть очень хорошо знакомым с одной-двумя-тремя популярными библиотеками на JavaScript. В идеале ты должен иметь представление о том, что определённый класс задач может быть решен с помощью определённых библиотек, хотя бы одной, но такие знания приходят с практикой. Вообще ты должен быть знаком с ними так близко, чтобы помнить, в какой части мануала по библиотеке можно найти описание форматов входных данных нужной тебе функции и какой будет результат, чтобы скопировать и вставить в свой код, а потом поправить, чтобы работало.

Важно - инструменты программиста JavaScript
У тебя должен быть удобный инструмент для разработки (IDE, Integrated Development Environment), чтобы он тебе подсвечивал код (syntax highlight) и подсказывал о синтаксических ошибках (syntax check), о формальных параметрах функций (type hinting), о стиле кодирования (code style), помогал писать код (live templates).
Ты должен знать, как отлаживать скрипты в популярных браузерах (Firebug, Chrome Developer Tools и другое). Что такое точки останова, как управлять исполнением во время останова, как посмотреть и поменять содержимое переменных, как настроить останов по условию.

Хотелось бы узнать что это за задачи(упомянутые вами 80%)

Реальные задачи джунов:

1. Возьми из сборника задач по javascript любой скрипт случайно и вслух расскажи, что он делает.
   Важно - читать и понимать чужой код намного важнее, чем писать свой. И на работе тебе это приддётся делать чаще, чем ты думаешь. Чтобы подключить к своему проекту чужую JS либу, нужно понимать что она делает, как она конфигурируется, как управлять её поведением. Скажу точно, что написать свой скрипт, который строит графики, намного сложнее, чем понять, как настраивается highcharts.
   
   
2. Напиши скрипт на JS, который в заданном тексте удалит один или два символа, выбранных случайно
   
   1. Усложнение: удалять можно только буквы в словах, а знаки пунктуации и цифры удалять нельзя
      
   2. Усложнение: принять, что этот текст является программной на Javascript, удалить одну-две команды JS, но только если они не в строковых литерах (break как команду удалить можно, а в строке "break my heart" нельзя)
      
   3. Усложнение: воспользуйся этим скриптом и "попорти" код какого-нибудь другого скрипта на Javascript, а потом отладь, найди ошибку и восстанови работоспособность
      
   Важно - этим обычно все и занимаются - ищут баги. Только в реальной жизни они и без этого скрипта появляются. И не по одному, а прям пачками.
   
   
3. На страницу HTML нужно встроить график курса доллара по отношению к рублю. Формат входного массива значений курса определи сам, исходя из своего скрипта для построения графиков.
   
   1. Усложнение: на одном графике должны быть два курса, по разным шкалам. Наприме, курс доллара к евро и курс юаня к рублю
      
   2. Усложнение: первоначально график вывести в детализации по месяцам, но чтобы можно было "приблизить" (drilldown) детализацию до дней
      
   3. Усложнение: первоначально график вывести текущем месяце, но чтобы можно было загрузить данные для предыдущего месяца без перезагрузки страницы (AJAX)
      
   
   
4. При клике по картинкам, вставленным в текст HTML, показывать всплывающее окно для просмотра увеличенной картинки.
   
   1. Усложнение: в всплывающем окне сделать навигацию по картинкам, вперёд/назад и к нужной картинке
      
   2. Усложнение: в всплывающем окне вместо картинки показать видео-ролик с Youtube
      
   3. Усложнение: в всплывающем окне показать текст HTML
      
   
   
5. По клику на кнопку "Click me" показать всплывающую форму.
   
   1. Усложнение: реализовать проверку данных на корректность перед отправкой формы (непустое значение, минимальное количество символов, максимальное количество символов, минимальное числовое значение, максимальное числовое значение)
      
   2. Усложнение: если в значении текстового поля встретилась гиперссылка, то считать её за 22 символа при любой длине этой ссылки (как в твитере)
      
   3. Усложнение: реализовать отправку формы на сервер через AJAX, без перезагрузки страницы
      
   4. Усложнение: саму форму в виде HTML загрузить с сервера через AJAX, в момент клика по кнопке "Click me", правила проверок данных должны как-нибудь "извлечься" из самой загруженной формы, например из аттрибутов полей ввода
      
   
   
6. К форме ввода данных на поле ввода даты "навешать" всплывающий календарь для выбора даты.
   
   1. Усложнение: сделать форму календаря мультиязычной. Хотя бы через настройки на том же JavaScript
      
   2. Усложнение: сделать так, чтобы с помощью календаря можно было выбрать диапазон дат, чтобы она была привязана к двум полям формы "дата начала" и "дата окончания", и чтобы значение в поле "дата начала" обязательно была меньше чем в поле "дата окончания"
      
   3. Усложнение: сделать так, чтобы с помощью в календаре можно было видно визуально этот диапазон
      
   4. Усложнение: диапазон может быть открытым, но не пустым, то есть пользователь должен задать хотя бы дату начала или дату окончания.
      
   
   
7. Сделать пред-просмотр веб-страницы HTML с разными темами. Тему страницы выбирать через селектор на javascript, а показывать в фрейме.
   
   1. Усложнение: сделать селектор "тип устройства", чтобы менять размер фрейма (например, "iPhone 5c 1136x640") и "чекбокс" для смены ориентации страницы "горизонтальная" или "вертикальная" (соответственно 1136x640 или 640x1136)
      
   2. Усложнение: в селекторе тем предусмотреть поиск тем по подстроке, и аналогично поиск устройств по части названия (авто-дополнение, auto-complete)
      
   3. Усложнение: тема страницы должна меняться без перезагрузки фрейма
      
   
   

Задачи повышенной сложности, исходя из личного интереса

1. Реализовать форму для многошагового мастера: форма должна состоять из нескольких страниц (шагов), пользователь может переключать страницы через какие-нибудь элементы управления "вперёд/назад" или "перейти на страницу".
   
   1. Усложнение: реализовать функциональную связь значений, когда некоторые данные зависят друг от друга (ввёл число в поле "количество" и в поле "сумма" значение пересчиталось)
      
   2. Усложение: доступность некоторых полей ввода должна зависеть от данных (например, если указал "есть личный самолёт", то значит можно ввести "марка самолёта")
      
   3. Усложение: видимость некоторых страниц должна зависеть от данных из предыдущих страниц (например, если указал "есть личный самолёт", значит появилась страница "ТТХ самолёта"; иначе страница должна скрыться)
      
   
   
2. Реализовать однопользовательскую браузерную игру "змейка", "тетрис", "найди пару"
   
3. Реализовать многопользовательскую браузерную игру "крестики-нолики", "морской бой" на два игрока в режиме "hot seat"
   
   1. Усложнение: два игрока на разных компьютерах, ходы передаются по websocket
      
   2. Усложнение: ограничение на ожидания окончания хода 15 секунд, по окончании ожидания автоматически делается случайный ход
      
   
   
4. Реализовать todo-list. Пользователь вводит список, затем он превращается в строки с "чек-боксами". Когда "чекбокс" включен, строка зачёркивается.
   
   1. Усложнение: пользователь может переименовывать, удалять, добавлять строки
      
   2. Усложнение: список хранить в localStorage браузера, чтобы при перезагрузке страницы он восстанавливался
      
   3. Усложнение: пользователь может иметь несколько независимых списков todo
      
   
   
5. Реализовать простой графический редактор. Пусть рисуется точка в месте, где пользователь кликнул.
   
   1. Усложнение: добавить переключатель режимов "точка"/"линия", в режиме "линия" рисуются линии между двумя последовательно кликнутыми точками
      
   2. Усложнение: можно менять толщину, цвет линий, размер точек
      
   3. Усложнение: последовательность кликов можно воспроизвести ещё раз с самого начала, равномерно или с реальной задержкой между кликами, с обычной скоростью или ускоренно
      
   4. Усложнение: можно выгрузить получившийся рисунок в формате PNG или SVG, причём SVG c анимацией воспроизведения
      
   
   

Можно использовать любую существующую библиотеку.
Например,
для построения графиков www.highcharts.com
для загрузки и передачи данных через AJAX: jquery.com + что-нибудь на сервере
для всплывающих диалогов с картиками, видео и формами: fancyapps.com/fancybox и https://jqueryui.com/dialog/
для валидации форм rickharrison.github.io/validate.js
для календаря https://jqueryui.com/datepicker/
для автодополнения https://jqueryui.com/autocomplete/
для передачи данных между несколькими пользователями socket.io или обычный AJAX

23 года? И столько тлена в словах? Ну ловите мою кулстори, у меня тлена в 23 было куда больше...
Чуть менее двух лет назад, летом 2013, мне было 23, и я имел НОЛЬ опыта работы (если не считать 2 месяца стажерства в магазине комп техники по практике от универа). Кое-как устроился seo-шником в местную веб-студию, даже не зная что это за работа, во время отправления резюме (гуглил после уже). Конечно, как только приступил к работе, сразу понял что seo это не мое, но это помогло мне через 3 месяца на том же месте стать веб-джуниором. И вот я стал джуном, имея за плечами 4 курса на codecademy и одну, плохо прочитанную, книгу. С космической зп в 12к рублей! Через 5 месяцев я уже приступил к работе по удаленке с другими людьми, где платили 30к, и при этом можно было работать по 15-25 часов в неделю. Это позволило мне читать все интернеты на тему фронтенда, а потом, самое важное, пилить демки на кодпене, засиживаясь до ночи. В марте уволился, отдохнул, и в апреле начал очень лениво заполнять профили на зарубежных фриланс биржах. А потом на меня внезапно свалилось подобие сарафана из-за моих демок, и люди просто стали писать мне с предложением что-нибудь запилить, хотя профили я так и не запилил на биржах. Сейчас пилю 2 проекта, с рейтом в 30$/h, для клиентов пустяковая цифра, а для моего Архангельска это вообще какой-то криминал :)
Ну а вам, с вашим имеющимся бэкграундом, вообще не знаю чего бояться. Проблемы могут быть, только если окажется что программирование это "не ваше". Если же вы любите это дело, то просто садитесь, и начинайте пахать. В первую очередь на свое саморазвитие, поначалу я бы даже посоветовал искать что-то с удобным графиком/местом работы, ибо "неудобная" офисная жизнь убивает весь энтузиазм как правило. А без энтузиазма на старте никуда не уехать.