Освоение HTML5, CSS, JS. Как продвигаться?

Question

[Senbonzakuraa]

В общем, поставил себе цель - освоить HTML, CSS, js за год, в процессе самообучения начать фрилансить через пол года а уже по истечению года устроиться в веб-студию.
Собственно такие вот вопросы:
1. Каким образом лучше и продуктивнее продвигаться в освоении? Сидеть за книгами или верстать из шаблонов все подряд поглядывая в htmlbook или гулять по ютубу в поисках видео?
2. Есть какой-либо смысл покупать "индивидуальные курсы"?
3. Конечно же советы от себя.
О себе:
На данный момент мои знания находятся на уровне 0.5 из 10
Смогу сверстать лэндинг из PSD макета, но очень коряво, благо хоть узнал о bootstrap вовремя.
Со временем хочу сделать что-то вроде блога о своем продвижение в этом деле, дабы видеть сколько всего я преодолел на своем пути к цели.

Comments

[cajo]

могу рассказать как я дошёл до нормального уровня за 5 месяцев. Первый месяц, качай шаблоны из интернета и верстай попутно гугля или найди ответы тут(их огого сколько), второй месяц снова верстать так же упорно и много + уже добавлять javascript ввиде jquery, я верстал 8-10 часов в день, то есть обычный рабочий день + читал разные статьи и туториалы в свободное время, третий месяц погружение в javascript, заканчивай с jquery и начинай учить углубленно javascript, javascript garden например расскажет про некоторые непонятки в языке и обязательно снова пройти learn.javascript.ru и это все так же само в плане времени, полный рабочий день, месяц 4-5 javascript и фреймворки(рекомендую vue или react, очень легко должны зайти + инфы много расплодилось по ним), тут уже начинается другой уровень уже открываются глаза на многие вещи, для практики можно взять какой-то например фейсбук api и замутить свою "соцсеть"

[Ankhena]

Я за решение реальных задач. Т.е. да, верстать все подряд, гуглить, читать статьи и верстать дальше.

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

[Сергей Тутуков]

Senbonzakuraa:
Скажу немного о фрилансера. Если ты работаешь в офисе и помимо этого берешь работу на фриланс, то я это только поощряю. Но если человек полностью работает на фрилансе, то я его ненавижу. Объясняю:
- никто не проверяет качество сделанной работы, клиент просто не способен это сделать. Поэтому все делают через костыли.
- фрилансеры деградируют. Берут только ту работу, которую выполнили уже миллион раз, шаг вправо, шаг влево и опять костыли.
- фрилансеры вобьют в себе в голову, что вот это технология самая крутая, нужно делать только по ней. Например, БЭМ - крутая методология, но она излишняя для лендингов или других мелких сайтов. Либо Vue, вот это сейчас в тренде... через год все будут на нем... да хер там! Посмотри сколько вакансий на hh по react и angular, а сколько vue.
- т.д.

Книги. Бери любые книги "O'Reilly" и читай только их.
Видеоуроки нужно очень жестко фильтровать. Sorax, ITVDN - хорошие, loftblog, htmlacademy - нормальные, а вот Евгений Попов - это пиздец (почитай сам отзывы).

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

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

[Сергей Тутуков]

www.reebok.ru/ru-RU/nano_7 - уверен на 100% что делали фрилансеры.
Посмотри адаптивную версию. На меню нажми, на стрелку,на поиск. ничего форму не перекрывает? и т.д.
Не будь таким!)) должен быть тот, кто проверит эти ошибки.

Answer 1

[Mary Солнечная]

1. Каким образом лучше и продуктивнее продвигаться в освоении? Сидеть за книгами или верстать из шаблонов все подряд поглядывая в htmlbook или гулять по ютубу в поисках видео?

Да! Много верстать

2. Есть какой-либо смысл покупать "индивидуальные курсы"?

на htmlacademy хорошие курсы. Там есть бесплатные уроки, а потом платные. Посмотрите, может вам понравится бесплатные и вы захотите платные купить, там все интерактивненько и интересненько. Мне лично бесплатных хватило, просто так, для интереса)

3. Конечно же советы от себя.

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

Совет № 1 - не бойтесь пользоваться новыми штуками, но все с умом.
Совет № 2 - найдите наставника. Иногда помощь человека соображающего очень нужна. Он и ревью сможет сделать, и тукнуть чо почитать надо, где потренироваться, а то и пендаля даст. Главное - не задалбывать.

Удачи вам!

Comments

[Ильяс Якубов]

Да htmlacademy нереально крутая штука!

Answer 2

[jenovas]

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

Answer 3

[McBernar]

1. Базовые навыки html/css. Здесь отлично помогает htmlacademy.ru

2. Чистый JS на learn.javascript.ru

3. Попутно верстаете все, что плохо лежит, практику по JS можно получать на каком-нибудь Codewars.

4. Дальше начинаются различные тулзы — препроцессоры, сборщики, фреймворки. Начните с простого — Gulp, Sass, Jquery, Bootstrap, Emmet, Git, NodeJS на уровне npm.

5. А здесь вы уже начнете неплохо ориентироваться во фронт-разработке и вопросов — куда двигаться дальше — не появится. Разве что только философские.

Comments

[Mary Солнечная]

Как вам сказать - можно начинать пользоваться emmet, git уже на этапе html/css/js. Ручками, конечно, тоже надо уметь писать, но может быть было бы интересно сразу пользоваться emmet. У меня так и случилось, ни сколько не жалею, что начала сразу пользоваться этой штукой

[McBernar]

Mary Солнечная: ну, Emmet и правда никак не повлияет на обучение, но добавит скорости.
А Гитом просто пока рановато голову забивать.

Answer 4

[Дмитрий Pacification]

Просто оставлю это здесь
webmasters.teamdev.com

И это
https://github.com/zualex/devmap

Comments

[iivanovich]

Как однако хорошо изложено - не встречал раньше ничего подобного!

Answer 5

[sergey]

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

Верстать, верстать и еще верстать

2. Есть какой-либо смысл покупать "индивидуальные курсы"?

сейчас так точно уже нет

Answer 6

[Сергей]

100.codepr.ru

Answer 7

[Андрей]

Обрати внимание на flexbox, он уже актуален везде, после обрати внимание на css grids
Так же обрати внимание на ES2015, ES7, ES.NEXT, после чего на React.JS/Angular.2+/Ember.JS/Vue.JS/... на выбор. Ну HTML5 само собой разумеется. Так же неплохо хотя бы по верхам понимать HTTP и AJAX, если еще websockets добавить, то вообще замечательно. Ну там еще всякие линтеры, вебпаки, лесс/сассы и прочие ноды тоже будут весьма полезны.

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

В общем в голову впихнуть придется столько, что мама дорогая.

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

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

Answer 8

[Роман Мисюра]

1. Теория без практики - бессмысленно. Советую брать по возрастанию сложности макеты и верстать (от простых до сложных).
В видео уроках много воды и ненужной информации, т.е. много слишком затянуто.
2. Покупать курсы - не вижу смысла если не будет индивидуального занятия с результатом и задачами. Т.е. покупать кота в мешке. Курсов в интернете много.
3. Что могу посоветовать от себя, в зависимости от Вашего уровня знаний могу покоучить немного в этом направлении т.к. сам работаю Front-End разработчиком. Можем связаться и объясню что к чему. Все бесплатно, но времени в день смогу не очень много уделять.

Answer 9

[Vlad Feninets]

посмотреть:
frontend-science.com/blocks/subscription/subscript...

почитать:
https://medium.com/@gucol_lu/%D1%84%D1%80%D0%BE%D0...