Руководство для веб разработчиков - Arganabio.ru - инструкции по эксплуатации и многое другое

Как стать профессиональным веб-разработчиком: практическое руководство

Время на прочтение
12 мин

Количество просмотров 634K

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Начало;
Теги, атрибуты, элементы;
Заголовки страниц;
Параграфы;
Заголовки;
Списки;
Ссылки;
Изображения;
Таблицы;
формы;
Собираем всё вместе.

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

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

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

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

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

Заставляем вещи работать;
Переменные и данные;
Математические расчёты;
Логика;
Условия;
Циклы;
Функции;
Объекты;
Массивы;
DOM;
События и обратные вызовы;
AJAX;
JSON;
Область видимости.

Я знаю основы 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» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:

“Up & Going”;
“Scope & Closures”;
“this & Object Prototypes”;
“Types & Grammar”;
“Async & Performance”;
“ES6 & Beyond”.

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

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

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

Изучите jQuery

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

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

Также вам понадобится держать под рукой документацию по jQuery API.

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

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

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

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

React JS

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

Angular 1 и 2

Angular JS создали разработчики Google, и он быстро набрал популярность. Многие компании сильно вложились в него, и, судя по графику выше, он всё ещё популярен. К сожалению, в Google приняли решение полностью переписать Angular при разработке 2-й версии. Поэтому Angular 1 и Angular 2 получились практически полностью разными. Если вам хочется стать экспертом в Angular, придётся изучить оба фреймворка. Возможно даже, что вам окажется достаточно и первой версии – пока ещё есть время. Но время это уже на исходе. Большинство работы, связанной с Angular, постепенно переходит на Angular 2. В Code School есть интересный бесплатный курс по Angular 1. А для изучения Angular 2 посмотрите бесплатные видео.

Ember JS

Для людей с опытом работы в Ember JS пока ещё есть места, но судя по графику, он уже помирает. Его не поддерживают такие монстры, как Google или Facebook, а вы и так будете загружены изучением React и Angular. Но если вам интересно, можете почитать официальное руководство по Ember JS.

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

Bootstrap

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

Material

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

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

React Bootstrap;
Angular Bootstrap;
Angular 2 Bootstrap;
Material UI (React);
Angular Material;
Angular 2 Material.

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

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

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

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

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

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

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

Java

Чрезвычайно популярный язык, запускающийся почти везде. Разработан в Sun Microsystems (сейчас им владеет Oracle). На этом языке пишутся приложения для Android. Его также можно использовать для создания десктопных приложений, и, конечно, веб-приложений (как отдельных приложений бэкенда, так и работающих в паре с JSP). Он развитый, стабильный, и для его изучения есть огромное количество ресурсов. Кроме того, это самый популярный язык для изучения объектно-ориентированного программирования в колледжах и университетах. Вот неплохой курс по Java для начинающих.

C#

C# был создан в компании Microsoft как прямой конкурент Java. До недавнего времени его поддержка на системах, не принадлежащих Microsoft, была не ахти – но сейчас ситуация выправляется. Как и Java, этот язык объектно-ориентирован, и может использоваться как для создания веб-приложений (как отдельно, так и совместно с ASP.Net), так и десктопных приложений. Если вы пользуетесь ОС Windows, и вам нужна более привычная среда разработки, C# может подойти вам. Ознакомьтесь с бесплатным курсом по языку от Microsoft Virtual Academy.

Python

За ним не стоит огромная компания, как за языками Java или C#, но Python – отличный язык для того, чтобы быстро выполнять поставленные задачи. Его относительно легко учить, и с каждым годом он набирает популярность. Если другие языки пришлись вам не по вкусу, вы можете углубиться в него. Лучше всего начать отсюда.

JavaScript

Если вы читаете эту статью с начала, то с JS вы уже разобрались. С пришествием Node.JS и популярностью npm (системы управления пакетами, Node Package Manager), серверный JavaScript несомненно будет и дальше набирать популярность. Стоит изучения.

Если вы раньше этого не сделали, сейчас самое время изучить Node.JS, Express и MongoDB при помощи этого превосходного бесплатного изучающего материала и его продолжения.

Ruby

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

Лучше всего учить Ruby на ресурсе RubyMonk

Что насчёт PHP?

На рынке полно вакансий для PHP, но, по крайней мере, судя по нашей табличке, он теряет популярность. Я выделил его жёлтым, поскольку это всё ещё неплохой выбор для создания карьеры. Если говорить честно, я сам не большой фанат PHP – возможно, это предубеждение играет свою роль. Но я не могу представить, чтобы через 5-10 лет PHP стал бы популярнее JavaScript, хотя сейчас он более популярен, и вакансии для PHP всё ещё будут существовать.

Я много чего изучил, но у меня нет реального опыта

Ну что, давайте наработаем вам опыт!

Без опыта работы очень сложно устроиться на работу. Сначала нужно закончить парочку персональных проектов, чтобы освоиться с их созданием от начала до конца. А когда вы начнёте работать над ними, очень полезным будет изучить способ управления и публикации кода. Для этого вам потребуется GitHub.

GitHub

GitHub это онлайн-репозиторий на платформе Git. Он позволяет хранить, управлять и публиковать код. Если вы уже работаете разработчиком, вы просто обязаны иметь там учётную запись. Изучить работу с GitHub вы сможете из этого обучающего материала «Hello World», а также из интерактивного обучающего материала по использованию платформы Git.

Личные проекты

Разобравшись с GitHub, нужно приступать к разработке своих проектов. И вот вам пара идей:

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

На ресурсе Free Code Camp вы найдёте разнообразные примеры проектов, включая те, что требуют только фронтенд. Два моих любимых, это:

Сделайте таймер для помодоро (фронтенд);
Управление клубом обмена книгами (разработка полного цикла).

Реальный опыт

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

1. Внесите вклад в проект с открытым кодом

Благодаря популярности GitHub существуют миллионы открытых проектов, в которых есть проблемы (ошибки), которые только и ждут, чтобы их исправил кто-то вроде вас. Включить в резюме упоминание об участии в известном открытом проекте – это отличный способ повысить ваш статус. Лучше всего найти себе проект по душе при помощи ресурса Code Triage. Он поможет выбрать наилучший проект для вас и будет отправлять вам задачи по почте каждый день.

2. Поработайте на знакомого или родственника

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

3. Поработайте на благотворительные организации

Очень полезный способ набрать опыт – поработать на благотворительные и некоммерческие организации. Вы можете обратиться к милой вашему сердцу организации подобного рода и предложить свою помощь. Вы можете найти нужный проект через сайт Catch a Fire. А если вы полностью пройдёте программу обучения на сайте Free Code Camp и получите все сертификаты, вы получите доступ к некоммерческим проектам, где сможете применить ваши навыки.

4. Рабский труд

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

У меня есть опыт, помогите мне с работой

Готовы бросить вызов миру?

Первое правило – не называйтесь «веб-разработчиком».

А что же это за разница такая между веб-разработчиком и разработчиком полного цикла? А вот получается, что разница составляет $15000 в год. Если серьёзно, простая смена названия может решать довольно много.

Сделайте приличное резюме

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

Создайте веб-сайт с портфолио

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

Подготовьтесь для интервью

С этим вам поможет моя предыдущая статья How to Win the Coding Interview.

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

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

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

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

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

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

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

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

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

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

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

Оцените свои реальные возможности

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

Источник

Complete-Web-Developer-Manual

All resources and notes from the Complete Web Developer in 2022: Zero to Mastery course

1. Introduction
2. How The Internet Works
3. History Of The Web
4. HTML 5
5. Advanced HTML 5
6. CSS
7. Advanced CSS
8. Bootstrap 4, Templates, And Building Your Startup Landing Page
9. CSS Grid + CSS Layout
10. Tailwind CSS
11. Career Of A Web Developer
12. Javascript
13. DOM Manipulation
14. Advanced Javascript
15. Command Line
16. Developer Environment
17. Git + Github + Open Source Projects
18. A Day In The Life Of A Developer
19. NPM + NPM Scripts
20. React.js + Redux
21. HTTP/JSON/AJAX + Asynchronous Javascript
22. Backend Basics
23. APIs
24. FINAL PROJECT: SmartBrain Front-End
25. Node.js + Express.js
26. FINAL PROJECT: SmartBrain Back-End — Server
27. Databases
28. FINAL PROJECT: SmartBrain Back-End – Database
29. Production + Deployment
30. Where To Go From Here?
31. Bonus: Extra Bits (Coding Challenges + AMA)
32. Extra: For Windows Users
33. Bonus: Part 2 — Special Thank You Gift (Discount Coupons)

1. Introduction

Discord Channel:

https://discord.gg/nVmbHYY You will find it inside of the course

2. How The Internet Works

Tools:

Chrome Developer Tools

Topics:

ISP, DNS and Servers
Traceroute (Windows: tracert)

Submarine Cable Map:

https://www.submarinecablemap.com/

3. History Of The Web

Maps that explain the Internet:

https://www.vox.com/a/internet-maps

First Webpage in the world:

http://info.cern.ch/hypertext/WWW/TheProject.html

Optional Videos:

https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29
https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30
https://www.youtube.com/watch?v=guvsH5OFizE&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=31

4. HTML 5

Run HTML online:

https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
https://onecompiler.com/html

Install a text editor (Select one):

https://www.sublimetext.com/
https://atom.io/
https://code.visualstudio.com/
https://notepad-plus-plus.org/

Topics:

Relative vs Absolute Path

Zero to Mastery resources:

https://github.com/zero-to-mastery/complete-web-developer-manual
https://github.com/zero-to-mastery/zero-to-mastery-captions

Reference websites:

https://www.w3schools.com/
https://developer.mozilla.org/en-US/
https://stackoverflow.com/
https://htmlreference.io/

5. Advanced HTML 5

Semantic Elements

<header>
<nav>
<main>
<footer>

Topics:

Chrome view Source

Resources:

https://learn.freecodecamp.org/responsive-web-design/basic-html-and-html5
https://waitbutwhy.com/

«If you take one thing from this, it is this: Don’t worry if you don’t feel 100% confident in HTML. Keep going as we will keep building on top of this knowledge.»

6. CSS

Syntax:

Selector {
	property: value;
}

How to:

External

<link rel="stylesheet" type="text/css" href="style.css">

Internal

<style>
	body {
		background-color: purple;
	}
</style>

Inline

<header style="background-color: green;">

Class

 	.green {
 		background-color: green;
 	}

Tools:

Chrome Inspector

Properties:

text-align
border
background
list-style
cursor
display: inline-block
color: hex, rgb or rgba

Selectors:

.class
#id
* (all elements)
element
element, element
element element
element > element
element + element
v:hover
:last-child
:first-child
::before (pseudo-element)
!important (not recommended)

Text Properties:

text-decoration
text-transform
line-height
font-style
font-weight
font-size
font-family

Layout Properties:

float and clear

Box Model:

margin
border
padding
width and height

Sizes:

px
em and rem
vw and vh (viewport width and height)

Topics:

Cascading: Specificity, Importance !, Source Order
Linking fonts and external stylesheets

Exercises:

https://flukeout.github.io/

Reference websites:

https://css-tricks.com/
https://www.supremo.co.uk/typeterms/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://unsplash.com/
https://developer.mozilla.org/es/docs/Learn/CSS/Introduction_to_CSS/Cascada_y_herencia
https://specificity.keegan.st/
https://css-tricks.com/snippets/css/complete-guide-grid/

Website for color check:

http://paletton.com/
https://coolors.co/

Website for fonts download:

https://fonts.google.com/

7. Advanced CSS

Flexbox:

display: flex
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
order
flex: flex-grow, flex-shrink and flex-basis
align-self

Properties:

transition
transform
box-shadow

Tools:

Chrome Toggle Device
https://codepen.io/

Exercises:

http://flexboxfroggy.com/

Reference websites:

https://caniuse.com/
https://www.w3schools.com/cssref/css3_browsersupport.asp
http://shouldiprefix.com/
https://robots.thoughtbot.com/transitions-and-transforms
https://darekkay.com/dev/flexbox-cheatsheet.html

If you take one thing from this, it is this: Don’t worry if you don’t feel 100% confident in CSS. Keep going as we will keep building on top of this knowledge.

8. Bootstrap 4, Templates, And Building Your Startup Landing Page

App for creating users list:

https://mailchimp.com

Website with animation examples:

https://animate.style/

Website for patterns:

https://www.creative-tim.com/bootstrap-themes/ui-kit?direction=asc&sort=price
http://mashup-template.com/templates.html
https://startbootstrap.com/template-categories/all/
https://mdbootstrap.com/freebies/
https://www.creative-tim.com/

Generating animated patterns:

https://animate.style/

9. CSS Grid + CSS Layout

Grid Cheat Sheets:

http://grid.malven.co/
https://css-tricks.com/snippets/css/complete-guide-grid/

Grid Garden:

https://cssgridgarden.com/

Free Design resources:

https://interfacer.xyz/

10. Tailwind CSS

Reference websites:

https://tailwindcss.com/

11. Career Of A Web Developer

Updated Statistics and Surveys 2020:

State of JavaScript
- https://www.jetbrains.com/lp/devecosystem-2020/javascript/
State of Salaries
- https://hired.com/blog/highlights/2020-state-of-salaries-report/
Developer Salaries — Glassdoor
- https://www.glassdoor.ca/Salaries/san-francisco-front-end-developer-salary-SRCH_IL.0,13_IM759_KO14,33.htm
Octoverse Github
- https://octoverse.github.com/
Stackoverflow Survey
- https://insights.stackoverflow.com/survey/

Web Developer Roadmap 2022:

Part 1: https://www.youtube.com/watch?v=57GuRoJ5Bfw
Part 2: https://www.youtube.com/watch?v=aeKQy_08fpk

Learning Guideline Roadmap:

https://zerotomastery.io/courses/#roadmap

Once you are Done with Learning, here is the list of best platforms for jobs and careers, which will help you get a great job or advace your career easily:

https://ayedot.com/151/MiniBlog/Top-10-Best-Websites-for-Careers—Jobs

12. Javascript

Javascript Data types:

Primitive

Number
String
Boolean
Undefined
Null
Symbol (new in ECMAScript 6)
BigInt

Non-primitive

Object (Array is not a special data types in JavaScript it belongs to the object data types)

Javascript comparisons:

!== (not equal to)
=== (equal to)
>= (greater than or equal to)
<= (less than or equal to)
> (less than)
< (greater than)

Javascript variables:

var
let (new in ECMAScript 6) : Used to declare variables that can be changed using code later on
const (new in ECMAScript 6) : Used to declare constants that remain constant throughout the execution of the program, mostly used for functions and object

Javascript conditionals:

if(condition) {
	//Code written here is executed if condition is true
}

else

if(condition1) {
	//Code written here is executed if condition1 is true
} else {
	//Code written here is executed if condition is false
}

else if

if(condition) {
	//Code written here is executed if condition1 is true
} else if(condition) {
	//Code written here is executed if condition2 is true
}

ternary operator

condition ? (code that runs with condition is true) : (code that runs when condition is false);

switch

switch(expression){
	case result1:
		//code that runs if expression gives result1
		break;
	case result2:
		//code that runs if expression gives result2
		break;
	default:
		//code that runs if expression gives neither result1 nor result2
}

Javascript logical operators:

&& = Sees if both values are the same/true.
|| = Sees if there is at least one of the same/ true value.
! = Turns true into false, and false into true.

Javascript functions:

var a = function name() {}
function name() {}
return
() => (new in ECMAScript 6)

Javascript data structures:

Array
Object

Javascript looping:

for
while
do
forEach (new in ECMAScript 5)

Javascript keywords:

break
case
catch
class
const
continue
debugger
default
delete
do
else
export
extends
finally
for
function
if
import
in
instanceof
new
return
super
switch
this
throw
try
typeof
var
void
while
with
yield

13. DOM Manipulation

Reference websites:

https://developer.mozilla.org/en-US/docs/web/Events
https://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes
https://jquery.com/
http://youmightnotneedjquery.com/
https://babeljs.io/

DOM Selectors:

getElementsByTagName
getElementsByClassName
getElementById
querySelector
querySelectorAll
getAttribute
setAttribute

Changing Styles:

style.{property} //ok
className //best
classList //best
classList.add
classList.remove
classList.toggle

Bonus:

innerHTML //DANGEROUS
parentElement
children

It is important to CACHE selectors in variables

14. Advanced Javascript

Variable declaration:

let variableName (new in ECMAScript 6) /* its value can be altered
const variableName (new in ECMAScript 6) /* it stands for constant, its value can’t be altered once declared
`` /* are used instead of '' or "". Allows us to avoid the «+» separation and elements and variables should be added with syntax ${element}
a**b /* it stands for a to the b potence
element.padStart(param1,param2) /* param1 number of characters param2 are added before the value of element declared. The default param2 is " "
.padEnd(param1,param2) /* Same as above but at the end
.trimStart() /* eliminates empty spaces from the start of a variable
.trimEnd() /* Same as above but from the end
debugger; /* Stops running the code and opens console for a step by step check

Functions:

Function declaration syntax: const functionname=(param1,param2...) => action /* If there is an only return, there is no need to type «return» and if it’s just one parameter, no need to add "()"
Currying: const functionname= param1 => param2 => action /* To properly call function syntax is: functionname (param1)(param2)
Compose: const functionname= (param2,param3) => param1 => param2(param3(param1)) /* Being param2 and 3 functions y param1 a value. Executes a function inside a function executed with the initial param1

Arrays:

array.forEach(num=>{}) /* For each element num of the array, executes the actions inside {}
array.map(num=>{}) /* For each element num in the array, executes actions inside {} and return needs to be specified since the return will be placed in a new array.
array.filter(num=>{}) /* For each element num of the array a condition is checked. If the value turns out true, it will be added to the new array. If none of the elements meet the condition, it will return an empty array. Return needs to be specified
array.reduce((accumulator,num)=>{}, param3) /* Acumulates values of the operation performed in previous elements, param3 being the initial value of the accumulator
array.concat(param1) /* Concats param1 to the array
array.includes('param1') /* Verifies the array includes param1
array.flat(param1) /* Eliminates the nested arrays to a param1 level
array.flatMap(param1=>{}) /* For each element num, the operation inside {} is performed and the array is lowered to a level 1 nesting
array.fromEntries /* Turns the array into an object, making the first element of the array the property and the second the value of such property

Objects:

const(/let) {property1, property2,...} = obj /* Given an object obj, keeps the value of the properties in new variables property1, property2,…etc
{...obj} /* Creates a clone object of the object obj
Object.assign(param1,param2) /* Clones the lements of an object param2 in an object param1
Object.values(obj) /* Takes the values of the properties of an object obj
Object.entries(obj) /* returns an array with property,value of each element of an object obj
/* .entries and .values can be used with array methods such as .map, .forEach, etc.
this /* when using this parameter, the method/action is applied exclusively to the element in which «this» has been summoned.

Classes:

Class creator syntax:

Classname {
   constructor(param1,param2){
     this.param1 = value;
     this.param2 = value2;
   }
   classmethod(){
   }
}

Create class object syntax: new Classname(param1,param2)
Class extension syntax:

Classextension extends Classname {
   constructor(param1,param2){
      super(param1,param2);
   }
   classextensionmethod(){
   }
}

/* You utilize a class when we are planning to create several objects with similar properties
/* A class extension is used when those several objects can contain properties or categories with specific properties and methods, while respecting the initial constructor.

Loops:

for of: for (param1 of array){} /* It’s a for loop in an array and an action over the element number param1 in an array array
for in: for (param1 in obj) {} /* It’s a for loop of the properties and an action over the property number param1 in an object obj

/* both arrays and strings are iterable in JS
/* for of cannot be used in objects, but for in can be used in arrays, you get the index number as a return

15. Command Line

FOR MAC OR LINUX:

Command	Description
ls	lists files and folders within working directory
pwd	show current working directory
cd	change working directory to user directory
cd ..	change working directory to direct parent directory
clear	clear current terminal screen
cd /	change current directory to root directory
cd ~	change current directory to user directory
cd path/to/folder	changes working directory to specified path
mkdir name	create folder called ‘name’ within current directory
open foldername	opens folder called ‘foldername’ using OS GUI
touch index.html	creates new file titled index.html within working directory
open index.html	opens file named index.html using default system program
open -a “Sublime Text”	opens sublime text program. This syntax can be used to open other programs
open .	opens and displays current folder within OS GUI
mv index.html about.html	renames index.html file to about.html
up and down arrow	cycles through previous commands typed within current terminal session
rm filename	deletes a file called ‘filename’ within the current directory
rm -r foldername	used to delete folders. In this case ‘foldername’ will be deleted
say hello (only on Mac)	the mac will speak any text you enter after the ‘say’ keyword
rm -rf .git	To remove git repo created by init

FOR WINDOWS:

dir - list files
cd {directory name} - change directory
cd / - go to root (top) directory
cd .. - go up a level
mkdir {file name} - make a directory
echo > {filename} - create an empty file
del {filename} - remove a file
rmdir {directory name} - remove a directory and all files within
rename {filename} {new filename} - rename a file or folder
start {filename} - open file in default program
start . - open current directory
exit - exits the command prompt or a batch file
cls - clear the terminal screen

16. Developer Environment

Popular code editors / IDE:

Sublime Text 3
Visual Studio Code
Atom
Brackets
PhpStorm
Codespace

Development Environment Stack

Homebrew
Laragon
Laravel Valet
XAMPP
Vagrant

17. Git + Github + Open Source Projects

Install Git:

https://www.atlassian.com/git/tutorials/install-git#windows
https://www.atlassian.com/git/tutorials/install-git

Git GUI:

https://desktop.github.com/
https://www.gitkraken.com/git-client
https://www.sourcetreeapp.com/

Git in one video

https://missing.csail.mit.edu/2020/version-control/
https://youtu.be/apGV9Kg7ics

Git and version control practice/learning playground

https://learngitbranching.js.org/

Git Commands:

git clone “https:……”
git remote -v
git remote add url “https:……”
git remote add upstream “https:……”
git fetch upstream
git merge upstream/master
git status
git add “filename”
git add .
git commit –m”message”
git commit -am "commit message"
git push
git push origin "branchName"
git pull
git branch
git branch “name”
git checkout “name”
git merge “name”
git diff
git diff "fileName"
git checkout -b "name"
git stash

Once you are in your forked project directory in your command prompt….

Type git remote -v and press Enter. You’ll see the current configured remote repository for your fork.

a. git remote -v

b. origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (fetch)

c. origin https://github.com/YOUR_USERNAME/YOUR_FORK.git (push)
Type git remote add upstream, and then paste the URL you would copy from the original repository if you were to do a git clone. Press Enter. It will look like this:
```
git remote add upstream https://github.com/zero-to-mastery/PROJECT_NAME.git
```
To verify the new upstream repository you’ve specified for your fork, type git remote -v again. You should see the URL for your fork as origin, and the URL for the original repository as upstream.
Now, you can keep your fork synced with the upstream repository with a few Git commands.
One simple way is to do the below command from the master of your forked repository:
git pull upstream master

18. A Day In The Life Of A Developer

https://www.weareadam.com/blog/2020/11/a-day-in-the-life-of-a-front-end-developer/
https://www.nickang.com/2020-01-02-a-day-in-the-life-of-a-software-developer/

19. NPM + NPM Scripts

npm init
npm install
npm install –g browserify

Install node and npm:

https://www.npmjs.com/get-npm
https://nodejs.org/es/
(Though with newer version of node, npm come pre-installed. So you don’t need to do that separately)

Check node and npm installed on your system by:

Manage Multiple Versions of Node.js Using NVM

If any of these command result in error then that (node/npm) deosen’t installed on your system.

Reference websites:

https://www.npmjs.com/
https://www.npmjs.com/package/react
https://lodash.com/

If you want to run multiple version of node on system then we can utlized Node version manager(nvm)

Install nvm :

https://github.com/coreybutler/nvm-windows#installation—upgrades

Steps to install NVM on local machine

https://www.freecodecamp.org/news/nvm-for-windows-how-to-download-and-install-node-version-manager-in-windows-10/#followthestepsbelowtodownloadnvmwindows

Check nvm installed on your system by:

Check nvm list available on your system by:

Use nvm version on your system by (nvm use with specify version of node):

20. React.js + Redux

old version

npm install –g create-react-app
create-react-app “name”
[cd "name"]
npm start
npm install tachyons

new version

npx create-react-app <App-Name>
cd <App-Name>
npm start

Website for fonts download:

http://www.cufonfonts.com/en

Reference websites:

https://reactjs.org/docs/react-component.html
https://jsonplaceholder.typicode.com/
http://atomicdesign.bradfrost.com/
https://robohash.org

Action —> Reducer —> Store —> Make changes

npm install redux
npm install react-redux
npm install redux-logger
npm install redux-thunk

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en
https://reacttraining.com/react-router/
https://ramdajs.com/
https://lodash.com
https://glamorous.rocks
https://www.styled-components.com
https://github.com/css-modules/css-modules
https://www.gatsbyjs.org
https://zeit.co/blog/next5
www.material-ui.com/#/components/app-bar
https://react.semantic-ui.com/elements/button
https://github.com/reactjs/reselect
https://redux-saga.js.org
https://immutable-js.com/

Additional topics you could cover

This topic is just to understand greatness of modern-day frameworks and appreciate how react will be helpful for building single page applications(CSR) or server side rendering(using NextJs) and static site generation(using Gatsby). Have a look at them
Static Site Generation(SSG/Pre-rendering) vs Client side rendering(CSR/SPA) vs Server Side Rendering(SSR)

Some Additional React Based Frameworks popular now

Gatsby Js — A Static Site Generator
Next Js

21. HTTP/JSON/AJAX + Asynchronous Javascript

There are many ways for making an API call, but the one I recommend using is Axios.
Here is why [https://medium.com/@thejasonfile/fetch-vs-axios-js-for-making-http-requests-2b261cdd3af5]

Other available options are Fetch API or G(old) XMLHttpRequests.

Axios is a Javascript library used to make HTTP requests from node.js or XMLHttpRequests from the browser
that also supports the ES6 Promise API.

Features

Make XMLHttpRequests from the browser
Make http requests from node.js
Supports the Promise API
Intercept request and response
Transform request and response data
Cancel requests
Automatic transforms for JSON data
Client side support for protecting against XSRF

Installing

Using npm:

Using bower:

Using yarn:

Using jsDelivr CDN:

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Using unpkg CDN:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

22. Backend Basics

https://nodejs.org/en/

23. APIs

https://explore.postman.com/
https://stripe.com/docs/api
https://www.twilio.com/docs/api/messaging/send-messages
https://apilist.fun
https://www.pexels.com/api/documentation/
https://apihouse.now.sh/

24. FINAL PROJECT: SmartBrain Front-End

Animated objects library:

https://www.npmjs.com/package/react-tilt
```
npm install –save react-tilt
```

Background patterns:

http://lea.verou.me/css3patterns/

Animated background library:

https://particles.js.org/
```
npm install react-tsparticles
```

Image and video recognition:

https://clarifai.com/developer/guide/

Icons library:

https://icons8.com/icon
https://fontawesome.com/v5.15/icons?d=gallery&p=2

25. Node.js + Express.js

Install Postman:

https://www.getpostman.com/apps

Express.js:

https://expressjs.com/en/api.html

(Getting start guide)

npm install body-parser
npm install express --save
npm install --save-dev nodemon

Node.js Reference websites:

https://nodejs.org/en/
https://nodejs.org/api/modules.html

Storing passwords securely:

npm install bcrypt-nodejs

https://www.npmjs.com/package/bcrypt-nodejs
https://www.npmjs.com/package/argon2

1.	/*
2.	* You can copy and run the code below to play around with bcrypt
3.	* However this is for demonstration purposes only. Use these concepts
4.	* to adapt to your own project needs.
5.	*/
6.
7.	import bcrypt from'bcrypt'
8.	const saltRounds = 10 // increase this if you want more iterations
9.	const userPassword = 'supersecretpassword'
10.	const randomPassword = 'fakepassword'
11.
12.	const storeUserPassword = (password, salt) =>
13.	  bcrypt.hash(password, salt).then(storeHashInDatabase)
14.
15.	const storeHashInDatabase = (hash) => {
16.	   // Store the hash in your password DB
17.	   return hash // For now we are returning the hash for testing at the bottom
18.	}
19.
20.	// Returns true if user password is correct, returns false otherwise
21.	const checkUserPassword = (enteredPassword, storedPasswordHash) =>
22.	  bcrypt.compare(enteredPassword, storedPasswordHash)
23.
24.
25.	// This is for demonstration purposes only.
26.	storeUserPassword(userPassword, saltRounds)
27.	  .then(hash =>
28.	    // change param userPassword to randomPassword to get false
29.	    checkUserPassword(userPassword, hash)
30.	  )
31.	  .then(console.log)
32.	  .catch(console.error)

26. FINAL PROJECT: SmartBrain Back-End — Server

Change localhost:

https://stackoverflow.com/questions/40714583/how-to-specify-a-port-to-run-a-create-react-app-based-project

If you don’t want set environment variable, other option — modify scripts part of package.json from:

"start": "react-scripts start"

Linux (tested on Ubuntu 14.04/16.04) and MacOS (tested by @aswin-s on MacOS Sierra 10.12.4) to:

"start": "PORT=3006 react-scripts start"

or (maybe) more general solution by @IsaacPak to:

"start": "export PORT=3006 react-scripts start"

Windows @JacobEnsor solution to:

"start": "set PORT=3006 && react-scripts start"

Front-end and back-end connection:

https://www.npmjs.com/package/cors

Front-end:

fetch('http://localhost:3000/image', {
	method: 'put',
	headers: {'Content-Type': 'application/json'},
	body: JSON.stringify({
		id: this.state.user.id
	})
})
.then(response => response.json())
.then(count => {
	this.setState(Object.assign(this.state.user, { entries:count}))
})

Back-end:

const cors = require('cors')
app.use(cors());

27. Databases

Install PostgreSQL:

http://www.psequel.com/

en el terminal:

brew update
brew doctor
brew install postgresql
brew services start postgresql
brew services stop postgresql
createdb ‘test’
psql ‘test’

for windows:

https://www.pgadmin.org/download/pgadmin-4-windows/

http://www.postgresqltutorial.com/install-postgresql/

@powershell -NoProfile -ExecutionPolicy unrestricted -Command "iex ((new-object net.webclient).DownloadString('https://s3.amazonaws.com/pgcentral/install.ps1'))"

cd bigsql
pgc install pg10
pgc start pg10

http://dc-apuntes.blogspot.com/2016/04/comandos-postgres-desde-cmd-windows.html
https://www.w3resource.com/PostgreSQL/connect-to-postgresql-database.php

data types

https://www.techonthenet.com/postgresql/datatypes.php

Terminal commands for windows:

psql -h localhost -U postgres

Create database:

create database database_name;

Show all datatables:

Create a user:

create user moni with password ‘moni’;

Delete a database:

drop database database_name;

Connect to a database:

Create a schema:

Create a table:

create table Friends.test( firstname CHAR(15), lastname CHAR(20));

create table Friends.login(id serial not null primary key, secret varchar (100) not null, name text unique not null, entries bigint default 0, joined timestamp not null);

Show all information of a table:

select * from friends.test;

Describe database:

Insert data:

insert into friends.test values( ‘Mike’, ‘Smith’);

insert into friends.test (firstname, lastname )values( ‘Sally’, ‘Jones’);

Add a column to an existing table:

alter table Friends.test add age smallint;

Update data from the table:

update friends.test set age = 25 where firstname= ‘Mike’;

Delete data from the table:

delete from friends.test where firstname = ‘Mike’;

Delete column from a table:

alter table friends.test drop column age;

Delete a table:

Functions:

select avg(age) from friends.test;

Join tables:

select * from friends.test join friends.login on friends.test.firstname = friends.login.name;

Exit:

List all users in postgresSQL database server:

List all tables in a schema:

List all tables in a database:

List a table in a schema:

d+ schema_name . table_name

Show description of a table, columns, type, modifications, etc.:

Create a backup of a database:

pg_dump -h localhost -U postgres database_name > database_name.sql

Restore a database: 1. Create a new database where the restore file is going to be placed:

psql -U postgres -d new_database_name -f respaldo.sql

*Note:  it is important to create the restore in the same root where the database copy is saved.

Enter to postgres with a user different to postgres:

psql -h localhost -d postgres -U usuario

Enter to a database with a different user:

psql -h localhost -d nombre_base -U nombre_usuario

28. FINAL PROJECT: SmartBrain Back-End – Database

Tool for db connection with back-end:

https://knexjs.org/
https://knexjs.org/#Installation-node
https://github.com/vitaly-t/pg-promise

29. Production + Deployment

Environmental variables:

http://www.dowdandassociates.com/blog/content/howto-set-an-environment-variable-in-windows-command-line-and-registry/

PORT

On terminal:

bash
-->PORT-3000 node server.js

On server.js:

	const PORT = process.env.PORT
	app.listen(PORT, ()=>{
		console.log(`app is running on port ${PORT}`);
	})

DATABASE

On terminal:

bash
-->DATABASE_URL-123  node server.js

On server.js:

	const DATABASE_URL = process.env. DATABASE_URL
	app.listen(3000, ()=>{
		console.log(`app is running on port ${ DATABASE_URL }`);
	})

OTHER OPTION

On terminal:

fish
-->env DATABASE_URL-‘hello’ node server.js

Deploy apps/websites:

Github Pages:

Mostly now Github is free for all students and Github pages can serve static sites
Also have a look at Github education pack using your Institute id and email and get access to free domains for a year and many more Github education pack

Heroku:

https://www.heroku.com/
https://devcenter.heroku.com/articles/git

Not the best one:

https://www.hostgator.com/promo/snappy60?utm_source=google&utm_medium=brandsearch&kclickid=cfe89874-3c6a-404e-b321-fc3e56f9ec2b&gclid=CjwKCAjwsJ3ZBRBJEiwAtuvtlIkFb-qOw3HN_JpH3AAkmYwKhk_L0y0stl7J1CFRR8FRltvmvhwXPBoCATIQAvD_BwE

Commands for heroku on backend folder:
Install heroku:

npm install -g heroku
heroku login
heroku create

In the terminal there will be a URL : ” https://limitless-bastion-10041.herokuapp.com/”

git remote –v
git push origin master
heroku git: remote –a limitless-bastion-10041

Changes required in:

BACK END: PORT in server.js needs to be changed by an environment variable
FRONT END: fetch URL needs to be changed by the URL of HEROKU + “:3000”

git push heroku master
for checking errors:
heroku logs --tail
heroku open

Connect to pg database:

https://devcenter.heroku.com/articles/heroku-postgresql
https://docs.aws.amazon.com/AmazonRDS/latest/UserGuide/USER_ConnectToPostgreSQLInstance.html
https://msdn.microsoft.com/en-us/library/ms175043(v=sql.120).aspx#SSMSProcedure

Create a new postgres database using Heroku:

Data: Heroku postgres: create new: install heroku postgres: select the app created

heroku addons
heroku info
heroku pg:psql

30. Where To Go From Here?

The Complete Junior to Senior Web Developer Roadmap (2022)

31. Bonus: Extra Bits (Coding Challenges + AMA)

32. Extra: For Windows Users

33. Bonus: Part 2 — Special Thank You Gift (Discount Coupons)

Источник

#подборки

24 авг 2022
0

Уже немного знаете HTML? Тогда го в веб-разработку.

Кадр: сериал «Доктор Кто»

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

Веб-разработчик в «Аспро». В 2012-м увлёкся программированием. После армии пребывал в поисках себя, но, посмотрев фильм «Социальная сеть», решил, что хочет профессионально заниматься разработкой сайтов. Первый сайт запустил в 2015 году для бизнеса родителей, а через год создал свой первый интернет-магазин.

С 2019-го был фрилансером и жил на доходы со своих сайтов. Прошёл онлайн-курсы и с 2021-го работает веб-разработчиком в «Аспро».

В ближайших планах — освоить React и Node.js, а также полностью перейти на бэкенд-разработку

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

Основа основ — HTML. Но давайте предположим, что вы уже освоили его на приемлемом уровне и можете заниматься несложной вёрсткой страниц. Куда двигаться дальше?

Самое время погрузиться во фронтенд: создавать красивую динамику с помощью JavaScript и более сложные элементы вёрстки на CSS. Ну а под конец заглянуть «под капот» сайтов — в увлекательный мир PHP.

Скриншот: Skillbox Media

Хорошая точка входа в язык. Ресурс learn.javascript.ru — самый доступный инструмент для начального погружения в JavaScript. Это бесплатный онлайн-курс от проекта javascript.ru, в нём вы получите необходимую базу для дальнейшего изучения языка.

После прохождения каждой темы вы сможете выполнять задания — кодить и закреплять пройденный материал. После выполнения можно посмотреть ответы и провести работу над ошибками.

Изображение: издательство «Питер»

Перевод с английского: Е. Матвеев.

Издательство: «Питер». 2019 год, 336 с.

Оригинальное название: You Don’t Know JS: this & Object Prototypes.

«Вы не знаете JS» — серия из шести книг и мастрид для любого программиста на JavaScript. Подойдёт для более опытных веб-разработчиков, поскольку даёт глубокое понимание языка. Если вы уверенно владеете основами JS, то спокойно начинайте с «Замыканий и объектов».

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

Если вы не слишком уверенно знаете основы языка, а книга покажется сложной, то для начала прочитайте книгу «Вы не знаете JS. Типы и грамматические конструкции». После чтения вы сможете перейти к сложным темам, таким как объекты и асинхронность.

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

Изображение: издательство «Символ-Плюс»

Перевод с английского: А. Киселёв.

Издательство: «Символ-Плюс». 2011 год, 272 с.

Оригинальное название: JavaScript. Templates.

«Фабрика», «Декоратор», «Единственный объект» — шаблоны JavaScript. Об их практической пользе и устройстве рассказывает Стоян Стефанов, ведущий программист Yahoo. Хотя эта книга вышла более 10 лет назад, это отличный концентрат знаний по JS.

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

Изображение: издательство «Питер»

Перевод с английского: Н. Вильчинский.

Издательство: «Питер». 2017 год, 272 с.

Оригинальное название: Responsive Web Design with HTML5 and CSS3.

Главное отличие HTML5 и CSS3 от предыдущих версий — возможность подстраивать ширину страниц под размеры любых устройств. Ведь красивый сайт на десктопе будет неудобно смотреться на мобильном телефоне. Здесь на сцену выходит адаптивный дизайн. Собственно, эта книга — пособие для веб-разработчиков о том, как сделать вёрстку удобной и работающей на устройствах с разным разрешением экрана. Думаю, не стоит объяснять, почему это так важно сейчас.

Изображение: издательство «Питер»

Перевод с английского: С. Черников.

Издательство: «Питер». 2021 год, 496 с.

Оригинальное название: CSS in Depth.

CSS обычно вызывает трудности у начинающих программистов. Хорошо, что есть «CSS для профи» — подробное руководство по превращению кода в воплощение мечты дизайнера. Здесь описана теория каскадности и наследования, библиотеки шаблонов, сказано немного об адаптивном дизайне.

Скриншот: Skillbox Media

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

Изображение: издательство «Питер»

Перевод с английского: Е. Матвеев.

Издательство: «Питер». 2021 год, 544 с.

Оригинальное название: Programming PHP.

Книга отлично подойдёт и для начинающих веб-разработчиков, и для более продвинутых ребят. В ней есть рекомендации по разработке в целом, а основы языка объясняются практически на пальцах. Главное требование к читателю — опыт работы с HTML.

Изображение: издательство BHV

Издательство: BHV. 2017 год, 1088 с.

Вероятно, самое актуальное пособие по PHP на русском языке. Книга регулярно переиздаётся и дополняется. Её можно сравнить с чейнджлогом. Особое внимание авторы уделяют рабочей среде — протоколам, подходам к разработке, работе с библиотеками и базами данных. И не забываем про объектно-ориентированное программирование — без него сложно разработать крупный проект. В книге вы получите все базовые знания по ООП на PHP. Словом, настольная книга для бэкэндера.

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

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

Научитесь: Профессия Веб-разработчик
Узнать больше

Источник

От нуля до героя веб-разработки.

Эта статья предназначена для людей, которые хотят начать веб-разработку с изучения HTML, CSS и JavaScript, прежде чем переходить к более сложным темам, таким как React и NodeJS.

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

В конце этой статьи я дам несколько ссылок, если вы хотите перейти к более сложным темам.

Что такое HTML

HTML — это аббревиатура от языка гипертекстовой разметки, который является стандартом для создания веб-страниц. HTML описывает структуру веб-страницы, где CSS определяет стиль или внешний вид, а JavaScript добавляет интерактивности веб-странице.

Элементы HTML сообщают веб-браузеру, чего ожидать. Например: «Это абзац. Это стол, а это образ». Мы делаем это с помощью тегов и атрибутов.

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

В этом примере <p> и </p> — это теги, а This is a paragraph — это контент. Обратите внимание, что содержимое между тегами может быть и самим новым элементом. Мы называем это вложением.

Очень простой HTML-документ содержит шаблонный код. Давайте посмотрим на пример и проверим, что все это такое и на что обращать внимание.

Первая строка является одним из таких исключений. <!DOCTYPE html> сообщает браузеру, что он просматривает документ HTML5. У него нет конечного тега.

если вы внимательно посмотрите на документ, в нашем теге <html>, который определяет начало нашей страницы, вы можете увидеть, что у нас есть <head> и <body>.

<head> документа HTML определяет метаданные нашей веб-страницы. Большая часть кода внутри <head> не видна пользователю. Однако <title> виден пользователю. Google Chrome, Microsoft Edge, Firefox и все другие браузеры используют этот заголовок на вкладках.

Затем элемент <body> определяет каждый визуальный элемент нашей страницы. В нем мы определяем большой заголовок с <h1> вместе с простым абзацем с использованием <p> .

Примечание: все элементы от начального до конечного тега и все, что находится между ними, является элементом.

Запуск веб-страницы

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

Хорошими вариантами для веб-разработки являются Visual Studio Code и Notepad++. На данный момент я использую WebStorm со студенческой лицензией, но это может быть слишком для простых проектов, подобных этому.

Установите один из них и создайте новый файл с именем index.html.

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

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

Атрибуты

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

Атрибуты — это дополнительные свойства, которыми может обладать элемент. Это могут быть style, href, alt и многие другие в зависимости от элемента. Одним из наиболее распространенных примеров атрибутов является тег привязки.

Тег <a> используется для гиперссылок. При нажатии на нее вы будете перемещены на другую веб-страницу, например https://google.com . Мы можем добавить эту информацию, используя атрибут href.

Добавьте эту строку кода в свой элемент body и перезагрузите страницу. Теперь вы должны увидеть ссылку, которая переместит вас в Google.

Вы также можете добавить стиль к элементам. Здесь используется атрибут style с некоторым кодом CSS между кавычками.

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

Проверка элементов

Во всех основных веб-браузерах есть инструменты, которые разработчики могут использовать, когда сталкиваются с неожиданным поведением или ошибками. Эти инструменты называются инструментами разработчика, и к ним можно получить доступ, щелкнув правой кнопкой мыши веб-страницу и выбрав «Проверить элемент» или просто «Проверить». Распространенным ярлыком является нажатие F12 на клавиатуре.

Первая вкладка «Элементы» полезна для разработки внешнего интерфейса веб-страницы. Вкладка «Консоль» в основном используется для разработки JavaScript и бэкэнда. Остальные вкладки нам пока не нужны и связаны с сетями и производительностью.

На вкладке элементов мы видим представление нашей HTML-структуры. Это называется DOM или объектная модель документа. Эта тема будет чаще всплывать при разговоре о JavaScript.

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

Вы не можете вносить постоянные изменения с помощью инструментов разработчика, но можете вносить временные изменения. Попробуйте изменить некоторые значения CSS или удалить/изменить элемент в DOM. Если вы перезагрузите страницу, она снова станет нормальной.

Контейнеры

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

Слева у нас есть простой макет веб-страницы.

Верхняя панель, боковая панель и основной квадрат содержимого.

Все они находятся на одной веб-странице, в нашем элементе <body>. Но они разные. Итак, мы размещаем несколько элементов в <body>, но какой элемент мы должны добавить, чтобы разделить эти части контента?

Элемент <div> предназначен для этой работы. Элемент div — это невидимый элемент, стиль которого можно использовать для создания контейнеров.Элемент div определяет раздел или раздел веб-страницы.

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

div имеет значение для своего display , мы можем проверить это, используя элемент проверки. Значение по умолчанию — block, что означает, что создается блок, охватывающий всю ширину родительского элемента. Наша верхняя панель должна иметь это, но наша боковая панель и контент могут быть лучше, если они будут inline или inline-block.

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

Как вы могли заметить, элементы не очень точно выровнены. Они оставляют пробелы. Это связано со значениями по умолчанию margin и padding наших элементов <p>, которые находятся внутри наших элементов <div>. Это означает, что нам, возможно, потребуется немного углубиться в стилизацию наших элементов с помощью CSS.

Стилизация веб-страницы с помощью CSS

Мы уже использовали CSS в нашем коде, используя атрибут style. Но, как вы можете видеть, очень скоро это может стать очень уродливым, если вы будете писать весь свой стиль «встроенным», используя атрибут style. Вот почему мы можем захотеть перейти к файлам CSS.

Если вы используете IDE, например Visual Studio Code, вы можете добавить файл в ту же папку, что и ваш HTML-файл, с именем style.css. В этом файле мы можем определить стили, которые применяются ко всем элементам одного и того же типа, или мы можем применить их к определенным элементам, используя classes и id.

В head HTML-файла добавьте следующую строку.

Это соединяет два файла вместе, поэтому мы можем использовать стили из таблицы стилей в нашем файле HTML. Теперь давайте взглянем на базовый CSS и на то, как использовать его на вашей веб-странице.

Примечание. Вместо отдельного файла CSS можно использовать элемент style в head . Точно так же вы пишете CSS в элементе style и в отдельном файле.

Базовый синтаксис CSS

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

## CSS 
.h1 {...} /* This is applied to a class called "h1" */
h1 {...}  /* This is applied to the h1 element */
#h1 {...} /* This is applied to an element with "h1" as id */
## HTML ##
<h1 class="h1">This is with a class</h1>
<h1>This is without a class or id</h1>
<h1 id="h1">This is with an id</h1>
## CSS syntax
element {
    key: value;
    key: value;
}

CSS использует сокращение с использованием точки или хэштега для обозначения классов или идентификаторов. Вместо тегов мы используем скобки {}, чтобы открывать и закрывать то, что мы хотим между ними.

/* Sample styled class */
.large-red-text {
    font-size: 32px;
    font-weight: bold;
    color: red;
}

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

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

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

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

Отступы, поля и границы

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

Квадрат в центре — это элемент, в данном случае это один из тегов <p>, на котором я удалил margin и padding. Если есть значения, они будут отображаться здесь.

Отступ находится в элементе.
Поля находятся за пределами элемента.
Граница находится между отступом и полем.

Вы можете проверить различные свойства отступов, полей и границ, используя border-color, background-color, padding, margin вместе с border-width, чтобы увидеть, как они реагируют на другие элементы и на самих себя.

Позиционирование

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

Для позиционирования нам нужно знать атрибут CSS position. Может иметь одно из 5 значений: static relative fixed absolute sticky, где static — значение по умолчанию.

Относительно располагается относительно своего нормального положения.
Fixed позиционируется относительно области просмотра, что означает, что он всегда остается на одном и том же месте, даже если страница прокручивается. Свойства top, right, bottom и left используются для позиционирования элемента.
Абсолютный позиционируется относительно ближайшего позиционированного предка (а не позиционируется относительно окна просмотра, как фиксированный).
Sticky позиционируется в зависимости от положения прокрутки пользователя. Липкий элемент переключается между relative и fixed в зависимости от положения прокрутки. Он позиционируется относительно до тех пор, пока в окне просмотра не встретится заданное положение смещения, после чего он «застревает» на месте (например, position: fixed).

Взято из W3Schools.

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

Это создаст div в правом нижнем углу веб-страницы. Попробуйте изменить размер страницы, она останется в углу. Он остается там из-за position: fixed . Мы также используем bottom и right, чтобы было немного места от угла. Мы могли бы также использовать margin для этого.

Если вы измените position на absolute , произойдет то же самое, но почему? Это связано с прокруткой. Элемент fixed останется на экране, если вы прокрутите его вниз, элемент absolute исчезнет с экрана. Вы можете проверить это, если добавите height: 1000px; к другому элементу, чтобы можно было прокручивать.

Цвета

Цвета являются важной частью каждого веб-сайта. Кто бы узнал банки Coca-Cola, если бы они не были такими яркими и красными? Наверное, любой, но все же цвета — огромная часть создания сайтов.

До сих пор мы использовали такие цвета, как red , blue и так далее, но есть целый список, который вы можете найти здесь. Но где специфический красный цвет голландского флага? Его нет. Вот почему у нас есть больше способов добавить наши собственные цвета, используя HEX-коды и другие значения.

Самый простой способ добавить другой цвет — использовать шестнадцатеричные коды. Шестнадцатеричные «числа» идут от 0 до F, 16 различных значений. если мы добавим два рядом друг с другом, например FF, у нас будет 255. Это именно то, из чего состоят цвета в классическом шестнадцатеричном формате RGB. Три значения от 0 до 255 в шестнадцатеричном формате.

Помните: поместите код CSS в head или таблицу стилей!

Мы также используем несколько классов для стилизации этих элементов! Просто добавьте больше слов в атрибут class и добавьте их в свою таблицу стилей. Это отличный способ разделить стили на более мелкие повторно используемые части.

Но это не единственный способ добавить цвет на веб-страницу. Мы также можем использовать HSL и полные значения RGBA. Об этом можно прочитать на этой странице. За время работы разработчиком я чаще всех остальных сталкивался с шестнадцатеричной системой счисления. При необходимости его также очень легко преобразовать в шестнадцатеричный формат.

Добавление интерактивности на вашу веб-страницу с помощью JavaScript

Теперь мы собираемся перейти к самой сложной части. Интерактивность. Наша веб-страница может выглядеть не так, как надо, но если вы все сделали правильно, теперь у вас есть основы, и вы сможете создать что-то хорошее. Мы также рассмотрели один из лучших ресурсов для получения знаний о веб-разработке: W3Schools.

Интерактивность веб-страниц реализована на JavaScript. JavaScript, или сокращенно JS, — это язык сценариев. Он предлагает гораздо больше функциональных возможностей, чем HTML и CSS вместе взятые, например, взаимодействие с кнопками и манипулирование DOM.

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

Пишем свой первый код

JavaScript, как и CSS, может выполняться в самом файле HTML или в другом файле, файле .js. В HTML у нас есть тег <script>. Между тегами <script> вы можете написать код JS.

Эта строка кода будет «печатать» или записывать текст в консоль в инструментах разработчика, которые мы видели раньше. Вы можете «логировать» что угодно, от определенных типов данных, таких как объекты и массивы, до простых строк, таких как эта, или чисел.

Мы вызываем функцию log, которая находится внутри объекта console. Мы используем точечную нотацию для доступа к вложенным данным или объектам.

object.subObject.subSubObject.func()

Мы вызываем функцию, используя скобки (). В этих скобках мы помещаем наши параметры. О функциях мы поговорим позже, но это просто для того, чтобы вы знали, что происходит с console.log .

Если вы хотите запускать код из внешнего файла, а не внутри HTML, вам нужно создать файл JS и импортировать его в HTML с помощью тега script.

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

Переменные

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

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

Переменная может быть любым допустимым типом данных. В JS самыми основными типами данных являются числа и строки. Строки — это фрагменты текста, заключенные в кавычки. Числа не должны быть окружены чем-либо.

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

Переменные создаются с помощью let, var или const. Разница между let и var невелика, поэтому рекомендуется использовать let. Отличие от const в том, что это значение нельзя изменить. Это константа. Но с этого момента мы будем использовать только let.

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

Мы используем нечто, называемое объединением строк между скобками функции console.log . По сути, это означает объединение двух строк текста в одну строку.

"Hello " + "Steven" = "Hello Steven"

Условные операторы

Условные операторы являются неотъемлемой частью программирования. Это позволяет нам отображать несколько путей, по которым может следовать наш код. Например:

Мы объявляем возраст в переменной с именем age. Мы проверяем, является ли возраст больше или равен 18, используя >= . Если оно не больше или равно 18, мы используем else, чтобы перехватить все возможности, которые еще не перехвачены.

Условные операторы состоят из трех частей. Требуется только первая часть, оператор if. Если вам нужны более конкретные тесты, вы можете объединить несколько операторов, используя else if . Операторы Else if выполняют определенную проверку, например if . Операторы Else просто перехватывают все другие возможности.

Вы можете посмотреть this Gist для более подробного объяснения ловушек условных операторов и того, на что следует обратить внимание. Все, от порядка проверок до использования нескольких проверок с использованием else if .

Мы не говорили о что заключать в скобки оператора if. Нам нужно поместить в него оператор, который разрешается в логическое значение, поэтому либо true, либо false.

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

Петли

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

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

Цикл, который вам, скорее всего, будет показан, — это цикл while. Цикл while будет выполнять блок кода до тех пор, пока не будет выполнено условие. Это условие вам придется запрограммировать самостоятельно, иначе вы получите бесконечный цикл.

Типичным примером является простой счетчик. Если вы хотите, вы можете добавить console.log в тело цикла, чтобы увидеть его в действии. Мы определяем две переменные вне цикла и меняем их внутри него. Логическое значение loop останется прежним, пока мы его не изменим.

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

Синтаксис выглядит более продвинутым, но его нетрудно понять. Мы устанавливаем переменную, добавляем условие и добавляем наше значение приращения. В этом случае условие должно быть true, когда цикл должен работать. Мы используем «индекс меньше, чем длина нашей строки».

for (
    let i = 0; // set initial number using a variable name
    i < str.length; // Set our condition.
    i++ // Set our incrementer.
)

Вот еще несколько допустимых примеров циклов for и while.

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

Функции

Функции — это способ разделения блоков кода и их повторного использования, возможно, с переменными, которые вы можете изменить. Синтаксис прост:

function funcName(parameters) {
    // Function body
}
// Calling the function
funcName(6)

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

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

Больше типов переменных

Мы уже рассмотрели много кода. И может показаться, что это уже тяжело. Будет еще веселее. Я чуть не забыл включить это, но это очень важно знать, когда вы становитесь разработчиком JavaScript. Массивы, объекты, null и undefined.

Иногда JavaScript работает загадочным образом. Но есть некоторые типы переменных, с которыми мы можем столкнуться случайно. Возможно, вы уже видели один из них. Null и undefined — это типы переменных, которые кажутся похожими. Одно — это отсутствие значения, а другое — полное отсутствие переменной. вот простое изображение, чтобы показать вам.

Вот небольшой фрагмент кода, чтобы показать вам.

Значение undefined — это то, что вы вряд ли захотите обнаружить. Это может означать, что ваш код находится не в том месте и что переменная еще не создана, или это может означать, что у вас опечатка. Мы не будем углубляться в это, но было бы полезно узнать разницу между null и undefined .

Далее идут массивы. Массивы — это, по сути, списки, которые могут содержать значения. Эти значения можно запросить с помощью индекса. Индекс — это число от 0 до конца списка. Давайте покажем вам код

Массив создается с помощью квадратных скобок [ ... ] . Внутри него у нас есть значения, разделенные запятыми. Значения могут быть любыми: функциями, числами, логическими значениями, строками, объектами и другими массивами (так называемыми вложенными массивами).

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

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

Однако мы могли бы захотеть иметь лучший способ получения дней вместо чисел от 0 до 6. Для этого мы могли бы использовать объекты.

Объекты в некотором роде являются более продвинутыми списками. Они написаны в JSON, нотации объектов JavaScript. Я написал статью о JSON, которую вы можете найти здесь, но мы все же рассмотрим основы в этой статье.

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

Вот наша повестка дня в форме объекта вместо вложенного массива. Использование массивов на каждый день.

Вы также можете использовать вложенные объекты для частей каждого дня.

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

Это все для этих продвинутых типов, давайте продолжим.

Соединение HTML и JavaScript

Соединение HTML и JavaScript можно осуществить несколькими способами. Мы уже рассмотрели, как подключить файлы, но пока не знаем, как использовать функции JavaScript на нашей веб-странице.

В HTML у нас есть button элементов, которые могут иметь атрибут onClick. Вероятно, это самый простой способ подключить функции JavaScript к вашей HTML-странице. Вы можете вызывать только функции таким образом, но с функциями вы можете делать все что угодно.

Но при этом мы не можем манипулировать DOM так, как, вероятно, хотим. Мы можем захотеть показать результаты функции или изменить некоторые переменные, которые мы хотим использовать внутри нашей функции.

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

В JavaScript у нас есть функция document.getElementById. Эта функция вернет элемент HTML, если он имеет идентификатор, который вы передаете в качестве параметра. Это одна из причин, по которой атрибут ID всегда должен быть уникальным.

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

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

Во-первых, мы определяем наши элементы в HTML и присваиваем им уникальные идентификаторы, используя атрибут id. Мы создаем два поля ввода с type="number" , таким образом можно вводить только числа. Мы также добавляем кнопку и элемент абзаца, чтобы показать ответ суммы обоих значений.

В элементе script мы определяем наши переменные, чтобы мы могли получить доступ к нашим полям. Это также может быть сделано внутри функции. Мы получаем поля, используя getElementById.

В созданной нами функции add мы получаем элемент абзаца и получаем ответ. Поскольку value возвращает строку, нам нужно привести значения к числам.

Наконец, мы устанавливаем innerHTML абзаца на ответ. Поскольку ответ является числом, нам нужно снова преобразовать его в строку.

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

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

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

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

Вывод

Веб-разработка может показаться сложной, но если вы следовали этому курсу, вы уже на пути к тому, чтобы стать веб-разработчиком. Я тоже начал с этого, изучив основы трех «столпов» веб-разработки. Javascript, CSS и HTML.

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

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

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

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

Статья о jQuery, простой в использовании библиотеке для работы с DOM.
Веб-сайт Node Package Manager для бэкенд-разработки с использованием NodeJS.
Введение в Python, статья для изучения программирования на Python, если вы хотите узнать больше о программировании за пределами Интернета.
Сайт Bootstrap, самый известный фреймворк для оформления веб-сайтов.
Подробнее об объекте console в JavaScript.
Создание веб-сайтов с использованием GatsbyJS, фреймворка, использующего React.
Создание сайтов с помощью NextJS, мой любимый фреймворк.
Анонимные функции в JavaScript.
Все разные циклы JavaScript.
Создание бота Discord с помощью JavaScript с использованием NodeJS.

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

Источник

дорожная карта

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

@english_forprogrammers – Английский для разработчиков. Прокачайте свой уровень владения языком.

В этой статье подробно описываются необходимые навыки и соответствующие учебные пособия для их эффективного освоения. Иллюстрированное руководство, предоставленное Камраном Ахмедом, может быть найдено на roadmaps.sh или в этом репозитории на GitHub. Работа Камрана превосходна, поэтому обязательно поделитесь этим репозиторием и подпишитесь на его рассылку, чтобы поддержать его труды. Пусть вас не пугает размер дорожной карты. Она может показаться огромной, но я разберу её на части, чтобы вам было прощё в её освоении.

Эта статья будет разделена на следующие разделы:

Важные теоретические аспекты: Темы в программировании, которые должен знать каждый разработчик.
Введение в программирование: С чего начать, если вы совершенно новичок в программировании?
Frontend-разработка: Узнайте, как создавать пользовательские интерфейсы (UI).
Backend-разработка: Узнайте, как создавать API и писать серверный код.
Изучение devOps: Узнайте о методологии автоматизации технологических процессов сборки, настройки и развёртывания программного обеспечения.
Углубленный курс JavaScript и написания кода: Изучите язык программирования JS со всех сторон.
Книги по программной инженерии: Эти книги, как я обнаружил, полезны для улучшения общего понимания программирования и оказывают положительное влияние на работу.
Советы по трудоустройству и подведение итогов: Несколько заключительных кратких советов о том, как искать работу и продолжать свой рост в качестве разработчика.

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

1. Важные теоретические аспекты

Мы начнем с навыков, которые должен освоить каждый разработчик. Они будут использоваться на всех этапах — Frontend, Backend или DevOps.

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

Командная строка

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

Learn Enough Command Line to Be Dangerous – отличная бесплатная книга, с помощью который вы сможете освоить командную строку
Linux Command Line Basics
The Linux Command Line: A Complete Introduction

Выбор IDE

VS Code – лучший выбор для веб-разработчиков (я лично пользуюсь именно этим редактором кода). Это бесплатное приложение с открытым исходным кодом и множеством плагинов, которые смогут облегчить процесс программирования. Тем не менее, есть много других редакторов кода, таких как Atom, WebStorm или Vim.

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

Git и контроль версий

Git – это инструмент, используемый для сохранения кода и создания его различных версий, позволяющий вам совместно работать с другими разработчиками. Лучшим местом для хранения кода и совместной работы над программным обеспечением с открытым исходным кодом является GitHub.

Learn Git from GitHub
Ranked Git tutorials
Git Complete: The definitive, step-by-step guide to Git

Основы веб-технологий

HTTP/ HTTPS
SSH
Character Encodings
Model-View-Controller (MVC)
REST

2. Введение в программирование

Прежде чем вы погрузитесь в какое-либо направление программирования, вы должны знать некоторые общие аспекты. Начинающим разработчикам я настоятельно рекомендую изучать JavaScript в качестве вашего первого языка. JS может использоваться как для frontend-, так и для backend-разработчиков, что означает, что вы можете стать full stack разработчиком, имея возможность сосредоточиться на освоении только одного языка. Преимущества JavaScript заключаются в следующем:

JavaScript является лёгким для изучения языком
JavaScript необходим для создания веб-приложений
JavaScript можно использовать как в frontend-, так и в backend-части, что позволяет писать полнофункциональные приложения на одном языке
Существует множество вакансий для разработчиков JavaScript

Если вы знаете, что хотите работать либо только с Data Science, либо исключительно с backend-частью, изучение Python будет лучшим вариантом.

Существует множество высококачественных бесплатных вариантов для начала изучения основ программирования. freeCodeCamp и Codecademy – отличный выбор.

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

Если вы хотите ускорить процесс, вот несколько отличных платных курсов, которые помогут вам быстро продвинуться вперед:

Modern JavaScript From The Beginning
The Modern JavaScript Bootcamp (2023)
Advanced Javascript

3. Frontend-разработка

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

Frontend дорожная карта

Популярные библиотеки, которые будут вам полезны: React, Angular и Vue (все они написаны на JavaScript). Полное знание JavaScript необходимо для повышения уровня и получения необходимых навыков для создания сложных приложений. Как только у вас будет прочная основа в JavaScript, вам следует погрузиться в изучение HTML и CSS. HTML – язык гипертекстовой разметки (скелет сайта); CSS – каскадная таблица стилей (стилизация сайта).

Самый полный курс по веб-разработке. Начните с HTML и CSS, изучите JavaScript, и, в конечном итоге, создайте full stack веб-приложение.

HTML и CSS

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

HTML and CSS for Absolute Beginners
Build Responsive Real World Websites with HTML5 and CSS3
CSS: The Complete Guide (Advanced CSS)

UI-библиотеки

В наше время, при разработке пользовательского интерфейса, постоянно используются 3 библиотеки, написанные на JS: React, Vue и Angular. Лучше выучить одну из них, нежели пытаться освоить все три. Как мне кажется, самой популярной из них является React.

Источники для React:

The Official React Introduction
React — The Complete Guide (incl. Hooks, React Router, Redux)
Modern React with Redux
React for Beginners
Advanced React + GraphQL

Источники для Vue:

Vue School
The Official Vue Introduction
Vue JS 2 — The Complete Guide (incl. Vue Router & Vuex)
The Ultimate Vue JS 2 Developers Course
Vue JS Essentials with Vuex and Vue Router

Источники для Angular:

Angular 8— The Complete Guide
The Complete Angular Course: Beginner to Advanced

4. Backend-разработка

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

Backend дорожная карта

Ваш сервер может быть написан на любом языке программирования. Моя рекомендация – начать с Node / JavaScript, поскольку они относительно просты в освоении, но в то же время невероятно мощны. Кроме того, вы сможете легче переходить между frontend-ом и backend-ом, поскольку для каждого из них вы будете использовать один и тот же язык. Я также подробно расскажу о других возможных языках для изучения backend — Python, Go, Ruby.

Работа с базами данных является основой работы backend-разработчиков. Несмотря на то, что NoSQL стал более популярным, SQL по-прежнему остается наиболее часто используемым типом баз данных, так что его необходимо изучать.

Node.js

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

The Complete Node.js Developer Course (3rd Edition)
NodeJS — The Complete Guide (incl. MVC, REST APIs, GraphQL)
Learn Node

Базы данных

База данных – это постоянное хранилище данных вашего приложения. Обычно серверная часть выполняет запрос к базе данных во время вызова API. Существует 2 распространенных типа баз данных — SQL и NoSQL.

PostgreSQL / MySQL

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

GraphQL

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

The Modern GraphQL Bootcamp (Advanced Node.js and Apollo)
GraphQL with React: The Complete Developers Guide

MongoDB

MongoDB – это документоориентированная система управления базами данных, не требующая описания схемы таблиц (NoSQL). Считается одним из классических примеров NoSQL-систем, использует JSON-подобные документы и схему базы данных. Написана на языке C++.

Python

Python прост для начинающих. Он также широко используется технологическими гигантами и стартапами для backend-разработки, Data Science и написания скриптов.

Complete Python Bootcamp: Go from zero to hero in Python 3
Python and Django Full Stack Web Developer Bootcamp

Golang

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

Complete Go Bootcamp: Go from zero to hero (Golang)
Web Development with Google’s Go Programming Language

Ruby

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

The Complete Ruby on Rails Developer Course

5. Изучение devOps

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

Вот некоторые темы в DevOps, которые стоит изучить:

Linux: Linux используется более чем на 67% серверов и, скорее всего, является тем, что вы бы использовали в качестве инженера DevOps.
Безопасность: Убедитесь, что все ваше облако защищено и зашифровано. Также настройте API таким образом, чтобы весь контент обслуживался по протоколу HTTPS и не подвергался атакам.
Командная строка / терминалы: Мы говорили о командных строках в первом разделе, но она ещё более важна для инженера DevOps. Вы должны досконально понимать, как она работает.
Автоматическое тестирование: DevOps настраивает систему автоматического тестирования таким образом, чтобы весь код был тщательно проверен и уменьшал вероятность появления ошибок или регрессий.
Контейнеры: Контейнеры являются основной частью инфраструктуры, и большинство стартапов и технологических гигантов в той или иной форме используют Docker и /или Kubernetes. Контейнер гарантирует, что ваш код всегда выполняется в чистой и воспроизводимой среде.
Поставщики облачных услуг: Узнайте, как управлять серверами в облаке с помощью одного из популярных поставщиков, таких как AWS, GCP или Azure.

6. Углубленный курс JavaScript и написания кода

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

You Don’t Know JavaScript (YDKJS) – Это просто лучшая книга по JavaScript. Если вы полностью разберетесь с ней, вы будете знать весь JS. Прочитайте его бесплатно на GitHub.

TypeScript – Это не является обязательным требованием для начинающих (если только вы не используете Angular), но внедрение TypeScript быстро растёт и поглощает мир JS. Многие думают, что это будущее JavaScript.

Data Structures in JavaScript – научитесь создавать отличные структуры данных с помощью этого видеоряда.

Eloquent JavaScript – Еще одна любимая книга разработчиков JavaScript. Она охватывает более широкий круг тем, чем YDKJS. Прочитайте её бесплатно онлайн или купите её физическую копию на Amazon.

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

7. Книги по программной инженерии

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

Clean Code by Robert C Martin
The Pragmatic Programmer by Andrew Hunt & David Thomas
The Effective Engineer by Edmund Lau
Cracking the Coding Interview by Gayle Laakmann McDowell
The Art of Computer Programming by Donald Knuth

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

The Lean Startup by Eric Ries
Zero to One by Peter Thiel
Hooked by Nir Eyal
Traction by Gabriel Weinberg and Justin Mares
The Hard Thing About Hard Things by Ben Horowitz

8. Советы по трудоустройству и подведение итогов

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

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

Несколько советов:

Сосредоточьтесь только на нескольких навыках: например, JavaScript, React, Node. Не пытайтесь выучить все — React, Vue, Angular, jQuery, Backbone и т.д. Старайтесь как можно лучше изучать минимально необходимые языки / библиотеки. Идите в глубь, а не в ширь.
Создайте веб-сайт с портфолио, чтобы работодатели точно обратили на вас внимание.
Подавайте заявки на как можно большее количество вакансий, если они соответствуют вашему набору навыков. Не сдавайтесь! Это долгий и трудный путь, но он того стоит, если вы увлечены своей профессией.
Подготовьтесь к собеседованиям. Прочитайте некоторые пособия, поищите в интернете вопросы, которые вам могут задать.
Продолжайте создавать проекты. Проекты – это лучший способ научиться и показать, весь свой набор навыков.

Просмотры: 2 165

Источник

Как стать профессиональным веб-разработчиком: практическое руководство

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

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

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

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

Изучите CSS

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

Express

MongoDB

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

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

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

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

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

Изучите jQuery

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

React JS

Angular 1 и 2

Ember JS

Bootstrap

Material

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

Java

C#

Python

JavaScript

Ruby

Что насчёт PHP?

Я много чего изучил, но у меня нет реального опыта

GitHub

Личные проекты

Реальный опыт

У меня есть опыт, помогите мне с работой

Сделайте приличное резюме

Создайте веб-сайт с портфолио

Подготовьтесь для интервью

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

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

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

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

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

Оцените свои реальные возможности

Complete-Web-Developer-Manual

Contents

1. Introduction

2. How The Internet Works

3. History Of The Web

Maps that explain the Internet:

First Webpage in the world:

Optional Videos:

4. HTML 5

Run HTML online:

Install a text editor (Select one):

Tags:

Topics:

Zero to Mastery resources:

Reference websites:

5. Advanced HTML 5

Tags:

Semantic Elements

Topics:

Resources:

6. CSS

Syntax:

How to:

Tools:

Properties:

Selectors:

Text Properties:

Layout Properties:

Box Model:

Sizes:

Topics:

Exercises:

Reference websites:

Website for color check:

Website for fonts download:

7. Advanced CSS

Flexbox:

Properties: