Html css анимированная загрузка страницы. Разбор примера анимации с демонстрацией
В феврале 2008 года я написал статью 9 признаков того, что не стоит нанимать этого Веб-разработчика . Этот пост «взорвал» интернет, попав на главную Digg и Reddit, и даже был выбран Кевином Роузом для одного из эпизодов Diggnation . Я был невероятно горд этим постом, ведь он действительно адекватно отображал тип вебмастеров, которых не следовало нанимать.
С тех пор прошло много времени, но это всего лишь значит, что изменились качества, по которым мы оцениваем веб-разработчиков. Под катом список из 9 признаков того, что не стоит нанимать этого веб-разработчика.
Мобильные версии его сайтов работают только в WebKit
Мобильные устройства на iOS и Android занимают львиную долю рынка мобильных устройств и используют браузеры на основе Webkit, как и гибридные мобильные приложения под эти платформы. Это привело к тому, что разработчики используют только префиксы -webkit- в коде мобильных приложений, несмотря на то, что доля Opera, Mozilla и Internet Explorer в мобильном интернете растет. Это аналогично программированию только под IE во времена 4,5,6 Internet Explorer"а. В Mozilla для большинства CSS свойств префиксы убраны, поэтому все будет работать если вы используете стандартные правила CSS, но для самых новых свойств все же стоит использовать -moz-префиксы. Важно помнить, что на мобильных устройствах есть не только Webkit и релиз Firefox OS докажет это (если Firefox для Android еще не сделал этого).Он - разработчик "{{ js библиотеки }}"
За последние несколько лет я провел десятки технических собеседований и достаточно быстро могу понять, знает ли кандидат JavaScript, или какую-то конкретную библиотеку, а это — очень большая разница. Я спрошу что-нибудь простое, например: «Как Вы получите все дочерние элементы данного элемента?». Будет не очень хорошо, если в ответ я услышу «я использую метод children()».Он пишет весь код в одном файле
Библиотеки вроде RequireJs или CurlJS сделали загрузку модулей на JavaScript настолько простой, что больше ничего не может оправдать написание кода в одном файле. Это нормально если Ваш сайт использует совсем немного JavaScript"а, но во всех других случаях нет смысла создавать огромные.js файлы из-за лени или отсутствия опыта.Его дизайн не отзывчивый
Очень небольшое количество сайтов и приложений используются только на стационарных компьютерах, поэтому клиенты ожидают что современный дизайн будет выглядеть хотя бы более-менее приемлемо на мобильных устройствах. Медиа запросы настолько просты в применении, что невозможно придумать оправдание, чтобы не использовать их чтобы изменять структуру и отображение контента.Он знает HTML5
Сегодня знать HTML5 - это тоже самое, что знать Web 2.0 несколько лет назад. HTML5 - это маркетинговый термин и пустые фразы о знании HTML5 — это знак, что разработчик не знает что это такое. Попросите того, кто утверждает, что знает HTML5 рассказать об определенных API, если затрудняется с ответом - не нанимайте его!Не использует определение возможностей браузера
Любой опытный разработчик скажет Вам, что на использование данных из User Agent для определения возможностей браузера нельзя положиться, но еще хуже — не использовать проверку необходимого функционала в браузере, наивно полагая, что нужный функционал присутствует во всех браузерах. Это верно и для использования новых CSS свойств без префиксов. Такой веб-разработчик создаст Вам много проблем.Он подключает ненужные библиотеки
JavaScript библиотеки и плагины крайне полезны, но очень часто чрезмерно используются. Если бы я получал доллар за каждый раз, когда я встречаю библиотеку jQuery на сайте, которая используется для простой анимации или несложного взаимодействия с DOM, я бы стал миллионером. Также я нередко встречаю библиотеку Modernizr, подключенную для проверки одного-единственного свойства браузера, хотя можно было просто использовать код для проверки одного этого свойства. Такие действия приводят к увеличению размера страницы и нагрузки.Он все еще считает, что мобильная разработка — это только приложения для iOS
iPhone и iPad не были первыми мобильными устройствами, но они были первыми, набравшими популярность, поэтому в течении короткого отрезка времени они были единственными устройствами, о которых нужно было задумываться при разработке мобильных приложений. К сожалению, такой веб-разработчик все еще живет в прошлом, в то время как устройства на Android и Firefox OS становятся все более популярными.Он не воспринимает всерьез мобильные приложения на HTML
Разработчик, которого Вы не хотите нанимать, все еще считает, что мобильные приложения, основанные на HTML — это несерьезно и PhoneGap — это единственное средство для их разработки. C появлением Firefox OS и множества других новых ОС, основанных на web, любое приложение, которое работает в браузере, будет работать в новых операционных системах. Поэтому негативное отношение к мобильным приложениям на основе HTML может сыграть против вас.Несмотря на то, что определение плохого веб-разработчика изменилось за последние годы, Вы всегда легко узнаете его. Будьте настороже, такой «разработчик» легко создаст Вам массу проблем!
Этапы разработки веб-сайта
На сегодняшний день существуют несколько этапов разработки веб-сайта:
- Проектирование сайта или веб-приложения (сбор и анализ требований, разработка технического задания , проектирование интерфейсов);
- Разработка креативной концепции сайта;
- Создание дизайн-концепции сайта;
- Создание макетов страниц;
- Создание мультимедиа и FLASH -элементов;
- Вёрстка страниц и шаблонов ;
- Программирование (разработка функциональных инструментов) или интеграция в систему управления содержимым (CMS);
- Оптимизация и размещение [ ] материалов сайта;
- Тестирование и внесение корректировок;
- Публикация проекта на хостинге ;
- Обслуживание работающего сайта или его программной основы.
В зависимости от текущей задачи, какие-то из этапов могут отсутствовать.
Создание технического задания Составлением технического задания могут заниматься проектировщик , аналитик, веб-архитектор , менеджер проекта вместе или по отдельности.:В случае, когда сайт разрабатывается фрилансером, техническое задание может быть составлено со стороны компании заказчика). Работа с заказчиком начинается с заполнения брифа , в котором заказчик излагает свои пожелания относительно визуального представления и структуры сайта, указывает на ошибки в старой версии сайта, приводит примеры сайтов конкурентов. Исходя из брифа, менеджер составляет техническое задание, учитывая возможности программных и дизайнерских средств. Этап заканчивается после утверждения технического задания заказчиком. Важно сразу отметить, что этапы проектирования веб-сайтов зависят от многих факторов, таких как объём сайта, функциональность, задачи, которые должен выполнять будущий ресурс и многое другое. Однако, есть несколько этапов, которые в обязательном порядке присутствуют в планировании любого проекта.:В результате в документе, где описано техническое задание, могут быть следующие основные разделы:
- Цели и назначение сайта;
- Аудитория сайта;
- Технические характеристики;
- Содержание сайта (структура сайта с подробным описанием элементов и функционала каждой страницы);
- Интерактивные элементы и сервисы (формы обратной связи, поиск на сайте, форум на сайте);
- Формы (отправки на почту, подписки на рассылку, обратной связи);
- Система управления контентом;
- Требования к материалам;
- Перенос на хостинг.
При этом дизайнер должен учитывать ограничения стандартов HTML (не создавать дизайн, который затем не сможет быть реализован стандартными средствами HTML). Исключение составляет Flash -дизайн.
Количество эскизов и порядок их предоставления оговаривается с проект-менеджером. Также менеджер проекта осуществляет контроль сроков. В больших веб-студиях в процессе участвует арт-директор, который контролирует качество графики. Этап также заканчивается утверждением эскиза заказчиком. HTML-верстка Утверждённый дизайн передаётся HTML-верстальщику , который «нарезает» графическую картинку на отдельные рисунки, из которых впоследствии складывает HTML-страницу. В результате создаётся код, который можно просматривать с помощью браузера. А типовые страницы впоследствии будут использоваться как шаблоны . Программирование Далее готовые HTML-файлы передают программисту. Программирование сайта может осуществляться как «с нуля», так и на основе CMS - системы управления сайтом. Веб-разработчики часто называют CMS «движком ».
В случае с CMS надо сказать, что сама «CMS» в некотором смысле это готовый сайт, состоящий из заменяемых частей. «Программист» - в данном случае правильно будет назвать его просто специалистом по CMS - должен заменить стандартный шаблон, поставлявшийся с CMS, на оригинальный шаблон. Этот оригинальный шаблон он и должен создать на основе исходного «веб-дизайна».
При программировании сайта специалисту назначаются контрольные точки сроков. Завершающим этапом разработки сайта является тестирование Процесс тестирования может включать в себя самые разнообразные проверки: вид страницы с увеличенными шрифтами, при разных размерах окна браузера , при отсутствии флэш-плеера и многие другие. Также - юзабилити-тестирование .
Обнаруженные ошибки отправляются на исправление до тех пор, пока не будут устранены. Сроки контролирует менеджер проекта. Также, на этом этапе привлекают к работе дизайнера, чтобы он провёл авторский надзор . Размещение сайта в Интернет Файлы сайта размещают на сервере провайдера (хостинга) и производят нужные настройки. На этом этапе сайт пока закрыт для посетителей. Наполнение контентом и публикация Сайт наполняют контентом - текстами, изображениями, файлами для скачивания и т. д. Иногда тексты составляются специалистом студии, иногда контентом занимается ответственное лицо со стороны заказчика. Это решается на этапе составления технического задания. В случае если контент составляется представителем студии, то это происходит и утверждается параллельно с другими этапами проекта.:На каждой странице находятся текстовые блоки, они могут быть типовыми (стандартные) и не типовыми. Как правило нетиповой текстовый блок расположен на странице 404. К стандартным текстовым блокам относятся:
- header сайта;
- footer сайта;
- навигационная цепочка, или "хлебные крошки".
- заголовки 1, 2 и 3 уровней;
- изображения;
- изображения в тексте;
- галереи;
- текст;
- раскрывающийся блок текста, который содержит заголовок;
- нумерованные и ненумерованные списки;
- таблицы;
- файлы для скачивания;
- видео.
Также, на этом этапе производится обучение представителя заказчика навыкам работы в администраторской зоне сайта.
Все мы знаем, что XXI век - это век современных технологий. С приходом в нашу жизнь сети Интернет, количество получаемой и передаваемой нами информации увеличилось в десятки раз. За этим увеличением последовало значительное прибавление в количество профессий, актуальных в современном мире. Оказалось, что в таком количестве возникших web специальностей не так то просто разобраться. В этой статье мы рассмотрим одну из важнейших профессий в сфере IT - профессию веб разработчика.
Что входит в основные обязанности?
В обязанности разработчика web приложений входит достаточно широкий круг обязанностей. Помимо процесса разработки сайтов или приложений, сотруднику придется также общаться с клиентами, понимать и воплощать в жизнь их желания. После того, как специалист уточнил все пожелания клиента, он приступает к подготовке технического задания. Чем тщательнее составлено тех.задание, тем насыщенней будет воплощенный в жизнь ресурс. Далее следует непосредственно процесс разработки сайта. На этом этапе веб разработчик должен применить свои навыки владения языками программирования. Стоит упомянуть также о том, что дизайн сайта веб разработчик зачастую создает самостоятельно, хотя можно и прибегнуть к помощи web дизайнеров. Итак, сайт готов к использованию, теперь специалист должен презентовать его своему клиенту, для этого требуется продемонстрировать заказчику, что готовый продукт полностью соответствует его изначальным требованиям. И, в заключение, можно сказать о том, что в обязанности разработчика также входит поддержание актуальности сайта, путем постоянных его модификаций.
Итак, для того чтобы стать представителем этой профессии, нужно обладать рядом важнейших навыков:
- умение общаться с людьми, нужно убедить клиента в том, что именно ваш продукт идеально подойдет для выполнения поставленных им задач
- владение различными языками программирования, стремление постоянно совершенствовать свои навыки. Хороший специалист должен владеть как минимум тремя самыми актуальными языками программирования.
- владение навыками web дизайна. Эти умения значительно поднимут вас в рейтинге по сравнению с другими специалистами
-стремление постоянно быть в тренде. Вы должны следить за обновлениями и новшествами в IT сфере.
-Умение обрабатывать много информации сразу. Востребованный веб разработчик обычно занимается сразу несколькими проектами одновременно
Где работают представители этой профессии
Обычно web программисты не стеснены выбором между офисной работой и фрилансом. Вы можете выбрать тип занятости, который вам будет больше по душе. Хотите полный социальный пакет и четкий график работы - можете устроиться в большую фирму, если же вам ближе самостоятельный поиск клиентов и свободный график - то популярный сейчас фриланс идеально подойдет вам.
Тут же сразу возникает вопрос: чем отличается программист от разработчика? Ответ на него достаточно прост. Разработчик - это человек, в обязанности которого, как мы уже выяснили, входит очень широкий спектр различных обязанностей. Разработчик зачастую должен создать что-то новое с нуля. То есть не просто написать код, а создать архитектуру будущего сайта, его дизайн и концепцию. Web программист же - это человек, задача которого состоит в основном из написания различных кодов. Эта профессия в меньшей степени требует творческого подхода, тут скорее нужна высокая степень профессионализма и квалификации. Программист, как правило отвечает не за проект в целом, а за его небольшую часть, код к которой он должен написать.
Как стать веб разработчиком
Если вы решили попробовать себя в этой сфере, то у вас есть несколько вариантов. Однако приготовьтесь к тому, что все они потребуют от вас много времени и терпения. Ведь овладеть навыками программирования на высоком уровне не самая простая задача.
Первый, и самый очевидный вариант - это обучение в университете. Там вы сможете получить квалифицированное образование и документ, без которого вы не сможете устроиться ни в одну большую фирму. Так что если вы нацелены покорять крупные IT организации, то получать высшее образование - обязательное условие.
Если у вас нет возможности учиться в университете - то выходом могут стать . На них в сжатые сроки вас обучат азам профессии, а дальше вы сможете развивать свои навыки самостоятельно.
Если и курсы вам не подходят, то можно пойти по наиболее тяжелому пути - пути самообразования. Однако учтите, что этот вариант подходит только для тех, кто планирует заниматься веб разработкой исключительно для себя.
Итак, мы узнали кто такой разработчик web программ и чем он занимается. И если вы вдруг решили заняться этим востребованным и прибыльным делом - то удачи вам в реализации своих планов!
Сегодня мы узнаем с вами, кто такой веб-разработчик. Вообще, эта профессия знакома многим. Как минимум каждый пользователь компьютера слышал о такой работе. Правда, освоить её дано не всем. Придётся обладать не только какими-то профессиональными навыками, но и личными качествами. Они, как бы странно это ни звучало, играют важную роль. Так что обратите на это внимание. Всё самое интересное о профессии под названием «веб-разработчик» представлено вашему вниманию!
Обучение
Разумеется, речь идёт об информационной специальности. А значит, она требует предварительного обучения. Да, диплома недостаточно, но он в большинстве случаев должен быть. Исключением будет случай, если вы открываете собственный бизнес. Для официального трудоустройства у вас попросят соответствующий диплом. Как можно освоить профессию «веб-разработчик»? Обучение в институте поможет вам в этом. Правда, придётся выбирать то или иное направление. Можно сказать, что наша профессия - это своеобразное программирование.
В некоторых высших учебных заведениях имеется отдельная специальность под названием «веб-разработчик». Так что именно на ней и придётся учиться. Тем не менее не везде такой расклад имеет место. Чаще всего студенты просто выбирают следующие направления: «Программирование» либо «Веб-дизайн». Первый вариант часто предпочтительнее, так как он даст вам в будущем преимущество. Отыскать нужную специальность можно в любом вузе страны на математическом факультете или том, где изучают секреты информатики.
Курсы
Что дальше? Нередко получается так, что человек, университета, становится успешным веб-разработчиком. Всё дело в том, что у этого направления имеется ещё один довольно интересный подход. О чём идёт речь? Вам интересна профессия под названием «веб-разработчик»? Обучение по этой специальности возможно не только в вузах, но ещё и в техникумах. Правда, большей популярностью пользуются специализированные курсы. На них любой желающий за короткий срок осваивает азы профессии, а дальше он должен заниматься саморазвитием в той или иной области.
Специализированные курсы по веб-разработкам часто организуют обучающие центры и прочие учебные заведения. Причём те, что не имеют отношения к вузам. Вас всё ещё привлекает направление под названием «веб-разработчик»? Обучение в университете или на курсах при этом не слишком интересно? Тогда есть ещё выход!
Самообразование
Внимание! Следующий вариант подходит далеко не всем и не во всех случаях. Если вы планируете заниматься веб-разработками исключительно для себя или работать «по знакомству», то можете попробовать. В остальном придётся или вуз заканчивать, или проходить специализированные курсы, чтобы получить хоть какое-то подтверждение того, что вам отныне подвластна профессия «веб-разработчик». В принципе, как вариант можно рассмотреть самообразование. Нередко сначала успешные разработчики самостоятельно учатся всему, что нужно, а затем просто «для галочки» получают диплом или какое-то другое подтверждение своей специальности.
Тут можно посоветовать разнообразные видеоуроки, самоучители и, конечно же, практику. Без неё не быть вам хорошим веб-разработчиком. Кстати, самообразование в этом случае играет важную роль. Без него, как правило, не получится добиться успеха. Ведь веб-разработка - то же программирование. В нём не бывает шаблонов, приходится для каждого случая придумывать что-то особенное. И самообразование поможет в этом вопросе.
Что делает такой человек?
Веб-разработчик - это, вообще, кто такой? Да, специальность уже сейчас многих начинает привлекать к себе. Понятно, что сфера занятости подобного кадра - это IT-технологии и компьютеры. То, что так ценится в современном мире. Но вопрос в другом немного: веб-разработчик что делает на работе? Это далеко не самая узкая специальность. Поэтому не стоит надеяться, что будет легко работать. Более того, веб-разработка, как мы уже выяснили, тесно связана с программированием. А значит, возможных должностных обязанностей у подобного рода кадра будет более чем достаточно.
Веб-разработчики, или, как их ещё называют, веб-мастера, обычно занимаются программированием любой направленности. Одним словом, какую поручит начальство. Но при этом важная роль уделяется разработке и созданию сайтов, интернет-ресурсов, приложений для интернет-страниц. Всё, что касается Всемирной паутины и создания её составляющих, - ответственность веб-мастера. Чаще всего такой кадр совмещает в себе дополнительно навыки обычного программиста, дизайнера, системного администратора. Принято считать, что веб-разработчик - это универсальный кадр, который занимается IT-технологиями.
Начало
Но как можно начать работу? Ведь программирование, администрирование и прочие направления изначально не входят в обязанности веб-мастера! Во всяком случае так полагают сами профессионалы. Как стать веб-разработчиком?
Всё зависит от того, чего именно вы хотите добиться. Можете попытаться заняться самообразованием, практиковаться и самостоятельно заниматься интересующими вас разработками и делами. Этот вариант хорошо подходит тем, кто намерен открыть собственное дело. В противном случае карьера веб-разработчика начинается с вашего трудоустройства по этому направлению. Всё равно, в какую именно фирму.
Конечно, желательно подыскать себе изначально корпорацию, специализирующуюся на IT-технологиях. Вы должны просто пройти собеседование, составить резюме и предъявить его. Правда, здесь есть один маленький нюанс: в обязательном порядке должен продемонстрировать свои умения и знания. Тут пригодится портфолио.
Собираем портфолио
Что ж, у любого хорошего веб-мастера при трудоустройстве, независимо от опыта работы в нашей сегодняшней области, как уже было сказано, должны быть примеры его деятельности. Если таких нет, вы рискуете или на серьёзный тест «нарваться», или вовсе получить отказ от рассмотрения вашей кандидатуры. Вам всё ещё нужна эта работа? Веб-разработчик - это универсальный кадр, который, как правило, развивает свои навыки на опыте. Все проекты, которые вы когда-либо создавали, придётся сохранить и предъявить при трудоустройстве.
Хорошо здесь помогает предварительная работа в качестве фрилансера. В интернете полно предложений для веб-мастеров. Созданные проекты разрешается использовать для своего портфолио. В принципе, для успешного трудоустройства обычно достаточно нескольких примеров работ. Но чем их больше, тем лучше для вас. Собрать хороший пакет доказательств ваших навыков можно в среднем за несколько месяцев.
Переговоры
Итак, мы уже с вами разобрались, чем именно занимается наш сегодняшний сотрудник. Только вот есть один интересный момент, который прослеживается на практике, но в документах нигде не прописывается. Всё дело в том, что веб-разработчик - это кадр, который будет заниматься не только IT-технологиями на рабочем месте. Что ещё предстоит делать такому работнику?
Помимо программирования и даже совмещения нескольких специальностей и направлений деятельности, вы должны будете в обязательном порядке общаться с клиентами. И не только вести диалог, а понимать, что именно нужно заказчику. Иногда на веб-мастеров также взваливают ответственность за Фактически вы будете полностью отвечать за разработку и развитие того или иного проекта. А также вести переговоры с заказчиками.
Плюсы
В принципе, уже понятно, как стать разработчиком веб-сайтов. Нужно или заняться самообразованием в этом направлении, или закончить учебное заведение, а также получить соответствующий диплом о полученном образовании. Вроде ничего трудного. Особенно если у вас есть предрасположенность к IT-технологиям, а также усидчивость и желание работать в этой сфере. Но у каждой профессии есть свою плюсы и минусы. О них тоже придётся узнать, чтобы не было неприятных сюрпризов после трудоустройства. Преимуществ у нашего сегодняшнего направления, конечно же, больше.
Во-первых, это востребованность. В последнее время веб-мастера нужны всегда и всюду, а вот кандидатур имеется очень мало. А значит, можно надеяться ещё и на низкую конкуренцию. Во-вторых, эта работа - чисто творческая специальность, хоть она и задействована исключительно в информационных технологиях. Прекрасный способ проявить себя и развить мышление. Кроме того, вы никак не будете ограничены при принятии тех или иных решений. Вам дали задачу, а как конкретно её воплощать в жизнь - забота уже только ваша.
В-третьих, не всегда, как уже было сказано, нужен диплом. Плюс ко всему веб-разработчиком может стать даже школьник или студент. Здесь, как правило, возраст не так важен, как навыки. Эту работу относительно легко совмещать с учёбой. В конце концов, веб-разработка позволяет работать удалённо. Кроме того, никого при подобном раскладе с палкой за спиной у вас не будет. Просто придётся укладываться в установленные сроки со сдачей того или иного проекта. Непосредственную нагрузку вы распределяете сами. Также не забывайте - востребованные профессии высоко ценятся и достойно оплачиваются. А это веский аргумент для выбора карьеры веб-разработчика.
Недостатки
Недостатки у специальности тоже имеются. Но обычно они не столь существенны, как может показаться поначалу. К минусам профессии часто относят её универсальность. То есть на рабочем месте нередко приходится совмещать несколько вакансий и должностей, постоянно переключаться с одной деятельностью на другую. А заработную плату вы будете получать только за одну штатную единицу. Также сюда включают, как правило, ненормированный рабочий день. С одной стороны, такой вариант многим кажется привлекательным. С другой - нестабильность и авралы мешают довольно часто успешной работе. В принципе, на этом все недостатки заканчиваются.
Качества
Теперь немного о том, какие же качества должны быть у веб-разработчика. Ни для кого не секрет, что любая работа ценит те или иные навыки человека, необязательно профессиональные. Так, к примеру, веб-разработчик (успешный) обладает обычно быстрой обучаемостью, способностями принимать решения (особенно нестандартные), усидчивостью, стрессоустойчивостью, навыками общения с людьми, организованностью. Такой сотрудник умеет не только самостоятельно справляться со всеми задачами, но и работать в команде. О профессиональных навыках IT-технологий и компьютеров в целом забывать тоже не стоит.
Кстати, стрессоустойчивость в этой профессии играет довольно серьёзную роль. Веб-разработка - это постоянная умственная нагрузка. И справиться с ней не всем удаётся. Поэтому веб-мастера должны обладать высокой устойчивостью к стрессу, а также к интеллектуальным нагрузкам.
Выводы
Вот мы и узнали, кто такие веб-разработчики. Более того, теперь понятно, как можно стать таким сотрудником, что делать на работе. Обучение в университете по этому направлению обычно длится 5 лет. Курсы можно освоить за 2 года. Не всегда высшее образование или диплом необходимы для трудоустройства. Вообще, стоит готовить себя к тому что веб-мастер - это действительно универсальный кадр. Если вы выбрали это направление в качестве карьеры, учтите, что работать придётся много. И необязательно что-то разрабатывать. Веб-разработчикам всегда найдут занятие.
- Перевод
- Tutorial
Дорога длинна и трудна, но интересна и полезна!
Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.
По статье разбросано множество ссылок на бесплатные и важные ресурсы. Для простоты я собрал их в PDF и разбил по категориям. Мне не платят за упоминания сайтов, ссылки на которые я привёл – я всего лишь хочу порекомендовать вам лучшие ресурсы, чтобы помочь вам достичь вашей цели.
Что нужно помнить:
1. Статью разрешается пролистывать
Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:
Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.
2. Попробуйте всего понемногу, а затем выбирайте специализацию.
Деньги – не самое важное. Вам необходимо ЛЮБИТЬ ваше занятие! Но вы не узнаете, что вам нравится, пока не попробуете.
Найдите свою страсть, а потом монетизируйте её
Руководство поможет вам ознакомиться с как можно большим количеством областей веб-разработки как можно быстрее. А потом поможет вам выбрать специализацию в той области, что вам понравилась. Сначала вы не достигнете совершенства ни в чём – вы выучите основы, и потом продолжите изучение. Найдите свою страсть, и я покажу вам, как двигаться дальше.
Я решил писать код. Мне нравится веб. Я не знаю, с чего начать
У вас всё получится!
Поздравляю! Это серьёзный первый шаг и начало чего-то весьма захватывающего. Но это может оказаться и очень сложным. Не волнуйтесь, я помогу.
Сначала вам нужно быстро познакомиться с основами всех областей веб-разработки («полный цикл»). Обучение будет разнообразным, но неглубоким. Это нужно для того, чтобы найти область, которая вам нравится, а также приобрести основные навыки в разных областях. Тогда вы сможете понимать и работать с большим набором задач, вне зависимости от того, на чём вы остановите свой выбор.
Изучите основы HTML
Язык разметки гипертекста, Hypertext Markup Language (HTML), контролирует содержимое и разметку того, что вы видите в браузере. Начав с него, вы получаете интерфейс пользователя, с которым можно взаимодействовать, и видите результаты работы своего кода. При изучении более сложных языков его важность будет возрастать. Вам ведь не нужно кодить вслепую.Вот, что вам нужно изучить на тему HTML:
Я уже знаю основы HTML
Круто! Это очень важный шаг. Теперь изучите основы JavaScript.Изучите основы JavaScript
JavaScript – язык веба, и все основные браузеры (Chrome, Firefox, Safari, IE, множество других) поддерживают его. Каждый сайт, каждое веб-приложение, которым вы пользовались, скорее всего, содержит огромное количество JS-кода. Не говоря уже о том, что язык набирает популяность и на других платформах – сервера, настольные компьютеры, другие устройства.Пока вам нужны основы, и для этого подойдут следующие ресурсы:
Я знаю основы JavaScript и HTML
Потрясающе! Теперь добавим к вашим навыкам CSSИзучите CSS
CSS, или Cascading Style Sheets (каскадные таблицы стилей). Используются для настройки внешнего вида элементов HTML на странице. Ознакомьтесь с бесплатным обучающим материалом от Mozilla, а затем обращайтесь к ресурсу CSS-Tricks для решения самых сложных проблем (справа вверху есть поиск).Переходим к бэкенду
До сих пор мы с вами рассматривали то, что называют «фронтендом» веб-разработки. Вы ознакомились с основными языками, работающими в браузере. Пора переходить к бэкенду – коду, работающему на сервере. Не волнуйтесь, сервер вам не понадобится – ваш компьютер справится с этим.Языков для бэкенда масса, но поскольку вы знакомы с JavaScript, я порекомендую изучить использование Node.js. Он позволяет запускать JS-код на сервере, а не в браузере.
В дополнение к этому вам необходимо изучить Express и MongoDB.
Express
Это библиотека, с помощью которой Node.JS может работать веб-сервером (слушать запросы от страниц и отправлять им ответы).MongoDB
Это база данных, позволяющая вам хранить и извлекать информацию.Изучить три эти темы можно благодаря следующему прекрасному и бесплатному обучающему материалу , и его продолжению .
Мне нужно выбрать между «фронтенд», «бэкенд» и разработкой полного цикла
После того, как вы попробовали оба варианта разработки, настало время делать выбор. Если вы не успели их попробовать – обратитесь к предыдущему разделу статьи, чтобы заполнить пробелы в ваших знаниях.К этому моменту вы писали два типа кода. Один предназначен для взаимодействия с пользователем, другой – с данными. Что вы предпочитаете?
Взаимодействие с пользователем? Поздравляю, вы фронтенд-разработчик!
Взаимодействие с данными? Поздравляю, вы бэкенд-разработчик!
Оба? Поздравляю, вы разработчик полного цикла!
Ничего не понравилось? Поздравляю, веб-разработка – это не для вас. Возрадуйтесь, что вы поняли это сейчас, и не потеряли кучу времени и денег. Не готовы сдаваться? Может, вам не попался язык, который пришёлся бы вам по душе? Попробуйте изучить другие языки в разделе «Я хочу быть бэкенд-разработчиком».
Я хочу быть разработчиком полного цикла
Круто. Вам нужно ознакомиться со всем содержимым разделов «Я хочу быть бэкенд-разработчиком» и «Я хочу быть фронтенд-разработчиком».Я хочу быть фронтенд-разработчиком и я знаю основы JavaScript, HTML и CSS
Для эффективной работы фронтенд-разработчиком вам необходимо в совершенстве овладеть HTML, CSS и клиентским JavaScript. Также вам нужно будет хорошо разобраться в нескольких важных фреймворках. Вы приобретёте навыки, которые работодатели и клиенты ожидают найти в разработчиках фронтенда.К этому моменту вы уже должны знать основы HTML. В противном случае вернитесь к разделу «Изучите основы HTML».
Изучите промежуточный и продвинутый HTML
Ознакомьтесь с обучающим материалом по промежуточному HTML, а затем – по продвинутому .Изучите продвинутый клиентский JavaScript
Отличная серия книг по JS, при этом бесплатная
Для поднятия вашего уровня владения JavaScript, я рекомендую серию книг «You Don’t Know JS» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:
Кроме того, вашим лучшим другом должен стать и MDN JavaScript .
[Также совершенно бесплатно вам доступен превосходный перевод отличной книги "Выразительный JavaScript " - прим.перев.]
Знать «троицу фронтенда», HTML, CSS и JavaScript – это, конечно, здорово. Но для зарабатывания денег придётся вам познакомиться с некоторыми фреймворками.
Изучите jQuery
Это самая популярная библиотека JS всех времён. Хотя из-за некоторых новых фреймворков важность jQuery чуть поуменьшилась, если вы ищете работу, велика вероятность, что jQuery будет присутствовать в описании необходимых навыков (и упоминаться на собеседовании) ещё много лет.Рекомендую изучить jQuery при помощи материалов FreeCodeCamp – это быстрый и эффективный метод. После этого отправляйтесь на официальный обучающий сайт – там вы найдёте дополнительные инструкции.
Изучите популярный JS-фреймворк
Фреймворки делают работу с определённым языком или технологией легче, поскольку решают наибольшие проблемы, существующие у выбранной технологии. JavaScript очень благотворно повлиял на разработку и популяризацию фреймворков.Чуть ли не раз в неделю появляется новый фреймворк, который прочат на место нового стандарта разработки. Вам нужно будет прошерстить сайты с вакансиями и немало погуглить, чтобы выяснить, какой фреймворк популярен на вашем рынке. Также рекомендую инструмент от Hacker News по оценке тенденций рынка вакансий.
Во время написания этой статьи следующие фреймворки пользовались популярностью:
Выбрав наиболее подходящий фреймворк и хорошенько ознакомившись с ним, стоит изучить идущий в паре с ним CSS-фреймворк. Два крупнейших игрока на этом рынке сегодня – Bootstrap и Material Design.
Bootstrap
Bootstrap сделали разработчики Twitter, и он уже довольно взрослый и популярный. Версии Bootstrap существуют для Angular, Angular 2 и React.Material
Material – это набор правил дизайна, разработанный в Google. Он набирает популярность, существуют его версии для Angular и React. Поскольку Angular – это тоже детище Google, сочетается Material с ним превосходно.Вот вам несколько ссылок:
Поздравляю! У вас есть ключевые навыки фронтенд-разработчика!
Вы только посмотрите на него!
Я хочу быть бэкенд-разработчиком
Прекрасно! Первый шаг – выбор языка. Для работы с бэкендом существует много языков, и у каждого есть свои преимущества и недостатки. Ознакомьтесь с таблицей языков программирования, отсортированных по популярности. Все они уже десять лет входят в десятку лучших. Отмеченные зелёным – это веб-языки, которые с годами набирают популярность.
TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index
Концентрируйтесь на языках, чьи названия я обвёл зелёной рамкой. Если вы не знаете их, начинайте сверху таблицы и идите вниз. Останавливайтесь, когда найдёте то, что вам нравится, и копайте вглубь!
Если вы знакомы с одним из отмеченных зелёным цветом языков, и он вам нравится – концентрируйтесь на нём.
Подкачайте необходимые для интервью умения
Вам нужно подготовиться не только к написанию кода. В хорошей статье с Life Hacker описано много полезной и ценной информации.Главное – закрепиться на рынке
Не сильно переживайте насчёт получения работы мечты у работодателя мечты с зарплатой мечты. Сначала просто добейтесь получения работы, где вы будете писать код за деньги. Получив больше опыта, сможете планировать следующий шаг.Хочу быть фрилансером
Сам себе хозяин – это хорошо, но это одновременно и огромное давление, и большие сложности. Лучший источник информации по фрилансу из всех, что я видел - DoubleYourFreelancing.com . У него есть серия статей , которые помогут вам стать фрилансером лучше, чем это получилось бы у меня. Читайте.Ещё один вариант, если вы в себе уверены – сервис Toptal . Они принимают лишь 3% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.
