1. HTML / CSS
Язык разметки гипертекста (HTML) - это имя языка разметки для создания веб-страниц, которые могут быть связаны ссылками. Этот язык позволяет публиковать страницы в интернете. Это основной строительный блок, который необходим при разработке сайта.
Каскадные таблицы стилей (CSS) используются для определения внешнего вида страницы, состоящей из HTML. Его можно использовать, например, для определения макета страницы, цветов, шрифтов, поведения элементов анимации и.т.д.
Оба языка разметки являются краеугольными камнями веб-разработки. Я бы сказал, что есть смысл изучать теги HTML5, так как верстать на дивах в 2019 году дурной тон, а свойства CSS3 на память запомнить сложно. Наиболее часто используемые на практике вы узнаете и запомните, другие либо сообщат IDE / редактору, в котором вы пишете код, либо просто найдете их в спецификации, например, через Google.
2. JavaScript / JQuery
Другим очень важным инструментом для интерфейса кодировщика является JavaScript (JS) . В то время как HTML и CSS являются языками разметки и декларативного языка, JS является полноценным, интерпретируемым, объектно-ориентированным языком программирования.
Проще говоря, язык, который вы можете использовать для добавления функциональности на ваш сайт. Необходимо рассчитать цену товара в корзине интернет-магазина. Позволяет добавлять на сайт различные интерактивные элементы - музыку, видео, игры, анимацию и т. Д.
Полезно знать, что есть библиотека jQuery, которая содержит множество полезных плагинов и расширений, которые сэкономят ваше время.
3. CSS и JavaScript фреймворки
Framework - это расширение для данного языка. У него есть свои преимущества и недостатки. Осторожно, не всегда и во всех случаях целесообразно его использовать. Это зависит от того, что мы создаем. Это помогает создавать прототипы. Быстро создать проект с ним. Мы можем использовать его для проверки поведения и расположения компонентов в браузере.
Могу предложить три варианта:
4. CSS препроцессоры
Хотя CSS - это фундамент, без которого мы не можем обойтись, он может ограничивать полёт фантазии. Основная проблема заключается в том, что мы не можем определять какие-либо переменные, функции или выполнять какие-либо арифметические операции.
По мере роста проектов код расширяется и продолжает повторяться. Используя препроцессоры CSS, такие как Sass , LESS или Stylus, мы можем писать код на языке препроцессора, что позволит нам преодолеть упомянутые ограничения, которые имеет CSS. Препроцессор компилирует (переводит) код в CSS, который мы затем просто используем.
Представьте, что вам нужно изменить размер шрифта или цвет на странице. Благодаря препроцессору CSS вам нужно только перезаписать соответствующую переменную. Вам не нужно прокручивать построчно и вручную перезаписывать значения.
5. Инструменты управления контроля версий (Git)
Инструменты управления версиями напоминают «машины времени», которые могут откатить наш проект до того момента когда все было стабильно. Без них я не могу представить веб-разработку в настоящее время.
Git - бесплатное программное обеспечение с открытым исходным кодом. Это распределенная система управления версиями, предназначенная для небольших и гигантских проектов. В Интернете это программное обеспечение содержит множество инструкций и книг. В основном все бесплатно, например, книга Pro Git (Скотт Чакон).
В связи с Git, здесь я должен упомянуть веб-сервисы github и bitbucket . Эти сервисы позволяют вам управлять вашими Git-репозиториями (вашими проектами).
6. Адаптивная верстка
Дни, когда мы только просматривали веб-сайты на экранах ПК или ноутбуков, давно прошли, 60% всего трафика это мобильный траффик. Поэтому важно создавать веб-сайты, которые могут адаптироваться к устройствам с дисплеями разных размеров.
Несколько основных рекомендаций:
- Правильные настройки ширины экрана - Итан Маркотт (Ethan Marcotte) создал простой шаблон, демонстрирующий использование гибкой верстки:
- Создание адаптивных слоев
- Не используйте большие элементы с фиксированной шириной
- Настраиваемая структура макета страницы
- Медиазапросы CSS3
- Гибкие изображения
7. Тестирование и отладка (степпинг)
В принципе, вы можете проверить работоспособность полученного шаблона или сайта в любом веб-браузере. Просто выберите свой любимый. Большинство браузеров имеют инструменты для разработчиков браузеров, которые позволяют вам просматривать и просматривать исходный код страницы прямо в браузере. Как правило, они включают в себя инспектор и консоль javascript. Инспектор позволяет увидеть HTML и CSS, работающие на странице. Вы можете редактировать HTML и CSS. Вы можете увидеть результат в прямом эфире. Консоль в свою очередь позволит вам увидеть сообщения об ошибках кода JavaScript.
Chrome DevTools
Инструменты разработчика Firefox
Если вы хотите протестировать на реальных устройствах или старых браузерах, есть онлайн-сервисы, такие как Browserstack .
Если у вас есть несколько мобильных устройств или планшетов, вы можете использовать BrowserSync .
Последний совет по этой теме - caniuse.com . Просто убедитесь, что свойство CSS, которое вы намереваетесь использовать, совместимо с версией вашего браузера.
8. Инструменты управления задачами (автоматизация)
Grunt - это инструмент javascript для веб-разработчиков. Задачи настраиваются с использованием файла конфигурации (Gruntfile.js). Используйте его для автоматизации повторяющихся задач, таких как:
- перевод с LESS, SASS, Stylus на CSS,
- JS и CSS оптимизация и минимизация,
- Оптимизация изображения и многое другое
Gulp - конкурентный инструмент, который может делать то же самое, что и Grunt. Это в основном быстрее и настраивает задачи, используя код JavaScript. Поэтому в нем легче обобщать вещи, что делает его более подходящим для программистов, более крупных и сложных проектов. Grunt более понятен, так что вы можете сказать, что он больше подходит для начинающих верстальщиков.
9. Инструменты для управления пакетами (библиотеками)
Когда вы разрабатываете свой сайт, вы не можете изобретать колесо каждый раз. Есть много готовых решений, плагинов и библиотек. Если вам не подходит ни одна из готовых работ, ничто не мешает вам написать свою собственную.
Но как я могу просто включить это в свой проект?
Ответ: Через менеджер пакетов.
Вы можете добавлять и загружать различные внешние библиотеки в свой проект. Не стесняйтесь взять нужное вам.
10. Командная строка
Не волнуйтесь, рано или поздно это упростит вашу работу. Вам не нужно быть экспертом. Просто выучите несколько команд и убедитесь сами, как быстро он попадает под вашу кожу. Он просто хочет преодолеть первоначальные страхи.
Пользователи Mac OS и Linux имеют очень хороший встроенный терминал. Windows значительно отстает в этом отношении. Однако не стоит отчаиваться в версии 10 - powershell (улучшенная командная строка). Кроме того есть отличный эмулятор cmder, по нему есть огромное количество обучающего материала.