Первые шаги в front-end

Добрый день, всем гуру (и не очень) в мире веб-разработки!
Я понимаю, что таких тем миллион и они плодяться со скоростью кроликов под воздействием виагры, но, увы, без помощи (а точнее пинка под зад в нужном направлении), не справляюсь.
Как Вы уже поняли, исходя из названия топика, хочу углубиться в дебри ФЭ, для получения в дальнейшем работы Junior Frontend developer. Поэтому хочу спросить у людей уже прошедших данный этап или даже у тех, кто имеет большой опыт за плечами, совета:
1. Что учить?
2. В каком порядке учить?
3. Литература, видео, обучалки и т.д.

Оговорюсь сразу: я ЧЕСТНО гуглил. Нашел миллиард подобных вопросов и советов: от литературы, список которой можно скролить бессонными ночами, до того момента, когда к тебе подойдут внуки (хотя вряд ли ты успеешь этого достичь, ведь ты же занят пролистываеним списка, да), и не попросит рассказать о лучших годах своей жизни. И до «мега-супер-пупер-классных» курсов, где из тебя за две недели делают программиста от Б-га, и конечно же, трудоустраивают.
К сожалению, моих текущих не знаний не хватает, что бы отсеивать бриллианты от мусора. Именно поэтому обращаюсь к Вам, уважаемые.

Если взять в расчёт мои текущие навыки, то это выглядит немного удручающе. Но перейдём к сути: немного занимался SEO, поверхностно изучал Java (в университете еще), в целом интересовался ИТ, да и программированием, но опять же в рамках программы ВУЗа (в чем, несомненно, каюсь и сейчас мне мучительно больно за бесцельно прожитые годы, вместо которых лучше бы развивался в этой сфере, но это лирика). Конкретно с ВЕБом тоже не далеко ушёл: максимум, что делал — это на локальном сервере «смастерил» на Джумле сайтик, посвященный моей любимой тематике.
НО! Я очень быстро учусь (не хвастаюсь, а констатирую). И готов уделать по 2 часа в день учёбе ежедневно.
К сожалению, сейчас условия не очень, живу в другой стране, и придётся учиться по ночам, НО, зато какой челлендж.

В общем, налил воды на целый океан, поэтому краткие тезисы, с Вашего позволения:
— Порядок изучения (что, насколько глубоко, и в какой последовательности)
— Список литературы для пункта выше
— Я лучше воспринимаю материал зрительно, а также «пощупав». Того, возможно есть какие-то хорошие сайты для этого? Пока нашёл только FreeCodeCamp (хотелось бы услышать мнение о нем)

В завершение:
Спасибо всем, кто поможет в этом нелёгком деле, это плюс в карму однозначно. Так называемые «хейтеры», или папки, которым осточертело видеть подобные топики — потерпите, пожалуйста, ещё один раз :)
Да и просто добра всем и творческих успехов.
Надеюсь, что в обозримом будущем (1-2 года), смогу взять на себя смелость называть Вас коллегами :)

👍НравитсяПонравилось0
В избранноеВ избранном0
LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

Самое сложное это начать что-то делать=)
Этот вопрос очень похож на «Как заработать денег?» =)) - ответ: начать что-то делать.
www.youtube.com/.../UCUzksGhlJU0rNF5KneUZkSA — Вот норм типуля, он (как по мне) норм расчехлит в азах верстки. Посмотри 2-3 раза курс по html css у него.
Дальше берешь и гуглишь: «PSD макеты без регистрации и смс», выбираешь какой тебе по душе и погнал!
Сразу начнут появляться вопросы (как один элемент поставить слева, а другой — справа; как сделать круг и тд...) Гугли!!! Так маленькими шажками будет что-то получаться=) Сразу ничего не выйдет мозг будет говорить что ему впадло и тд., а ты бери и делай=) Сверстай хотя бы 2 макета=)
Дальше нужно искать первую работу! Фигачишь резюме + к нему архив с двумя сверстаными макетами. Пишешь в поиске: «web студии Киева» и погнал рассылать=)
А еще кое-что забыл. В письме должна быть фраза о готовности сдаться в рабство!=)
Удачи=)

Что случилось с доу? Теме с названием «Первые шаги в front-end» уже почти две недели, а еще никто не пошутил про 100 шагов

Стоша просил без необходимости его не тревожить.

Куда ушло два выходных дня %)
glipsite.github.io
119 задание на freecodecamp — сверстать сайт по образцу
Александр, если вы до него ещё не дошли, могу рассказать как делала. Даже если не вам, может ещё кому полезным будет.
1. Здесь хорошие уроки по Bootstrap webformyself.com/...trap/index-subscribe.html Во всяком случае, мне понравились.
2. Установите плагин Emmet, очень ускоряет вёрстку и сокращает количество кода. Видео по нему: www.youtube.com/watch?v=6gbKn-J1R14
3. В Firefox сочетание клавиш Ctrl+Shift+M открывает режим адаптивного дизайна. Действительно очень удобно.
Относительно результата. Он мне почти нравится. Не хватает плавной прокрутки, за это отвечает JQuery. Пыталась добавить, но что-то у меня не сложилось. И в IE 9 не отображаются иконки, а в образце отображаются. Но в качестве самой первой попытки адаптивной вёрстки вроде бы как ничего.

Не советую в анимации лишний раз трогать что-то кроме transform(или opacity), как в ваших инпутах.
Тут есть неплохие примеры:
tympanus.net/...tInputEffects/index2.html
i.piccy.info/...455/94308/1080258/inp.png

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

кто-то посмотрит и подскажет, что не так.
Не так, в смысле как в примере?

Вообще конечно там sticky header есть и элементы на нем отображаются в зависимости от позиции прокрутки. Анимация на propertychange, а не на click. У textarea тоже стоит поставить resize: none; и другие мелочи.

Не так в смысле какие ошибки )
Относительно меню я вижу, что нет подсветки активного в данный момент пункта меню. Инструкцию как это реализовать нашла, новую и подробную: www.sitehere.ru/...-lendinga-dizajn-lendinga но что-то она не сработала. Наверное, где-то ошиблась. С propertychange мне ещё предстоит разбираться, как и с javascript в целом. А вот что я не придумала — как они в пункте Contact в правой колонке последний абзац вниз опустили, так что он напротив кнопки оказался. Вариант с display:table и vertical:align не сработал, потому что высота колонки неизвестная, с абсолютным позиционированием не получилось по той же причине. Ничего лучшего, чем задать какой-то огромный паддинг, чтобы сдвинуть его вниз не придумала. Хоть хорошим решением это назвать нельзя.

Инструкцию как это реализовать нашла
А почему в самом примере на codepen не посмотрели? Там даже комментарии есть в js.
Ничего лучшего, чем задать какой-то огромный паддинг
Они так и сделали, margin-top: 270px; =)

Можно сделать :after к блоку, а потом его поднять на высоту ширины текста, но это уже слишком. Даже они так постеснялись.

В js я посмотрела. Понять, конечно, не поняла. Даже удивилась, что они предполагают, будто такое количество кода может придумать человек, у которого js в программе ещё не было.

Ок. Можно, наверное, было бы кнопку и абзац, который напротив неё располагается, в отдельный блок вынести. Но тогда кнопка окажется оторванной от формы, которую она должна отправлять. Может есть возможность кнопку к форме привязать. Привязываем же мы label, например.

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

Можно через flexbox сделать, я тут быстренько накидал: codepen.io/...g/pen/VmQVOP?editors=1100

вопрос — что дальше
Пройдите js потом вернетесь к верстке. Тем более там вроде и дальше есть проекты в которых надо чето верстать будет, там и потренируетесь еще.

Здорово ) В сторону флексбоксов я даже не думала. Кажется, рано ещё верстать на флексбоксах? И поймёт ли их бутстрап? Да, а вот он мне однозначно понравился. Странно, что так много критических замечаний в его сторону звучит.

JavaScript, безусловно, тоже интересен. Но чуть получше разобраться с вёрсткой хочется. И c jQuery ещё, который в программе вроде бы как был, но следов не оставил.

рано ещё верстать на флексбоксах?
Уже спокойно можно: caniuse.com/#search=flexbox

Да и в самом бутстрапе есть: v4-alpha.getbootstrap.com/layout/flexbox-grid

Хотя есть много мнений по поводу того, что саму разметку на нем делать не лучшая идея. Для разметки в спеке готовят этот модуль: www.w3.org/TR/css3-grid-layout

А флексбокс использовать как раз для таких элементов, как у вас в примере.

много критических замечаний в его сторону
Потому что он уже всем надоел. Чаще всего его используют только для сетки. Но для сетки можно использовать susy или самому все посчитать. А можно и вообще забить на все эти сетки.
чуть получше разобраться с вёрсткой хочется
В ней можно до бесконечности разбираться, тонкостей и нюансов там капец как много. Базовое понимание у вас вроде как уже есть, все остальное лучше на деле разбирать как проблема встретится. Хотя конечно про flexbox почитать стоит сразу:
css-tricks.com/...s/css/a-guide-to-flexbox
codepen.io/enxaneta/pen/adLPwv

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

Не знаю, не знаю)

Комментарии на DOU в 95% случаях, это мнения людей. А мнения кого-попало в том, что ты делаешь, лучше вообще не слушать. Полезные мнения можно вычитать на блогах авторитетных для тебя людей или поинтересоваться у такого человека лично (хотя найти такого человека непросто).

Я бы на месте автора не постил такие вопросы, а нашел бы человека который делает то, что я хочу в перспективе уметь. И спросил бы у него лично. И делал так, как он скажет. Или сам бы все нашел :D. Толку в 100 раз больше.

И на вашем месте я бы не слушал мнение какого-то Антона, не увидев предварительно что и как он делает)

А с техническими вопросиками это к google, stackoverflow или toster. Если там не нашли и на q/a сайтах молчат(а так бывает редко), то тоже лучше прицельно спрашивать.

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

Комментарии на DOU в 95% случаях, это мнения людей. А мнения кого-попало в том, что ты делаешь, лучше вообще не слушать.
Почему же не слушать? Можно послушать и сделать по своему. А можно послушать и согласиться, что то, что тебе советуют, разумнее чем то, до чего мог додуматься сам. То есть в любом случае критически оценивать и анализировать информацию нужно. А сомневаться в том, что говорят посетители форума, намного проще, чем в мнении того, кого считаешь авторитетом. При том, что авторитеты тоже могут ошибаться.
И спросил бы у него лично. И делал так, как он скажет.
Вот именно. Для меня лучше услышать десять мнений и на основании них сложить собственное, чем бездумно и беспрекословно делать так, как кто-то скажет. Даже если последний вариант будет более результативным мне бы хотелось думать самой, решать самой и ошибаться тоже самой. Потому что свои ошибки потом станут своим же опытом.
А с техническими вопросиками это к google, stackoverflow или toster.
У меня неплохой опыт общения с поисковиками, могу уверить, то, что они предлагают — это тоже мнения людей. Точно такие же, как мнения людей на dou. И в них точно так же нужно уметь ориентироваться и отделять верные от ошибочных, надёжные от сомнительных.
И на вашем месте я бы не слушал мнение какого-то Антона, не увидев предварительно что и как он делает)
Мне, конечно, интересно было бы узнать чем вы занимаетесь. Но только из любопытства. От того кто вы и чем вы занимаетесь ваши комментарии не станут ни лучше, ни хуже. Мы ведь людей не по профессии и не по должности оценивам.

В топике неоднократно упоминался FreeCodeCamp. Рассказываю о впечатлениях от ресурса после первых трёх дней занятий и 100+ выполненных заданий.
— Совершенное знание языка не требуется. Моего никакого английского уровня elementary пока хватает. Что-то понимаешь, что-то переводишь, в общем, справляешься.
— Сразу требуется регистрация на GitHub и CodePen. Это хорошо и правильно.
— Программа очень насыщенная, что радует. Перечислено много всего нужного.
— Ориентировочное время на выполнение заданий даётся с приличным запасом. Во всяком случае пока.
— Курс бесплатный, доступный, понятный, масса практических заданий — это прекрасно.
— Нужно выполнять свои проекты. Тоже замечательно.
Из недостатков.
— Изложение поверхностное. htmlacademy предлагает материал по html-css на порядок насыщеннее, сложнее и увлекательнее.
— Только первые самые несложные курсы расписаны подробно. Дальше материал усложняется и частично или полностью переводится на самостоятельное изучение.
— Того, что дают, недостаточно для выполнения предложенных заданий. Уже первый несложный проект показал, что нужно знать о классах jumbotron, thumbnail, col-md-offset-*, о которых в материалах курса не говорили, для семантичной вёртки неплохо бы знать о тегах figure, figcaption, blockquote, cite, о которых тоже не упоминалось. Это только то, что знаю/сумела найти. Вероятно, ещё больше осталось неизвестным того, о чём даже не догадываюсь.
Так что свою сову каждый будет рисовать сам.

Первый несложный

Written and coded by Quincy Larson.. www.freecodecamp.com/quincylarson
Что за копипаста?

Задание было сверстать страницу по образцу: codepen.io/...FreeCodeCamp/full/NNvBQW
В образце ссылка выглядела именно так. О чём вопрос?

в

coded by
/шепотом/

можно же было бы немного изменить или дописать строчечку про себя. ИМНО

Я подумала об этом, но решила, что так будет неправильно. Written точно не я, coded повторяла чужой. Раз они решили на учебных проектах свои имена писать, пусть так и будет.
Спасибо.

Если с английским проблем нет, очень рекомендую freecodecamp. Там и курсы, и задачи, и комьюнити, и практика

Хорошие ссылки же! Чего так мало плюсов?

Чем классно быть фротэндером, так это что тебе, вообще говоря, вообще ничего не нужно, кроме ноута и интернета, чтобы творить. Сложно литейщику без домны, сложно ассенизатору без помпы, сложно юристу без дела, сложно врачу без тела, а фронтэндеру — простора всласть, бери ЛЮЫБЕ сайты да колбась.
Нет идей? Сходи на форум.
Все равно мало? Повторение — мать учения! Выбери себе известный проект и попробуй его повторить. Частично, упрощенно, примитивно. Доски от треллы с драг-н-дропом. Аплоадилка картинок от феусбука. Чеклисты с коллаборативным редактированием от еверноута.
Нужен домен, процесс деплоя, сервер-сайд? Вот же они, положила.
Наколбасил — вот уже и в резюме есть, что показать. А фронтэндеры — сейчас самые востребованные, судя по динамике спроса.
Смотри, как можно. Думаешь, у нее были проблемы с поиском работы после такого? Что-то ей нужно было для этого?

Короче, ничего не нужно, кроме интереса и капельки силы воли.

Думаешь, у нее были проблемы с поиском работы после такого? Что-то ей нужно было для этого?
1. Ей нужно было уволиться с работы и заниматься только программированием — у автора такой возможности нет.

2. С большой вероятностью у неё был персональный наставник — у автора его нет.
3. Ей нужно было стать известной и популярной во всём мире. Следующему, кто создаст 180 сайтов за 180 дней, работу могут и не предложить.
4. Ей нужно было быть белой симпатичной состоятельной девушкой. Если помните, бездомный и безработный негр, выбравший уроки программирования вместо ста долларов, так бездомным и безработным и остался.

5. Ее раскрыли на том, что у нее уже было пару лет какого-никакого опыта программирования.

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

Прогуглил ее феномен, когда он был на слуху. На англоязычных ресурсах (возможно даже в комментариях к восторженным вау-статьям был линк или обьяснение со ссылками), после того как пошла шумиха, народ полез в ее код и в самых начальных ее поделках обнаружил продвинутые, как для новичка, конструкции. Которых определенно нет в базовых helloworld туториалах, книгах итд. Ну а дальше они обнаружили, что за два года до этого она была кофаундером какого-то «стартапа» на пару с ее парнем, или что-то около того. В общем не зеленый новичек.

Я бы мог написать, что можно заниматься столько, сколько можно, и наставника найти при желании возможно, и что неплохо было бы выдумать свою фишку, но какой во всем этом смысл, если я ищу возможности, а вы — причины?

но какой во всем этом смысл, если я ищу возможности, а вы — причины?
Да ладно? И в комментарии ниже у меня полстраницы причин? Что за странная привычка переводить обсуждение вопроса на личности?

ок, ладно, не получится так не получится

Речь вовсе не о том, что не получится, а что у той девушки, о которой вы пишете, была другая ситуация, да и сама её история правдива лишь отчасти.

У каждого человека в мире не такая ситуация, как у другого человека. Тем не менее, кое-чему можно научиться. Сделать из своего обучения событие, блог — идея? Поставить перед собой серьезное испытание и публично с ним справиться — идея? Найти способ провести много часов в очень практической плоскости и пройти через ряд реальных жизненных задача — идея?

Ее ситуация неправдива? Она на самом деле не работала эти 180 дней? Ей кто-то помогал ради лайков? Ее выложенные работы ненастоящие, фотошоп? На самом деле она ночами читала какой-то секретный учебный план, а делала вид, что учится на примерах? В чем тут подвох?

Что начинала она не с нуля? Ну и что? Это как-то отменяет 180 выполненных работ и тысячу часов опыта, которые она приобрела? Не с нуля несчитово? Гитхабом умеет пользоваться? Ох и продвинутая, хана!

Идеи хорошо бы иметь свои, но на что я хочу обратить внимание — ведь все это можно сделать, имея желание, ноутбук и интернет. Не нужна дорогостоящая команда, не нужны профессиональные менеджеры, не нужен диплом о высшем образовании, не нужна лицензия, не нужны продажи, не нужен маркетинг, не нужны клиенты, не нужна бухгалтерия — вообще ничего не нужно.
Покажите мне еще одну профессию, где такое возможно? Кроме художников и поэтов с композиторами?

Даже не знаю нужно ли отвечать. Ну, давайте попробую.
В первом комментарии ветки вы спрашиваете:

Что-то ей нужно было для этого
Я отвечаю что ей было нужно, и чего у автора поста нет. В результате вы делаете неожиданный вывод, что вместо возможностей, которые ищете вы, я ищу причины. Вывод показавшийся мне странным, непонятным, нелогичным и обидным. Потому что вас он выставляет в хорошем свете (икать возможности — это хорошо), а меня в плохом (искать причины, чтобы не сделать — плохо). С какой стати вполне объективное отличие ситуаций двух людей стало основанием для таких выводов мне непонятно. Дальше вы делаете ещё более непонятный вывод
ок, ладно, не получится так не получится
Почему вдруг не получится? Это из чего следует? Такое впечатление, что вы соглашаетесь со мной, но я про не получится не говорила совершенно точно, потому что я так не считаю.
Относительно последнего комментария:
Ее ситуация неправдива?
Да, её ситуация неправдива. В первых строках топика читаем «Хотя у неё не было опыта в этом деле, она никогда не посещала технических спецкурсов в школе, а наоборот — увлекалась только искусствами, но девушка сразу же решительно взялась за дело». Наличие предыдущего опыта всё сильно меняет: теперь перед нами не восторженная наивная девочка, решившая научиться новому для неё делу таким необычным способом, а рекламная кампания и сознательный обман.
я ЧЕСТНО гуглил
Я так и вижу аудиторию, студенты сдают экзамены, один беседует с профессором, дела неажно, задаче не решена, в теории плавает, и в качестве последнего аргумента студент говорит, заглядывая прямо в глаза: я учил! я ЧЕСТНО учил!

Посмотрите что сейчас актуально в вакансиях, постройте для себя план.
Если бы я сейчас начинал учить фронт-енд, то это было бы примерно так:
HTML => CSS => JS (es5, es6) => Webpack => React, flux, redux ...
Но наиболее пристально из этого учил бы чистый JS

2 часа в день? ну-ну! Сейчас учусь на курсах WEB UI, так вот уделяя 4-5 часов в день не успеваю ни-че-го! поэтому тут скорее вопрос не правильно расставленных приоритетов, а волшебной книжки, прочитав которую Вы сразу станете умным, еще не придумали!

Вопрос не в приоритетах, а том, что я ФИЗИЧЕСКИ не смогу уделить больше времени. Причину я раскрыл в топике.
Я искренне рад за людей, которые могут себе позволить учиться по 4-5 часов в день (с чем я Вас и поздравляю), но, увы, сейчас я не могу себе этого позволить.
И волшебную книгу я не просил, а хотел всего лишь пинка в правильном (подчеркиваю это слово) направлении, что бы точно понимать, что свои «жалкие» 2 часа в день я трачу не впустую, а с максимальной эффективностью.

Отчасти — да. Там взаимосвязь целая, в которая я застрял. Работа (которую не могу сейчас сменить из-за финансового положения уровня «плинтус»), ограничивает мои временные возможности. Как говорится: «Имеем, что имеем», поэтому отталкиваюсь от возможностей :)

2 часа в день и человек через условные год-два фронтендер. Ноль часов в день, и через 18 000 лет человек прямо как Джон Сноу.

2 часа в день действительно мало. Вот какие цифры приводят:
— вёрстка + портфолио — 400+ часов
— вёрстка + базовый JavaScript + портфолио — 600+ часов
— вёрстка + уверенный JavaScript + портфолио + реt-проект — 1000+ часов
Дальше цитата:

— Могу ли учить верстку/JS после работы по 2 часа?
— Можешь но это вряд ли будет эффективно. Указанное время в таком случае можешь смело умножать на 1,3+
То есть не год-два, а минимум два года. Но здесь несколько проблем появляется:

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

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

Хоть начинать искать работу можно уже после второго этапа, то есть через год с небольшим. Наверное, это будет оптимальный вариант. Полезный пост Як вивчитися на програміста: основна таємниця айтішної освіти Если вкратце: автор считает, и многие с ним соглашаются, что выучиться на программиста невозможно, им можно стать только применяя знания на практике и получая новые знания в процессе практики.

Кстати, раз уж автор появился в своей теме, вопрос к нему. Прошло три дня, то есть минимум шесть максимум восемнадцать (с учётом двух выходных) часов занятий. Можете поделиться: что уже успели сделать за это время?

Вот какие цифры приводят
Средняя температура по больнице не говорит ни о чем.

Для 40 летнего сантехника из под Житомира цифры можно множить на условные 3.
Для 15 летнего школотрона из сельской школы на 1,5-2.
А для свеженького выпускника вменяемого технического вуза с олимпиадами и красным дипломом за спиной — делить на 3. Итд.
И то, это все для первых итераций. Если поначалу любой человек будет тратить больше времени, то с приобретенным опытом обучения в конкретной специализации у него будет уходить все меньше и меньше времени.

А для свеженького выпускника вменяемого технического вуза с олимпиадами и красным дипломом за спиной — делить на 3.
О, хороший аргумент. Спасибо. Технический вуз я действительно не приняла во внимание, а олимпиадное прошлое и красный диплом и вовсе пропустила. Сомнения остались, но появилась надежда.

И всё-таки методику погружения и буткемпы не напрасно придумали. Шесть месяцев занятий по два часа и два месяца по шесть часов дадут существенно разные результаты.

Да, без проблем. Успехи не ахти какие, но над этим работаю. На данный момент:
— пройдены 14 из 18-ти доступных бесплатно уроков на htmlacademy (в каждом ±20 упражнений)
— 41-й урок на freecodecamp
— на learn.javascript успел пройти «Основные понятия» (операторы, переменные, типы данных, циклы). Не скажу, что прям все сразу понял, но стараюсь восполнить пробелы книжечкой «Выразительный JavaScript» (свободную минутку на работе провожу за ней, довольно приятно читается, кстати, удивлён :) )

Имеет смысл проходить всё по порядку, а не вперемешку.
Сначала вёрстка (HTML, CSS). И только потом JS, работая с DOM-ом.
А после этого уже углубляться в JS и затем выбрать, что больше понравится (что будет актуальным на то время) — React, Angular, Vue или ещё что-нибудь.

Это по два часа в день после работы? Я тоже удивлена. Вы действительно очень быстро учитесь. Здорово. Рада за вас.
Если не сложно, заходите время от времени в эту тему, делитесь результатами.

Если линейно, то Вы правы абсолютно. Просто весь прикол в том, что он всегда будет бежать за уходящим паравозом. Не знаю, может это я какая-то не такая, а он латентный программист — гений, но я за два часа успеваю только начать))))

Интересно, где у меня написано про «уговаривать себя хоть что-то запрограммировать»? Имелось в виду начать: сесть, включиться, посмотреть, осознать\не осознать, перечитать, попробовать. Т.е. реальная работа начитается, но в куражи вхожу не сразу, лично для меня 2 часа ни о чем.

Он просто решил, что если есть уже миллиард, то ±1 роли не играет

Тут есть своя доля правды)

Нет) Просто, как я писал выше, я не настолько хорошо разбираюсь в этой отрасли, что бы понимать, что такое «хорошо», а что такое «плохо». Поэтому попросил совета, что бы подсказали самые эффективные материалы для обучения)
Ведь если бы я разбирал все то, что я успел нагуглить, то мне и жизни бы не хватило, а вот сколько там конкретно-полезного — большой ещё вопрос)

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

а че всего лишь жабу?
чего не асм, чего не программирование перемычками?

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

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

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

и сколько он потратит времени, изучая еще и java в нагрузку по 2 часа в день?
сколько по вашему джунов на java понимают, что они делают и зачем? сколько из них пишут приятный красивый код?

человек собрался в фронтенд, он не будет работать на жабе, он не будет делать проекты на жабе или сидеть в офисе с толпой миддлов и сеньоров, где ему кто-то сможет посоветовать что-то, рассказать почему это и зачем, почему вот так писать не надо и бить по рукам за кривое форматирование. а прочтение одной-двух книг ему не даст ничего. он просто потратит время чтоб забить голову знаниями, которые осядут ненужным грузом.
в то время, пока он мог бы разбирать DOM и прочую специфику браузерного js он будет вникать в специфику java, которая ему не пригодится.

где сложно прицелиться в ногу
ну выстрелит он пару раз в ногу, так что с того? на ошибках учатся и идут дальше. не делайте из этого трагедию.
хочет войти
куда? «в айти»? а чего в него входить?
научится верстать и освоит какой-нибудь jquery чтоб свистоперделки прикручивать и пусть хватает заказы с какого-нибудь fl.ru, там полно верстки и прочего счастья. набьет себе более менее понимание и пойдет в контору пить смуззи да кашку с молоком халявным кушать.

К сожалению, не все так просто.
Обычно бюди делающие свистоперделки на джквери, вообще понятия не имеют как программировать на джс, в итоге на стекоаерфлоу спрашивают как 2 числа сложить

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

Там и заказчики соответствующие. Какая работа такая и оплата. Т.е. никакая.

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

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

Ну так если нужен нормальный фронт то нужно нанимать профессионала — фронтендера, а не ожидать с бекендера чудес.

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

а я вот жалею, что у меня не было времени учиться программировать на асме, и пришлось начинать с Си)

ну если так хочется, то почему бы не выучить его сейчас, например?

я уже кому-то писал здоровеннейшую телегу на эту тему.
и чтоб не разоряться вновь просто кину ссылку —
dou.ua/.../newbie-quitters/#1008194

Нужно брать и делать. Если твое и через месяц не закинешь, тогда можно спрашивать что делать дальше

Если вы прям очень резкий и у вас есть база, можете за 2 дня пролистать все пункты по CSS и HTML5 на w3schools.com. Потом читаете за недельку «Основной курс» на learn.javascript.ru. На этом этапе вам все в идеале знать не надо, достаточно будет понимать че-где искать, когда возникнут вопросы.

Потом переходите на freecodecamp.com. Это как раз то место, где у вас вопросы возникнут, потому что они дают задания, а не теорию (но вы то уже знаете где и что подсмотреть, хотя на этом этапе я советую забыть про ресурсы выше и смотреть все на MDN && stackoverflow). Тут уже на практике и будете все изучать более детально, а не развлекаться на курсах с картиночками (хотя в этом тоже ничего плохого). Они по пунктам разбили всю программу front-end примерно на 550 часов выполнения.

Если вы за 1000 часов справитесь с этими двумя пунктами — думаю будет здорово. Так оно примерно и выходит по времени, чтобы стать junior специалистом. C подтвержденным сертификатом freecodecamp работодателям уже будет о чем с вами поговорить на собеседовании.

Правда еще придется немного покопаться во всяких git/gulp(webpack)/scss. Но если делать все последовательно, и у вас есть только 2 часа в день, то вы до них дойдете через 1000/2/365 = 1.4 года. А за такое время во фронте меняется много чего. Потому как дойдете, так и переспросите.

1) тут, тут і тут

2) Зазвичай, шлях вигладає приблизно так:

HTML(5) + CSS(3) => JavaScript (jQuery) => Bootstrap, Less/Sass => JavaScript (React/Angular/ etc.)
Додатково: GIT, Babel, Webpack і тд. + трішки node.js за бажанням.

Ресурси:

Free code Capm
Codecademy org
YouTube — Sorax — JS
JavaScript
W3 school

Якщо узагальнити, то вам потрібно:

1) Навчитись верстати.
2) Освоїти базово JS, jQuery, написати декілька сайтиків з перделками/свистелками.
3) Bootstrap, препроцессори будуть плюсом.
4) Поглибитись у JavaScript, (es6), вивчити фреймворк, написати пару аплікух і розіслати резюмешки.

І не забуваємо про базу:

* DOM, BOM, Ajax, HTTP(s), протоколи, + принципи роботи браузера і тд.
* English — маст хев. Інтенсивно вивчайте англійську. Для розробників це стратегічно важливий скіл.

Из ресурсов ещё добавила бы www.codeschool.com (хотя он стоит 30 баксов в месяц и не всем это может подойти) и udacity

Я тоже только учусь. Могу рассказать что уже сделала и что планирую.
1. Прошла HTML Academy: интерактивные онлайн‑курсы — понравилось. Наигралась от души. И ещё у них акция была, неделя бесплатная, так что прошла все курсы, которые на тот момент были.
2. Прошла курс Веб-программирование . Он простой и отдыхающий. Вот такую страничку учат верстать целых 10 недель. Так что параллельно ещё что-нибудь можно учить.
3. Базовый интенсив HTML и CSS от HTML Academy. Понравился. В результате будет примерно такой сайт. Или такой. Или другой, там пять шаблонов, можно тренироваться. Предполагается, что на интенсив уходит месяц. Где-то так и есть, может на неделю меньше.
4. Продвинутый HTML и CSS от HTML Academy. Адаптивная вёрстка, флексбоксы, препроцессоры, немного JS. Результатом будет примерно такой сайт (этот уже не мой, сюда я ещё не дошла).
5. Потом, конечно, JavaScript и нужен и хочется, но считается, что начинать с него не лучшая идея. Так что прошла CS50 на Prometheus. Курс прекрасный и очень насыщенный. На него 12 недель отводится, но у меня ушло в два раза больше времени. Материала очень много, задания мне показались сложными. Но зато очень интересно и увлекательно.
6. Хороший учебник по JavaScript Выразительный JavaScript. После каждой главы есть упражнения. Вначале вполне доступные, но пишут, что дальше задания очень усложняются. На сайте книги есть песочница для кода
7. И, конечно, Илья Кантор Современный учебник JavaScript . Теория, задания, обсуждения заданий в комментариях.
На этом пока всё. На мой взгляд, здесь минимум на полгода материала хватит, если заниматься каждый день по два часа и очень быстро учиться.
P.S. В перерывах можно и нужно вспоминать английский. Для Junior Frontend developer английский язык не менее, а может даже более важен, чем язык программирования.
Что дальше не знаю, и всё ли перечисленное названо верно тоже не уверена. Так что присоединяюсь к вопросу автора. Подскажите, что здесь так, что нет и что учить дальше, когда этот материал закончится.

Если вы достаточно уверенно себя чувствуете в JS после всех пройденных пунктов в этом списке — у вас есть 2 основных пути развития. Первый это браться за Angular / React и всю кухню с ними связанную. Второй это копать в сторону графики / анимации / производительности.

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

Если в JS чувствуете себя неуверенно, попробуйте почитать вот эту серию книг:
github.com/getify/You-Dont-Know-JS
Или можете попробовать сразу устраиваться на работу и уже там все шишки набивать.

Подписаться на комментарии