Как самостоятельно переучиться на веб-разработчика?

Автор: · Published · Updated

Топик составлен по общим вопросам посетителей сайта на тему «веб программирование для новичков».
Что имею: не умею ничего, либо имею опыт программирования на каком-нибудь языке программирования, но не для веб
Что хочу: делать веб-проекты любой степени сложности, включая как серверную, так и клиентскую части.

Эта статья отвечает на вопросы:

  • «хочу стать верстальщиком, с чего начать»
  • «какие навыки требуются для junior веб-программиста»
  • «что должен знать веб-программист»
  • «где прочитать о веб-технологиях HTML, CSS, Javascript, PHP, Python, Ruby»
  • «веб программирование для новичков»
  • «что нужно осваивать начинающему front-end разработчику?»

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

 

Список тем для изучения веб-разработчику

Знания по базовым веб-технологиям нужны всем, кто работает в веб: и верстальщику, и будущему разработчику интерфейсов (frontend developer), и серверному программисту (backend developer).

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

Знания по протоколу HTTP

  • как отправляются запросы, какие бывают «заголовки запроса»
  • какими методами передаются данные пользователя (ну, то есть GET, POST, PUT, DELETE, HEAD, OPTIONS и другие), каким образом передаются данные для этих методов, что есть «заголовки запроса», «тело запроса»
  • что такое CORS, когда возникает в нём потребность и как настраивать
  • как на сервер передаются двоичные файлы по HTTP : какие заголовки, как кодируются в теле запроса; почему файлы быстрее пересылать по FTP
  • как формируются ответы, какие бывают «заголовки ответа», какие бывают «статусы ответа»
  • что такое «кодировка ответа сервера», как её определить
  • каким образом сжимаются ответы сервера, всё ли можно и нужно сжимать
  • почему HTTPS безопаснее чем HTTP
  • зачем и как заставить браузер кэшировать ответы сервера, как предотвратить кэширование

Материалы:

Основы HTML

  • что такое разметка HTML, как представляется страница, как посмотреть её исходный код
  • из каких элементов составляется страница (тэги)
  • структура HTML-документа
  • подробнее про тексты, гиперссылки, списки, таблицы, фреймы, формы, внедряемые объекты (flash)
  • каким образом можно изменить внешний вид элементов (каскадные стили, CSS)
  • что нового в HTML5

При самостоятельном изучении материала можно ориентироваться на список тем по курсу HTML и CSS. Уровень 1. Создание сайтов по стандартам W3C на HTML 5 и СSS 3.

Материалы:

Основы CSS

  • как стили встраиваются в HTML
  • что такое «классы стилей»
  • как позиционируются элементы
  • что такое «блочная вёрстка»
  • что такое «кросбраузерный CSS» и «CSS-хаки»
  • что такое «адаптивная/отзывчивая вёрстка»
  • как пользоваться Photoshop или иным графическим пакетом для работы с дизайн-макетами

Материалы:

Программирование на Javascript

  • как сценарии внедряются в HTМL
  • синтаксис, языковые конструкции, типы данных, массивы
  • функции и замыкания
  • что такое «область видимости», как её расширить или ограничить
  • объекты и методы: объекты базовых типов, создание объектов пользовательских типов
  • методы для обработки строк, дат
  • регулярные выражения
  • что такое «Document Object Model (DOM)», каким образом javascript может менять содержимое страницы HTML
  • каким образом реализовать постепенное изменение элементов страницы (анимация)
  • что такое «события» и как можно выполнить действие в ответ на событие
  • что такое «формы» и «элементы ввода», какие бывают элементы ввода, как данные из формы отправляются на сервер
  • как реализуется передача данных на сервер без отправки формы
  • как получать данных с сервера без обновления страницы (AJAX)
  • что из себя представляет формат JSON, как с ним работать
  • то же самое про XML
  • что такое «сборщик мусора»
  • что такое «CORS», как настраивается
  • почему на некоторых веб-страницах иногда в исходном коде HTML нет тех блоков, которые явно видно глазами

Материалы:

Программирование на Javascript c использованием библиотеки jQuery или другой аналогичной библиотеки

  • как манипулировать с объектами DOM: искать, добавлять, удалять
  • как изменять внешний вид объектов
  • как выполнять действия в ответ на события
  • каким образом реализуется анимация
  • как реализуется работа через AJAX
  • как работать с данными в формате JSON и XML
  • что такое «кросс-доменные запросы»
  • как расширять библиотеку (плагины)
  • библиотеки расширений на примере jQuery UI
  • особенности программирования для мобильных устройств на примере jQuery Mobile

Материалы:

Навыки веб-разработчика, которые необходимо выработать:

  • Глядя на страницу любого сайта, понимать, как был реализован и оформлен любой блок сайта: формы с необычными кнопками, "плавающие сбоку" социальные кнопки, "прилипшее" сверху или снизу меню, выпадающие меню, раскрывающиеся блоки, закладки, "аккордеоны", карусели и слайдеры изображений, бесконечная лента изображений в гугло-поиске, меняющиеся размеры элементов страницы при ресайзе окна браузера
  • Видеть на любом сайте не картинки и текст, а теги, теги, теги, теги, теги. И правила CSS, много много правил CSS.
  • Понимать, что какая-то часть страницы по-другому выглядит в разных браузерах; понимать, что именно нужно сделать, чтобы выглядело одинаково, а что всегда будет отличаться
  • Уметь в коде HTML быстро найти место для вставки нового фрагмента HTML (это для решения задач типа "вставь как эту заметку в эту колонку")
  • Уметь быстро найти в коде CSS правило, изменяющее определённый параметр определённого фрагмента страницы (это для задач типа "сделать иконку василькового цвета и подвинуть вверх чуть-чуть")
  • Уметь сделать некоторые вещи на CSS3 и на Javascript на случай если требуется разработать сайт либо вообще без Javascript, либо на старых версиях браузеров без поддержки CSS3
  • Уметь пользоваться отладчиком HTML/CSS/Javascript в браузерах; уметь исполнять скрипты Javascript в режиме пошаговой отладки
  • В итоге: уметь сверстать HTML-макет по дизайн-макету, в том числе под мобильные устройства

Задачки по вёрстке и Javascript

Интерактивные курсы

Всем рекомендую использовать интерактивные online-курсы (HTML Academy, Codecademy, Treehouse, Codeschool), потому что в них можно проверить на практике вообще все темы, которые они затрагивают. Для этого в них предусмотрены специальные текстовые мини-редакторы прямо в браузере, которые сразу же показывают результат. В этих редакторах можно вообще любые фрагменты проверять, а не только учебные. НО не рассматривать их как единственный способ изучения технологий и языков программирования, потому что они слишком изолированы от реальности, многие тонкости и сложности скрыты ради удовольствия от быстрого получения результата.

Игровые обучающие проекты

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

Cписок тем для изучения будущему frontend-разработчику

Список тем для изучения будущему backend-разработчику

В статье IT Leaks. Как стать back-end программистом на PHP с нуля, план самостоятельного обучения составлен детальный план самостоятельного обучения на back-end разработчика PHP с возможностью удалённой разработки, с перспективной на 5 лет. Почти как в ВУЗе, но без философии и социологии.

webmentor.pro — твой надёжный друг, опытный советник и поддержка
Программы поддержки при изучении проектирования и разработки веб-приложений, новых языков программирования и веб-технологий.

Метки:

Павел Волынцев

Уже более 15 лет занимаюсь разработкой веб-проектов. Fullstack Senior Developer. IT евангелист — доношу свет знаний об информационных технологиях. Профессиональные цели: Дать людям возможность дать людям больше.

Читайте также:

Следите за нами:

Цитата

В теории, теория и практика неразделимы. На практике это не так. — Yoggi Berra