FAQ для новичков в сфере web-программирования

FAQ для новичков в сфере web-программирования

Coding


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


Что нужно знать на позицию фронтенд-разработчика начально-среднего уровня:


  • HTML + CSS
  • JS с ES6-синтаксисом
  • Фреймворк_нейм. Лучший выбор для новичка по прежнему React. Еще есть Vue, но работы сильно меньше, и знаний в процессе изучения получите сильно меньше. Если генетика одарила вас железобетонной силой воли — можно потыкать Angular 5(ха).

Попутно изучается работа с эмулятором терминала ("пресвятая консолечка"), git, инструменты сборки (как минимум webpack, желательно пощупать gulp), npm|yarn.


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

Верстка​


Основы

Что нужно знать:

  • HTML:Структура документа
  • Разметка
  • Тэги
  • Атрибуты
  • CSS:Основные селекторы (без фанатизма)
  • Основные свойства (отступы, размеры, цвет, шрифты и прочее)
  • Наследование свойств, каскад, вложенность
  • Основы сетки: блочная модель, флоаты, инлайн-блоки
  • Свойства position
  • Все вместе:Типовая разметка текста
  • Картиночки, ссылочки
  • Таблички, списочки
  • Формы, инпуты, лэйблы


Итого

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


На все про все около месяца.


Где учить, что читать?

  • Старт: интерактивные курсы хтмл академии: https://htmlacademy.ru/program бесплатных вполне хватит, но можно и оплатить подписку (лучше не надо).
  • http://htmlbook.ru/
  • https://webref.ru/
  • Базовый интенсив все той же академии (брать на торрентах)


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


Очень подробный верстка-гайдлайн

Стоит как минимум бегло просмотреть и прикинуть, что к чему: http://webmasters.teamdev.com/

​


Верстка advanced

​

Что нужно знать:

  • HTML5:"Новые" тэги
  • "Новые" атрибуты
  • Формы и инпуты
  • SVG
  • Семантика
  • CSS:Продвинутые селекторы (опять же без фанатизма, но знать полезно)
  • Градиенты, трансформации, анимации, переходы и прочие приколюхи
  • Флексы, гриды
  • Респонсив ("адаптивность")
  • Любой CSS фреймворк (bootstrap / foundation)
  • SVG
  • О дивный новый мир:Автоматизация (галп, нпм / йарн + скрипты)
  • Организация структуры проекта
  • Препроцессоры (любой на выбор)
  • Какой-нибудь template engine (pug, как один из самых популярных)
  • Работа в терминале (да, анон, удаляй свой github desktop, вот прямо сейчас)
  • Не помешает:Умение самостоятельно размечать и реализовывать динамические штуки (слайдер, например)
  • Примерное понимание как работает js || jq


На все про все: еще месяц-два-три в худшем случае.


Итого получаем:

Готовую личинку верстальщика, которая сможет заверстать статику любой сложности по данному макету. Теоретически можно работать за дошираки.


Где учить, что читать?



Дополнительные ресурсы, которые могут быть полезными на данном этапе:



А книги, книги то будут? Хочу книжку!


Книги надо выбирать индивидуально. Если по HTML/CSS, то желательно, чтобы книга была не старше 2012 года, ну или хотя бы переиздана. Читай все что интересно. В любом случае это будет полезно.


  • http://frontendbookshelf.ru/ - список полезных книг. Большинство актуальны, можно выбрать по языку, технологии и конкретному уровню знаний. Первооочередную литературу желательно брать оттуда.
  • http://scanlibs.com/ что-то типа хранилища айти книг. Скачать книги можно бесплатно. Там есть много всего. Если в свободном доступе не найдете, попробуйте поискать там.


Что верстать?


В чем работать?

В чем угодно. Универсальный выбор - Atom | VSCode, в них можно будет полноценно продолжать работать при переходе на жс+фреймворки. Для тех, у кого дрова вместо рабочей станции подойдет Sublime. А вообще даже NP++ подойдет.


Что делать дальше?


Сверстать пару макетов для закрепления и переходить к JS. Не помешает сразу зацепить гит, основные команды в терминале, поколупать какую-нибудь бубунту на виртуалке. Само собой использование галпа / вебпака, отсутствие боязни терминала, понимание того, как браузер рендерит страничку, как лучше подключать шрифты/стили/скрипты и т.п.


JavaScript

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


Что нужно знать

  • Версия языка — ES6+
  • Инструмент для сборки — Webpack
  • Фреймворк — React + Redux | Vue + Vues | Angular5 для любителей экстремальных видов самоудовлетворения

Основы


Лучший учебник на JavaScript на русском языке — Кантор(кликабельно). Ультраплатиновая ультрагоднота.

Особое внимание следует уделить первой части, которая рассказывает непосредственно про язык, посколько DOM, события и другие API браузера про которые рассказано во второй части, абстрагируются фреймворком. 

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


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


Кантора можно разнообразить видосами и другими сайтами. Одна и та же вещь, объясненная много раз разными словами, становится понятнее:


  • Codecademy — бесплатный интерактивный курс.
  • Treehouse и Codeschool — тоже интерактивные курсы, платные.
  • Канал LearnCode.academy — Очень годный канал (англ). Смотреть ES5 и ES6.

Основной справочник по JS — Mozilla Developer Network. Хотите почитать про промисы — пишите в гуглеpromises mdn.



Тут должно быть продолжение про JS, но оно куда-то убежало. Ждём его все вместе.



Дополнительно

​

Нужен ли английский и как его выучить? Я и так уже по самую макушку завален материалами!



Нужен. Большая часть самых клевых материалов - на английском, большая часть влиятельных / шарящих людей в коммьюнити - не из СНГ и общаются на английском или своем родном. Плюс это нехилый бонус к трудоустройству.


Ниже будет подборка ответов / материалов по англйискому от анонов, за что им спасибо.


Как учить?

Практикой и погружением:


  • Приложения на смартфон Duolingo и Memrise. Первый бесплатен, второй платен, но бесплатной версии более чем достаточно. У Duolingo есть и веб-версия
  • Чтение англоязычного интернета. Даже банальной Википедии будет достаточно. Еще можно читать газеты и издания мирового уровня типа:
  • vox
  • economist
  • NYT
  • BBC
  • spectrum
  • combinator
  • Фильмы на английском с сабами
  • Игры на английском с сабами
  • Интерфейс во всех приложениях на английском


Для грамматики подойдет курс от Полиглот 16 уроков. Еще стоит отметить простой переводчик по клику для хрома LinguaLeo. Другое полезное расширение - Grammarly, смотрит за правильностью того как ты пишешь на английском и высвечивает ошибки, неправильную грамматику, подсказывает правильный порядок слов и так далее. А ещё он может показывать значение слова по клику, с полноценной выдачей о значении этого слова.


Читать поначалу можно словарём - Chrome, Google Dictionary дополнение. Кликанье на все непонятные слова во время чтения/раздумья над смыслом статьи должно стать привычкой.


Обычно сначала трудно но через пару недель чувствуешь результат, потом уже стабильное улучшение.


Прочие мелочи


Правда ли, что JS был придуман за 10 дней? Мой друг Вася-Джавист сказал, что это ущербный недоязык, хах.


Первая спецификация действительно была разработана и утверждена в кратчайшие сроки, и предназначалась для решения примитивнейших задач (оживить картинку, подсветить кнопочки). С тех пор прошло очень много времени, от первой спецификации осталась только общая концепция да парочка досадных багов, которые нельзя пофиксить из-за обратной совместимости (typeof Null, ага).


Нужен ли матан?


Скажем так: лишним не будет, но и без него frontend разработчик не чувствует себя ущербным. Полезными будут знания дискретной математики, теории чисел и графов, а также основы теории алгоритмов (впрочем, это уже CS). Все это вполне изучается самостоятельно в свободное время. Для практики в этом деле лучше использовать Python: он более строгий, лаконичный и понятный. Хотя и на ES6 получаются очень даже красивые решения всяких олимпиадных задачек.


Хочу фрилансить!


Фрилансить версталой - гиблое дело. Да и вообще фрилансить без опыта работы - гиблое дело. Да и вообще фрилансить - гиблое дело. Адская конкуренция, кривые ТЗ, неадекватные заказчики, баны на апворках и прочие прелести ждут. Но никто не мешает попробовать.


У вас тут все неправильно написано и вообще


FAQ полностью открыт для доработок и редактирования, присылайте предложения. Обоснованные правки будут внесены.


Не забывайте ставить 👍 если вам понравилась и подписаться на канал

Report content on this page

Report Page

Please submit your DMCA takedown request to dmca@telegram.org