Обучение веб дизайнер с нуля: обучение на веб-дизайнера онлайн — Skillbox

Веб-дизайнер — обучение с нуля, курсы web-дизайна от Geekbrains

История курсанта, который захотел стать дизайнером

‍

Я рос в семье военных: отец, мама, брат, муж сестры работали в силовых структурах. Теперь ещё и я. Не то чтобы у меня не было выбора — меня никто не заставлял и не «пропихивал» на службу. Когда заканчивал 11 класс, бегал с огромными глазами, как и все, думал, что дальше делать и куда идти. Мой отец по специальности инженер-электрик, и раньше я часто ездил к нему на работу, помогал и смотрел, как что работает. Заинтересовался.  

Однажды отец рассказал, что в академии РВСН им. Петра Великого есть энергетическая специальность, и предложил попробовать. Меня никто не заставлял — я подавал документы и в гражданские вузы: МГСУ, МЭСИ, ещё куда-то.

У детей военных, которые служат сейчас, есть хотя бы минимальное понимание происходящего в армии. А мои родители в возрасте, на пенсии, и то, что было во времена их службы, уже неактуально. И они живут тем временем — отец до сих пор убежден в псевдостабильности. Думает, что в армии всё супергуд и не слишком поменялось с его службы. Поэтому получилось, что я поступал в академию, имея устаревшие представления об армии. А когда начал сам в этом котле вариться — разочаровался. Пообщался с офицерами и понял, что немногие работают по своей специальности. Нам прямо говорили — какая должность будет свободна, ту вами и «заткнут». Увидел, как военные уезжают в поля и месяц не видят семью. Многие говорят, что армию испортили деньгами, нередко кого-то подсиживают и всё такое. Не захотел вариться во всём этом. Понял, что не моё, и начал искать себя в другой стезе. Уйти оказалось непросто — в меня вцепились и до сих пор не хотят отпускать.

Я уже закончил академию, работаю по распределению в Тагиле. Военная служба меня не устраивает уже давно: сейчас я на особом режиме, но есть ребята, которые уезжают в поля и две недели их нет дома. И я думаю — оно мне надо? Кажется, нет.

Пытался отчислиться ещё в академии, но у меня ничего не вышло. Наше министерство обороны считает тебя обязанным, если ты учился бесплатно. Хочешь уволиться — плати за обучение. Если ты учишься гражданском университете по целевому направлению, легко можешь написать заявление на отчисление, и тебе скажут: «Ну ок, плати и уходи». А в военке тебе говорят «Будешь платить деньги, но мы тебя все равно не отпустим». Я доучился и вот уже два месяца пытаюсь уволиться, но мне говорят «Подумай, может еще послужишь? А кто будет родину защищать?». В общем, уйти из армии тяжко.

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

Мы были на пятом курсе в академии, жили в общежитии. Нужно сказать, что в военных учреждениях есть служба защиты гостайны (ЗГТ), и в связи с этим личный ноутбук — серьёзная тема. Всё командование знало, что у нас есть ноутбуки, но не подавало виду — выпускной курс, их трогать не надо, им надо дипломы писать. Но я-то был «рецидивист». Мы увольнялись, пытались отчислиться, нам делали мозги. Я уже учился на курсах веб-дизайнера, и офицеры об этом знали.

В один прекрасный момент меня вызывает начальник, говорит: «Будешь увольняться?» Да, говорю. Тут он достает мой ноут — пока меня не было в комнате, они провели обыск — и вызывает офицера из службы ЗГТ. Говорит: «Изымаем, описываем». Понятно, что у нас на ноутах ничего подозрительно не было, но вообще если находят какую-то запрещенную информацию, это грозит последствиями вплоть до уголовки. Было стрёмно.

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

Ещё во время учёбы в академии редко, но были проблемы с просмотром вебинаров. Всё устроено так, что задачу поступают сверху, потом спускаются до курсантов и мы сами между собой решаем, кто их выполняет. Когда ты в кругу сверстников, всё проще. Говоришь: «Ребята, у меня тут курсы, за которые я отдал бабки. Давайте я в следующий раз раз схожу, а сегодня у меня занятие». Все относились с пониманием.

Но был другой случай, как раз после того, как меня перевели на другой поток курсов. Мы уехали на стажировку академии на месяц в Йошкар-Олу, и, естественно, я не мог взять с собой ноутбук. Я тогда уже общался с преподавателем Ильей Полянским, и он посоветовал книги, которые нужно прочитать во время стажировки: «Интерфейс» Алана Купера , «Типографика» Эмиля Рудера, «Новая типографика» Яна Чихольда. В общем, я действовал по собственной программе, а курс нагнал, когда приехал домой.

Как я уже сказал, во время учебы начали общаться с Ильей Полянским — сначала по учебе, потом по работе. Дома у меня было достаточно много свободного времени, и я попросил Илью давать мне дополнительные задания, чтобы подтягивать навыки, которые провисают. Он тогда работал в «Инвитро», и там как раз освободилась вакансия дизайнера. Я поинтересовался, что нужно сделать, чтобы попасть туда, Илья накидал теоретические вопросы, которые надо подтянуть. После этого он начал давать тестовые проекты, которые мы сделали вместе.

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

Когда я выпустился из академии, курсы ещё не закончились. Я поехал в отпуск, и буквально за две недели случилось сразу два очень неприятных для меня события. «Ситимобил» расширили штат, им стало невыгодно работать с удаленщиками, и меня уволили. А в «Инвитро» пришел новый маркетинговый директор. Она сказала, что они больше не работают с частными лицами, а только с компаниями, и сократила весь отдел дизайна. Я остался без работы буквально в течение недели.

Мы с Ильей продолжали общаться, он подкидывал мне сторонние проекты. Один из крупных — компания «ЛеонМед», они занимаются поставками медоборудования. Илья подкинул мне задачу: сделать презентацию нового оборудования для новых клиентов. С этой компанией работаем до сих пор. Ещё немного поработал в «Альфа-Банке» в коммуникационном дизайне. Им не хватало рук, а я был без работы, и мне подкинули несколько проектов по анимации в соцсетях. Ещё как-то делали заказ для Высшей школы экономики, рисовали им баннеры в соцсети для новых программ обучения. С ВШЭ работаем до сих пор.

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

Проблемы на курсе были не только из-за военной академии. Помню, у меня никак не ладилось с фотошопом. Тогда поставил себе челлендж — рисовать по баннеру в день. Потихоньку выросли руки из нужного места, и я начал мониторить вакансии в ВК и на hh.ru. Помню, тогда в ВК написал парень, сказал, что ему нужен дизайнер-стажер для проекта на Тильде. Преподаватель Артур Громадин тогда тоже делал какой-то проект на Тильде, и я работал с ним. На hh.ru я тоже находил какие-то интересные проекты, но был скромен в профессиональном плане, и меня просто не брали. Один фитнес-клуб написал, что постоянной работы нет, но если что-то будет — напишут, и потом пару раз подкидывали работу по баннерам.

Вообще работодатели смотрят не на сертификаты, а что ты реально умеешь. Можно сказать, что проходил где-то стажировку, но это всё условно. С Ильёй недавно разговаривали на эту тему. На формальное образование мало кто смотрит, если ты сам научился — молодец. Сейчас многие студии гонятся за просмотрами и лайками в Instagram, Dribbble и Behance, при этом абсолютно забивают на пользователя. Им не так важно, чтобы продукт был хороший, как то, чтобы дизайн привлек внимание общественности.

Пока живу в Тагиле, но планирую переезжать обратно в Москву и устроиться дизайнером в штат. Сейчас работаю по всем проектам на удалёнке. Когда прилетают правки, бегу исправлять, весь в мыле — мало ли что, может, кому-то срочно надо. Боялся, что по шапке прилетит, пока мне не сказали: «Чувак, это не армия. Здесь все адекватно относятся ко всему». Есть у меня армейский принцип «умри, но сделай». Это не то чтобы плохая установка, но в таком виде она явно гиперболизирована. Наверное, так проявляется профдеформация.

‍

Веб-дизайн с нуля: что читать и где учиться? | Курс «Интро в веб-дизайн» | by Nancy Pong | Курс «Интро в веб-дизайн»

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

Согласно исследованию, проведенному Google в 2012 году, пользователи составляют свое мнение за 50 миллисекунд. Другое исследовании, проведенное Катариной Райнеке и Лейном Харрисом, показало, что долгосрочные суждения мы формируем за 500 миллисекунд — а то и меньше.

Для большинства пользователей первое впечатление становится самым сильным и далее влияет на весь опыт взаимодействия с продуктом и брендом. Если первое впечатление испорчено, невероятно сложно его загладить. Эта первая 1/20 секунды может стоить бизнесу кучу денег.

Возможно, вы сразу подумали: “Сайты, которые мне понравились с первого раза, при ближайшем рассмотрении оказывались не такими уж красивыми” — и это правда.

Оказывается, один из ключевых факторов, который влияет на наше эстетическое суждение — это визуальная сложность и прототипичность дизайна. Это означает, что чем проще ваш дизайн, чем он “знакомее” пользователю — тем лучше.

Рис. 1.0: Менее сложный дизайн на первый взгляд кажется приятнее и красивее.

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

Если дизайн не соответствует ожиданиям пользователей, у них может сложиться негативное первое впечатление — а это исказит их дальнейшие ожидания”

— Хавьер Баргас-Авила, Старший UX-исследователь в отделе UX исследований YouTube

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

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

Рис 1.1: У Gather очень качественные фотографии и крутой бренд-дизайн. Благодаря этому мы, еще не зная деталей, сразу чувствуем: это крутой продукт. Восприятие ценности было бы совсем другим, если бы мы увидели размытые фотки и скучный дизайн — как это часто бывает на Amazon.

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

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

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

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

Техника Apple спроектирована так, что мы с первого взгляда знаем: это высококлассные продукты. Это уже потом мы начнем анализировать конкурентов и сравнивать функции. А на этапе первого впечатления наше восприятие уже определено — бренд дизайном, маркетингом и визуальным дизайном самого продукта.

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

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

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

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

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

Рис 1.3: Используйте иллюстрации, чтобы передать основную идею вашего бренда и наладить контакт с аудиторией.

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

Рис 1.4: Недавний мощный ребрендинг Dropbox здорово добавил бренду узнаваемости. Их новые цвета, типографика и иллюстрации поистине уникальны!

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

Вы можете ускорить пользователей — например, за счет правильного расположения элементов интерфейса, интуитивного лейаута или более удобной формы. Также вы можете порадовать пользователя забавными сообщениями или элементами геймификации (значки и бейджи).

Рис 1.5: Интерфейс MailChimp наполнен позитивными и забавными элементами, которые превращают скучный процесс создания рассылки в праздник.

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

Исследования, проведенные The Design Council и Design Management Institute, доказали, что компании, которые делают ставку на дизайн, успешнее тех, которые игнорируют его важность.

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

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

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

Это услуга, которая сама окупается.

Рис 1.5: A/B тестирование, пользовательские исследования, тепловые карты и другие техники — все это помогает увеличить прибыльность бизнеса, просто за счет внесения необходимых изменений в уже существующую воронку. Скриншоты выше — из моего любимого инструмента hotjar.com.

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

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

Сегодня шестизначная зарплата у UI/UX дизайнера — это нормально, а опытные фрилансеры и консультанты берут за свои услуги от 200 долларов в час.

Согласно отчету Product Design Report, подготовленному InVision в 2016 году, средняя годовая зарплата дизайнера составляет $80,606.

Дизайнеры основывают свои компании, выступают консультантами в стартапах, занимают руководящие позиции (вице президент по дизайну, креативный директор, главный дизайнер — все эти позиции с недавнего времени стали появляться в современных компаниях).

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

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

Продолжение (Глава 2) →

где учится бесплатно и платно

Содержание статьи:

Доброго дня всем читателям моего блога!

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

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

Где учиться новичку

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

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

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

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

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

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

Плюсы и минусы самостоятельного обучения

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

Однако у такого способа есть ряд существенных недостатков

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

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

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

Плюсы и минусы платного обучения

Второй вариант – это платные курсы он-лайн, которые ведут профессиональные веб-дизайнеры в сети.

Сегодня таких предложений в сети можно найти достаточно. Процесс учебы на них строится по следующим принципам:

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

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

Минус такого подхода только один: за него надо платить!

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

Выбираем обучающую программу

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

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

Чтобы не ошибиться в выборе, следует оценивать варианты по нескольким критериям:

• стоимость – дешево хорошо не бывает никогда. Не может грамотный, тщательно продуманный продукт, на создание которого уходит достаточно времени и сил, стоить 20 долларов,
• срок – за месяц веб-дизайнера из вас не сделают, особенно, если вы еще и заняты на основной работе или учебе. Освоение такой профессии требует времени. Хотя, базовые моменты, на которых уже можно будет работать удаленно, получите легко
• количество студентов в группе — чем меньше, тем лучше (это что касается очного обучения). Если группа будет больше 10-15 человек, преподаватель не сможет уделить нужное время каждому ученику. В случае же обучения через личные кабинеты, количество учеников вообще никакой роли не играет
• отзывы учеников – поищите их на форумах или в чатах, где крутятся начинающие дизайнеры. Там вам посоветуют хорошего преподавателя, помогут выбрать направление и просто примут в компанию единомышленников.

Школа Максима Солдаткина

У него интересный подход в предоставлении большого количества БЕСПЛАТНЫХ полезностей. Уже благодаря им можно неплохо повысить свой собственный уровень. А если углубиться в более серьезное обучение, то получить профессию веб-дизайнера станет намного проще.

Бесплатный курс Веб- и UX\UI дизайна забирайте по ссылке.

Как заключение

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

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

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

Мой путь к тому, чтобы стать веб-разработчиком с нуля без степени CS (и чему я научился из…

Сергей Гарсиа

Во-первых, позвольте мне представиться. Меня зовут Сергей Гарсия, я штатный фронтенд-разработчик с 2-летним опытом. В то время я работал фронтенд-разработчиком как в консалтинговой фирме Forbes 500, так и в небольшой компании.

Может показаться, что это не большой опыт, но завершение второго года работы в качестве разработчика было для меня огромной вехой.Это связано с тем, что у меня не было реального опыта веб-разработки — и в целом не так много опыта программирования, кроме некоторого базового обучения C # и Java, которое я получил на нескольких онлайн-курсах. У меня также не было диплома по информатике, так как я получил диплом по управлению ИТ-проектами.

Я никогда не писал о своем опыте, несмотря на всю помощь, которую я получил от замечательных ресурсов, таких как Medium, Stack Overflow и программные субреддиты Reddit. Итак, сегодня я решил это изменить. Сегодня я собираюсь рассказать вам, что пошло правильно, а что нет, так что если вы отправитесь в это путешествие, вам повезет больше, чем мне.

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

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

Итак, без лишних слов, приступим!

Знакомство с основами

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

• JavaScript
• HTML и CSS
• Препроцессоры CSS (Less & Sass)
• Адаптивный дизайн
• AngularJS
• Шаблоны проектирования
• Git
• NodeJS
• Исполнители задач

Вот как это произошло.

Javascript

Я начал свое путешествие с изучения JavaScript через CodeSchool (платно) и Codecademy (бесплатно). Если вы не знаете об этом, это отличные веб-сайты, которые позволяют вам научиться программировать, кодируя код в браузере.

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

Когда я усвоил основы, я приступил к созданию более прочной основы JavaScript, прочитав книгу Хавербеке «Красноречивый Javascript: современное введение в программирование» (бесплатно).

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

Вы также можете при желании изучить jQuery (хотя я действительно не рекомендую изучать его — подробнее об этом позже). Вы можете изучить его, пройдя курс «Попробуйте jQuery» от CodeSchool.

HTML и CSS

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

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

Бонус : Если вы можете достать книгу Джона Дакетта HTML и CSS: Дизайн и создание веб-сайтов , это также отличная отправная точка для изучения HTML и CSS (с небольшим количеством веб-дизайна).У него высокий рейтинг (4,7 балла из 5 на Amazon), он предлагает хорошее введение в мир веб-разработки. Это красивая книга благодаря чистому дизайну с большими буквами и красочными страницами. Я часто возвращаюсь к нему, чтобы просто полюбоваться.

Less / Sass

Для тех, кто не знаком, Less и Sass — это транспиляторы CSS, которые позволяют писать CSS в более элегантной манере. Это позволяет делать вещи, которые обычно не поддерживаются, например, вложение правил CSS. После завершения эти транспиляторы CSS «компилируют» ваш код и преобразуют его в обычный CSS.

В настоящее время существует 2 основных транспилятора CSS: без и Sass . Sass является более популярным, но я обнаружил, что сначала изучить Less проще, в основном потому, что для использования Sass на вашем компьютере также требуется установка Ruby, что мне не нравилось.

Вы можете получить быстрый, но полный обзор Less с помощью онлайн-компилятора Less от WinLess и примеров кода, чтобы увидеть, как ваш код Less превратится в CSS. Вы также можете попробовать Sass в Интернете с помощью SassMeister (хотя здесь нет примеров кода).

Неважно, выучите ли вы сначала Less или Sass. Они очень похожи, поэтому, узнав одно, вы почти сразу узнаете и другое. Вы можете найти отличное быстрое сравнение между Less и Sass в статье Шелби Моулден «Сравнение LESS и SASS».

Адаптивный дизайн

Изначально я узнал об адаптивном дизайне и Bootstrap, используя путь HTML и CSS Codeschool, но недавно я обнаружил, что курс Udacity от Google по основам отзывчивого веб-дизайна фантастически охватывает основы и не только в гораздо более полной манере, чем Codeschool сделала.

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

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

AngularJS

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

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

Затем я приступил к изучению AngularJS через Codeschool. Учитывая мой положительный опыт в курсах JavaScript и CSS, я ожидал не меньше, чем отличный курс. Я был неправ. Курс был провальным с самого начала, поскольку алгоритм, используемый для проверки правильности кода примера, иногда не работал правильно и отмечал ваше явно правильное решение как неправильное. Были даже случаи, когда все, что требовалось для исправления неисправной системы проверки, — это обновление страницы. Что касается содержания курса, то оно тоже было не лучшим.Он хорошо объяснил основные компоненты приложения AngularJS, но ужасно справился с их интеграцией в реальное приложение, оставив у меня гораздо больше вопросов, чем я начал.

После некоторых поисков на форумах я наткнулся на Egghead.io (бесплатный / платный), где мне повезло больше. Материал их курса был намного чище, лаконичнее и полнее, что способствовало гораздо лучшему восприятию. Не говоря уже о том, что помимо курсов у них есть небольшие уроки по 2–5 минут, которые охватывают важные темы.(Например: что такое контроллер? Что такое фильтр? Что такое $ scope?) Это действительно упрощает понимание основ. У них также есть некоторые видео, которые требуют оплаты, но обычно это те, которые охватывают более сложные угловые темы, которые вам не понадобятся позже. Я прошел их курс «Основы AngularJS» и был полностью удовлетворен результатами (а также стал большим поклонником курсов Egghead.io в процессе).

Шаблоны проектирования

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

Я нашел 2 лучших источника, чтобы узнать об этом, — это шаблоны дизайна JavaScript от doFactory и шаблоны дизайна на JavaScript Эдди Османи. Мне показалось, что doFactory намного проще для понимания, в то время как книга Адди Османи была намного более полной.

Chrome DevTools

Chrome — один из самых мощных инструментов для веб-разработчика. Чем раньше вы овладеете им, тем больше времени сможете сэкономить позже. Бесплатный курс Codeschool «Изучите и освоите Chrome DevTools» отлично их знакомит.

Git (Контроль версий)

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

Мне показалось, что бесплатный курс «Попробовать Github» от CodeSchool — это удобный способ начать работу. Обучение Atlassian Git превосходно помогло охватить более сложные доступные команды. Программа Codeschool Git Learning Path также отлично подходит для изучения основ Git.

NodeJS

Не прошло много времени, как я узнал, что базовое понимание NodeJS очень поможет мне в моем стремлении стать веб-разработчиком (подробнее об этом скоро).

Я попробовал курсы Codeschool на Node, но обнаружил, что им действительно не хватает содержания.Я обнаружил, что NodeSchool.io гораздо лучший учитель в понимании основ, и это было весело! Мне понравился практический подход, который он предлагал, который был похож на Codeschool и Codecademy — с дополнительным улучшением, заключающимся в том, что я действительно использовал NodeJS.

Task Runners (Grunt & Gulp)

Grunt и Gulp стали для меня большим сюрпризом, поскольку я понятия не имел, что такие инструменты вообще существуют — но я очень рад, что они есть! По сути, эти средства запуска задач позволяют автоматизировать общие задачи.Например, помните Less / Sass? Обычно вам придется вручную запускать компилятор CSS каждый раз, когда вы вносите в него изменения для компиляции CSS, а затем обновляете браузер. Используя средство запуска задач, вы можете настроить его так, чтобы он следил за вашими файлами Less / Sass на предмет изменений, и, когда он обнаруживает изменение, компилирует ваш CSS и автоматически обновляет браузер. Это очень полезно для сокращения времени разработки.

Сейчас есть 2 основных исполнителя задач: Grunt и Gulp. Хотя они делают одно и то же, они работают по-разному: Grunt намного более подробен и ориентирован на конфигурацию, а Gulp короче для написания и предпочитает код конфигурации.

Знание NodeJS поможет вам лучше писать файлы Grunt и Gulp, поскольку оба работают на NodeJS . Вы можете выбрать, что хотите, но я обнаружил, что Gulp намного проще выучить и написать. Я до сих пор предпочитаю его из-за его минималистичного, но мощного подхода, основанного на конвейере.

Я считаю, что курсы Scotch.io по Grunt и Gulp являются одними из лучших.

Проблемы, с которыми я столкнулся на своей первой работе

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

Должен сказать, над своим первым проектом я очень нервничал. Это включало создание повторно используемых веб-компонентов с помощью HTML, CSS и JavaScript, а также Bootstrap, Sass, Grunt в качестве инструментов. T

Поначалу я обнаружил две самые большие ошибки:

1. Страх неудачи. Поскольку я был новичком, я постоянно боялся, что мой код будет неправильным или плохо сделанным, поэтому я потратил много времени на перепроверку всего и придерживался передовых методов кодирования. Из-за этого я редко пробовал новые творческие решения из-за опасений, что в конце концов это может сработать некорректно. Это фактически лишило меня стремления узнавать что-то новое.
2. Делает что-то, потому что так сказал «Х» человек, который знает лучше меня. Сначала я так много делал. Хотя это не совсем неправильно, но делать что-то определенным образом только потому, что так сказал эксперт «X» — не зная почему, — привело к тому, что я действительно не знал, когда и почему все было сделано именно так.Вскоре я узнал, что из всего есть исключения и что с вы всегда должны знать причину лучших практик.

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

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

Использование AngularJS в реальном проекте также было для меня довольно сложной задачей. Это было главным образом потому, что многое из того, что я делал с ним, я делал, не полностью понимая, почему они произошли. Я думал об этом как о «магии углов».

Мне много раз хотелось знать, как на самом деле работает Angular, но было страшно смотреть на документацию.

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

Другой проблемой, с которой я столкнулся год спустя, было то, насколько быстро продвигается веб-разработка. Я только что освоил AngularJS и Grunt и чувствовал себя гордым и могущественным — и вскоре обнаружил, что Gulp и ReactJS уже не за горами.А через год после их изучения Webpack начал набирать популярность, и мне пришлось изучить это тоже. Как вы понимаете, большая часть меня была разочарована тем, как быстро некоторые из моих знаний устарели. Но вскоре мой коллега просветил меня, рассказав мне кое-что, что навсегда изменило мое восприятие библиотек и фреймворков:

«Библиотеки и фреймворки могут устареть, но предлагаемые ими концепции и решения часто выдерживают испытание временем».

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

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

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

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

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

Часто бывает хорошей идеей создать простой пример приложения Hello World, чтобы вы могли увидеть, что предлагает фреймворк. Тогда можно двигаться дальше. Но обычно вам следует сосредоточиться на том, что лучше всего соответствует потребностям вашего проекта. Поначалу это может быть сложно, но, к счастью, существуют отличные места, такие как Stack Overflow, Medium и Reddit, где вы можете найти полезные обсуждения между фреймворками и выяснить, какие из них лучше всего подходят для ваших конкретных случаев использования.

Идем дальше

В последующие годы я продолжал постоянно улучшать следующие способы

JavaScript

После того, как вы закончите Eloquent JavaScript, довольно легко сказать и почувствовать, что вы освоили JavaScript, но затем приходит You Don Не знаю JS, и он вас полностью разрушает (или, по крайней мере, для меня). Эта серия книг (кстати, бесплатная) была упомянута мне несколько раз несколькими старшими веб-разработчиками в офисе как книга , которую нужно прочитать, и только пока я ее не прочту, я могу сказать, что полностью знаю JavaScript.Они были правы, поскольку страница за страницей мне постоянно приходило в голову, насколько действительно сложным был JavaScript на самом деле, а также многие, многие распространенные ошибки, которые могут возникнуть у неопытных и опытных людей, не имеющих надлежащего понимания JavaScript.

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

• JavaScript, The Better Parts: удивительный доклад Д.Крокфорд, который говорит о самых больших недостатках JavaScript, это «Foot Guns», и о том, как использовать их в качестве сильных сторон.
• Два столпа JavaScript: солидная статья признанного писателя среднего уровня JavaScript Эрика Эллиотта, в котором рассказывается о двух основных столпах JavaScript: прототипическое наследование и функциональное программирование. также известный как ES6), последний и текущий стандарт JavaScript.Статья журнала Smashing Magazine ECMAScript 6 (ES6): Что нового в следующей версии JavaScript — отличный краткий обзор того, что нового в ES6. Вы можете попробовать ES6 в браузере с помощью онлайн-транспилятора Babel.

  CSS

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

  • SMACSS: масштабируемая и модульная архитектура для CSS.Гибкое руководство по разработке малых и больших сайтов.
  • БЭМ: методология, которая помогает создавать компоненты многократного использования и совместное использование кода во внешнем интерфейсе.

  Лично я предпочитаю SMACSS из-за его более понятного вида, но некоторые компании и CSS-фреймворки по-прежнему используют БЭМ, поэтому стоит знать и то, и другое.

  Вам также следует сосредоточиться на производительности вашего CSS. Статья журнала Smashing Magazine «Управление оптимизацией производительности мобильных устройств» и статья HTML5 Rocks «Высокопроизводительная анимация» отлично справились с этой задачей.Быстрое прочтение обеих статей должно дать вам прочную основу.

  JavaScript Bundlers

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

  Двумя крупнейшими игроками на данный момент являются:

  • Browserify: позволяет вам запрашивать модули в браузере, объединяя все ваши зависимости.
  • Webpack: в основном Browserify на стероидах.Сложнее настроить и настроить.

  Мини-курс Scotch.io «Начало работы с Browserify» может дать вам начало работы с browserify, а статья Дэвида Фокса Пауэлла «Почему никто не может написать простой учебник по Webpack?» — отличное и интересное введение в webpack.

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

  ReactJS

  ReactJS быстро набирает популярность и, похоже, не замедляется — до такой степени, что люди спрашивают: «Убивает ли React Angular?»

  Scotch.io Learning React.js: Getting Started and Concepts дает исчерпывающий обзор React. Как только вы разберетесь с этим, продолжите курс Egghead.io по основам React, где вы создадите полностью работающее приложение ReactJS, а затем перенесете его на синтаксис ES6.Вы можете продолжить работу с официальной документацией ReactJS, которая очень хорошо сделана и позволит вам полностью освоить ее.

  Поскольку React — это только представление, настоятельно рекомендуется изучить Redux. На мой взгляд, большинство курсов по Redux немного сложны, но CSS Tricks Повышение уровня с помощью React: Redux действительно обеспечивает отличный баланс между простотой и информативностью при начале работы с Redux.

  Возможно, вы уже слышали о Flux на этом этапе, но если вам интересно, почему вы должны использовать Redux вместо Flux, ознакомьтесь с вопросом о переполнении стека. Зачем использовать Redux вместо Facebook Flux? на что ответил создатель Redux!

  Оглядываясь назад на свои ошибки и то, что я узнал

  Я сделал много ошибок за 2 года изучения веб-разработки.В целом, я думаю, что моей самой большой ошибкой было то, что я не освоил основы, прежде чем перейти к библиотекам и фреймворкам. Думаю, это применимо почти ко всем языкам программирования, но, на мой взгляд, еще больше применимо к JavaScript. Это связано с тем, что во многих отношениях JavaScript является сломанным языком и содержит множество «Foot Guns» (вы должны были слышать об этом, если смотрели доклад Д. Крокфорда о «JavaScript, лучшие части», о котором я упоминал ранее). Они могут сделать жизнь невыносимо трудной, если вы не понимаете их полностью.

  Я вспоминаю, как однажды застрял в проблеме AngularJS с $ scope, на отладку которой у меня ушло 3 дня, и я обнаружил, что это даже не проблема AngularJS, а проблема JavaScript, которую я вызвал сам из-за того, что не понял, как этот работает.

  Clean Code

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

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

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

  jQuery

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

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

  Теперь вы можете подумать: «Так что в этом плохого? В любом случае jQuery не так уж и важен, и, используя его, вы все равно пишете меньше кода, чем если бы вы делали что-то изначально ». Но использование jQuery вместо собственных API не было проблемой. Проблема заключалась в том, что весь мой образ мышления и все решения общих проблем, которые я знал до этого момента, требовали работы jQuery. И это стало огромной проблемой, когда я получил свой первый проект и мне сказали, что jQuery не является зависимостью.

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

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

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

  Курсы

  Что касается курсовых материалов; в то время как многие курсы CodeSchool были выдающимися (ветвь HTML и CSS была особенно фантастической), даже если некоторые из их курсов по фреймворкам не увенчались успехом (AngularJS, BackboneJS и т. д.).

  Я также прошел довольно много курсов Pluralsight, о которых не упомянул, потому что по прошествии всего этого времени я пришел к выводу, что выбор их пути обучения в целом плохая идея и ненадежный .Поскольку их курсы создаются учителями, которые (на мой взгляд) не всегда очень хороши в преподавании, я обнаружил, что качество их курсов сильно колеблется, поскольку их стандарты качества не существуют. У меня были курсы, на которых даже человек, читавший курс, звучал так, как будто он засыпает. И, честно говоря, у меня нет достаточного количества внимания, чтобы продолжать уделять внимание 6–10-часовым курсам, и многие из них длятся так долго, если не дольше.

  Я потратил 80–100 часов на обучение Pluralsight и, честно говоря, хочу вернуть себе значительную часть этого.Не поймите меня неправильно, у меня было несколько замечательных курсов по Pluralsight, но их внимание к количеству, а не к качеству действительно заставило меня зря тратить время. Я мог бы узнать гораздо больше, если бы проходил курсы из лучших источников, таких как Egghead.io и CodeSchool, где они ценят большее качество количества.

  Единственная причина, по которой я мог когда-либо думать о том, чтобы кто-то использовал Pluralsight, — это пройти курс, которого нет на других веб-сайтах, по какой-то более непонятной технологии (например, Installshield или Xamarin), или пройти несколько очень конкретных курсов, которые, как они знают, были очень хорошими. получены и рассмотрены (например, Основы Angular Джона Папы).

  В целом, если вы хотите использовать Pluralsight, убедитесь, что вы посещаете курсы, выбранные кем-то, кто прошел их первым, и которые признаны высококачественными и полезными.

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

  Изучив там пути обучения HTML, CSS и JavaScript, я вижу, что вы легко можете получить основу практически для всего.Не верите мне? Просто посмотрите на их учебные треки и скажите мне, что это не так уж здорово. Конечно, это немного дороговато — 30 долларов в месяц, но, на мой взгляд, оно того стоит. (Я плачу за это прямо сейчас, чтобы изучить WordPress, так как он мне нужен для внештатного проекта, а материал отличный).

  Несколько слов о платных курсах

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

  Да, есть ужасные платные учебные курсы, от которых я бы не советовал, поскольку их ценностное предложение сомнительно (см. Pluralsight), но другие, такие как Egghead.io, CodeSchool и Team Treehouse, предлагают отличную отдачу, несмотря на их относительно дорогая ежемесячная подписка (25-30 долларов в месяц).Кроме того, все они имеют бесплатные 7–15-дневные пробные версии, поэтому вы можете увидеть, какой из них лучше всего подходит для вас.

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

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

  Секрет успеха

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

  • Любите то, что вы делаете. Это просто самая важная характеристика из всех. Если вам не нравится то, что вы делаете (будь то стили CSS или JavaScript), это действительно проявится в том, что вы делаете.Те, кто увлечены своим делом, часто явно выделяются из толпы.
  • Будьте щедры и поделитесь своими знаниями . Очень легко сохранить в секрете найденный вами новый прием CSS / JavaScript, решающий проблемы проекта, но, пожалуйста, не делайте этого. Люди, которые больше всего делятся своими знаниями, часто оказываются наиболее ценными, поскольку их можно поместить в любую команду и значительно улучшить ее качество.
  • Всегда в поиске обновок .Большинство успешных разработчиков, которых я встречал, разделяют эту общую черту. Будь то чтение блогов, проведение много времени в обсуждениях, связанных с программированием, или даже обсуждение того, что нового в веб-разработке, во время обеденных перерывов. Постоянный поиск чего-то нового позволяет лучшим разработчикам всегда быть впереди всех.

  Кратчайший маршрут

  Уф, на написание этой статьи потребовалось время (6 часов и счет). Мы почти закончили! Вы можете спросить: «Хорошо, классная история, но каков самый быстрый путь?» Итак, вот оно.

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

  Javascript

  1. CodeSchool или путь обучения Javascript Treehouse (платный) ИЛИ Курс Codecademy Javascript
  2. Eloquent JavaScript
  3. Вы не знаете JS
  4. JS: The Right Way
  5. Изучите ES6 от Egghead.io

  HTML & CSS

  1. Курс обучения HTML и CSS в CodeSchool или Treehouse (платный) ИЛИ HTML и CSS: дизайн и создание веб-сайтов Джоном Дакетом ИЛИ курс Codecademy по HTML и CSS.
  2. Особенности специфичности CSS с помощью приемов CSS
  3. Изучите макет CSS
  4. SMACSS
  5. 9 основных принципов адаптивного веб-дизайна от Front
  6. Основы адаптивного веб-дизайна от Google на Udacity (возьмите, если вы не использовали обучение на CodeSchool или Treehouse path)
  7. Управление оптимизацией производительности мобильных устройств с помощью Smashing Magazine ИЛИ Оптимизация рендеринга в браузере и оптимизация производительности веб-сайтов с помощью Google на Udacity
  8. Основы Интернета с помощью Google

  Инструменты разработчика

  1. Изучите и освоите инструменты разработки с помощью CodeSchool
  2. Изучите Git с помощью Codecademy и Попробуйте Github от Codeschool
  3. Введение в команды Linux от Smashing Magazine
  4. Легко автоматизируйте свои задачи с помощью Gulp.js от Scotch.io

  AngularJS

  1. Проектные решения в AngularJS от разработчиков Google (Введение в AngularJS)
  2. Основы AngularJS от Egghead.io
  3. Руководство по стилю Angular Джона Папы
  4. Создание одностраничного приложения Todo с Node и Angular (MEAN) от Scotch.io
  5. Структура приложения AngularJS от Egghead.io (платный) ИЛИ Курсы Angular от Scotch.io

  ReactJS

  1. Изучение React.js: начало работы и концепции от Scotch.io
  2. Введение в webpack от Egghead.io
  3. Основы React от Egghead.io
  4. Повышение уровня с помощью React: Redux с помощью CSS-приемов

  Back End

  1. Учебники по NodeJS от NodeSchool.io
  2. Как я объяснил REST to моя жена
  3. Создание одностраничного приложения Todo с Node и Angular от Scotch.io (Node, ExpressJS, MongoDB, Angular, REST) ​​

  Бонус: ресурсы

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

  • Веб-дизайн за 4 минуты. Очень креативный и оригинальный интерактивный учебник, который научит вас основам веб-дизайна.
  • Награды. Ищете вдохновение для веб-дизайна? Не смотрите дальше.
  • Эрик Эллиотт «Почему найм — это так сложно с технической точки зрения». Здесь Эрик отлично справляется с описанием того, как на удивление сложно найти хороших разработчиков и как им стать.
  • Мега-сравнение систем баз данных NoSQL, Кристоф Ковач. Это превосходное сравнение самых популярных систем баз данных NoSQL.MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, они и многие другие — все здесь.
  • XSS Игра. Ошибки межсайтового скриптинга (XSS) — один из наиболее распространенных и опасных типов уязвимостей в веб-приложениях. Используя этот замечательный ресурс, вы можете узнать, как находить и использовать ошибки XSS, а также как предотвратить их появление в вашем веб-приложении.
  • Как написать неподдерживаемый код. Веселая статья о том, как , а не — писать обслуживаемый чистый код.

  Бонус: Мои инструменты

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

  • Jetbrains Webstorm: полнофункциональная IDE для веб-разработки. (Мой выбор редактора) Платный, но предлагает бесплатную лицензию на 1 год для студентов.
  • Atom.io: сильно расширяемый текстовый редактор с функциями, подобными IDE, конкурирующими с Webstorm. Бесплатно.
  • Sublime Text: Молниеносный текстовый редактор с поддержкой плагинов и эстетичным внешним видом.(Обычно я устанавливаю Webstorm / Atom в качестве IDE для серьезной работы, а Sublime Text — для быстрого редактирования файлов.)
  • caniuse.com: поддержка браузера критически важна для веб-сайтов, и это ресурс №1 для выяснения того, какие функции поддерживаются какой версией браузера и какие есть.
  • Cloud 9: облачная среда разработки и IDE с поддержкой Git, работающая в Linux. Отлично подходит для удаленного программирования и тестирования NodeJS или других серверных вещей без необходимости устанавливать что-либо на вашем компьютере.
  • CodePen, Plunker и JSFiddle: отличные облачные интерфейсные площадки, которые позволяют создавать быстрые демонстрации HTML / CSS / JS, которыми вы можете поделиться, или поработайте позже, если создадите бесплатную учетную запись.CodePen часто лучше всего подходит для вещей, связанных с CSS, из-за его минималистичного интерфейса и множества функций, связанных с CSS, Plunker для демонстраций JavaScript из-за его мощных функций JS и JSFiddle для демонстраций, которые вы хотите сотрудничать с другими в реальном времени благодаря живому редактору. совместное использование функции совместной работы.
  • Vanilla List: репозиторий подключаемых модулей и библиотек JavaScript, использующих только обычный JavaScript (то есть им для работы не требуются библиотеки, такие как jQuery).
  • YouMightNotNeedjQuery: Вероятно, вы этого не сделаете.Посмотреть на себя.
  • PublicAPI: Вы когда-нибудь задумывались, какие существуют общедоступные API? Не смотрите дальше!
  • Gravit.io: облачное приложение для дизайна, конкурирующее с Adobe Illustrator. (Бесплатно!) Полезно для быстрых макетов и веб-дизайна.
  • Adobe Kuler: Веб-приложение, которое поможет вам создать гармоничные цветовые комбинации для любого веб-сайта. Также есть витрина «Изучить» цветовых палитр, созданных другими дизайнерами, а также система ранжирования, которая поможет вам вдохновить.
  • Назовите этот цвет: прекратите тратить много времени на выяснение того, как назвать свои цветовые переменные в less / sass, и просто используйте их законное имя в этом веб-приложении

  Заключение

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

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

  Если у кого-то из вас остались вопросы, не стесняйтесь оставлять комментарии, и я постараюсь ответить вам как можно скорее.

  Надеюсь, это было полезно для вас, ребята, до следующего раза, Best!

  Обновление за март 2018 г. : Для тех, кому интересно, чем я занимался, вот быстрое обновление статуса!

  https: // medium.com/@sgarcia.dev/status-update-im-still-here-with-cool-stuff-incoming-f031bab49eca

  Как стать веб-дизайнером || Проект «Карьера в искусстве»

  1. Начало работы в веб-дизайне

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

  Базовый рисунок

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

  Теория веб-дизайна

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

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

  Макет и структурирование

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

  Пользовательский опыт

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

  Лучшие практики дизайна веб-сайтов

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

  Метрики и анализ

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

  Как стать веб-дизайнером за 8 шагов

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

  Чем занимается веб-дизайнер?

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

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

  Связано: Узнайте о том, как стать веб-дизайнером

  Средняя зарплата веб-дизайнера

  Веб-дизайнеры могут работать полный рабочий день в компании или агентстве, но часто являются фрилансерами, которые работают одновременно с несколькими клиентами.Средняя зарплата веб-дизайнеров в США составляет 22,27 доллара в час.

  Как стать веб-дизайнером

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

  1. Развивайте необходимые навыки.
  2. Получите сертификаты.
  3. Создать сайт.
  4. Поиск работы.
  5. Создайте свое портфолио.
  6. Продвигайте себя.
  7. Рассмотрим специализацию.
  8. Будьте в курсе.

  1.Развивайте необходимые навыки

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

  Графическое программное обеспечение

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

  Языки программирования

  Большинству веб-дизайнеров необходимы хотя бы некоторые знания базовых языков программирования, таких как HTML, CSS, PHP, jQuery, JavaScript и Flash. Фрилансерам нужно больше знаний в области программирования, тогда как веб-дизайнеры, работающие в агентстве, скорее всего, будут работать в команде, в которую входят программисты и графические дизайнеры.

  Поисковая оптимизация

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

  Теория веб-дизайна

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

  Коммуникативные навыки

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

  2. Получите сертификаты

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

  Adobe Certified Expert

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

  General Assembly Bootcamp

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

  Google Mobile Web Specialist

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

  3. Создайте веб-сайт

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

  Регулярно обновляйте свой веб-сайт, чтобы точно представиться, продемонстрировать свои знания о тенденциях и объяснить свой опыт веб-дизайнера.

  4. Поиск работы

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

  Связанный: Обзор вакансий веб-дизайнеров

  5. Создайте свое портфолио

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

  6. Продвигайте себя

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

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

  Связано: Станьте сетевым экспертом за 7 шагов

  7. Рассмотрите возможность специализации

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

  8. Будьте в курсе событий

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

  Часто задаваемые вопросы

  Вот ответы на некоторые из наиболее распространенных вопросов о веб-дизайне:

  Является ли работа веб-дизайнера востребованной работой?

  По данным Бюро статистики труда США, в период с 2018 по 2028 год прогнозируется рост в этой области на 13%, что намного быстрее, чем в среднем.

  Какова рабочая среда веб-дизайнера?

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

  В чем разница между веб-дизайнером и веб-разработчиком?

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

  Как научиться веб-дизайну БЫСТРО (5-этапный процесс)

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

  Это не значит, что много работы не потребуется. Это просто означает, что намного проще , чем раньше.

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

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

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

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

  То есть, если вы на самом деле проследите процесс до T.

  1) Выберите инструмент для веб-дизайна

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

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

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

  Здесь нет неправильного выбора.Все сводится к личным предпочтениям.

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

  Weebly

  В моем сердце есть слабость к Weebly. Они — главная причина, по которой у меня сегодня успешный бизнес в области веб-дизайна.

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

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

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

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

  В конце концов, когда мои знания, опыт и навыки улучшились, я перерос Weebly и перешел на WordPress + Elementor.

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

  Wix

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

  Что касается их продукта, судя по моему ограниченному опыту, он работает отлично.

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

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

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

  Squarespace

  Наверняка вы уже все знаете об этих парнях. Их везде .

  Подкасты, ютуберы, блоги, рекламные щиты, телевидение, радио, в душе… Где бы вы ни были, Squarespace найдет вас .

  Я лично считаю, что у Squarespace очень ограниченная и скучная эстетика своих шаблонов веб-сайтов. Это действительно сводит меня с ума.

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

  Но у них в углу есть Идрис Эльба, так что… Я ПРОДАН.
  

  Shopify

  Если вы занимаетесь электронной коммерцией, Shopify — это то, что вам нужно.

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

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

  Можно даже утверждать, что они были первопроходцами в области дропшиппинга. (спасибо за чел. дропшиппинга в моей рекламе на YouTube, SHOPIFY)

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

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

  WordPress

  WordPress — король веб-сайтов. Настолько, что более 30% всех веб-сайтов работают на WordPress.

  И не зря.

  WordPress может быть тем, чем вы хотите. Это полнофункциональная CMS с бесконечным набором плагинов для настройки вашего веб-сайта в соответствии с вашими потребностями.

  Это, конечно, связано с повышенной сложностью.

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

  Возможно, вы даже немного научитесь веб-разработке. (веб-разработка в основном состоит из «серверной» работы, чего вы часто не видите визуально на «внешнем интерфейсе» веб-сайта)

  Кроме того, существует несколько плагинов CMS, которые делают создание веб-сайтов с помощью WordPress более простым и увлекательным. Давайте посмотрим на эти варианты.
  

  WordPress + Элемент

  Elementor изменил правила игры для дизайнеров WordPress. И индустрия веб-дизайна в целом.

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

  Если это еще не очевидно, WordPress + Elementor — это то, что я использую для создания всего моего веб-сайта в наши дни.

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

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

  WordPress + Строитель бобров

  Я никогда раньше не использовал Beaver Builder, но слышал о нем хорошие отзывы.

  И что мне особенно нравится в нем, так это то, что он крошечный. Beaver Builder состоит из 3 парней, которые просто делают то, что им нравится.Я полностью согласен с этим.

  Вы можете утверждать, что Строитель Бобров — это элементор OG. Это было намного раньше, и его основополагающие принципы очень похожи.

  Elementor просто построен на основе Beaver Builder… и сделал что-то лучше.

  Студент становится мастером…
  

  WordPress + Divi

  Теперь DIVI существует немного дольше.

  До Beaver Builder и Elementor Divi популяризировала идею интеграции более простой CMS поверх WordPress.

  Но некоторые возразят, что Диви в наши дни стал чем-то вроде динозавра. Со временем он постепенно разрастался ненужными «функциями» и интеграциями.

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

  2) Использовать ВСЕ контент вокруг этого инструмента

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

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

  Пора запереться в подвале мамы и добраться до ботаника .
  

  Вы заметите, что я не перечислил здесь какие-либо курсы веб-дизайна… 😉

  Блоги Weebly и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с Weebly:

  Блоги Wix и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с Wix:

  Блоги Squarespace и ютуберы

  Вот несколько ресурсов, которые помогут вам начать работу с Squarespace:

  Shopify блоги и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с Shopify:

  • Официальный блог Shopify
  • Официальный канал Shopify на YouTube
  • (Есть много, МНОГО Shopify блоггеров и ютуберов.Проблема в том, что большинство из них полностью сосредоточено на прямой поставке или печати на футболках, а не на веб-дизайне Shopify. Если вы знаете, что порекомендуете, дайте мне знать, и я добавлю его сюда!)

  блогов WordPress и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с WordPress:

  WordPress + блоги Elementor и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с Elementor:

  WordPress + блоги Beaver Builder и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с Beaver Builder:

  WordPress + Divi блоги и YouTube

  Вот несколько ресурсов, которые помогут вам начать работу с Divi (от Elegant Themes):

  3) Выберите нишу веб-дизайна

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

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

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

  Пора дать волю творческим сокам!

  Когда дело доходит до ниш веб-дизайна, в основном есть две категории:

  1. Ниши персонажей
  2. Ниши отрасли

  Все еще не уверены? Вот несколько идей для вас:
  

  Ниши веб-дизайна персонажей

  • Быстро
  • Доступный
  • Премиум
  • Легкий
  • Мобильный
  • Адаптивный
  • Простой
  • Комплекс
  • Минималистский
  • Анимированный
  • 3D
  • VR

  Промышленность веб-дизайна

  • Рестораны
  • Стоматологи
  • Оптометристы
  • Спортивные залы
  • Ландшафтный дизайн
  • Сантехники
  • Кровельщики
  • Серферы
  • Блогеры
  • Влиятельные лица в социальных сетях
  • Стартапы
  • Школы
  • Бухгалтеры
  • Очистители
  • и так далее…

  И отсюда вы можете занять еще большую нишу.

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

  Вы создаете сайты для ресторанов? Или вы создаете сайты для китайских ресторанов?

  Сайты для влиятельных лиц в социальных сетях? Или сайты для Instagram влиятельных лиц?

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

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

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

  Некоторые примеры:

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

  Возможности безграничны!
  

  4) Практика, практика, практика

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

  Теперь пора на приступить к работе .

  Когда кто-то решает, что хочет научиться играть на гитаре, он не ожидает, что в одночасье станет Джими Хендриксом.

  Так почему же так много потенциальных веб-дизайнеров так нетерпеливы?

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

  К счастью, для изучения веб-дизайна не обязательно тратить около 10 000 часов или сотни долларов на курсы веб-дизайна. Благодаря многим инструментам и ресурсам, на которые мы смотрели раньше.

  Один из самых простых способов попрактиковаться и, возможно, даже заработать несколько долларов, — это использовать Google Maps для поиска клиентов веб-сайтов.

  1. Зайдите на Google Maps и найдите свой район. Затем найдите все рестораны, стоматологические кабинеты, розничные магазины, маникюрные салоны и парикмахерские и проверьте их профили.
  2. В нем вы найдете ссылку на их сайт. (Или вы вообще не найдете ссылку, что еще лучше. Это означает, что у них даже нет веб-сайта!)
  3. Если их сайт — мусор, извлеките с него как можно больше контента, а затем перестройте его для них. Нет, я не шучу.
  4. Затем, когда вы закончите, отправьте им по электронной почте ссылку на их совершенно новый веб-сайт и попросите их отзывы.
  5. Если им это нравится, продайте им.

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

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

  5) Продайте себя как эксперта в этом инструменте / нише

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

  Продажи.

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

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

  Обычно это происходит потому, что они не тратили достаточно времени на создание истории своего бренда…
  

  Расскажите свою историю

  Подумайте об этом. Ваши клиенты могут выбирать из миллионов веб-дизайнеров. Почему они должны выбрать вас?

  Почему они должны работать с , вы ? Что вы принесете ? Кто , вы ?

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

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

  Подумайте о своем бренде по-настоящему. Какую историю ты хочешь рассказать?

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

  Создайте это портфолио

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

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

  По правде говоря, вам, вероятно, придется поработать бесплатно или с большой скидкой. Это избавляет от риска нанять нового веб-дизайнера.

  Предлагая свои услуги веб-дизайна бесплатно, вы выполняете 6 задач:

  1. Вы выделяетесь из толпы (потому что никто не предлагает бесплатный веб-дизайн, я гарантирую это)
  2. Вы избавляете своего клиента от беспокойства и беспокойства по поводу найма неопытного веб-дизайнера.
  3. Вы создаете потрясающий веб-сайт, который теперь можете добавить в свое портфолио, привлекая к новому бизнесу будущего
  4. Вы получаете новые отношения, которые можно добавить в свою сеть для потенциальных будущих рефералов
  5. Вы получите 5-звездочный отзыв и добавьте его в свой профиль в Google Адресах
  6. Если вы не получили 5-звездочный отзыв, вы получите ценный отзыв о том, почему бы и нет, и улучшите его в следующий раз.

  Поверьте мне, во всем этом есть лот и ценности.

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

  Наконец, выполните действие

  Поздравляю! Вы дочитали до конца поста. (что, честно говоря, много, учитывая, как мало люди читают в наши дни)

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

  1. Выберите конструктор сайтов
  2. Использовать весь контент о конструкторе веб-сайтов
  3. Выберите нишу веб-дизайна
  4. Практика, практика, практика
  5. Продайте себя как эксперта в своей нише / застройщика

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

  Я не хочу слышать никаких оправданий, К?

  Я закончил говорить. Давай приступим к работе!
  

  Часто задаваемые вопросы

  Часто задаваемые вопросы об изучении веб-дизайна.

  Как мне стать веб-дизайнером?

  Следуйте этому плану из 5 шагов:

  1. Выберите свой любимый конструктор сайтов.
  2. Просмотрите все блоги и каналы YouTube, которые вы можете найти об этом конструкторе веб-сайтов.
  3. Выберите нишу для своего бизнеса в области веб-дизайна.
  4. Практика, практика, практика.
  5. Продайте себя как эксперта в своей нише / конструкторе сайтов.

  Сколько времени нужно, чтобы изучить веб-дизайн?

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

  Какая средняя зарплата веб-дизайнера?

  По состоянию на 2019 год средняя зарплата веб-дизайнера в Канаде составляет около 45000 долларов. Но это варьируется во всем мире, и тем более, если у вас есть собственный бизнес по веб-дизайну в качестве фрилансера. СОВЕТ ОТ ПРОФЕССИОНАЛА: вам лучше работать фрилансером и начинать собственный бизнес в области веб-дизайна.

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

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

  Веб-дизайн — хороший выбор для образа жизни цифрового кочевника?

  АБСОЛЮТНО. Настолько, что я написал целый пост о том, почему веб-дизайн — идеальный выбор для цифровых кочевников.

  Должен ли я изучать веб-разработку, чтобы изучать веб-дизайн? Какая разница?

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

  лучших курсов веб-разработки на 2021 год: от начального до продвинутого

  Какой курс лучше всего подходит для веб-разработки?

  Это зависит от вашего бюджета, графика и конкретных навыков, которые вы хотите получить.

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

  Часто люди задают вопрос: есть ли бесплатные или доступные курсы, зачем платить за учебные курсы?

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

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

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

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

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

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

  Некоторые курсы посвящены определенному языку / фреймворку, например Python или React.Поскольку основное внимание уделяется одному навыку, обсуждение, вероятно, будет более всесторонним и глубоким.

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

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

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

  Лучшие курсы веб-разработки в 2021 году (расширенные)

  Веб-дизайн для веб-разработчиков (Udemy) — БЕСПЛАТНО

  Это самый продаваемый курс Udemy, созданный Йонасом Шмедтманном, веб-разработчиком полного цикла. и дизайнер с 2007 года.

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

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

  Этот бесплатный курс также дает вам мгновенный доступ к электронной книге «Лучшие ресурсы для веб-дизайна и разработки с помощью HTML5 и CSS3».

  Посмотреть курс здесь →

  CSS Grid — БЕСПЛАТНО

  Этот бесплатный курс поможет вам освоить CSS Grid с нуля с помощью Веса Боса, канадского разработчика и преподавателя полного стека.CSS Grid — это система макета, которая в 10 раз упрощает создание столбцов и строк, чем старые методы.

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

  Посмотреть курс здесь →

  The Web Developer Bootcamp — $

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

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

  Посмотреть курс здесь →

  Веб-дизайн и не только — $

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

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

  Посмотреть электронную книгу здесь →

  Курс для веб-разработчиков, ориентированный на результат (Udemy) — $

  Это еще один доступный курс для начинающих изучать HTML5, CSS3, JavaScript, Flexbox, Node.js и многое другое.

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

  Посмотреть курс здесь →

  Современный HTML + CSS для начинающих (Udemy) — $

  Я большой поклонник Брэда Трэверси, и этот курс отличный.

  Я настоятельно рекомендую его как начинающим, так и опытным разработчикам, которые хотят научиться создавать адаптивные веб-сайты и пользовательские интерфейсы с использованием современных технологий HTML5 и CSS3 +, таких как Flexbox и CSS Grid, а также прекомпилятора Sass. Благодаря ясному стилю преподавания Брэда и проектам, над которыми вы будете работать, этот курс сделает вас лучшим разработчиком.

  Посмотреть курс здесь →

  # 100DaysofCode Web Developer Bundle — $$

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

  Этот курс научит новичков всему, что касается HTML, CSS и JavaScript, и предоставит вам доступ к их сообществу Slack только для членов. Если по какой-то причине вы чувствуете, что курс не стоит вашего времени и денег, у них есть 100-дневная гарантия возврата денег.

  Посмотреть курс здесь →

  Полный мастер-класс Python (Udemy) — $

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

  Изучение этого языка может стать отличным стимулом для резюме, и этот онлайн-курс с самым высоким рейтингом — отличное место для начала. На момент написания этой статьи уже зарегистрировано более 200000 студентов, а 4.Оценка 6 говорит, что им это нравится.

  Посмотреть курс здесь →

  Современный JavaScript с самого начала — $

  Это еще один исключительный курс Брэда, где он преподает JavaScript с нуля без предварительного опыта.

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

  Посмотреть курс здесь →

  Полный курс разработчика React (Udemy) — $

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

  Он учит, как использовать React v16, Redux, Webpack, React-Router v4 и другие, не только посредством обсуждений, но и применяя полученные знания.На протяжении всего курса вы создадите два классных веб-приложения на React, а инструктор быстро ответит на любые вопросы, если вы застрянете.

  Посмотреть курс здесь →

  Thinkful Coding Bootcamp — $$$

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

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

  Подробнее здесь →

  
  

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

  Спрос на определенные навыки растет.

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

  Одним из таких навыков является веб-разработка .

  Вы задавались вопросом, как стать веб-разработчиком?

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

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

  Готовы? Давайте начнем с основ:

  Кто / кто такой веб-разработчик

  Вот простой ответ на этот вопрос: они создают и поддерживают веб-сайты.

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

  Обязанности веб-разработчика :

  1. Создание веб-страниц с комбинацией языков разметки.
  2. Создавайте качественные мокапы и прототипы.
  3. Создайте сайт WordPress с нуля.
  4. Понять HTML и CMS.
  5. Понимание пользовательского интерфейса, UX и обучения юзабилити.
  6. Создавайте функциональные и привлекательные веб-сайты и веб-приложения.
  7. Обеспечение обслуживания и усовершенствования веб-сайта.

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

  Говоря о специализациях веб-разработки, вам следует знать о трех:

  1. Разработка веб-интерфейса: «Интерфейс» относится к «материалам» на веб-сайте, которые вы видите и с которыми взаимодействуете, например меню, выпадающие списки и т. д.
  2. Бэкэнд-разработка: Бэкэнд похож на часть айсберга под поверхностью. Без него сайт не может работать. Бэкэнд занимается серверами, приложениями, базами данных и т. Д.
  3. Разработка полного стека: Это комбинация как серверной, так и внешней разработки.
  Почему вам следует стать веб-разработчиком?

  Веб-разработка — это отрасль, которая не исчезнет в ближайшее время.

  Фактически, Бюро статистики труда США предсказало рост доступных рабочих мест веб-разработчиков на 13% к 2028 году.

  Проще говоря, если вы сможете развить этот навык, вам не составит труда найти работу в обозримом будущем. будущее.

  Вот ПЯТЬ больших преимуществ / преимуществ веб-разработчика:
  1. Вы можете работать удаленно. Вы когда-нибудь задумывались, каково это работать из любой точки мира в свободное время? Как веб-разработчик, у вас будет множество возможностей для удаленной работы. Может быть, вы наконец сможете осуществить свою мечту о путешествии по миру, в то же время сэкономив деньги.
  2. Вы можете использовать свои навыки для создания собственных веб-сайтов и веб-приложений . Хотите создать прибыльный сайт или приложение? С этим навыком вам не придется платить кучу денег, чтобы его построить. Вы можете построить его самостоятельно за небольшую плату.
  3. Можно работать самостоятельно. Вам больше не нужно работать под руководством начальника, если вы этого не хотите. Вам будет намного легче работать фрилансером или начать свой собственный бизнес, если вы знаете о веб-разработке.
  4. Войдите в прибыльную технологическую отрасль. Веб-разработка — это, по сути, ваш билет в технологическую индустрию. Большинство технологических стартапов нуждаются в веб-разработчиках, так что это может быть вашим способом начать работу.
  5. Вы можете создавать классные вещи! Самое интересное в том, что вы можете проявлять столько творчества, сколько хотите.Вместо того, чтобы смотреть на веб-сайты и думать: «Вау, выглядит потрясающе. Хотел бы я создать что-то подобное », — теперь вы сможете создать свой собственный потрясающе выглядящий веб-сайт.

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

  Как стать веб-разработчиком

  ---

  1. Изучите основы HTML, CSS и Javascript

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

  • HTML определяет структуру
  • CSS сделает его красивым
  • Javascript заставит его работать

  Давайте обсудим каждый из них и способы их изучения.

  HTML

  HTML означает язык гипертекстовой разметки. Это один из основных компонентов любого веб-сайта и один из так называемых языков интерфейса.

  Вкратце — он предоставляет основную основу веб-сайта, в основном с помощью ряда тегов.

  Тег — это HTML-код, который управляет внешним видом содержимого HTML-документа.

  Вот некоторые общие теги HTML, с которыми вам следует ознакомиться:

  • … — Этот тег отображается в начале и в конце документа HTML. Это означает, что документ написан на HTML5.
  • — Тег заголовка — это заголовок страницы. Это полезно как для поисковых систем (когда они сканируют и индексируют страницы), так и для пользователей (отображается в строке заголовка браузера), явно указывая основную тему каждой страницы.
  • … — Это содержит информацию о конкретной странице, включая теги заголовков, метаданные и ссылки на скрипты и таблицы стилей.
  • … — сюда входит весь контент, который будет показан пользователям, включая все, что они увидят и прочитают.

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

  Вот несколько ресурсов для изучения HTML:

  CSS

  CSS означает каскадные таблицы стилей.

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

  Вот как они сочетаются: в HTML-коде вы ссылаетесь на таблицу стилей CSS.

  Вот пример того, как CSS выглядит в действии:

  }
  
  # верхний заголовок a,
  # top-header a {
          цвет: #fff;
  }
  
  # верхний заголовок,
  # et-secondary-nav {
          -webkit-transition: фоновый цвет 0,4 с, преобразование 0,4 с, непрозрачность 0,4 с, легкость вывода;
          -moz-transitions: цвет фона 0.4 с, трансформация 0,4 с, непрозрачность 0,4 с легкость выхода;
          -transistion: фоновый цвет 0,4 с, преобразование 0,4 с, непрозрачность 0,4 с, легкость входа;
  }
  
  # top-header .container {
          padding-top: 0,75em;
          вес шрифта: 600;
  } 

  Вот отличный ресурс для изучения CSS: Шпаргалка по CSS

  Javascript

  Javascript — это язык программирования, который позволяет вам реализовывать элементы на веб-страницах. Он поддерживает такие функции, как интерактивные карты, 2D / 3D-графика и многое другое.

  Вот отличный ресурс, который поможет вам изучить Javascript: Шпаргалка по Javascript

  2.Изучите основы WordPress

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

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

  На этом сайте есть множество руководств по WordPress. Перейдите по ссылкам ниже:

  3.Познакомьтесь с пользовательским интерфейсом и UX

  UI (пользовательский интерфейс) и UX (пользовательский интерфейс) — это основы дизайна пользовательского интерфейса.

  Большинство разработчиков не являются веб-дизайнерами — это две разные области.

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

  Чтобы освоить строительные блоки навыков проектирования, мы рекомендуем изучить Adobe Creative Suite. Photoshop должен быть первым делом, в которое вы погрузитесь, так как это лучший выбор для самых серьезных дизайнеров. Если вам не нравится Adobe, вы также можете погрузиться в Sketch, который набирает обороты среди дизайнеров.

  Вот несколько ресурсов для понимания и изучения UI и UX:

  4. Изучите SQL и PHP (необязательно)

  Мы объединим эти два аспекта вместе, потому что они похожи на две стороны одной медали.

  SQL — это технология баз данных (см. Шпаргалку по SQL), которая хранит информацию. PHP — это «скриптовый» язык, который помещает или извлекает данные из базы данных (см. Шпаргалку по PHP).

  Подумайте, например, о WordPress.

  Он использует MySQL для хранения и управления информацией (сообщениями в блогах, содержанием страниц, комментариями, информацией о пользователях и т. Д.) В «таблице» базы данных. PHP — это то, что делает веб-сайт WordPress динамичным, взаимодействуя со всеми этими различными элементами и правильно обновляя базу данных по мере продвижения.

  Узнав больше о том, как SQL и PHP работают вместе, вы сможете освоить разработку сайтов WordPress, которые буквально сотни (если не тысячи) людей ищут каждый день на досках вакансий и проектов по всему Интернету.

  Дополнительные ресурсы для изучения PHP и SQL:

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

  5. Изучите основы SEO

  SEO — это поисковая оптимизация. Это относится к процессу повышения рейтинга веб-сайта в такой поисковой системе, как Google. Это один из самых важных навыков в онлайн-бизнесе.

  Вы можете подумать: «Если я разработчик, зачем мне беспокоиться о рейтинге сайта в поисковых системах? Разве это не работа блоггеров и создателей контента? »

  Ну да, большая часть SEO веб-сайта связана с контентом.Но фактическая структура и код веб-сайта также имеют значение.

  Например, теги заголовков (HTML) чрезвычайно важны для SEO. Они сообщают поисковым системам, что действительно важно на веб-сайте.

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

  Вот несколько советов по SEO для веб-разработчиков:

  • Оптимизируйте свои метатеги. На странице поиска метатег сообщает браузерам, о чем ваш сайт — чем он лучше, тем больше вероятность, что они перейдут на сайт.
  • Убедитесь, что теги заголовков расположены в определенном порядке. h2 должен быть основным заголовком, а затем вы должны пройти через заголовки более низкого уровня по странице (например, h3, h4, h5 и т. Д.). Это облегчает поисковым системам навигацию по сайту.
  • Убедитесь, что тег заголовка правильно описывает веб-страницу. Заголовок должен подчеркивать, о чем эта страница.

  Вот несколько ресурсов для изучения основ SEO:

  Посвятите не менее 3-5 часов чтению ресурсов и изучению основ. Это подготовит вас к разработке веб-сайтов с учетом SEO.

  6. Убедитесь, что ваш сайт адаптивен

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

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

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

  ***

  Итак, пройдя эти 6 шагов, вы получите базовое представление о веб-разработке. Вы будете знать, как это делать (по крайней мере, на базовом уровне).

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

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

  Вам повезло — вот о чем мы поговорим дальше!

  Как найти своего первого клиента для веб-разработки (или стать фрилансером)

  ---

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

  Теперь у вас, как у веб-разработчика, есть два выбора. Вы можете 1) попытаться найти постоянную работу в компании или 2) пойти по пути фриланса и искать онлайн-концерты.

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

  • Свобода: Больше не нужно приходить и уходить.Вы можете по-прежнему работать в те же часы (или больше), но ваше расписание, местоположение и жизненные обстоятельства полностью зависят от вас. (Плюс — отсутствие поездок на работу, что экономит ваши часы каждую неделю!)
  • Деньги: Как только вы станете хорошим фрилансером, у вас будет больше шансов заработать больше денег (чем ждать ничтожного повышения на 3% каждый год) .
  • Престиж: Со временем у вас будет возможность построить свою личную работу и бренд до такой степени, что в конечном итоге гарантирует вам постоянный приток новых клиентов (даже без необходимости их искать!).

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

  1. Попадите в Доски объявлений

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

  Качество клиентов может быть очень низким. Некоторые могут быть отличными. Другие — в меньшей степени…

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

  Чрезмерное использование досок объявлений (слишком долгое время) не даст вам возможности (или свободного времени) для создания собственного бренда. Привлечение «входящего» внимания к своей работе в конечном итоге приведет к появлению лучших (и наиболее высокооплачиваемых) клиентов в конце дня.

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

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

  Также довольно легко начать работу на досках вакансий…

  Ниже приведено изображение результатов быстрого поиска на UpWork:

  (Как видите, существует масса возможностей трудоустройства для веб-разработчиков!)

  Вот несколько досок вакансий, где вы можете найти концерты веб-разработчиков:

  2. Создайте сайт портфолио

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

  Вот несколько советов по созданию сайта-портфолио веб-разработки:

  • Используйте отзывы прошлых и текущих клиентов. Это убедит посетителей, что вы делаете отличную работу и что другие были счастливы работать с вами. (Возьмите за привычку спрашивать отзывы каждый раз, когда вы заканчиваете проект.)
  • Наполните свою индивидуальность. Что хорошего в работе с вами и что отличает вас от других? Когда вы привносите индивидуальность в свой сайт-портфолио, вы автоматически выделяетесь.
  • Включите нужные элементы. Ваше имя, краткая версия вашего рассказа о том, как / почему вы стали веб-разработчиком, ваши контактные данные, ваша недавняя работа и ваши навыки.
  • Ответьте на вопрос «Что это для меня?» вопрос. По сути, дайте им знать об основных преимуществах работы с вами, т.е.е., что получат клиенты от работы с вами.

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

  Вот несколько примеров сайтов-портфолио для веб-разработчиков, которые можно использовать в качестве вдохновения:

  • MattFarley.ca
  • Caferati.me (Говоря о придании индивидуальности, этот разработчик делает это на своем сайте.Перейдите на домашнюю страницу, и вы поймете, что мы имеем в виду!)
  • Pierre.io

  Вот несколько ресурсов, которые помогут вам создать сайт с портфолио веб-разработки:

  3. Начать работу в сети

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

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

  Начните с поиска встреч на Meetup.com и Eventbrite. Только на этих двух платформах вы найдете массу актуальных событий.

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

  Вот еще один отличный ресурс, который поможет вам найти события: Как найти сетевые события, которые действительно стоит посетить

  Преимущества веб-разработчика, работающего полный рабочий день

  Мы много говорили о фрилансе как веб-разработчик. Однако постоянная работа в компании имеет свои преимущества:

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

  Рынок труда становится жестче. Более традиционные рабочие места сокращаются каждый день. Итак, почему бы не изучить навык, который позволит вам работать (и, возможно, стать богатым) в обозримом будущем?

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

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

  Итак, вот основные шаги, чтобы стать веб-разработчиком:

  1. Изучите основы HTML, CSS и Javascript
  2. Изучите учебные пособия по WordPress
  3. Изучите основы пользовательского интерфейса и UX
  4. Изучите SQL и PHP
  5. Изучите основы SEO
  6. Убедитесь, что ваш сайт адаптируется

  И вот основные шаги, чтобы найти свое первое рабочее место веб-разработки:

  1. Попасть на доски объявлений
  2. Соберите сайт-портфолио
  3. Начать работу в сети

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

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

  Как научиться веб-дизайну дома

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

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

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

  Шаг 1. Примите решение и составьте планы

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

  Шаг 2. Получите базовые знания о веб-дизайне

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

  1. Что такое веб-дизайн?

  Люди часто неправильно понимают значение веб-дизайна.

  Что же такое веб-дизайн?

  Визуальное + взаимодействие = веб-дизайн

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

  Многие молодые дизайнеры часто неправильно понимают концепцию веб-дизайна с концепцией разработки.

  Помните: веб-дизайн — это дизайн, а не кодирование и разработка интерфейса или серверной части.

  Конечно, лучше, если вы знаете некоторые языки программирования (HTML, CSS, Java и т. Д.), Но вам не следует углубляться в фронтенд или бэкэнд разработку, если вы хотите быть целенаправленным. веб-дизайнер. Это не суть веб-дизайна.

  2. Что такое процесс веб-дизайна?

  Веб-дизайн — задача не из простых.Превратить пустую страницу в полноценный веб-сайт довольно сложно, но интересно. Как это сделать?

  Вам необходимо соблюдать основные этапы процесса веб-дизайна. Это:

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

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

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

  • Создание карты сайта и каркаса

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

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

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

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

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

  Шаг 3. Начало обучения

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

  Веб-дизайн предполагает как внешний вид, так и функциональный дизайн. Это означает, что вам нужно изучить 2 основные вещи:

  • Как сделать так, чтобы веб-сайт выглядел хорошо?
  • Как сделать так, чтобы сайт работал хорошо?

  Вам нужно будет изучить , как проектировать интерфейсы (типографика, навигация, изображения, пространство, анимация, цвета и т. Д.), , как их кодировать на языке веб-разработки (HTML, CSS, Python, SQL, Ruby или JavaScript), а также оптимизирует ваш сайт для поисковых систем .

  1. Читайте учебники по веб-дизайну

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

  2. Читайте блоги о веб-дизайне

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

  3. Учитесь с содержанием PDF

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

  4. Учитесь у профессионалов

  Следите за веб-дизайнерами, у которых вы стремитесь учиться, на сайтах социальных сетей, таких как Twitter, Dribbble, Behance, Github и других платформах, где они активны. Прочтите их сообщения, нажмите кнопку «Мне нравится» для тех, которые вам нравятся, и прокомментируйте, если хотите добавить точку или задать вопрос.Если вам повезет, вы сможете найти себе наставника в онлайн-сообществе или группе. Но не беспокойте их и воспринимайте их помощь как должное.

  Веб-дизайнеры, за которыми вы можете подписаться:

  5. Учитесь из видеоуроков по веб-дизайну

  В Интернете доступно множество видеороликов на Youtube. Сократите время просмотра забавных материалов и используйте Youtube для изучения веб-дизайна. Здесь я рекомендую 5 самых популярных видеоуроков. Приятного просмотра.

  • Учебник по веб-дизайну для новичков на 2018 год — часть 1 из 2
  • Учебник по веб-разработке для начинающих 2018/2019 — как создать веб-сайт

• Учебник по дизайну веб-сайтов для начинающих

• HTML CSS Учебник для начинающих — Учебники по веб-разработке для начинающих

• Учебники для начинающих по HTML и CSS-дизайну

6.Учитесь на онлайн-курсах

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

Изучите веб-разработку с бесплатными онлайн-курсами и МООК от Университета Джона Хопкинса, Мичиганского университета, Университета К.Ю. Левена, Калифорнийского университета, Беркли и других ведущих университетов мира.

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

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

Полезно для изучения основных языков программирования, таких как HTML и CSS.

Узнайте, как программировать, от разработчиков Google.

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

Больше мест для онлайн-курсов по веб-дизайну ：

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

У вас может возникнуть вопрос, зачем мне изучать HTML? Как правило, можно использовать приложение для веб-дизайна, например Dreamweaver. Но в настоящее время большинство веб-сайтов основаны на адаптивных HTML5 , а CSS — это оболочка веб-сайта. Современный дизайн веб-сайтов невозможен без CSS. Изучение основ HTML и CSS поможет вам прогрессировать в веб-дизайне.

Ресурсы для изучения HTML и CSS ：

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

8. Изучите JavaScript

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

Ресурсы для изучения Javascript:

9. Изучите элементы веб-дизайна

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

1 ） Типографика

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

Ресурсы для изучения веб-типографики:

2) Анимация и преобразования

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

3） Цветовая схема

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

4) Шрифты

Персонализированные шрифты могут быть забавными или выразительными, но не всегда практичными. Если вы хотите, чтобы веб-сайт был удобочитаемым и профессиональным, выберите для него наиболее подходящий шрифт. Отметьте 20 лучших веб-шрифтов Google для превосходного веб-дизайна .Их можно использовать бесплатно!

5） Макет

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

6) Графика

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

7） Адаптивный дизайн

Адаптивный веб-дизайн — это набор методов для создания веб-сайтов, которые работают на экранах разных размеров. Изучите это с помощью 47-минутного курса CSS .

10. Изучите основы создания каркасов / прототипов.

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

Не путайте разные термины. Изучите основные концепции дизайна пользовательского интерфейса / пользовательского интерфейса : различия между каркасом, прототипом и макетом

11. Изучите инструменты веб-дизайна

Photoshop — инструмент дизайна пользовательского интерфейса

Его можно использовать для создания и улучшения фотографий, иллюстраций, 3D художественные работы, дизайн веб-сайтов и мобильных приложений; редактировать видео, моделировать реальные картины; и более. Вы можете научиться пользоваться любым из 22 лучших бесплатных пошаговых руководств по Adobe Photoshop для начинающих.

Dreamweaver — инструмент веб-разработки

Его можно использовать для создания динамических веб-страниц для различных платформ и браузеров. «Dreamweaver позволяет пользователям разрабатывать, кодировать и управлять веб-сайтами, а также мобильным контентом. Dreamweaver — это инструмент интегрированной среды разработки (IDE) ». (Википедия). Начните с — руководства для начинающих по Dreamweaver .

Mockplus — инструмент для создания прототипов

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

12. Обучение с помощью конструктора веб-сайтов

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

Конструкторы сайтов, вы можете попробовать:

13.Изучите SEO

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

14. Изучите тенденции дизайна

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

Шаг 4. Начните с каркаса

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

Шаг 5: Используйте то, что вы узнали, для создания веб-сайта

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

Шаг 6. Спрашивайте отзывы и вносите улучшения

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

Часто задаваемые вопросы по изучению веб-дизайна ：

1. Сколько времени нужно, чтобы изучить веб-дизайн?

Обучение веб-дизайну — это непрерывный процесс, но его можно освоить за месяцы.Обычно на изучение HTML, CSS и основ JavaScript уходит 5 месяцев. Вам также нужно потратить время на инструменты дизайна, такие как Photoshop, Sketch и Mockplus.

Кроме того, вы должны понимать веб-стандарты, принципы дизайна, дизайн UX / UI, кроссбраузерность и скорость реагирования. На изучение всего этого у вас уйдет от 3 до 4 месяцев.

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

2. Могу ли я стать веб-дизайнером без ученой степени?

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

3. Что я могу делать после прохождения курса веб-дизайна?

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

4. Есть ли будущее у веб-дизайна?

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

Согласно Руководству по зарплате Creative Group 2019, интерфейсный веб-разработчик является одной из самых высокооплачиваемых должностей в творческой и маркетинговой сфере, наряду с UX-дизайнерами, исследователями пользовательского опыта, копирайтерами и т. Д. Согласно Glassdoor, веб-разработчикам получают зарплату от 41,6 тыс. до 78,3 тыс. долларов в год, а согласно PayScale им предлагают 16 долларов.4к- 34,6к в год. Средняя зарплата веб-дизайнера составляет около 49 693 долларов.

5. Легко ли веб-дизайн?

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

Заключение

Если вы хотите изучить веб-дизайн самостоятельно, в приведенной выше информации есть все необходимое для начала.Перестаньте тратить свое время на Facebook или Twitter, «ища ответы». Хотя вы можете создать сообщество дизайнеров на этих платформах, вы не можете стать веб-дизайнером, бесцельно проводя время.