Какой код начать писать на JS?
================================

 Друзья, у меня довольно странный вопрос.  
  

В целом занимаюсь версткой, работаю с HTML и СSS, решил вырасти до front-end разработчика. Программированием до этого не занимался.  

И хочется уже не просто выполнять упражнения, а действительно писать что-то нужное и имеющее смысл.  
  

И здесь у меня большая проблема.  

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

И мне тяжело поставить самому себе задачу, чтобы она еще и была реально полезной.  

В HTML все было проще - у тебя есть макет сайта (или уже работающий чей-то сайт), далее ты пытаешься сверстать макет или повторить какие-то реализованные фичи.  
  

С JS у меня не получается действовать аналогично.   

У меня есть какой-то набор знаний, в стиле "Вот так работают IIFE, модули, прототипы в JS". Теперь мне надо использовать эти элементы при написании кода, и я понятия не имею, почему, например, для осуществления конкретных фич в коде, нужно использовать именно такой метод и так далее....  

То есть, существует обучающее видео "Делаем веб-приложение для подсчета расходов и доходов, оно принимает у пользователя данные и располагает их в двух соответствующих колонках с суммой и названием расхода\дохода." Все что я могу - это повторить за автором видео его код, местами даже понять что нужно писать дальше. Но мне непонятно почему использовался именно такой подход, методы и тд. Я не могу написать нечто подобное на просмотренной основе.  
  

Буду рад вашей помощи, если сможете подсказать мне:  

Какие программы начать писать, приминительно к front-end и развитию в этом направлении, от простого к сложному. 

 Был в похожей ситуации чуть более года назад. Очень помогло вот [это](https://www.youtube.com/watch?v=m-NYyst_tiY&index=2&list=PLoYCgNOIyGABs-wDaaxChu82q_xQgUb4f) видео. После него меня "прорвало" в JS и смог уже что-то сам писать-сочинять...Попробуйте вдумчиво посмотреть это видео и написать обычный TodoList используя jquery, только сделать это самостоятельно. Потом конечно можно подглядеть в [TodoMVC](http://todomvc.com/) jquery и vanilla версии.(сначала jq- она легче). Дальше можно смотреть фрейморки( todolist делаем обязательно уже используя их), а потом уже думать про более-менее полезные приложения...Считаю, что такой путь самый гладкий вариант кривой обучения. Попытки сделать сразу нужный и полезный продукт, да еще и качественно, да еще и за деньги - это верный способ захлебнутся и не выплыть. Для подобных задач нужно окрепнуть и прокачать скилл. Всему свое время. 

  

А вообще, делайте хоть как нибудь. Хоть в процедурном стиле, хоть с использованием GOTO, хоть называя переменные сМиЩнЫмИ названиями. Главное **начните уже писать хоть что-нибудь**, если упражнения вы уже переросли. Перед тем как вы напишете что-то полезное вам ПРИДЕТСЯ прокачивать скилл на чем-то простом.  
  

Подавляющее большинство всей литературы о программировании не о том как сделать 2+2 а о том, как сделать некий кусок работы более простым/быстрым/надежным/дешевым способом. Но никакого смысла нет в это вникать, если вы не можете написать вообще никаким. 

 Советую прочитать вот эту книгу :   
![1011395255.jpg](https://ozon-st.cdn.ngenix.net/multimedia/1011395255.jpg)  

там классно изложены все темы и идет последовательное построение Игры Морской Бой от простого к сложному   

постепенно изучаешь новые фишки и внедряешь их с пониманием того, для чего это нужно.   
  

Вот этот сайт очень мощный в плане прокачки практики: <https://ru.hexlet.io/professions/frontend>  
  

  

  

ну и <https://www.freecodecamp.org/> 

 "Но мне непонятно почему использовался именно такой подход, методы и тд. Я не могу написать нечто подобное на просмотренной основе."  
  

Начните решать задачи. Много задач. Решайте так, как знаете. Не знаете совсем - гуглите. Со временем сами поймете почему так, а не иначе. Другого ответа просто нет, заявляю со 100% ответственностью. 

 Конечно писать на чистом js сложно, я считаю. Лучше использовать angularjs. Как вариант. И на нем писать приложения.  

Или писать в связке с серверными языками php/python.  
  

из идей я бы предложил сделать  

-todo лист  

-напоминалку  

-чеклисты  

-календарь  

-часы  
  

Да, больно, но как вариант. И тем более если хочешь научиться и сделать полезное. То это кому нибудь до подойдет.  

Если я хочу написать приложение, в моем случае php, то я решаю свою проблему, которая у меня возникает по жизни.   

Найди у себя такую проблему и сделай это. Это самый лучший вариант обучения. И каждый раз улучшай свое приложение. Применяй не только нативный js, а jquery, сокращает код в несколько раз)  

```
сonsole.log('Было бы желание, найдутся и возможности!');
```
 

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

Могу посоветовать Хекслет, как платформу для обучения, там как раз таки используется проблемно-ориентированный подход в обучении. Ещё можно читать блоги о разработке, тот же хабр. Так же полезно на тостере переодически читать вопросы (проблемы) и их решения.  
  

UPD. Также советую почитать "Совершенный код" Стива Макконнелла, там очень много информации по этому поводу. 

 Мой ответ отличается от всех остальных. Он заключается в следующем:  

Качнуть на торренте полный курс по js. Пройти все уроки выполняя домашку. Попутно вас и инструментами познакомят, и с фреймворками и с реальными задачами. Экономить время надо...  

И параллельно будут давать методички с теорией.  
  

А уж пройдете курс, дальше делайте что хотите. Можете продолжать решать задачи, но время потеряете много. Лучше пройти курс где от а до я всему обучат... 

 Если хотите вырасти до фронт-енд разработчика, нужно знать не только js, но и фреймворки, бандлеры и другое. 

 Начните делать игрушки. Сначала не сложные: флип-флоп, крестики-нолики, дак хант.   

Потом более сложные - аркады-ходилки-стрелялки.   

А потом портаните какой-нибудь хит из девяностых на js. 

  

Среди ответов была интересная мысль про морской бой.  

Вот пусть это будет вам первая задача.  

Задача интересная.  

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

Пусть будет видно сразу два игровых поля - ничего страшного.  
  

Пусть каждый игрок заполнит свои поля. А дальше пусть стреляют по обычным правилам, и не важно, что видно корабли друг друга. Главное чтобы один стреляет - другой получает урон на своём поле, и т д.  
  

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