Введение в фронтенд
Фронтенд технологии "живут" в браузере. После того, как вы вбиваете URL в адресную строку и нажимаете Enter, ваш браузер получает HTML-файл с веб-сервера. Этот файл также предложит браузеру запросить у сервера дополнительные CSS и Javascript файлы (возможно и несколько файлов, но мы придерживаемся простого случая).
Каждый из этих языков предпочтительно разделять на следующие функциональные частности, СТРУКТУРА (HTML) веб-страницы , как она ВЫГЛЯДИТ (CSS) и как ФУНКЦИОНИРУЕТ (Javascript). Помните, что именно браузер (а не сервер) собирает эти файлы в одну функциональную веб-страницу.
Фронтенд разработка -- это НЕ дизайн (вам не понадобится Photoshop), но фронтенд-разработчик конвертирует работу дизайнера в веб-страницу, переводя дизайнерские макеты в программный код. Фронтенд-разработчик находится рядом с дизайнерами с одной стороны и бэкенд-разработчиками, с другой. Переводит дизайн в код и подключает данные со стороны сервера в нужных местах. Также он должен настроить все возможные варианты взаимодействия пользователей с веб-страницей.
Занимаясь фронтендом, вы должны понять, кто ваши пользователи и как они будут взаимодействовать с веб-страницей, поскольку вы строите им дорогу к вашей странице или продукту. Требуется обеспечить удобство использования, отзывчивость, простоту и логичность перемещения... но для начала вы должны ознакомиться с основами фронтенд языков.
В последующих уроках вы получите углубленное понимание всех трех составляющих фронтенда (и jQuery, наиболее популярной Javascript-библиотеки). Пора разогреться, мы переходим на следующий уровень.
Пункты для размышления
Постарайтесь ответить на предложенные вопросы. После выполнения задания попробуйте ответить на них ещё раз
- Какова роль HTML в веб-странице?
- Что делает CSS?
- За что отвечает Javascript?
Задания:
- Прочитайте краткое введение в фронтенд в интервью с Nick Schaden
- Углубитесь во взаимодействие всех трех языков (и jQuery) в этой краткой статье: Начало работы с Web.
- Если вы не сделали этого раньше, посмотрите 10-минутное видео о браузерных инструментах разработчиков, которое теперь должно стать более понятным.
Дополнительные ресурсы
Этот раздел содержит полезные ссылки на дополнительные материалы. Они не обязательны, так что расценивайте их как нечто полезное, если вы хотите поглубже погрузиться в тему
- Углубленный курс по браузерным инструментам от Code School
- Что нужно знать фронтенд-разработчику