HTML Diff
0 added 0 removed
Original 2026-01-01
Modified 2026-02-21
1 <p><a>#статьи</a></p>
1 <p><a>#статьи</a></p>
2 <ul><li>13 июн 2018</li>
2 <ul><li>13 июн 2018</li>
3 <li>0</li>
3 <li>0</li>
4 </ul><h2>Как стать веб-разработчиком с нуля, почему это актуально и что нужно знать</h2>
4 </ul><h2>Как стать веб-разработчиком с нуля, почему это актуально и что нужно знать</h2>
5 <p>Профессия веб-разработчика жива, пока живы сайты. Разберёмся, как прийти в неё и что нужно знать новичку. От ситуации на рынке до обучающих ресурсов.</p>
5 <p>Профессия веб-разработчика жива, пока живы сайты. Разберёмся, как прийти в неё и что нужно знать новичку. От ситуации на рынке до обучающих ресурсов.</p>
6 <p> vlada_maestro / shutterstock</p>
6 <p> vlada_maestro / shutterstock</p>
7 <p>Ведущий инженер-программист в Badoo Development LLC, специалист по разработке высоконагруженных веб-сервисов.</p>
7 <p>Ведущий инженер-программист в Badoo Development LLC, специалист по разработке высоконагруженных веб-сервисов.</p>
8 <p>Текст подготовлен на основе вебинара "<a>Как стать веб-разработчиком с нуля за три месяца</a>" с участием Михаила Овчинникова из компании Badoo.</p>
8 <p>Текст подготовлен на основе вебинара "<a>Как стать веб-разработчиком с нуля за три месяца</a>" с участием Михаила Овчинникова из компании Badoo.</p>
9 <p>ВРЕМЯ ПРОСМОТРА</p>
9 <p>ВРЕМЯ ПРОСМОТРА</p>
10 <p><strong>1 ч. 43 мин.</strong></p>
10 <p><strong>1 ч. 43 мин.</strong></p>
11 <p>Для полного погружения в профессию у Skillbox есть курс "<a>Веб-разработчик</a>", где теория становится знаниями, практика - навыками, а работа - оплачиваемым призванием.</p>
11 <p>Для полного погружения в профессию у Skillbox есть курс "<a>Веб-разработчик</a>", где теория становится знаниями, практика - навыками, а работа - оплачиваемым призванием.</p>
12 <p>Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:</p>
12 <p>Рассматривая общую картину рынка, можно выделить наиболее востребованные направления в IT-сфере:</p>
13 <ul><li><strong>Frontend</strong><strong>-</strong>самая "громкая" и растущая отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также на HTML и таблицы стилей CSS.</li>
13 <ul><li><strong>Frontend</strong><strong>-</strong>самая "громкая" и растущая отрасль, в которой постоянно меняются тренды. Опирается на язык программирования JavaScript и его фреймворки, такие как Angular.js, React.js, Vue.js и другие, а также на HTML и таблицы стилей CSS.</li>
14 <li><strong>Web-development,</strong>а именно backend-разработка с PHP, Ruby и Python.</li>
14 <li><strong>Web-development,</strong>а именно backend-разработка с PHP, Ruby и Python.</li>
15 <li><strong>Android/iOS-development</strong><strong>-</strong>разработка под мобильные устройства на Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.</li>
15 <li><strong>Android/iOS-development</strong><strong>-</strong>разработка под мобильные устройства на Java, Swift, Objective-C, C# (Xamarin), JavaScript (React Native) и других.</li>
16 <li>.<strong>NET-development</strong> - разработка как десктопных приложений под Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.</li>
16 <li>.<strong>NET-development</strong> - разработка как десктопных приложений под Windows на языке C#, так и серверных программ, в том числе веб-сайтов, с использованием технологии ASP.NET.</li>
17 <li><strong>Java-development</strong>- разработка кросс-платформенных приложений на Java, а также крупных высокопроизводительных систем с использованием технологии Java EE.</li>
17 <li><strong>Java-development</strong>- разработка кросс-платформенных приложений на Java, а также крупных высокопроизводительных систем с использованием технологии Java EE.</li>
18 <li><strong>Game development</strong> - разработка игр под различные платформы.</li>
18 <li><strong>Game development</strong> - разработка игр под различные платформы.</li>
19 <li><strong>UI/UX</strong> - проектирование пользовательских интерфейсов.</li>
19 <li><strong>UI/UX</strong> - проектирование пользовательских интерфейсов.</li>
20 <li><strong>QA</strong> - обеспечение качества программного обеспечения и его тестирование.</li>
20 <li><strong>QA</strong> - обеспечение качества программного обеспечения и его тестирование.</li>
21 <li><strong>Embedded development</strong><strong>-</strong>разработка программного обеспечения под "железо": автомобили, бытовую технику и другие устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.</li>
21 <li><strong>Embedded development</strong><strong>-</strong>разработка программного обеспечения под "железо": автомобили, бытовую технику и другие устройства с использованием низкоуровневых языков, таких как C и C++ со вставками ассемблера соответствующего процессора.</li>
22 </ul><p><strong>1. Веб-разработка - это интересно</strong></p>
22 </ul><p><strong>1. Веб-разработка - это интересно</strong></p>
23 <p>Стоит изучить одну технологию либо фреймворк и начать с ними работать, как через два-три месяца на рынке появится что-то совершенно новое и все начнут использовать именно это. С вебом не соскучитесь.</p>
23 <p>Стоит изучить одну технологию либо фреймворк и начать с ними работать, как через два-три месяца на рынке появится что-то совершенно новое и все начнут использовать именно это. С вебом не соскучитесь.</p>
24 <p><strong>2. Веб-разработка - это творчество</strong></p>
24 <p><strong>2. Веб-разработка - это творчество</strong></p>
25 <p>Веб-разработка постоянно пополняется молодыми специалистами с новыми идеями, а сама сфера - новыми инструментами, возможностями и сервисами.</p>
25 <p>Веб-разработка постоянно пополняется молодыми специалистами с новыми идеями, а сама сфера - новыми инструментами, возможностями и сервисами.</p>
26 <p><strong>3. Веб-разработка - это развитие</strong></p>
26 <p><strong>3. Веб-разработка - это развитие</strong></p>
27 <p>Senior-программистов с десятью годами стажа можно встретить довольно редко: либо из них вырастают управленцы, либо они учатся новому. Бурный рост профессии формирует широкое информационное поле и крепкое сообщество.</p>
27 <p>Senior-программистов с десятью годами стажа можно встретить довольно редко: либо из них вырастают управленцы, либо они учатся новому. Бурный рост профессии формирует широкое информационное поле и крепкое сообщество.</p>
28 <p>Поэтому, если вы молоды, полны энергии, имеете чувство вкуса, да ещё и с любовью относитесь к программированию, веб-разработка - для вас.</p>
28 <p>Поэтому, если вы молоды, полны энергии, имеете чувство вкуса, да ещё и с любовью относитесь к программированию, веб-разработка - для вас.</p>
29 <p>Изучив сайты поиска работы, мы увидим диапазон зарплат веб-разработчиков:</p>
29 <p>Изучив сайты поиска работы, мы увидим диапазон зарплат веб-разработчиков:</p>
30 <ul><li>Новичок с опытом меньше полугода зарабатывает от 30 000 до 60 000 рублей.</li>
30 <ul><li>Новичок с опытом меньше полугода зарабатывает от 30 000 до 60 000 рублей.</li>
31 <li>Средний специалист с хорошим стажем получает 80 000-150 000 рублей.</li>
31 <li>Средний специалист с хорошим стажем получает 80 000-150 000 рублей.</li>
32 <li>Доход профессионала составляет 150 000-250 000 рублей.</li>
32 <li>Доход профессионала составляет 150 000-250 000 рублей.</li>
33 </ul><p>Многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.</p>
33 </ul><p>Многое зависит от страны, региона, выбранного языка и компании, предлагающей вакансию.</p>
34 <p>Про веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.</p>
34 <p>Про веб-разработку и программирование бытует множество слухов и стереотипов. Мы поговорим в том числе и о них.</p>
35 <ul><li>Знать математику - большинству профессиональных программистов достаточно знаний на уровне пятого класса.</li>
35 <ul><li>Знать математику - большинству профессиональных программистов достаточно знаний на уровне пятого класса.</li>
36 <li>Глубоко разбираться в английском языке. Сотни слов вполне хватит, а все остальные легко поддаются изучению онлайн.</li>
36 <li>Глубоко разбираться в английском языке. Сотни слов вполне хватит, а все остальные легко поддаются изучению онлайн.</li>
37 <li>Учиться несколько лет и заканчивать институт, чтобы освоить базовую веб-разработку. На деле освоение профессии займет два-три месяца обучения.</li>
37 <li>Учиться несколько лет и заканчивать институт, чтобы освоить базовую веб-разработку. На деле освоение профессии займет два-три месяца обучения.</li>
38 </ul><ul><li>Изучить базовые технологии создания сайтов -<a>HTML</a>и <a>CSS</a> - и понять принципы построения структуры сайтов. На это уйдёт несколько недель.</li>
38 </ul><ul><li>Изучить базовые технологии создания сайтов -<a>HTML</a>и <a>CSS</a> - и понять принципы построения структуры сайтов. На это уйдёт несколько недель.</li>
39 <li>Освоить сопутствующие технологии: редакторы кода либо IDE (интегрированные среды разработки), например Notepad++, Sublime Text, Brackets, WebStorm, PHPStorm. Эти инструменты сильно ускорят процесс разработки.</li>
39 <li>Освоить сопутствующие технологии: редакторы кода либо IDE (интегрированные среды разработки), например Notepad++, Sublime Text, Brackets, WebStorm, PHPStorm. Эти инструменты сильно ускорят процесс разработки.</li>
40 <li>Знать о существовании фреймворков и готовых решений, они упрощают и улучшают код. Например, для frontend-разработчика это фреймворк для верстки Bootstrap, библиотека языка JavaScript - JQuery, и Symfony - PHP-фреймворк общего назначения, который облегчает взаимодействие с базой данных, задачи формирования HTML-кода и задачи принятия данных из запроса.</li>
40 <li>Знать о существовании фреймворков и готовых решений, они упрощают и улучшают код. Например, для frontend-разработчика это фреймворк для верстки Bootstrap, библиотека языка JavaScript - JQuery, и Symfony - PHP-фреймворк общего назначения, который облегчает взаимодействие с базой данных, задачи формирования HTML-кода и задачи принятия данных из запроса.</li>
41 <li>Уметь правильно составлять поисковые запросы, пользоваться качественными и проверенными источниками информации.</li>
41 <li>Уметь правильно составлять поисковые запросы, пользоваться качественными и проверенными источниками информации.</li>
42 </ul><p>Для начала давайте выясним, что такое сайт и из чего он состоит.</p>
42 </ul><p>Для начала давайте выясним, что такое сайт и из чего он состоит.</p>
43 <p>Технически сайт - просто набор текстовых файлов, хранящихся в одном каталоге на компьютере или сервере. Кроме них, в структуру каталога входят подпапки с изображениями, шрифтами и дополнительными библиотеками.</p>
43 <p>Технически сайт - просто набор текстовых файлов, хранящихся в одном каталоге на компьютере или сервере. Кроме них, в структуру каталога входят подпапки с изображениями, шрифтами и дополнительными библиотеками.</p>
44 <p>Для продуктивного освоения веб-разработки познакомимся с наиболее популярными источниками информации, а также некоторыми инструментами.</p>
44 <p>Для продуктивного освоения веб-разработки познакомимся с наиболее популярными источниками информации, а также некоторыми инструментами.</p>
45 <ul><li><a>htmlbook.ru</a> - самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;</li>
45 <ul><li><a>htmlbook.ru</a> - самоучитель по HTML4, а также введение в HTML5, самоучитель CSS, введение в CSS3;</li>
46 <li><a>htmlacademy.ru</a> - интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;</li>
46 <li><a>htmlacademy.ru</a> - интерактивный курс по HTML5, основы CSS, множество бесплатных уроков;</li>
47 <li><a>webref.ru</a> - самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;</li>
47 <li><a>webref.ru</a> - самоучитель HTML, основы CSS, блочная модель CSS, текст в CSS, позиционирование в CSS, продвинутый CSS;</li>
48 <li><a>"Погружение в HTML5"</a>Марка Пилгрима.</li>
48 <li><a>"Погружение в HTML5"</a>Марка Пилгрима.</li>
49 </ul><ul><li><a>learn.javascript.ru</a> - самый современный самоучитель по JavaScript;</li>
49 </ul><ul><li><a>learn.javascript.ru</a> - самый современный самоучитель по JavaScript;</li>
50 <li><a>"JavaScript. Подробное руководство"</a>Дэвида Флэнагана.</li>
50 <li><a>"JavaScript. Подробное руководство"</a>Дэвида Флэнагана.</li>
51 </ul><p>После освоения этих технологий рекомендуем изучить JQuery - самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и со Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js.</p>
51 </ul><p>После освоения этих технологий рекомендуем изучить JQuery - самую популярную библиотеку JavaScript. В дальнейшем стоит познакомиться и со Slick, Owl Carousel, Magniffic Popup, Velosity.js, Tree.js.</p>
52 <ul><li>Для ускорения написания кода и удобной работы с ним используем Sublime Text с плагином Emmet, редактор Notepad++, Brackets, IDE WEBStorm, PHPStorm.</li>
52 <ul><li>Для ускорения написания кода и удобной работы с ним используем Sublime Text с плагином Emmet, редактор Notepad++, Brackets, IDE WEBStorm, PHPStorm.</li>
53 <li>Для ускорения написания CSS-кода полезно научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.</li>
53 <li>Для ускорения написания CSS-кода полезно научиться работать с препроцессорами CSS, такими как Scss, Sass, Less.</li>
54 </ul><p>Язык HTML отвечает за создание структуры страницы. Для изменения стиля элементов применяются CSS-правила.</p>
54 </ul><p>Язык HTML отвечает за создание структуры страницы. Для изменения стиля элементов применяются CSS-правила.</p>
55 <p>Для назначения событий в качестве реакции на действие нужен язык JavaScript. Вообще, любая интерактивность на сайте, любое взаимодействие с пользователем - это JavaScript.</p>
55 <p>Для назначения событий в качестве реакции на действие нужен язык JavaScript. Вообще, любая интерактивность на сайте, любое взаимодействие с пользователем - это JavaScript.</p>
56 <p>Сам сайт данные не хранит. Он лишь отображает их на своих страницах. Профили пользователей, списки товаров и услуг, а с ними и прочая информация лежат в базе данных на сервере. На новостном сайте все новости также хранятся в базе данных.</p>
56 <p>Сам сайт данные не хранит. Он лишь отображает их на своих страницах. Профили пользователей, списки товаров и услуг, а с ними и прочая информация лежат в базе данных на сервере. На новостном сайте все новости также хранятся в базе данных.</p>
57 <p>Для таких целей и существуют серверные языки, например PHP. Скрипты на PHP работают с базой данных в автоматическом режиме. Типовая задача, которую решает PHP-код, - это получить какой-то запрос от пользователя, обработать его, сходить в базу данных, забрать нужную информацию и вывести её пользователю.</p>
57 <p>Для таких целей и существуют серверные языки, например PHP. Скрипты на PHP работают с базой данных в автоматическом режиме. Типовая задача, которую решает PHP-код, - это получить какой-то запрос от пользователя, обработать его, сходить в базу данных, забрать нужную информацию и вывести её пользователю.</p>
58 <p>Существуют и другие языки для этих целей, но PHP в связке с MySQL - системой управления базой данных (СУБД) - считаются наиболее простым вариантом для освоения новичком.</p>
58 <p>Существуют и другие языки для этих целей, но PHP в связке с MySQL - системой управления базой данных (СУБД) - считаются наиболее простым вариантом для освоения новичком.</p>
59 <p>Чтобы пополнять сайт новым контентом, предусмотрены системы управления контентом (CMS) или так называемые движки. Кстати, одна из наиболее популярных CMS, Wordpress, как раз написана на языке PHP.</p>
59 <p>Чтобы пополнять сайт новым контентом, предусмотрены системы управления контентом (CMS) или так называемые движки. Кстати, одна из наиболее популярных CMS, Wordpress, как раз написана на языке PHP.</p>
60 <p>Подводя итог, можно сказать: чтобы сделать сайт "живым", необходимо овладеть как минимум вышеперечисленными технологиями.</p>
60 <p>Подводя итог, можно сказать: чтобы сделать сайт "живым", необходимо овладеть как минимум вышеперечисленными технологиями.</p>
61 <p>Сегодня мы поговорили, какими знаниями наполнен начинающий программист. Ещё раз перечислим основные навыки веб-разработчика:</p>
61 <p>Сегодня мы поговорили, какими знаниями наполнен начинающий программист. Ещё раз перечислим основные навыки веб-разработчика:</p>
62 <ul><li>Знание языков.</li>
62 <ul><li>Знание языков.</li>
63 <li>Умение пользоваться готовыми решениями, библиотеками и фреймворками.</li>
63 <li>Умение пользоваться готовыми решениями, библиотеками и фреймворками.</li>
64 <li>Способность вникать в требования заказчика и работодателя.</li>
64 <li>Способность вникать в требования заказчика и работодателя.</li>
65 <li>Самопрезентация и работа с заказчиком.</li>
65 <li>Самопрезентация и работа с заказчиком.</li>
66 <li>Наличие хорошего портфолио и резюме.</li>
66 <li>Наличие хорошего портфолио и резюме.</li>
67 </ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>
67 </ul><a><b>Бесплатный курс по Python ➞</b>Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу</a>