Я просматривал Reddit и наткнулся на этот мем, превратившийся в субреддит, под названием r / starterpack (см. Пример выше). Как и настоящий стартовый пакет, мем использует фотоколлаж, чтобы проиллюстрировать архетип знаменитости, компании или субкультуры с помощью рекомендуемой подборки модных статей, мультимедиа и других потребительских товаров, согласно Know Your Meme. Это заставило меня в шутку, но также и полусерьезно задуматься - как будет выглядеть стартовый пакет для веб-разработчиков? О каких инструментах и ресурсах я хотел бы знать, когда только начал?
Возвышенный текст
Дорогие читатели, это лучший текстовый редактор для начинающих веб-разработок. Вот некоторые из причин, почему. Интерфейс простой, хорошо продуманный и интуитивно понятный; Подсветка текста читабельна, линии видимости четкие, эстетические предпочтения легко настраиваются, в нем много полезных ярлыков и плагинов (я считаю, что пакетное редактирование очень полезно), а мини-карта с возможностью навигации удобна, когда ваш код становится длинным. Кроме того, раздельное редактирование! Варианты макета включают наличие нескольких столбцов и / или строк. Это удобно, например, когда у вас есть отдельные файлы для HTML, CSS и Javascript, и вы хотите увидеть, как один взаимодействует с другими. В целом, он чертовски функциональный и очень красивый.
Текстовый редактор бесплатный и работает на всех платформах. Вы можете скачать это здесь".
Инструменты разработчика Chrome (DevTools)
Я предпочитаю Chrome, поэтому я использую его встроенный инструмент разработчика. Чтобы перейти к нему в Chrome, просто выберите «Просмотр» ›« Разработчик »› «Инструменты разработчика». Вы также можете перейти к нему, щелкнув страницу правой кнопкой мыши и выбрав «Проверить» или используя сочетание клавиш (Mac: команда + option + «i», ПК: control + shift + «i»).
DevTools отлично подходит для отладки вашей программы и тестирования различных стилей CSS. Для относительно простых веб-сайтов одними из наиболее полезных функций будет возможность проверять элементы, тестировать фрагменты кода, включать и выключать стили CSS и использовать консоль. Когда вы наводите курсор на блок кода, он также выделяет соответствующую часть на странице и дает размер в пикселях. Интерфейс выглядит хорошо, и есть много других отличных функций, которые вы откроете для себя, продолжая его использовать.
Если у вас еще нет браузера Chrome, вы можете скачать его здесь. Обзор Chrome DevTools можно найти здесь.
Google шрифты
Помимо использования безопасных веб-шрифтов, мне нравится использовать Google Fonts, чтобы оживить мою веб-страницу. Я предпочитаю Google Fonts, а не TypeKit, еще одну службу встраивания шрифтов, потому что Google Fonts полностью бесплатен. Кроме того, веб-сайт Google Fonts позволяет легко тестировать шрифты, сравнивать различные шрифты и добавлять шрифт на свой сайт. Вы просто выбираете шрифт, генерируете код, затем копируете и вставляете его в свой ‹head›. Вот и все!
W3schools и StackOverflow
Это как два лучших друга, к которым вы идете, когда у вас возникают серьезные проблемы в жизни.
Я использую W3schools как справочник. Я думаю, что их руководства по HTML, CSS и Javascript без излишеств, просты для понимания и понятны. На большинство моих вопросов можно ответить с помощью W3schools или быстрого поиска в Google.
Если вы столкнулись с действительно сложной проблемой, на которую, кажется, не можете найти решения, вам следует обратиться к ребятам из StackOverflow. Если вы создаете учетную запись, вы можете опубликовать свой вопрос, чтобы другие пользователи могли ответить. Однако вполне вероятно, что кто-то уже задавал ваш вопрос, поэтому вам всегда следует выполнять поиск, чтобы перепроверить, прежде чем публиковать.
Глазные капли систана
Честно говоря, это самое лучшее.
У Target за 10,99 $.
Полезные расширения браузера
Мои личные фавориты: WhatFont и Window Resizer.
WhatFont определяет, какой шрифт используется при наведении курсора на веб-сайт. При нажатии вы также узнаете, какое семейство шрифтов, стиль, размер, вес и цвет используются. Это хорошая тактика для открытия новых шрифтов и способов их эффективного использования.
Window Resizer, как следует из названия, изменяет размер окна вашего браузера до стандартных размеров различных цифровых устройств, включая размеры смартфонов, планшетов, ноутбуков и настольных компьютеров. Это расширение чрезвычайно полезно при масштабировании вашего веб-сайта для работы на этих устройствах.
Photoshop, Illustrator и InDesign
Святая Троица для графических дизайнеров. На самом деле, это единственные три приложения Adobe, которые вам когда-либо понадобятся.
Изображения важны! Photoshop и Illustrator - фантастические инструменты для создания стильных и удобных в использовании изображений. В Photoshop вы можете сделать размеры файлов изображений более управляемыми (что упростит загрузку вашей страницы) и сохранить эти изображения в веб-форматах (JPEG, PNG или GIF). В Illustrator вы можете создавать свои собственные классные фоны, курсоры, иллюстрации и т. Д. С нуля.
Я рекомендую людям сначала создавать свои веб-сайты в InDesign, потому что (я узнал это болезненным способом) это сэкономит вам много времени. InDesign предназначен не только для макетов книг и журналов; у него есть веб-настройки и измерения, где вы можете отобразить каждую страницу вашего веб-сайта с точностью до пикселя. Итак, вместо того, чтобы часами возиться с тем, где должно быть это изображение и насколько оно должно быть большим, вы уже проделали эту работу в InDesign. Все, что вам действительно нужно сейчас сделать, это выполнить.
Загрузите Adobe Creative Cloud здесь.
Я надеюсь, что это помогло людям начать изучение основ веб-дизайна и программирования. Однако я думаю, что самое важное, о чем нужно помнить, - это просто начать работать над проектом и продолжать учиться по ходу дела. До скорого!
