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

CodePen.io

Тип: онлайн-редактор кода

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

Здесь на помощь приходит CodePen. CodePen — это онлайн-редактор кода для ваших кодов HTML, CSS и JavaScript. (Есть и другие онлайн-редакторы кода, но демонстрационная платформа CodePen дает мне преимущество. Однако все зависит от того, какой пользовательский интерфейс вам больше подходит. Мне также нравится JSBin.) Начать с CodePen полезно по нескольким причинам:

  • Немедленные результаты
  • Может видеть вывод рядом с вашим кодом
  • Меньше проблем и сложностей

Конечно, когда вы приступите к кодированию более сложных и крупных веб-приложений, то, скорее всего, стоит потратить некоторое время на изучение локального редактора кода (например, Visual Studio Code). Но как новичок, который только что написал свои первые строки HTML/CSS, CodePen — это то, что вам нужно.

Гугл шрифты

Тип: Дизайн

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

Например, взгляните на два наиболее распространенных типа шрифта:

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

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

Pexels

Тип: фотобанк

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

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

Имгур

Тип: Обмен фотографиями

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

Адоб Спарк

Тип: Дизайн

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

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

Будущее

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