Пошаговое руководство: Как научиться веб-программированию Статьи редакции

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

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

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

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

Основы HTML

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

Сорор приводит ссылки на обучающие материалы по изучению HTML:

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

Далее Сорор советует приступить у изучению основ JavaScript.

Основы JavaScript

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

Основные ссылки для изучения JavaScript:

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

CSS

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

Бэкенд

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

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

Бесплатные ресурсы для изучения Node JS, Express и Mongo DB.

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

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

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

Помимо знаний JavaScript, HTML и CSS фронтэнд-разработчик должен разбираться в нескольких наиболее важных фреймворках.

Глубокое изучение HTML

Глубокое изучение клиентского JavaScript

Для более подробного изучения языка JavaScript Сорор рекомендует серию книг «Вы не знаете JavaScript» Кайла Симпсона. Автор опубликовал всю серию для бесплатного чтения онлайн:

  1. «Up & Going».
  2. «Scope & Closures».
  3. «this & Object Prototypes».
  4. «Types & Grammar».
  5. «Async & Performance».
  6. «ES6 & Beyond».

Также разработчик рекомендует книгу MDN JavaScript Reference.

jQuery

jQuery — самая популярная JavaScript-библиотека всех времен. Сорор рекомендует изучать её с помощью курса на FreeCodeCamp. Далее можно перейти к официальному руководству jQuery.

Также в изучении пригодится API-документация jQuery.

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

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

React JS

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

Angular 1 и 2

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

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

Ember JS

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

Далее Сорор советует перейти к изучению CSS-фреймворков — таких как Bootstrap и Material:

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

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

0
77 комментариев
Популярные
По порядку
Написать комментарий...

Я бы поменял местами CSS и Javascript.
Потому что на HTML+CSS уже, по сути, можно сделать что-то готовое, а это всегда здорово мотивирует.

25

Я может чушь напишу, но почему в комментах никто не упомянул PHP?
И у ФБ и у ВК есть даже свои фрейморки, я б даже сказал подязыки на основе PHP.

ОДин из самых популярных языков программирования, имхо. О плюсах и минусах можно говорить вечно, как впрочем и о популярности языков

12

VC.ru выкладывает руководство о том, как стать веб-разработчиком

ну что за пи****

8

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

9

Нельзя сми под названием Venture Capital просто так взять и написать руководство для веб-разработчиков. Уверен, тут люди, которые возможно знать не знали, хотеть не хотели узнавать такие подробности про программистов да и вообще что-то программисткое. Не говоря уже о том, что самих программистов такие руководства офигеть как бесят, и никто в здравом уме не стал бы по этому руководство начинать свой путь веб-разработчика, кроме мимо крутящихся хипстеров :D
В общем, уважаемый VC, выбрали тематику/нишу называйте как хотите, пишите по теме плз, уважайте аудиторию свою.

–1

Я не пойму, вы здесь первый раз что-ли? Здесь куча статей, которые только косвенно относятся к Venture Capital %)

1

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

–6

Ну скинь хорошее руководство, я бы с удовольствием его глянул. Либо ты только на словах такой крутой

0

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

0

Про API и про программирование для людей, которые далеки от этого (типа меня) - https://github.com/kepatopoc/vkapi-course

Сделал курс для себя и для других Social Media-специалистов. Посчитал, что за 22 дня почти с нуля смог научиться решать прикладные задачи с помощью программирования на Python.

4
9

Вот это правдивее)

8

Из серии:
- Учи Python, а то так и будешь всю жизнь ключи подавать!

2

Тоже неплохо. :)

0

Эта знатная разработчица их много передушила.

4

Про ReactJs и Angular какой треш написан, Flux это архитектура для приложений на React и появился он позже. React это не фреймворк, а библиотека для создания быстрого фронта из компонентов. Ангуляр по-прежнему намного популярнее реакта, посмотрите тренды на гугле. Привлекайте к редактуре хоть какого-нибудь технаря что-ли...

0

Посмотрел тренды в Google:

11

Это count of posts – конечно же про React сейчас будут писать. А вот какой процент пустил React в production – совсем другой вопрос. Роман абсолютно прав.

3

Филипп, подскажите, пожалуйста, как вы смотрите эти тренды?

0

Вот уж не знаю куда вы смотрите, у меня такая статистика с гугла...

0

Слово фреймворк туда случайно попало, да. Поправил.

2

Да ладно уже себя обманывать, фреймворк - не фреймворк.
React+Redux[+Immutable] давно вполне себе полностью заменяет Angular, только намного более производительно и популярно. React только как view layer хоть и красиво выглядит на бумаге, на практике используют только какие-то совсем маргиналы.
В общем, в долине только и говорят, что о React.

3

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

Странная фраза. Как будто наличие крупного бренда "за" языком программирования о чём-то говорит (смущает само противопоставление через "однако").

Как говорит создатель Python Гвидо ван Россум - Python - язык, созданный сообществом. Кстати, сам Гвидо успел поработать в Гугле, а сейчас работает в Дропбоксе. К вопросу о "крупных брендах".

6

PHP для бекэнда уже не в тренде?

5

да. Даёшь Java и C#! Вот уж действительно подходящие технологии для написания на них бэкенда веб приложений и сайтов.

1

да, 80% всех динамических сайтов вообще не считаются с:

0

"Сейчас в тренде учиться программированию."
а как фронтенд с программированием связан?

2

Ок, что ты подразумеваешь под термином "фронтенд" ?

2

Ну как, landing page с подключённым mail chimp'ом конечно же:unicorn:

3

а фронтенд это не программирование?

1

Если это серьезный вопрос, а не ирония, то ответ:
Фронтэнд подразумевает не только html разметку и css стили, но и логику приложения на клиенте (в браузере). Помимо обычной валидации данных и анимации, логика может быть довольно сложной. А с использованием локального хранилища мы можем писать приложения которым вообще не требуется сервер и даже подключение к интернету.

1

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

–3

Лол, путаешь "Верстальщика" с "Front-end программистом"

1

хорошо, объясни в чем их различие?

0

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

–27

Вы это серьезно? :D Не будет этого никогда. В Китае, если бы вы подробнее разобрались, это связано с менталитетом, а во всем остальном мире это пока что хайп из-за умелого маркетинга Дурова и т.д., это стихнет быстро. Согласен, что они очень применимы для каких-то ниш, но чтобы они стали альтернативой сайтов в целом, да вы бредите!

16

про мобильные приложения так тоже когда-то говорили и про умные телефоны без кнопок... Просто особенности менталитета :)

0

приложите список материалов для изучения)

4

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

7

Нет, не будут

4

Такого не будет никогда!)))

Боты это тренд и не более того.

Скоро о них все забудут.

2

Отличная статья

4

ага, для СМИ с названием Venture Capital
Ну ох**** теперь

–7

Плохо то, что русскоязычных онлайн-школ для изучения разработки мало. Для верстки есть html-academy, а вот для JS, JAVA и прочего - ничего.

0

Комментарий удален

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

11

JS — learn.javascript.ru
Java — vk.com/javatown

0

JS — learn.javascript.ru
Java — vk.com/javatown

0

Смотрите в сторону Go, Clojure, Elixir. Для бекендера лучше не ориентироваться на TIOBE

0

А вы случайно не пишете бэкенд на ангуляре, не подворачиваете штаны и не ходите ли в сандалиях в носках? :D Смотря, конечно, каким бэкендом вы хотите заниматься. Все деньги щас в энтерпрайзе и там Java, и взять так легко заменить на что-то другое не получится, по сути для энтерпрайза язык это ничто, важны библиотеки и фреймворки которые с ним идут, на этом зарабывают и этим решают определенные задачи. Go, Closure, Elixir, на всем этом пишут пока три с половиной программиста и при этом, большая часть не энтерпрайз.
При всем этом, согласен, что на TIOBE не стоит ориентироваться. Нужно подробнее разобраться в теме.

7

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

и ссылка "How to becAme developer" :)

1

jQuery уже почти не юзается,ибо зачем? есть ангуляр и другие js фреймворки!
CSS имеет смысл только если ты хочешь идти во фронт - т.е. занматься дизайном,иначе вполне достаточно освоить бутстрап.
Ну а рейтинг языков про бэкэнд вообще угар! Вы взяли рейтинг языков,но при этом статья про ВЕБ програмирование,соответсвенно вам нужен рейтинг языков для бэкенда в веб приложениях,а тут,на с/c++ пишут ну максимум 1% - супер высокопроизводительные штуки!
вот рейтинг на вскидку:
-c#(asp.net)
-java(spring)
-ruby(ROR)
-python(Django)
Всё, ни каких с/c++, perl и тд, ибо нету ни одного фрейворка под них.

1

Комментарий удален

Комментарий удален

Мы вот с радостью ещё на Angular 2.0 пересядем и всё станет быстрее и красивше "из коробки"

А вообще, я бы с радостью всех попячил и заставил на "статично типизируемые" языки присесть (хоть coffeescript, хоть typescript, с последним я игрался ещё с миграции на него Angular 1.4)

Ну а так, JS - зло ещё то ("полноценные" разрабы в унисон подтвердят, уверен). Я уверен, с приходом web 3.0 он умрёт в принципе по ряду принципиальных причин

0

CoffeeScript не статически типизируемый.

1

Ну а смерть JS если прийдёт, будет, скорее, со стороны WebAssembly. Ибо единственное достоинство JS, заключающееся в the only first class citizen of the web исчезнет, все ЯП будут гражданами первого класса.

0

Да, вы правы, там всего лишь type checking и, как следствие - результат "хватит инстанциировать лошадь ослом". В случае нормальной статичной типизации мы бы получили что-то типа "хватит инстанциировать лошадь ослом. Возможно, вы имели ввиду мула?"

0

атас, как минимум мидл девелоперы в треде!

0

Я уверен, с приходом web 3.0 он умрёт в принципе по ряду принципиальных причин

зная скорость внедрения новых технологий в вэбе, это произойдет лет через 100, если вообще произойдет.

0

Javascript и веб-разработка - 100 % зло. Я разработчик Windows на C#, C/C++ и мобильных приложений

0

Я frontend разработчик. И заявляю - для языка созданного за неделю - JS очень даже хорош ))

0

Особенно смутило высказывание про Python... А то, что Google, Yandex, Mail.Ru им пользуются очень активно, не? Это не значимый фактор, чтобы начать на нем программировать? На нем программировать надо в первую очередь, в принципе, что для веба, что для компа.

1

Комментарий удален по просьбе пользователя

–1

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален

Комментарий удален по просьбе пользователя

–1

Комментарий удален

Какой-то ебанутый поток сознания от товарища после 20 лет разработки.

0

Пункт №0: "Выучите в совершенстве технический английский, чтобы следовать советам Сорора"

P.S. VC, пусть ваши программеры тоже по этому списку пройдут, а то авторизация через vk не работает.

0

Не знаю зачем в своё время заканчивал университет, в котором изучал архитектуру вычислительных систем, СиАКОД, ТРПО, различные функциональные и логические ЯП, полный курс программирования, и дальнейшее применение последнего до конца учёбы на различных практических задачах. Можно же было курсы пройти.

0

Под экраном образовалась солидная лужа из смузи. js возможно худший язык для обучения программированию. Начинать лучше с Python или с PHP если нужен быстрый результат.

0

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

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

0

Чуть не закрыл статью на фразе "Фреймворк не такой мощный, как разработки Google и Facebook". Это как библиотека, являющаяся по сути шаблонизатором, а не фреймворком вдруг стала без обвеса мощнее суслика?)) при всем моем обожании Реакта - не могу согласиться...

0

Node js, - использовать js в качестве серверного языка? Увольте.

0

Комментарий удален

Чет не пойму, это перевод, или перевод + срез жира. В оригинале автор объясняет почему PHP выделен желтым("What about PHP?") и эта статья была на хабре на неделе вроде не обрезанная .

0

Одновременно публикации похожие появились https://habrahabr.ru/post/303896/

–1
Читать все 77 комментариев
«Циан» запретил сдавать квартиры «только славянам»: теперь на сайте нельзя указывать расовые предпочтения Статьи редакции

Отредактировать объявления необходимо до 1 февраля 2022 года.

Как столярная мастерская из Рязани начала продавать товары по всему миру

И прошла путь от мебели ручной работы к деревянным игрушкам.

Взломан аккаунт VK и вместо помощи поддержки, получаешь от них блокировку

У меня нет аккаунта в VK, а у моей жены есть, точнее был. Обычный такой аккаунт , мамашки, где она админ 2 групп родкома в школе детей ( причем единственный админ и сейчас в эти группы никого не добавить и себя с нового аккаунта) и доступ в группы совместных закупок, аккаунт старый, причем аккаунт открыт только для друзей.

«У одного человека — половина спутников в мире»: Европейское космическое агенство обвинило SpaceX в монополии в космосе Статьи редакции

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

Точка добавила вебхуки в API

Клиенты смогут получать моментальные уведомления о своём бизнесе.

9 декабря банк «Открытие» и Яндекс.Бизнес проводят очередное бизнес-шоу «Цифровая эволюция бизнеса»

Тема шоу — как компаниям малого и среднего бизнеса продвигать продажи и завоевывать новую аудиторию покупателей через онлайн-каналы

«СберПрайм» ввёл лимит на бесплатную доставку продуктов из «СберМаркета» — её называли выгодой для подписчиков Статьи редакции

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

TikTok-блогер Yan Dilan снимет клип на песню «Детство»

Блогер, рэпер, продюсер, актер, сценарист, участник Высшей лиги КВН и сторителлер Артур Диланян, ставший популярным в социальных сетях под псевдонимом Yan Dilan, привлекает инвестиции на съемки видеоклипа на новую песню «Детство» с помощью инструмента краудлендинга.

vc.ru превратился в книгу жалоб

Вам не кажется, что vc.ru превращается в сайт для жалоб на разные сервисы и компании?

Глава СберМаркета Асан Курмангужин запустил подкаст Asan Talks в YouTube

В выпусках Асан берет интервью у топ-менеджеров крупных компаний и обсуждает вопросы саморазвития и лидерства

Pinterest купила белорусский сервис для редактирования видео Vochi Статьи редакции

Покупка поможет Pinterest развивать видеонаправление.

null