тащит всю команду 5 августа 2014 в 11:17

Почему стоит заняться веб-разработкой и с чего начать

Всем привет!

Работаю в области веб-разработки два с лишним года, и думаю, что могу высказать некоторые мысли по данной тематике.
Программированием увлёкся три года назад. Сначала пробовал себя в языках программирования из семейства C, но мне не удавалось проявить там свои творческие способности. Потом я где-то услышал про веб-разработку. И как оказалось, это было то, что мне нужно.

Почему стоит заняться веб-разработкой?

Для меня это чистое творчество. Представьте себе абсолютно чистый холст, как у художника. У вас есть все краски, кисточки, осталось лишь научиться рисовать. Обычно это сложнее, чем кажется, но не для веб-мастера. Сейчас в просторах интернета масса всевозможных инструкций, онлайн-курсов, примеров с наглядными иллюстрациями. И в принципе, создать что-то новое при помощи этих мануалов не так уж сложно. Веб-разработка открывает широкие, почти безграничные возможности для творчества. Конечно, языки программирования, не заточенные под веб, тоже позволяют реализовать много интересного, но, как мне кажется, в среде веб-разработки сделать это гораздо проще.

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

С чего начать?

Самый распространённый вопрос среди тех, кто только начинает изучать веб-разработку. Прежде всего я советую понять и разобраться как построена веб-страница. Для этого необходимо знание HTML-тегов, или хотя бы большей части из них. Именно они формируют страницу. Тегов довольно много, но на практике обычно используются 30-40, а иногда и меньше.

HTML-тег это элемент веб-страницы, который обычно имеет следующий формат:

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

Атрибут пишется внутри тега:

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

Вот очень полезные ссылки, которые помогут вам быстро начать:
htmlbook.ru/html
html.manual.ru
www.codecademy.com/tracks/web

После этого следует приступать к изучению CSS-стилей. Что это такое? Простыми словами, это стили к HTML-тегам, которые располагаются на веб-странице. Стилей гораздо больше, чем HTML-тегов. Но это и хорошо, так как вы можете создавать абсолютно разные варианты с одним и тем же тегом. Стили нужно знать, и чем больше, тем лучше. Для себя можно провести следующую параллель: стили – дизайн тегов.

Обычно стили пишутся либо прямо в HTML документе, при помощи специального тега style :

Либо в отдельном CSS файле без тегов:
div { background-color: #FFFFFF; }
В том и в другом случае всем тегам div на веб-странице, будет присвоен цвет фона, в первом случае чёрный, во втором случае белый.
Я предпочитаю второй вариант, то есть создавать отдельный файл, но и первым нередко пользуюсь.

Ниже ссылки, в которых вы сможете найти более подробное описание каждого стиля:
htmlbook.ru/css
css.manual.ru
www.codecademy.com/tracks/web

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

Хочу добавить ещё несколько полезных советов:
- Всегда уделяйте особое внимание путям (URL) к файлам или к картинкам. Зачастую именно тут спотыкаются не только новички, но опытные веб-мастера.
- Постарайтесь запомнить 20-30 кодов для цвета. Например, #000000 – чёрный, #FFFFFF – белый и так далее. Вот полезные ссылки: www.puzzleweb.ru/html/colors_html.php , www.artlebedev.ru/tools/colors .
- Начните работать с HTML, CSS в среде Notepad++ . Очень простой, понятный редактор с подсветкой синтаксиса.
- Советую хорошо ознакомиться с DOM
- Постарайтесь подтянуть английский язык.

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

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

Теги: веб-разработка, сайтостроение

• Перевод
• Tutorial

Дорога длинна и трудна, но интересна и полезна!

Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.

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

Что нужно помнить:

1. Статью разрешается пролистывать

Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:

Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.

2. Попробуйте всего понемногу, а затем выбирайте специализацию.

Деньги – не самое важное. Вам необходимо ЛЮБИТЬ ваше занятие! Но вы не узнаете, что вам нравится, пока не попробуете.

Найдите свою страсть, а потом монетизируйте её

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

Я решил писать код. Мне нравится веб. Я не знаю, с чего начать

У вас всё получится!

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

Сначала вам нужно быстро познакомиться с основами всех областей веб-разработки («полный цикл»). Обучение будет разнообразным, но неглубоким. Это нужно для того, чтобы найти область, которая вам нравится, а также приобрести основные навыки в разных областях. Тогда вы сможете понимать и работать с большим набором задач, вне зависимости от того, на чём вы остановите свой выбор.

Изучите основы HTML

Язык разметки гипертекста, Hypertext Markup Language (HTML), контролирует содержимое и разметку того, что вы видите в браузере. Начав с него, вы получаете интерфейс пользователя, с которым можно взаимодействовать, и видите результаты работы своего кода. При изучении более сложных языков его важность будет возрастать. Вам ведь не нужно кодить вслепую.

Вот, что вам нужно изучить на тему HTML:

Я уже знаю основы HTML

Круто! Это очень важный шаг. Теперь изучите основы JavaScript.

Изучите основы JavaScript

JavaScript – язык веба, и все основные браузеры (Chrome, Firefox, Safari, IE, множество других) поддерживают его. Каждый сайт, каждое веб-приложение, которым вы пользовались, скорее всего, содержит огромное количество JS-кода. Не говоря уже о том, что язык набирает популяность и на других платформах – сервера, настольные компьютеры, другие устройства.

Пока вам нужны основы, и для этого подойдут следующие ресурсы:

Я знаю основы JavaScript и HTML

Потрясающе! Теперь добавим к вашим навыкам CSS

Изучите CSS

CSS, или Cascading Style Sheets (каскадные таблицы стилей). Используются для настройки внешнего вида элементов HTML на странице. Ознакомьтесь с бесплатным обучающим материалом от Mozilla, а затем обращайтесь к ресурсу CSS-Tricks для решения самых сложных проблем (справа вверху есть поиск).

Переходим к бэкенду

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

Языков для бэкенда масса, но поскольку вы знакомы с JavaScript, я порекомендую изучить использование Node.js. Он позволяет запускать JS-код на сервере, а не в браузере.

В дополнение к этому вам необходимо изучить Express и MongoDB.

Express

Это библиотека, с помощью которой Node.JS может работать веб-сервером (слушать запросы от страниц и отправлять им ответы).

MongoDB

Это база данных, позволяющая вам хранить и извлекать информацию.

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

Мне нужно выбрать между «фронтенд», «бэкенд» и разработкой полного цикла

После того, как вы попробовали оба варианта разработки, настало время делать выбор. Если вы не успели их попробовать – обратитесь к предыдущему разделу статьи, чтобы заполнить пробелы в ваших знаниях.

К этому моменту вы писали два типа кода. Один предназначен для взаимодействия с пользователем, другой – с данными. Что вы предпочитаете?

Взаимодействие с пользователем? Поздравляю, вы фронтенд-разработчик!

Взаимодействие с данными? Поздравляю, вы бэкенд-разработчик!

Оба? Поздравляю, вы разработчик полного цикла!

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

Я хочу быть разработчиком полного цикла

Круто. Вам нужно ознакомиться со всем содержимым разделов «Я хочу быть бэкенд-разработчиком» и «Я хочу быть фронтенд-разработчиком».

Я хочу быть фронтенд-разработчиком и я знаю основы JavaScript, HTML и CSS

Для эффективной работы фронтенд-разработчиком вам необходимо в совершенстве овладеть HTML, CSS и клиентским JavaScript. Также вам нужно будет хорошо разобраться в нескольких важных фреймворках. Вы приобретёте навыки, которые работодатели и клиенты ожидают найти в разработчиках фронтенда.

К этому моменту вы уже должны знать основы HTML. В противном случае вернитесь к разделу «Изучите основы HTML».

Изучите промежуточный и продвинутый HTML

Ознакомьтесь с обучающим материалом по промежуточному HTML, а затем – по продвинутому .

Изучите продвинутый клиентский JavaScript

Отличная серия книг по JS, при этом бесплатная

Для поднятия вашего уровня владения JavaScript, я рекомендую серию книг «You Don’t Know JS» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:

Кроме того, вашим лучшим другом должен стать и MDN JavaScript .

[Также совершенно бесплатно вам доступен превосходный перевод отличной книги "Выразительный JavaScript " - прим.перев.]

Знать «троицу фронтенда», HTML, CSS и JavaScript – это, конечно, здорово. Но для зарабатывания денег придётся вам познакомиться с некоторыми фреймворками.

Изучите jQuery

Это самая популярная библиотека JS всех времён. Хотя из-за некоторых новых фреймворков важность jQuery чуть поуменьшилась, если вы ищете работу, велика вероятность, что jQuery будет присутствовать в описании необходимых навыков (и упоминаться на собеседовании) ещё много лет.

Рекомендую изучить jQuery при помощи материалов FreeCodeCamp – это быстрый и эффективный метод. После этого отправляйтесь на официальный обучающий сайт – там вы найдёте дополнительные инструкции.

Изучите популярный JS-фреймворк

Фреймворки делают работу с определённым языком или технологией легче, поскольку решают наибольшие проблемы, существующие у выбранной технологии. JavaScript очень благотворно повлиял на разработку и популяризацию фреймворков.

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

Во время написания этой статьи следующие фреймворки пользовались популярностью:

Выбрав наиболее подходящий фреймворк и хорошенько ознакомившись с ним, стоит изучить идущий в паре с ним CSS-фреймворк. Два крупнейших игрока на этом рынке сегодня – Bootstrap и Material Design.

Bootstrap

Bootstrap сделали разработчики Twitter, и он уже довольно взрослый и популярный. Версии Bootstrap существуют для Angular, Angular 2 и React.

Material

Material – это набор правил дизайна, разработанный в Google. Он набирает популярность, существуют его версии для Angular и React. Поскольку Angular – это тоже детище Google, сочетается Material с ним превосходно.

Вот вам несколько ссылок:

Поздравляю! У вас есть ключевые навыки фронтенд-разработчика!

Вы только посмотрите на него!

Я хочу быть бэкенд-разработчиком

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

TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index

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

Если вы знакомы с одним из отмеченных зелёным цветом языков, и он вам нравится – концентрируйтесь на нём.

Подкачайте необходимые для интервью умения

Вам нужно подготовиться не только к написанию кода. В хорошей статье с Life Hacker описано много полезной и ценной информации.

Главное – закрепиться на рынке

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

Хочу быть фрилансером

Сам себе хозяин – это хорошо, но это одновременно и огромное давление, и большие сложности. Лучший источник информации по фрилансу из всех, что я видел - DoubleYourFreelancing.com . У него есть серия статей , которые помогут вам стать фрилансером лучше, чем это получилось бы у меня. Читайте.

Ещё один вариант, если вы в себе уверены – сервис Toptal . Они принимают лишь 3% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.

Я начал работу, но чувствую, что зашел в тупик

Понимаю. Это нелегко, и если кто-то говорил вам обратное – он либо этим не занимался, либо пытается выманить у вас деньги. Если вы чувствуете, что зашли в тупик, попробуйте следующие варианты:

Освежите ваше первоначальное намерение

Спросите себя, запишите на бумаге, почему вы решили идти по этому пути. В силе ли всё ещё ваш ответ? Если да – то зачем останавливаться? Вперёд!

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

Обучение этой профессии с нуля – дело не легкое, ведь кроме навыков работы в необходимо быть креативным человеком, хотя бы немного разораться в коде (знать CSS и ), уметь общаться с заказчиком на одном языке и т. д.

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

Давайте разберёмся, с чего начинать обучение веб-дизайну, какие знания для творчества понадобятся, где и в каком порядке их добывать, сколько времени уделять практическим занятиям, как обзавестись первым опытом и заказом…и с массой сопутствующих вопросов.

Cодержание:

Этап первый – выясните, почему вы хотите этим заниматься

С одной стороны, это простой вопрос, ведь большинство хочет заниматься веб-дизайном ввиду хорошей оплаты труда.

Сайтостроение – очень прибыльное дело, а опытного, и главное, толкового разработчика днём с огнём не всегда сыскать.

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

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

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

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

Ввиду того, что графический художник – молодая профессия , её точного определения пока не существует, и многие специалисты трактуют понятие по-своему.

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

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

Дизайнер сайтов – это технический художник, работающий над внешним видом и оптимизацией загрузки сайта и веб-приложений.

В задачи этих людей входят:

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

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

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

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

Этап второй – выберите направление веб-дизайна в котором вы хотите себя попробовать

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

Нынче различают целых семь направлений в их оформлении, и это только основных.

Жесткий

Старый как само сайтостроение вид оформления страниц , не требующий прикладывания усилий, отлично подойдёт для новичков.

Суть заключается в том, что все элементы ресурса размещаются в виртуальных ячейках таблицы с фиксированными размерами, которые задаются дизайнером.

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

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

Гибкий

Также табличный дизайн , но ширина ячеек виртуальной таблицы не строго задана, а зависит от размеров экрана (соотношения сторон, разрешения). Объекты будут стараться заполнить всё пространство ячейки, изменяя её размер. Главная особенность подобного решения – повышение удобства визуального восприятия данных за счёт динамически изменяющихся параметров отображения. На подобных страницах нет пустых, свободных от контента, мест.

Сложностями подобного дизайна являются:

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

Комбинированный

Соединение двух предыдущих методов : если размеры монитора (соотношение его сторон) сильно отличаются от параметров дисплея, что использовался при создании сайта, применяется гибкий дизайн, в ином случае используются и те, и иные ячейки, в зависимости от наличия свободного пространства в них.

Текстовый

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

Полиграфический

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

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

Интерфейсный

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

.

Динамический

Наиболее трудоёмкие, сложные варианты оформления веб-страниц. Данный тип дизайна заключается в размещении на странице динамического контента (анимация, скрипты, двигающиеся и изменяющиеся элементы, широкоформатные видео).

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

Этап третий – выясните, какие программы для веб-дизайна сейчас в тренде

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

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

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

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

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

Другое дело Sketch – заточена для рисования графических интерфейсов с нуля, не имеет ни единого лишнего элемента, более проста в освоении и легко обгоняет Photoshop по основным показателям.

Обязательно выберите наиболее удобный , поддерживающий синтаксис и подсветку: , Sublime , Axure RP .

Этап четвертый – изучите полезные книги для начинающих веб-дизайнеров

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

С популяризацией профессии веб-дизайнера и количество книг по теме увеличилось. Без наставника и учителя книга – лучший способ получать знания.

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

1 Итан Маркотт «Отзывчивый веб-дизайн» – практическое руководство для веб-дизайнеров, после освоения которого новичок избежит сотен типичных для начинающих ошибок, узнает о целесообразности создания мобильной версии сайта. Написано в ней и как верстать страницы, которые будут одинаково отображаться на всех устройствах.

2 Якоб Нильсен «Веб-дизайн» – в книге масса руководств по созданию эффективных интерфейсов, правильному расположению элементов навигации и заполнению ресурса контентом.

3 Ю. Сырых «Современный веб-дизайн» – справочник, описывающий тонкости работы над интерфейсом, начиная с этапа подбора контента в зависимости от тематики ресурса, и заканчивая тестированием и отладкой готового макета. В ней масса информации не только по рисованию интерфейса, но и по его оптимизации и наполнению.

• Перевод
• Tutorial

Дорога длинна и трудна, но интересна и полезна!

Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.

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

Что нужно помнить:

1. Статью разрешается пролистывать

Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:

Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.

2. Попробуйте всего понемногу, а затем выбирайте специализацию.

Деньги – не самое важное. Вам необходимо ЛЮБИТЬ ваше занятие! Но вы не узнаете, что вам нравится, пока не попробуете.

Найдите свою страсть, а потом монетизируйте её

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

Я решил писать код. Мне нравится веб. Я не знаю, с чего начать

У вас всё получится!

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

Сначала вам нужно быстро познакомиться с основами всех областей веб-разработки («полный цикл»). Обучение будет разнообразным, но неглубоким. Это нужно для того, чтобы найти область, которая вам нравится, а также приобрести основные навыки в разных областях. Тогда вы сможете понимать и работать с большим набором задач, вне зависимости от того, на чём вы остановите свой выбор.

Изучите основы HTML

Язык разметки гипертекста, Hypertext Markup Language (HTML), контролирует содержимое и разметку того, что вы видите в браузере. Начав с него, вы получаете интерфейс пользователя, с которым можно взаимодействовать, и видите результаты работы своего кода. При изучении более сложных языков его важность будет возрастать. Вам ведь не нужно кодить вслепую.

Вот, что вам нужно изучить на тему HTML:

Я уже знаю основы HTML

Круто! Это очень важный шаг. Теперь изучите основы JavaScript.

Изучите основы JavaScript

JavaScript – язык веба, и все основные браузеры (Chrome, Firefox, Safari, IE, множество других) поддерживают его. Каждый сайт, каждое веб-приложение, которым вы пользовались, скорее всего, содержит огромное количество JS-кода. Не говоря уже о том, что язык набирает популяность и на других платформах – сервера, настольные компьютеры, другие устройства.

Пока вам нужны основы, и для этого подойдут следующие ресурсы:

Я знаю основы JavaScript и HTML

Потрясающе! Теперь добавим к вашим навыкам CSS

Изучите CSS

CSS, или Cascading Style Sheets (каскадные таблицы стилей). Используются для настройки внешнего вида элементов HTML на странице. Ознакомьтесь с бесплатным обучающим материалом от Mozilla, а затем обращайтесь к ресурсу CSS-Tricks для решения самых сложных проблем (справа вверху есть поиск).

Переходим к бэкенду

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

Языков для бэкенда масса, но поскольку вы знакомы с JavaScript, я порекомендую изучить использование Node.js. Он позволяет запускать JS-код на сервере, а не в браузере.

В дополнение к этому вам необходимо изучить Express и MongoDB.

Express

Это библиотека, с помощью которой Node.JS может работать веб-сервером (слушать запросы от страниц и отправлять им ответы).

MongoDB

Это база данных, позволяющая вам хранить и извлекать информацию.

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

Мне нужно выбрать между «фронтенд», «бэкенд» и разработкой полного цикла

После того, как вы попробовали оба варианта разработки, настало время делать выбор. Если вы не успели их попробовать – обратитесь к предыдущему разделу статьи, чтобы заполнить пробелы в ваших знаниях.

К этому моменту вы писали два типа кода. Один предназначен для взаимодействия с пользователем, другой – с данными. Что вы предпочитаете?

Взаимодействие с пользователем? Поздравляю, вы фронтенд-разработчик!

Взаимодействие с данными? Поздравляю, вы бэкенд-разработчик!

Оба? Поздравляю, вы разработчик полного цикла!

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

Я хочу быть разработчиком полного цикла

Круто. Вам нужно ознакомиться со всем содержимым разделов «Я хочу быть бэкенд-разработчиком» и «Я хочу быть фронтенд-разработчиком».

Я хочу быть фронтенд-разработчиком и я знаю основы JavaScript, HTML и CSS

Для эффективной работы фронтенд-разработчиком вам необходимо в совершенстве овладеть HTML, CSS и клиентским JavaScript. Также вам нужно будет хорошо разобраться в нескольких важных фреймворках. Вы приобретёте навыки, которые работодатели и клиенты ожидают найти в разработчиках фронтенда.

К этому моменту вы уже должны знать основы HTML. В противном случае вернитесь к разделу «Изучите основы HTML».

Изучите промежуточный и продвинутый HTML

Ознакомьтесь с обучающим материалом по промежуточному HTML, а затем – по продвинутому .

Изучите продвинутый клиентский JavaScript

Отличная серия книг по JS, при этом бесплатная

Для поднятия вашего уровня владения JavaScript, я рекомендую серию книг «You Don’t Know JS» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:

Кроме того, вашим лучшим другом должен стать и MDN JavaScript .

[Также совершенно бесплатно вам доступен превосходный перевод отличной книги " " - прим.перев.]

Знать «троицу фронтенда», HTML, CSS и JavaScript – это, конечно, здорово. Но для зарабатывания денег придётся вам познакомиться с некоторыми фреймворками.

Изучите jQuery

Это самая популярная библиотека JS всех времён. Хотя из-за некоторых новых фреймворков важность jQuery чуть поуменьшилась, если вы ищете работу, велика вероятность, что jQuery будет присутствовать в описании необходимых навыков (и упоминаться на собеседовании) ещё много лет.

Рекомендую изучить jQuery при помощи материалов FreeCodeCamp – это быстрый и эффективный метод. После этого отправляйтесь на официальный обучающий сайт – там вы найдёте дополнительные инструкции.

Изучите популярный JS-фреймворк

Фреймворки делают работу с определённым языком или технологией легче, поскольку решают наибольшие проблемы, существующие у выбранной технологии. JavaScript очень благотворно повлиял на разработку и популяризацию фреймворков.

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

Во время написания этой статьи следующие фреймворки пользовались популярностью:

Выбрав наиболее подходящий фреймворк и хорошенько ознакомившись с ним, стоит изучить идущий в паре с ним CSS-фреймворк. Два крупнейших игрока на этом рынке сегодня – Bootstrap и Material Design.

Bootstrap

Bootstrap сделали разработчики Twitter, и он уже довольно взрослый и популярный. Версии Bootstrap существуют для Angular, Angular 2 и React.

Material

Material – это набор правил дизайна, разработанный в Google. Он набирает популярность, существуют его версии для Angular и React. Поскольку Angular – это тоже детище Google, сочетается Material с ним превосходно.

Вот вам несколько ссылок:

Поздравляю! У вас есть ключевые навыки фронтенд-разработчика!

Вы только посмотрите на него!

Я хочу быть бэкенд-разработчиком

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

TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index

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

Если вы знакомы с одним из отмеченных зелёным цветом языков, и он вам нравится – концентрируйтесь на нём.

Подкачайте необходимые для интервью умения

Вам нужно подготовиться не только к написанию кода. В хорошей статье с Life Hacker описано много полезной и ценной информации.

Главное – закрепиться на рынке

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

Хочу быть фрилансером

Сам себе хозяин – это хорошо, но это одновременно и огромное давление, и большие сложности. Лучший источник информации по фрилансу из всех, что я видел - DoubleYourFreelancing.com . У него есть серия статей , которые помогут вам стать фрилансером лучше, чем это получилось бы у меня. Читайте.

Ещё один вариант, если вы в себе уверены – сервис Toptal . Они принимают лишь 3% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.

Я начал работу, но чувствую, что зашел в тупик

Понимаю. Это нелегко, и если кто-то говорил вам обратное – он либо этим не занимался, либо пытается выманить у вас деньги. Если вы чувствуете, что зашли в тупик, попробуйте следующие варианты:

Освежите ваше первоначальное намерение

Спросите себя, запишите на бумаге, почему вы решили идти по этому пути. В силе ли всё ещё ваш ответ? Если да – то зачем останавливаться? Вперёд!

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

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

«Я решил научиться программированию. Мне нравится веб, но я не знаю, с чего начать»

Как и в любой другой дисциплине, изучение программирования нужно начать с основ всех областей веб-разработки - часто это называют «full stack». «Это поможет определить область, в которой вам интереснее обучаться, и даст базовые знания для старта», - пишет Сорор.

Основы HTML

Разработчик советует начать с изучения основ HTML. «Начав с этого вы освоите разработку пользовательских интерфейсов и взаимодействие с ними. Кроме того, вы сразу увидите результат работы вашего кода», - отмечает преподаватель.

«Я знаю основы HTML»

Основы JavaScript

«JavaScript - язык веба, все популярные браузеры (Chrome, Firefox, Safari, IE) имеют встроенную поддержку JavaScript. Каждый сайт или веб-приложение, которым вы пользуетесь, наверняка имеет большое количество JavaScript-кода внутри. Кроме того: язык сейчас становится популярным и на других платформах - например, серверах, рабочих столах и устройствах».

«Я знаю основы JavaScript и HTML»

CSS

Далее Сорор предлагает перейти к изучению CSS для настройки внешнего вида HTML-элементов. Для этого можно воспользоваться бесплатным учебником от Mozilla для обучения основам и сайтом CSS-Tricks для решения основных проблем.

Бэкенд

«К этому моменты вы получили знания для так называемой "фронтэнд-разработки". Теперь можно переключиться на "бэкенд". Это код, которые работает на сервере», - пишет Сорор. - Существует множество бэкенд-языков, но так как вы уже знакомы с JavaScript, я рекомендую изучить Node JS (программная платформа - прим. ред.). В дополнение к Node JS можно изучить Express и Mongo DB».

Express - библиотека, которая позволяет облегчить взаимодействие Node JS с веб-сервером. Mongo DB - база данных для хранения и получения информации.

jQuery

JS-фреймворки

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

React JS

React был разработан Facebook и работает с архитектурой Flux . Это JavaScript-библиотека для создания интерфейсов. Недавно React обошел по популярности другую распространенную библиотеку Angular, поэтому лучше начать изучение фреймворков именно с него, отмечает Сорор. Бесплатный курс для изучения React.

Angular и

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

Фреймворк Angular 1 можно изучить бесплатно на Code School . Познакомиться с Angular 2 можно при помощи бесплатных видео .

Ember JS

Фреймворк не такой мощный, как разработки Google и Facebook, однако он набирает популярность среди разработчиков. Официальная документация Ember JS.

«Я хочу стать бэкенд-разработчиком»

«В бэкенд-разработке существует множество языков, у каждого есть свои минусы и плюсы», - пишет преподаватель. Он также приводит график их популярности за последние 10 лет:

Языки программирования, обозначенные зеленой рамкой, - те, на которых стоит сфокусировать своё внимание, считает Сорор.

Java

Очень популярный язык программирования, разработанный компанией Sun Microsystems (сейчас принадлежит Oracle). Java используется для разработки приложений для Android. Его также можно использовать для создания компьютерных и веб-приложений.

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

C#

Язык разработан компанией Microsoft как альтернатива Java. Как и Java, C# является объектно-ориентированным языком программирования и может использоваться не только для разработки веб-приложений, но и программ для настольных операционных систем. Бесплатный курс по изучению C# от Microsoft Virtual Academy.

Python

За Python нет никакого крупного бренда. Однако этот язык позволяет вести быструю разработку. Сайт с бесплатными уроками для изучения Python.

Ruby

Среди разработчиков есть много поклонников Ruby - они активно рекламируют и восторгаются этим языком, пишет Сорор. Однако его популярность растет медленными темпами. По сути язык является смесью функционального и императивного программирования.

Лучшее место для изучения Ruby - RubyMonk , считает разработчик.

Практика

Перед выполнением практических задач Сорор рекомендует сразу создать профиль на сайте GitHub - онлайн-репозитории для хранения, управления и публикации кода. Знакомство с платформой можно начать с инструкции “Hello World" или интерактивного курса .

Начать разработку можно с создания собственного блога (инструкция для программирования блога на React и Node) или календаря (инструкция для программирования календаря на C# и.Net).

Бесплатные уроки можно найти и на Free Code Camp :

• Таймер «Помодоро» (фронтэнд).
• Трейдинг-клуб (фулстэк).