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

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

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

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

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

Со вет 1. Убедитесь, что ваши веб-страницы имеют нормальное количество контента

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

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

Совет 2. Убедитесь, что каждая страница вашего веб-сайта загружается быстро

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

Для проверки используйте онлайн сервисы. Например PageSpeed Insights.

Совет 3. Не отключайте посетителям сайта функцию клика правой кнопкой мыши

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

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

Совет 5. Протестируйте свой web-сайт, перед тем как его запустить

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

Совет 6. Если вы хотите, чтобы посетитель проводили много времени на вашем сайте, то сделайте его содержание лёгким для чтения

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

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

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

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

Совет 8. Уже не принято набирать www в начале URL-адреса веб-сайта, но некоторые продолжают это делать

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

Совет 9. Пустое пространство является важной частью дизайна web-сайта, поэтому не бойтесь его использовать

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

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

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

Совет 11. Для создания более профессионального сайта не стоит использовать громоздкое изображение на фоне страницы

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

Совет 12. Ключевые слова поиска

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

Совет 13. Изучите тематику вашего сайта

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

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

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

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

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

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

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

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

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

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

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

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

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

разработка дизайна сайтов и отдельных веб-страниц, решающих конкретные задачи клиентов;

проектирование макетов будущих веб-сайтов либо отдельных веб-страниц;

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

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

разработка дизайна для продукции полиграфического характера (визитки, каталоги и т. п.);

создание логотипов, фирменного стиля брендов и компаний;

разработка flash-анимации;

выполнение верстки сайтов;

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

настройка и персонализация CMS.

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

Какие существуют требования к веб-дизайнеру?

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

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

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

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

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

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

Что должен знать веб-дизайнер?

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

высокий уровень знаний графических редакторов Photoshop, CorelDraw, Illustrator (чем шире спектр, тем больше возможностей);

умение работать с Flash-анимацией;

владение программами для верстки, а также HTML и CSS на базовом уровне.

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

знать основные принципы юзабилити сайтов;

уметь разрабатывать и визуализировать различные пользовательские интерфейсы;

понимать особенности функционирования Android и iOS;

иметь навыки работы с инфографикой.

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого роста с нуля в сайтостроении

Желание стать web-программистом возникает не на пустом месте. Многие искушенные интернет-пользователи знают, либо подозревают, что в Интернете крутятся большие деньги. Если взглянуть на двадцатку Forbes самых богатых людей в мире за 2015 год, то можно увидеть, что в ней аж пять представителей IT-индустрии: Билл Гейтс ($79,2 млрд), Ларри Эллисон ($54,3 млрд), Марк Цукерберг ($33,4 млрд), Ларри Пейдж ($29,7 млрд) и Сергей Брин ($29,2 млрд). Все эти люди имеют непосредственное отношение к программированию. Можно сделать простой вывод — умея программировать, можно неплохо заработать. Естественно, необходимо быть профессионалом своего дела.

С чего начать?

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

  • HTML — (от английского HyperText Markup Language) язык разметки гипертекста. Сразу заметим, что HTML не является языком программирования. Видеокурс по HTML можно скачать в разделе
  • CSS — (от английского Cascading Style Sheets) каскадные таблицы стилей. CSS — это формальный язык описания внешнего вида документа, написанного с использованием языка разметки, т.е. HTML. Видеокурс по CSS также можно скачать в разделе

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

Какой язык изучать?

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

  1. Клиентские — выполняются в браузере (Google Chrome, Opera, Firefox и т.д.) пользователя;
  2. Серверные — выполняются на стороне сервера, т.е. как правило на удаленном компьютере, на котором расположен сайт.

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

  1. Front-end разработчики;
  2. Back-end разработчики.

Front-end разработчик занимается «приблудами» которые видят посетителя сайта, например выпадающие меню, всплывающие окна и т.д. Если вы планируете стать веб-разработчиком именно клиентской части, то кроме HTML и CSS вам необходимо изучать язык web-программирования JavaScript. Код написанный на JavaScript может выполняться в любом браузере установленном на любом устройстве. Это достигается тем, что все современные браузере имеют в свое составе интерпретатор JavaScript. Теоретически, front-end программисту нет особой нужды изучать серверные языки программирования, однако профессионалы их знают. Это необходимо для понимания взаимодействия клиентской и серверной части, что может быть критичным при работе над серьезными веб-проектами.

Back-end разработчик занимается программированием серверной части, без которой невозможно существования динамического сайта, например сайта работающего на движке WordPress или Joomla. Посетители сайта, как правило, даже не подозревают о её существовании. Именно back-end программист отвечает за то, чтобы пользователь мог зарегистрироваться на сайте, а его данные сохранились в базе данных. Back-end программист должен владеть хотя бы одним серверным языком программирования, например PHP.

Если вы являетесь поклонником бесплатного движка WordPress и планируете создавать на нём сайты и плагины в одиночку, то следует изучить как JavaScript, так и PHP. Не обойтись и без знания MySQL — системы управления базами данных. Именно в MySQL храниться «самая ценная» информация, такая как тексты статей, настройки движка, комментарии пользователей и т.д.

Книги по веб-программированию для чайников

Посмотрев продукцию магазина OZON, мы подобрали несколько книг по JavaScript, PHP и MySQL которые будут понятны начинающим веб-программистам. Книги написаны известными авторами, такими как: Крис Минник, Ева Холланд, Эрик Фримен, Элизабет Робсон, Никхил Абрахам, Бретт Маклафлин.

Среда разработки

WebStorm — среда разработки на JavaScript, CSS и HTML (front-end разработки). Этот вариант подойдет тем, кто пока решил не заморачиваться с изучением серверных языков программирования, а хочет опробовать себя в разработке только клиентской части сайта.

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

Важно! Продукты компании JetBrains кросс-платформенные, т.е. могут устанавливаться на компьютеры работающие под управление различных операционных систем ((Windows, Mac OS X, Linux).

Интерфейс интегрированной среды разработки PhpStorm

Заключение

Резюмируя все сказанное выше, отметим одну важную вещь — чтобы стать хорошим программистом, нужно много программировать. Практика, практика и ещё раз практика!

Если вам интересны статьи посвященные программированию, то оставляйте комментарии и предлагайте свои темы.

Мы живем в мире, где многие «традиционные » навыки больше не пользуются спросом. Если вы будете следовать инструкциям из этой статьи, то сможете стать web программистом намного быстрее. Но это все равно потребует от вас много усилий!

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

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

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

  • Создание веб-страниц с помощью различных языков разметки;
  • Создание качественных макетов и прототипов;
  • Создание сайтов на WordPress с нуля;
  • Понимание HTML и CMS ;
  • Понимание UI и UX ;
  • Разработка функционала и дизайна сайтов и веб-приложений;
  • Обслуживание и улучшение сайта.

Если говорить о специализации web программистов, то выделяют три основных направления:

  • Разработка front-end . «Front-end » означает элементы на сайте, которые вы видите и с которым взаимодействуете, например, меню, выпадающие списки и т. д.;
  • Разработка back-end . «Back-end » похож на подводную часть айсберга. Без него сайт не может функционировать. Back-end связан с такими вещами, как серверы, приложения и базы данных;
  • Разработка полного стека . Это комбинация разработки back-end и fron-tend .

Зачем становиться веб-разработчиком?

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

Вот пять основных причин стать web программистом и обучиться с нуля:

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

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

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

Это гайки и болты любого сайта, с ними вы будете работать ежедневно.

  • HTML задает структуру;
  • CSS делает ее визуально привлекательной;
  • Javascript заставляет ее функционировать.

Перед тем, как стать web программистом, рассмотрим каждый из этих аспектов.

HTML

HTML означает Hypertext MarkUp Language . Это один из основных компонентов любого сайта и один из так называемых front-end языков. Он формирует базовую структуру сайта, делается это в основном с помощью тегов.

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

… — этот тег отображается в начале и в конце документа HTML .
… </ title> — это название веб-страницы. Он имеет значение как для поисковых систем (<span>при сканировании и индексировании веб-страниц </span>), так и для пользователей (<span>он отображается в строке заголовка браузера </span>), явно указывая основную тему каждой страницы<br> <head> … </ head> — содержит информацию о конкретной веб-странице, включая теги тайтлов, метаданные и ссылки на скрипты и таблицы стилей.<br> <body> … </ body> — включает в себя весь контент, который будет отображаться для пользователей, в том числе все, что они видят и читают.</p> <p>Примечание . Все теги начинаются как «<body>» и заканчиваются как «</ body>». «/» — указывает, где заканчивается действие конкретного тега. Важно добавлять закрывающийся тег, иначе он будет применен ко всему документу.</p> <p><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/css3-cheat-sheet-160331.png' height="300" width="300" loading=lazy></p> <p>CSS — это каскадные таблицы стилей и то, что должен знать web программист обязательно.</p> <p>Они задают стиль <span>HTML-структуры </span>. В принципе без CSS , HTML будет скучным, а в результате и веб-страница будет скучной.</p> <p>Вот как они сочетаются: в HTML-коде вы ссылаетесь на таблицу стилей CSS .</p> <p>Ниже приводится пример того, как выглядит CSS в действии:</p> <p>Пример CSS </p> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/css-example-160332.png' width="100%" loading=lazy></p> <p>Javascript </p> <p>Javascript — это язык программирования, который позволяет реализовать интерактивные элементы на веб-страницах. Например, интерактивные карты, 2D / 3D-графика и многое другое, что знает даже web программист стажер.</p> <ol><li><span>Изучите руководства по WordPress </span></li> </ol><p><br><img src='https://i1.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/wordpress-logo-1-160344.png' width="100%" loading=lazy></p> <p>Чтобы стать веб-разработчиком, вам нужно будет ознакомиться с WordPress . 25% всех сайтов в интернете работают на этом движке.</p> <ol><li><span>Изучите основы UI и UX </span></li> </ol><p>UI (<span>пользовательский интерфейс </span>) и UX (<span>опыт взаимодействия пользователя </span>) — это основа разработки пользовательского интерфейса.</p> <p>Большинство разработчиков не являются экспертами по дизайну — это две разные сферы. Но, изучив основы построения пользовательского опыта, вы сможете лучше понять, как должен работать сайт.</p> <p>Чтобы узнать больше об основах проектирования сайта, рекомендую изучить Adobe Creative Suite . Photoshop должен быть первым, за что вы возьметесь, так как он подходит для самых серьезных дизайнеров. Если junior web программисту не нравится Adobe , можно также изучить Sketch , который является восходящей звездой.</p> <ol><li><span>Изучите SQL и PHP (более продвинутые навыки) </span></li> </ol><p>SQL — это система управления базами данных. А PHP — это язык «скриптов », который помещает или извлекает данные из базы.</p> <p>Например, рассмотрим WordPress . Он использует MySQL для хранения и управления информацией (<span>записями в блогах, содержимым страниц, комментариями и т. д. </span>) в таблицах базы данных.</p> <p>PHP — это то, что делает любой WordPress-сайт динамичным, взаимодействуя с этими элементами, и обновляя базу данных по мере развития сайта.</p> <p>Узнав больше о том, как работают SQL и PHP , вы сможете досконально освоить разработку сайтов на базе WordPress . Этот вид услуг востребован.</p> <p>Вы не освоите все это за неделю или две. Но со временем, по мере приобретения опыта и навыков, сможете значительно повысить свою конкурентоспособность на рынке в качестве web программиста.</p> <ol><li><span>Изучите основы SEO </span></li> </ol><p>SEO — это поисковая оптимизация. Процесс улучшения ранжирования сайтов в поисковых системах, таких как Google . Это один из самых важных навыков в онлайн-бизнесе.</p> <p>В SEO структура и код сайта также играют определенную роль. Например, тэги тайтлов (<span>HTML </span>) чрезвычайно важны. Они сообщают поисковым системам, что действительно важно на сайте.</p> <p>Должны ли вы стать экспертом в области SEO ? Определенно, нет. Но вы обязательно должны изучить основы SEO и учитывать их при разработке сайтов. Таким образом созданный вами сайт будет иметь больше шансов на успех.</p> <p>Вот несколько советов по SEO для веб-разработчиков </span>:</p> <ul><li>Оптимизируйте метатеги. В поисковой выдаче метатеги сообщают браузерам, о чем ваш сайт;</li> <li>Убедитесь, что теги заголовков находятся в определенном порядке. H1 должен быть основным заголовком, а затем необходимо опускаться вниз по иерархии заголовков (<span>то есть H2, H3, H4 и т. д </span>.). Это упрощает поисковым системам сканирование сайта;</li> <li>Убедитесь, что тег тайтла правильно описывает веб-страницу.</li> </ul><p>Посвятите хотя бы 3-5 часов изучению основ SEO . Это позволит эффективнее разрабатывать сайты и позитивно отразится на зарплате web программиста.</p> <ol><li><span>Адаптивные сайты </span></li> </ol><p>Адаптивный — означает, что элементы сайта подстраиваются под размер экрана пользовательского устройства. Таким образом, сайт будет хорошо выглядеть и в ноутбуке и в смартфоне.</p> <h3>Как найти своего первого клиента на веб-разработку (или стать фрилансером)</h3> <p>Теперь, у вас как у веб-разработчика, есть два варианта. Вы можете: 1) попытаться получить постоянную работу в компании или 2) пойти путем фриланса и искать заказы онлайн.</p> <ul><li>Свобода : больше нет начала рабочего дня и конца рабочего дня. Вы все еще можете работать в те же часы (или больше ), но ваш график, местонахождение и условия жизни полностью зависят от вас;</li> <li>Деньги : как только вы станете хорошим фрилансером, у вас будет больше шансов заработать больше денег (<span>и не ждать ежемесячного трехпроцентного повышения </span>);</li> <li>Престиж : со временем у вас будет возможность развить личный бизнес и бренд настолько, что в конечном итоге это гарантирует постоянный приток новых клиентов.</li> </ul><p>В этом разделе мы сосредоточимся на том, как web программисту стажеру получить свой первый фриланс-заказ…</p> <ol><li><span>Используйте биржи вакансий </span></li> </ol><p>Большинство фрилансеров нашли свои первые проекты по веб-разработке на биржах. Это может быть полезно для накопления опыта, но не нужно использовать их в качестве долгосрочной стратегии.</p> <p>Качество клиентов там может варьироваться. Некоторые могут быть замечательными. Другие — нет.</p> <p>Часто на таких биржах попадаются заказчики, не имеющие опыта в вопросах найма. Это может создать множество проблем, когда вы попытаетесь работать с ними.</p> <p>Сильная зависимость от бирж не оставит вам возможности начать создавать свой собственный бренд. Привлечение «входящего» внимания к вашей работе в конечном итоге даст лучших (<span>и самых платежеспособных </span>) клиентов.</p> <p>Но это неплохой вариант для начала.</p> <p>Помните, что каждый заказ, который вы получаете таким образом поможет получить необходимый практический опыт для работы в будущем.</p> <p>Также довольно легко начать работу на досках объявлений… Ниже приведен скриншот поиска по UpWork :</p> <p><br><img src='https://i0.wp.com/internet-technologies.ru/wp-content/uploads/articles/201711/job-boards-1024x536-160322.png' width="100%" loading=lazy></p> <ol><li><span>Создайте сайт-портфолио </span></li> </ol><p>Чтобы быстрее находить клиентов, создайте резюме web программиста и сайт портфолио. На нем вы сможете продемонстрировать свои последние проекты, отзывы клиентов, предоставить потенциальным клиентам удобный канал для связи.</p> <ul><li>Перевод </li><li>Tutorial </li> </ul><p><i>Дорога длинна и трудна, но интересна и полезна! </i></p><p>Статья задумывалась как практическое руководство для желающих стать профессиональным веб-разработчиком. Я уже более 20 лет пишу код для веба. Я ежедневно работаю с веб-разработчиками и помогаю им. В статье я опишу, что вам нужно выучить, когда вам нужно это выучить и где взять информацию (чаще всего даже бесплатно). Затем я дам совет по получению реального опыта, и что самое важное – по получению денег за написание кода.</p><p>По статье разбросано множество ссылок на бесплатные и важные ресурсы. Для простоты я собрал их в PDF и разбил по категориям. Мне не платят за упоминания сайтов, ссылки на которые я привёл – я всего лишь хочу порекомендовать вам лучшие ресурсы, чтобы помочь вам достичь вашей цели.</p><p>Что нужно помнить:</p><p>1. Статью разрешается пролистывать</p><p>Руководство может помочь вам вне зависимости от вашего положения на дороге к профессиональной разработке. Прокрутите его к тому заголовку, который лучше всего описывает ваше сегодняшнее положение, и читайте оттуда. Если вы только начали этот путь, или пока размышляете об этом – последуйте совету Короля из «Алисы в стране чудес»:</p><p>Начните с начала, и продолжайте, пока не дойдёте до конца; и там уже остановитесь.<br><br> 2. Попробуйте всего понемногу, а затем выбирайте специализацию.</p><p>Деньги – не самое важное. Вам необходимо ЛЮБИТЬ ваше занятие! Но вы не узнаете, что вам нравится, пока не попробуете.</p><p><img src='https://i2.wp.com/habrastorage.org/getpro/habr/post_images/4df/cfd/361/4dfcfd361570e071978663b80a7f5928.gif' width="100%" loading=lazy><br><i>Найдите свою страсть, а потом монетизируйте её </i></p><p>Руководство поможет вам ознакомиться с как можно большим количеством областей веб-разработки как можно быстрее. А потом поможет вам выбрать специализацию в той области, что вам понравилась. Сначала вы не достигнете совершенства ни в чём – вы выучите основы, и потом продолжите изучение. Найдите свою страсть, и я покажу вам, как двигаться дальше.</p><p>Я решил писать код. Мне нравится веб. Я не знаю, с чего начать</p><p><img src='https://i2.wp.com/habrastorage.org/getpro/habr/post_images/aaa/b78/b1b/aaab78b1b14a7a57f6c2819a48db8b2c.gif' width="100%" loading=lazy><br><i>У вас всё получится! </i></p><p>Поздравляю! Это серьёзный первый шаг и начало чего-то весьма захватывающего. Но это может оказаться и очень сложным. Не волнуйтесь, я помогу.</p><p>Сначала вам нужно быстро познакомиться с основами всех областей веб-разработки («полный цикл»). Обучение будет разнообразным, но неглубоким. Это нужно для того, чтобы найти область, которая вам нравится, а также приобрести основные навыки в разных областях. Тогда вы сможете понимать и работать с большим набором задач, вне зависимости от того, на чём вы остановите свой выбор.</p><h4>Изучите основы HTML</h4> Язык разметки гипертекста, Hypertext Markup Language (HTML), контролирует содержимое и разметку того, что вы видите в браузере. Начав с него, вы получаете интерфейс пользователя, с которым можно взаимодействовать, и видите результаты работы своего кода. При изучении более сложных языков его важность будет возрастать. Вам ведь не нужно кодить вслепую.<p>Вот, что вам нужно изучить на тему HTML:</p><h4>Я уже знаю основы HTML</h4> Круто! Это очень важный шаг. Теперь изучите основы JavaScript.<h4>Изучите основы JavaScript</h4> JavaScript – язык веба, и все основные браузеры (Chrome, Firefox, Safari, IE, множество других) поддерживают его. Каждый сайт, каждое веб-приложение, которым вы пользовались, скорее всего, содержит огромное количество JS-кода. Не говоря уже о том, что язык набирает популяность и на других платформах – сервера, настольные компьютеры, другие устройства.<p>Пока вам нужны основы, и для этого подойдут следующие ресурсы:</p><h4>Я знаю основы JavaScript и HTML</h4> Потрясающе! Теперь добавим к вашим навыкам CSS<h4>Изучите CSS</h4> CSS, или Cascading Style Sheets (каскадные таблицы стилей). Используются для настройки внешнего вида элементов HTML на странице. Ознакомьтесь с бесплатным обучающим материалом от Mozilla, а затем обращайтесь к ресурсу CSS-Tricks для решения самых сложных проблем (справа вверху есть поиск).<h4>Переходим к бэкенду</h4> До сих пор мы с вами рассматривали то, что называют «фронтендом» веб-разработки. Вы ознакомились с основными языками, работающими в браузере. Пора переходить к бэкенду – коду, работающему на сервере. Не волнуйтесь, сервер вам не понадобится – ваш компьютер справится с этим.<p>Языков для бэкенда масса, но поскольку вы знакомы с JavaScript, я порекомендую изучить использование Node.js. Он позволяет запускать JS-код на сервере, а не в браузере.</p><p>В дополнение к этому вам необходимо изучить Express и MongoDB.</p><h5>Express</h5> Это библиотека, с помощью которой Node.JS может работать веб-сервером (слушать запросы от страниц и отправлять им ответы).<h5>MongoDB</h5> Это база данных, позволяющая вам хранить и извлекать информацию.<p>Изучить три эти темы можно благодаря следующему прекрасному и бесплатному обучающему материалу , и его продолжению .</p><h4>Мне нужно выбрать между «фронтенд», «бэкенд» и разработкой полного цикла</h4> После того, как вы попробовали оба варианта разработки, настало время делать выбор. Если вы не успели их попробовать – обратитесь к предыдущему разделу статьи, чтобы заполнить пробелы в ваших знаниях.<p><span class="BLHcb_kE07k"></span></p><p>К этому моменту вы писали два типа кода. Один предназначен для взаимодействия с пользователем, другой – с данными. Что вы предпочитаете?</p><p>Взаимодействие с пользователем? Поздравляю, вы фронтенд-разработчик!</p><p>Взаимодействие с данными? Поздравляю, вы бэкенд-разработчик!</p><p>Оба? Поздравляю, вы разработчик полного цикла!</p><p>Ничего не понравилось? Поздравляю, веб-разработка – это не для вас. Возрадуйтесь, что вы поняли это сейчас, и не потеряли кучу времени и денег. Не готовы сдаваться? Может, вам не попался язык, который пришёлся бы вам по душе? Попробуйте изучить другие языки в разделе «Я хочу быть бэкенд-разработчиком».</p><h4>Я хочу быть разработчиком полного цикла</h4> Круто. Вам нужно ознакомиться со всем содержимым разделов «Я хочу быть бэкенд-разработчиком» и «Я хочу быть фронтенд-разработчиком».<h4>Я хочу быть фронтенд-разработчиком и я знаю основы JavaScript, HTML и CSS</h4> Для эффективной работы фронтенд-разработчиком вам необходимо в совершенстве овладеть HTML, CSS и клиентским JavaScript. Также вам нужно будет хорошо разобраться в нескольких важных фреймворках. Вы приобретёте навыки, которые работодатели и клиенты ожидают найти в разработчиках фронтенда.<p>К этому моменту вы уже должны знать основы HTML. В противном случае вернитесь к разделу «Изучите основы HTML».</p><h5>Изучите промежуточный и продвинутый HTML</h5> Ознакомьтесь с обучающим материалом по промежуточному HTML, а затем – по продвинутому .<h5>Изучите продвинутый клиентский JavaScript</h5><br><img src='https://i1.wp.com/habrastorage.org/getpro/habr/post_images/842/6c2/362/8426c236297aad12354dc60e4c820849.png' width="100%" loading=lazy><br><i>Отличная серия книг по JS, при этом бесплатная </i><p>Для поднятия вашего уровня владения JavaScript, я рекомендую серию книг «You Don’t Know JS» за авторством Кайла Симпсона. Автор выложил всю серию в онлайн совершенно бесплатно:<br></p><p>Кроме того, вашим лучшим другом должен стать и MDN JavaScript .</p><p> [Также совершенно бесплатно вам доступен превосходный перевод отличной книги "Выразительный JavaScript " - прим.перев.]</p><p>Знать «троицу фронтенда», HTML, CSS и JavaScript – это, конечно, здорово. Но для зарабатывания денег придётся вам познакомиться с некоторыми фреймворками.</p><h5>Изучите jQuery</h5> Это самая популярная библиотека JS всех времён. Хотя из-за некоторых новых фреймворков важность jQuery чуть поуменьшилась, если вы ищете работу, велика вероятность, что jQuery будет присутствовать в описании необходимых навыков (и упоминаться на собеседовании) ещё много лет.<p>Рекомендую изучить jQuery при помощи материалов FreeCodeCamp – это быстрый и эффективный метод. После этого отправляйтесь на официальный обучающий сайт – там вы найдёте дополнительные инструкции.</p><h5>Изучите популярный JS-фреймворк</h5> Фреймворки делают работу с определённым языком или технологией легче, поскольку решают наибольшие проблемы, существующие у выбранной технологии. JavaScript очень благотворно повлиял на разработку и популяризацию фреймворков.<p>Чуть ли не раз в неделю появляется новый фреймворк, который прочат на место нового стандарта разработки. Вам нужно будет прошерстить сайты с вакансиями и немало погуглить, чтобы выяснить, какой фреймворк популярен на вашем рынке. Также рекомендую инструмент от Hacker News по оценке тенденций рынка вакансий.</p><p>Во время написания этой статьи следующие фреймворки пользовались популярностью:</p><p><img src='https://i1.wp.com/habrastorage.org/getpro/habr/post_images/a74/a13/f8c/a74a13f8c9dd50f5869ccfb9ebdd44fa.png' width="100%" loading=lazy></p><p>Выбрав наиболее подходящий фреймворк и хорошенько ознакомившись с ним, стоит изучить идущий в паре с ним CSS-фреймворк. Два крупнейших игрока на этом рынке сегодня – Bootstrap и Material Design.</p><h6>Bootstrap</h6> Bootstrap сделали разработчики Twitter, и он уже довольно взрослый и популярный. Версии Bootstrap существуют для Angular, Angular 2 и React.<h6>Material</h6> Material – это набор правил дизайна, разработанный в Google. Он набирает популярность, существуют его версии для Angular и React. Поскольку Angular – это тоже детище Google, сочетается Material с ним превосходно.<p>Вот вам несколько ссылок:<br></p><p>Поздравляю! У вас есть ключевые навыки фронтенд-разработчика!</p><p><img src='https://i1.wp.com/habrastorage.org/getpro/habr/post_images/d37/036/5a0/d370365a0414040a27c2b74ca35dae65.gif' height="315" width="312" loading=lazy><br> Вы только посмотрите на него!</p><h4>Я хочу быть бэкенд-разработчиком</h4> Прекрасно! Первый шаг – выбор языка. Для работы с бэкендом существует много языков, и у каждого есть свои преимущества и недостатки. Ознакомьтесь с таблицей языков программирования, отсортированных по популярности. Все они уже десять лет входят в десятку лучших. Отмеченные зелёным – это веб-языки, которые с годами набирают популярность.<p><img src='https://i0.wp.com/habrastorage.org/getpro/habr/post_images/0fc/1bf/abc/0fc1bfabc12c5d35d6c1b94042277038.png' width="100%" loading=lazy><br> TIOBE Index of Programming Languages, www.tiobe.com/tiobe_index?page=index </p><p>Концентрируйтесь на языках, чьи названия я обвёл зелёной рамкой. Если вы не знаете их, начинайте сверху таблицы и идите вниз. Останавливайтесь, когда найдёте то, что вам нравится, и копайте вглубь!</p><p>Если вы знакомы с одним из отмеченных зелёным цветом языков, и он вам нравится – концентрируйтесь на нём.</p><h5>Подкачайте необходимые для интервью умения</h5> Вам нужно подготовиться не только к написанию кода. В хорошей статье с Life Hacker описано много полезной и ценной информации.<h5>Главное – закрепиться на рынке</h5> Не сильно переживайте насчёт получения работы мечты у работодателя мечты с зарплатой мечты. Сначала просто добейтесь получения работы, где вы будете писать код за деньги. Получив больше опыта, сможете планировать следующий шаг.<h5>Хочу быть фрилансером</h5> Сам себе хозяин – это хорошо, но это одновременно и огромное давление, и большие сложности. Лучший источник информации по фрилансу из всех, что я видел - DoubleYourFreelancing.com . У него есть серия статей , которые помогут вам стать фрилансером лучше, чем это получилось бы у меня. Читайте.<p>Ещё один вариант, если вы в себе уверены – сервис Toptal . Они принимают лишь 3% из всех, кто подаёт заявки, и этот процесс очень сложен, но если вы попадёте туда – у вас будет доступ к хорошо оплачиваемым работам, над которыми вы сможете трудиться удалённо.</p><h5>Я начал работу, но чувствую, что зашел в тупик</h5> Понимаю. Это нелегко, и если кто-то говорил вам обратное – он либо этим не занимался, либо пытается выманить у вас деньги. Если вы чувствуете, что зашли в тупик, попробуйте следующие варианты:<h5>Освежите ваше первоначальное намерение</h5> Спросите себя, запишите на бумаге, почему вы решили идти по этому пути. В силе ли всё ещё ваш ответ? Если да – то зачем останавливаться? Вперёд! <br> <br> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy>");</script> </div> </div> <dblock></dblock> <dblock></dblock> <dblock></dblock> <dblock></dblock> </article> </div> </div> <div id="sidebar"> <aside> <div class="inner"> <div> <div class="xyz_wrapper"> <div> </div> </div> <div> </div> </div> </div> </aside> </div> </div> </div> <script type="text/javascript" src="/assets/like.js"></script> </main> <div id="slide-menu"> <div id="slide-menu"> <div class="menu-content"> <div class="slide-menu-close" id="slide-menu-close" title="Закрыть"></div> <dblock></dblock> <ul> <li><span class="link" onclick="go('/category/beeline/')"><i class=""></i> Beeline</span></li> <li><span class="link" onclick="go('/category/internet/')"><i class=""></i> Интернет</span></li> <li><span class="link" onclick="go('/category/tele2/')"><i class=""></i> Tele2</span></li> <li><span class="link" onclick="go('/category/useful/')"><i class=""></i> Полезное</span></li> <li><span class="link" onclick="go('/category/ip-telephony/')"><i class=""></i> IP-Телефония</span></li> <li><span class="link" onclick="go('/category/iota/')"><i class=""></i> Йота</span></li> <li><span class="link" onclick="go('/category/mts/')"><i class=""></i> Mts</span></li> <li><span class="link" onclick="go('/category/megafon/')"><i class=""></i> Megafon</span></li> </ul> <ul> <li><a href="/feedback.html">Контакты</a></li> <li><a href="">Реклама</a></li> <li><a href="">О сайте</a></li> </ul> </div> </div> </div> <div id="slide-search"> <div class="search-content"> <div class="search-form-close" id="slide-search-close" title="Закрыть"></div> <div class="search-form-header"><img src="/assets/vsadu-icon-gray.svg" alt="Портал о мобильных операторах" onerror="this.src='/ui/vsadu-icon-gray.png'" style="height: 45px" loading=lazy> Поиск</div> <form style="position: relative" action="/search" method="get" autocomplete="off"> <input type="text" class="m-seach-field" name="q" placeholder="поиск по сайту" value="" /> <div> <dblock></dblock> </div> <div class="desktop_screen" style="position: absolute;right: 9px;top: 9px;"> <input type="submit" class="button yellow big" value="Найти" /> </div> </form> </div> </div> <script type="text/javascript" src="/assets/slide-menu.3.js"></script> <script type="text/javascript" src="/assets/sticky.min.js"></script> <script type="text/javascript" src="/assets/jquery.lazyload.min.js"></script> <script type="text/javascript" src="/assets/jquery-ui.min.js"></script> <script type="text/javascript" src="/assets/JsHttpRequest.js"></script> <script type="text/javascript" src="/assets/Request.js"></script> <div class="white_section"> <div> <div class="desktop_screen" style="padding: 15px 0;background:#f6f8f2;"> <dblock></dblock> </div> </div> </div> <footer> <div class="footer"> <dblock></dblock> <div class="silver_section"> <div class="content"><div class="inner"> <div class="section group" style="text-align: center"> <div class="col span_1_of_3"> <div style="font-size: 16px; vertical-align: middle; line-height: 45px;"><i class="fa fa-envelope-o"></i> cena5.ru - Портал о мобильных операторах</div> </div> <div class="col span_1_of_3"> </div> <div class="col span_1_of_3"> <a target="_blank" href="https://connect.ok.ru/offer?url=https://cena5.ru/veb-dizain-chto-nuzhno-znat-pochemu-stoit-vybrat-python-obshchaetsya-s.html"><img class="soc" alt="Портал о мобильных операторах Одноклассники" src="/assets/ok.svg" onerror="this.src='/ui/icons/ok.png'" loading=lazy></a> <a target="_blank" href="https://vk.com/share.php?url=https://cena5.ru/veb-dizain-chto-nuzhno-znat-pochemu-stoit-vybrat-python-obshchaetsya-s.html"><img class="soc" alt="Портал о мобильных операторах ВКонтакте" src="/assets/vk.svg" onerror="this.src='/ui/icons/vk.png'" loading=lazy></a> <a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://cena5.ru/veb-dizain-chto-nuzhno-znat-pochemu-stoit-vybrat-python-obshchaetsya-s.html"><img class="soc" alt="Портал о мобильных операторах Facebook" src="/assets/fb.svg" onerror="this.src='/ui/icons/fb.png'" loading=lazy></a> <a target="_blank" href="https://www.twitter.com/share?url=https://cena5.ru/veb-dizain-chto-nuzhno-znat-pochemu-stoit-vybrat-python-obshchaetsya-s.html"><img class="soc" alt="Портал о мобильных операторах Twitter" src="/assets/tw.svg" onerror="this.src='/ui/icons/tw.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Google+" src="/assets/g+.svg" onerror="this.src='/ui/icons/g+.png'" loading=lazy></a> <a target="_blank" href=""><img class="soc" alt="Портал о мобильных операторах Pinterest" src="/assets/pin.svg" onerror="this.src='/ui/icons/pin.png'" loading=lazy></a> <div class="soc-caption">Портал о мобильных операторах в социальных сетях</div> </div> </div> </div></div> </div> <div class="content desktop_screen" style="overflow: inherit; margin-top: 20px"><div class="inner"> <div class="section group"> <div class="col span_2_of_5"> <div class="share-widget"> <script src="https://yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="https://yastatic.net/share2/share.js" async="async"></script> <div class="ya-share2" data-services="collections,vkontakte,gplus,odnoklassniki,facebook,moimir,twitter,pinterest,lj,viber,whatsapp,pocket" data-url="https://cena5.ru" data-counter="true" data-limit="6"></div> </div> </div> <div class="col span_3_of_5" style="text-align: center;"> <a class="section_link" href="/feedback.html">Контакты</a> <a class="section_link" href="" style="color: #ff4500 !important;">Реклама</a> <a class="section_link" href="">Вакансии</a> <script> document.write('<a class="section_link" href="mailto:info' + '@cena5.ru">Написать нам</a>') </script> </div> </div> </div> </div> <dblock></dblock> <div class="content"> <div class="inner"> <p style="margin: 20px 0">Copyright © «cena5.ru» 2024 Копирование и видоизменение материалов сайта возможно только после письменного согласия правообладателей. <br /> Статьи защищены законом об авторских и смежных правах, при цитирование материалов проекта «cena5.ru» <span style="text-decoration: underline">прямая открытая ссылка</span> на <strong>cena5.ru</strong> обязательна. <br /> Все права защищены.</p> <dblock></dblock> </div> </div> </div> </footer> <script src="/assets/init.3.js"></script> <div class="push-popup"> <img src="/assets/vsadu-icon.png" style="float: left; margin-right: 10px; margin-bottom: 70px" / loading=lazy> Мы можем оповещать вас о новых статьях,<br /> чтобы вы всегда были в курсе самого интересного. <br /><br /> <button class="button blue uppercase push-button" style="margin-bottom: 10px">Продолжить</button> <button class="button blue-text uppercase push-cancel" style="margin-bottom: 10px">Нет, спасибо</button> </div> <script src="/assets/init.1.js"></script> <div id="p-b"> </div> <style> #yinfo-badge .yinfo-links, #yinfo-badge .yinfo-report { display: none !important } ::shadow .yinfo-links, ::shadow .yinfo-report { display: none !important } </style> <div class="page-top-button wide_desktop_screen hidden"> <div class="page-top-sec"> <a href="/" title="Главная Портал о мобильных операторах"><i class="fa fa-home gray" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a href="" title="О сайте"><i class="fa fa-calendar green" style="font-size: 32px"></i></a> </div> <div class="page-top-sec"> <a title="Связаться с нами" href="/feedback.html"><i class="fa fa fa-commenting-o" style="font-size: 32px; color:#ff4500"></i></a> </div> </div> </body> </html>