С нуля до Frontend-разработчика. Начало
Всем привет,
произошел небольшой казус в прошлом посте (не знал всех правил редактирования постов, извиняйте), поэтому решил написать новый пост.
Как говорил ранее, все кто начинают обучение в веб-разработке сталкиваются с огромным количеством информации в сети и отсутствием практических навыков. Я не стал исключением.
Даже имея RoadMap и обучающие курсы, происходит так, что мы учим сухую теорию и когда дело доходит до собственного проекта, руки и голова забывает как писать код.
Пересмотрев уйму информации в интернете, а также повторяя код за лектором, решил остановиться и начать свой путь заново, почти с нуля.
Сейчас хотел бы посоветовать небольшой план для людей, которые только начинают свой путь в веб-разработку:
1) Думаю, самый народный способ изучить основы HTML и CSS это воспользоваться бесплатными курсами от HTML Academy.
Затем эти знания можно закрепить пройдя бесплатные задания на FreeCodeCamp. (Basic)
2) Советую скачать бесплатно курс, который писал здесь (п. 2)
!Либо можете найти ссылку на скачивание zip-файла в комментариях в этом посте!
Посмотрев первый модуль, вы уже отточите свои базовые знания + будет настроено пространство.
+ также многие советуют выделять время на прочтение книг и изучения англа. Но я считаю, что лучше получать информацию с помощью интерактивных ресурсов (видео), а также стараться не распыляться на другие темы.
Сложно описать сколько времени у вас займет на обучение данного материала, но в среднем можно предположить 2/3 недели.
После этого можно уже с головой углубляться в верстку.
Мой план обучения на ближайшее время:
1) Практикуем верстку с помощью Bootstrap Grid (ее многие недолюбливают, но я хотел бы закрепить эти знания);
2) Продвинутая верстка с Flexbox без интерактива;
3) Стараемся настолько набить руку, чтобы могли сверстать почти любой проект без интерактива;
4) Основы JS;
5) Поверхностное изучения JQuery и добавления интерактива на сайты.
6) Продвинутый JS;
7) React.js
8) Создаем портфолио;
8) Стараемся устроиться на работу джуном.
План на следующую неделю:
1) Доделать проект из курса (модуль 2);
2) Найти и сверстать самостоятельно пару лендингов с помощью сетки + делать их «резиновыми».
Повторюсь, что постараюсь вести этот блог и создавать новые посты пока что каждую неделю, для структурирования знаний, получения фидбека, и возможно кому-то этот путь пригодиться)
Все получилось сумбурно, я еще дилетант в этом деле, так что рад любой критике и пожеланиям 🙂
Web-технологии
231 пост 4.5K подписчиков
Правила сообщества
1. Не оскорблять других пользователей
2. Не пытаться продвигать свои услуги под видом тематических постов
3. Не заниматься рекламой
4. Никакой табличной верстки
5. Тег сообщества(не обязателен) pikaweb
Я 20 лет работаю программистом. До 2015 работал и с фронтом и с беком.
Обучался соответственно по книгам, т.к. в сети почти что не было толковой информации.
Это сейчас её избыток.
Год назад, обучал друга программированию (38 лет). Просто товарищ решил сменить род деятельности.
Расскажу кратко, если получится :\
По этому я начал рассказывать товарищу принципы поиска информации и как ее отсеивать.
Но с начала конечно, мы месяц обучались самым азам. Язык тут не важен, главное сам принцип работы веб приложений.
После того как он более менее освоил поиск и понял азы, решили смотреть что изучать.
Я работаю в основном с Go/PHP, иногда с плюсами и JS.
Ему очень зашёл PHP, в том плане, что работу с ним найти легко, платят нормально и много уроков.
Так же попав на хайп, смотрел в строну питона.
Я не мешал, не подсказывал. Ждал когда сам найдет что ему хочется.
По моему мнению, человек должен сам выбирать своё будущие.
В итоге он выбрал JS и фронтенд в целом. Хотя и о беке думал.
На первых порах я мог ему помочь. Ведь js знаю да и фронтенд, правда пятилетней давности.
В мире фронтенда и разработки вообще, пять лет это как 50 лет в мире индустриальном.
Полгода я ему помогал в изучении, давал таски, давал советы, делал кодревью. Собственно мне этого то и на работе хватает =)
В общем стимулировали работу джуна на проекте.
И вот настал тот момент, когда мы уперлись в мои знания о фронтенде. Он многого еще не понимал а я толком то уже и помочь не мог.
Решили сделать сервис а-ля инстаграм с API.
Я соответственно пилил бек, что было довольно быстро а он фронт.
Выбрали Vue.js, вместе в него погружались.
Сделали этот домашний проектик, он проде более менее освоился в нашем мире.
Мне было приятно помочь другу, но в тоже время я подтянул свои знания.
Дальше он стал искать работу. К себе я его взять не мог, у нас нет джунов и мидлов.
Нашел работку на удалёнке за 50т.р. джуном. Соответственно оформление по Т.К.
Работу начальником склада бросил. Это было для него тяжело. Все же лет 10 там отработал.
Но расти там дальше нет возможности.
Зарплата была
80т.р. Очень печалился, что с 80 упал до 50.
Однако понимал и понимает, что в будущем будет выше и есть куда расти.
Сейчас ему подняли до 65т.р. Посмотрим что будет дальше.
Чет кратко не вышло. Извините.
P.S.
По этому те кто не боится трудностей, дерзайте.
Изучение и продвижение в мире разработки, это нелёгкое дело как многим кажется.
А без наставника, оно становится намного сложнее.
JS разбирай прямо по полочкам. Это основа! Его нужно знать, как правописание ЖИ и ШИ. Что-то посмотреть на ютубе и пойти работать не прокатит. Потом при желании освоишь бекенд. В данном случае рекомендую обучение от hexlet.
Когда пройдёшь ооп бери и погружайся в реакт если уж его выбрал. Хотя в процессе может и поменяется чего. В любом случае, освоив реакт сможешь освоить и другой фреймворк без особых сложностей.
Мальчик 33 годика. Во frontend 4 года.
Мой путь в frontend.
0) Бэкграунд. Возраст под 30. В разные годы пробовал изучать верстку, js, python и даже java. Всё на очень базовом уровне. Т.е. уровень не совсем нулевой, какое-то базовое и смутное представление было. Прямо после java я и стартанул, когда понял что за месяц-полтора я осилил 350 страниц «Java 8. Полное руководство» с прорешиванием задач, а впереди еще был просто океан знаний. Плюс просмотр вакансий hh.ru по региону навел на мысль что нужно будет переезжать, а денег на это не было.
1) Принялся изучать HTML+CSS. HTML Academy бесплатный курс + подписка на месяц. Различные скринкасты на youtube где верстают всякие лэндинги. Немного Free Code Camp.
2) Купил на udemy по скидке(рублей 300-500) какой-то курс по фронтенду(HTML+CSS+bootstrap+jquery). Прошел 40-60%. Нового мало узнал, проходил в надежде немного подтянуть английский.
3) Понял что на верстке далеко не уедешь и погрузился в JS. Учился по learn.javascript.ru. Смотрел древние видео от Sorax(в плане базы неплохие). Гуглил статьи и видео по темам которые не понимал. Старался понять всё. Прошел может процентов 70.
4) Учился по слайдам к курсу CS193X Web Programming Fundamentals от Стэнфорда, решал задания из этого курса, смотрел как их выполнили ученики этого курса. Оттуда получил представление как веб в целом работает. Немного познакомился с git и github. Прошел процентов 90.
5) Начал проходить официальный туториал по react и параллельно смотреть запираченый курс Юрия Бура. Остановился практически в самом начале.
7) Попытался оценить свои знания и понял что вроде знания нормальные есть, но особо не применял их и что нет ничего что бы я мог показать.
8) Для начала решил наверстать макетов. Сверстал макетов 5-6, попутно изучив scss, pug, gulp, bem, основы git и потыкав трехметровой палкой издалека webpack. Кроме знаний появился хоть какой-то маломальский опыт работы с реальными технологиями и инструментами.
9) Почитал всякие статьи про то что вообще спрашивают на собеседованиях по фронту. Понял что не зря ранее так сильно задрачивал js, потому что на всякие вопросы про прототипное наследование, замыкания, всплытия и эвент-лупы и т.д. мог ответить сходу.
. ) Тут отступление. Я еще до начала обучения начал слушать подкасты по фронту и it в целом. ничего_не_понятно_но_очень_интересно.jpg. Но в голове всё равно что-то отложилось. Плюс я сидел в разных чатах для падаванов в телеге. Спрашивал там всякое, пытался отвечать на различные вопросы других людей, в основном как раз по всяким наследованиям и замыканиям и немного удивлялся почему многим это так тяжело дается. Это возможно тоже дало свой выхлоп, всё таки обличение своих мыслей и абстрактного понимания в слова и тебе самому вправляют мозги, как в той цитате «Ты не знаешь физику, если не можешь объяснить ее ребенку».
С JQuery действительно имеет смысл разбираться только поверхностно и потратить на это день, потому что он особо-то почти не используется, разве что как легаси. Зато вместо этого имеет смысл поразбираться со сборками через webpack(он уже не так сложен, как прежде), а именно минификация и склейка одного/двух/трех бандлов в зависимости от потребностей в кэшировании. Опять же поизучать как работает http и как вообще твое творение оказывается у потребителя, как оно кэшируется и как самыми простейшими действиями можно свой проект сделать быстрее, а для этого достаточно поиграться с lighthouse, который доблестно предложит улучшения и объяснит почему оно так.
Реакт я бы тоже посоветовал изучать не суперглубоко, если нет цели идти и писать именно на реакте. Если человек достаточно хорошо знает ванилу, шарит в css и может проект собрать и мало-мальски эффективно доставить, то освоить react/vue/angular/svelte/etc для него не составит проблем, а значит можно брать.
Если время позволяет, то я бы посоветовал попробовать поднять nginx, если получится, то в докере, благо докер тоже не шибко сложная технология для начальных потребностей.
Резюмируя: если человек знает ванилу(с современными фичами) и css(верстая сетки кроссбраузерно и на актуальных свойствах), может свой проект собрать и упаковать в nginx контейнер(пусть даже и по мануалам), так что для запуска мне понадобится сделать docker-compose up, но при этом даже не зная react, то я бы взял 🙂 Впрочем пугаться не стоит, если все есть без nginx+docker и человек при этом адекватный, то тоже можно брать, но с ними прям на зп уровнем выше. На самом деле, найм джунов всегда сводится к тому, чтобы взять такого, которого уже можно было бы потихоньку с первых дней начать озадачивать, плавно вводя в курс дела и при этом он действительно был адекватен и замотивирован на обучение.
Все выше сказанное сугубо imho и основано на моем опыте и известном мне опыте десятка моих корешей-тимлидов из моей конторы, Яндекса, Джетбрейнса, Епама и Датаарта
Тоже сейчас учу верстку + js. Можно объединить усилия и организовать обмен опытом. Если что пиши в телегу @banzai911
Да тут уж почти всё сказали) могу лишь посоветовать книги и другие полезные штуки отсюда https://otzyvmarketing.ru/profession/frontend-developer/
Боль бэка))
Их ещё и за программистов не считают
Иерархия в семье
Генератор градиентов и палитры по картинкам
Делюсь своим проектом Gradients.app, занимаюсь им в свободное время и очень жду замечаний и предложений. Проект может пригодиться дизайнерам и иллюстраторам — тут про цвета и градиенты.
На сайте можно скачать градиенты разных размеров в PNG, скопировать цвета по отдельности и CSS-коды градиентов. Градиенты сортируются по цветам, скачиваниям и дате. Градиентов на сегодня 87, добавляю их самостоятельно, если у вас есть классные сочетания — буду рад их добавить.
Можно провалиться внутрь карточки градиента, там будет больше информации и разные размеры для скачивания. Для веб-дизайнера есть CSS-код градиента, а для иллюстраторов — цвета в RGB, CMYK, HEX и HSL.
Можно делать градиенты самим: подбирать цвета, смотреть разные сочетания. Есть возможность выбрать от 1 до 5 цветов, скачивать в FHD, копировать CSS-код и рандомно менять цвета всего градиента или по отдельности.
Потом я добавил на сайт ещё один раздел — цветовые схемы. Загрузил картинки в разных стилях, с разными палитрами. Эти палитры можно использовать для оформления сайтов, графического дизайна или даже дизайна интерьеров.
Схемы можно отфильтровать по цветам и скопировать HEX-код каждого цвета палитры. На подробной странице схемы цвета применяются к небольшому web-шаблону: блоки, кнопки и другие элементы раскрашиваются под выбранную палитру.
Генератор палитры по фото
Ещё можно загрузить любую картинку или фотографию и определить палитру на ней. Изображение разбивается на 10 основных цветов. Есть подробные блоки с яркими, приглушенными, темными, светлыми и противоположными цветами. У всех цветов можно скопировать HEX-код.
Проект переведен на английский и частично на китайский язык.
Буду рад критике и идеям, может что-то вышло неудобно и непонятно.
Еще один рассказ про «войти в айти после 30». Продолжение
Предыстория ( Еще один рассказ про «войти в айти после 30». Предыстория ) закончилась на том, что я продал авто и встал на тернистый путь веб-разработчика. Теперь вкратце о том, как это было)
Но вот, спустя некоторое время, был найден айтишный канал с прошлогодним курсом по вёрстке. Там было всё, от настройки редактора и нарезки макета до его завершения. Скриптовую часть правда писали на jquery да и там брали готовые решения, без особых пояснений, но это было не главное, так как на старте важно понять и научиться писать разметку и стили. Мне очень зашёл формат подачи материала, поэтому данный видеокурс стал моим основным средством обучения на ближайший месяц.
Да, именно на месяц, хотя можно было и сильно быстрее, но я учился только по вечерам и не каждый день.
Закончив курс, я решил получить какую-нибудь практику на фрилансе. и обломался) Там нужен был опыт и примеры работ, хотя суммы оплаты копеечные. Тогда я поставил себе цель сверстать три макета для портфолио и повторить попытку.
Один макет я нашёл в сети, два других скачал там же на фриланс-бирже, взяв из реальных задач)
JavaScript я тогда не знал совсем, но меня выручил Bootstrap. Всякие модальные окна и выпадающие меню на нём можно делать и без знания кода.
Вёрстка макетов заняла ещё недели две-три. В это же время я передал все дела на работе и окончательно уволился.
И вот, середина сентября 2019г.
Я, такой радостный, зарегался на 6-7 фриланс биржах, разместил там свои «проекты» и начал усиленно оставлять отклики на все заказы, которые подходили под мой уровень знаний или не сильно превышали его.
Только вот хрен)) Никто не давал мне работу.
Каждое утро у меня начиналось с того, что я открывал все биржи, оставлял отклики и садился за учёбу. Также в обед и вечером.
Результат был нулевой.
Я на каждой выполняемой задаче старался чему-то учиться. Пытался сам писать скрипты модальных окон и мобильных меню, пробовал делать табы и аккордеоны. В общем все эти мелочи, которые вроде умеет бутстрап, но хотелось бы научиться самому, так как кастомизация своего кода и своей вёрстки намного проще, чем готовой библиотеки.
Но в плане дохода всё было очень грустно. Я получал заказ не чаще одного раза в неделю, зарабатывал на нём в среднем 3000-4000, 25 процентов из которых съедала комиссия биржи и комиссия за вывод денег оттуда.
Первые месяца полтора после моего старта в айти, мы с женой жили на её зарплату и остатки моей. Следующий месяц кое как только на её ЗП и микроскопический доход с фриланса.
Короче, было тяжело и хреново. Но, проходя через всё это дерьмо, я получал практический опыт в вёрстке и джаваскрипте.
Учёба была моим основным времяпрепровождением. Чтение учебника по js и говнокод в песочнице. Чуть-чуть пхп, так как заказчики обычно хотели чтоб формы с сайта отправляли им куда-то письма. Я скачал для этого какой-то готовый скрипт, но толком не понимал как оно всё работает.
Между делом, я мониторил hh.ru и авито, периодически оставляя отклики на вакансии и пытаясь устроиться на постоянную работу. Безуспешно.
Как-то так прошли первые 6-8 месяцев вхождения в айти.
А потом какой-то китаец поел говна летучей мыши и началась пандемия)
Как ни странно, для меня это сыграло положительную роль, так как все ушли на удалёнку, начали переносить продажи в онлайн и всячески приводить в порядок свои сайты.
Один клиент с фриланса перешёл со мной на прямое сотрудничество, минуя биржу, и я начал пилить ему собственный многостраничный сайт, с кучей джаваскрипта и анимаций. Это был офигенный опыт, хотя и через огромный стресс, потому что я всё время боялся облажаться и не вытянуть какую-либо задачу)
Помимо этого я делал какие-то одностраничники и, через знакомых, на меня вышел ещё один клиент с сайтом на WordPress. Им часто нужны были доработки, вёрстка новых страниц и всякие мелкие правки.
Примерно через месяц после начала карантина я уволился с подработки, так как работы по вёрстке стало реально много и я не успевал. Но, к сожалению, длилось это всего 3-4 месяца, а потом пошло на спад и вернулось к 1-2 небольшим заказам в неделю.
Вот тогда я снова решил устроится на работу. Но блин, даже с небольшим портфолио и некоторым опытом в боевых проектах, мне везде отказывали или игнорили. Но в этот раз я решил пойти до конца и всё таки устроился. Программистом-стажёром 1С)))
Помогло удачное стечение обстоятельств. В компании, где я работал существовали и отделы по веб-разработке, но не в моём убогом городке, к сожалению.
Как-то раз в один из таких отделов, потребовался дополнительный сотрудник на некоторое время, пока свой штат не справлялся.
Я на собеседовании говорил, что занимался сайтами, поэтому мой руководитель предложила мне попробовать. Отказываться было глупо. и понеслось. Вёрстка, пхп, битрикс, вордпресс, базы данных. Обучение, обучение, обучение.
Мне недоставало опыта в разработке, но я ко всему подходил ответственно и старался делать задачи максимально качественно, по мере своих возможностей, поэтому веб-отделы других городов стали часто прибегать к моей помощи. По сути я вообще стал всё время работать на них, хотя числился 1С-ником.
Так прошло ещё примерно полгода и мне предложили на фуллтайм перейти в отдел веб-разработки в другом филиале, работая удалённо из своего города.
Там я работаю и по сей день. С момента старта моего обучения вёрстке до текущего момента прошло примерно 1 год и 9-10 месяцев. Уровень дохода сейчас +- как обещает реклама айти курсов))
