Frontend-разработка — Как в enterprise делают dropdown меню

Содержание

Компоненты

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

Выпадающие меню

Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

Содержание

Примеры

Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown , или другой элемент, который заявляет, position: relative; . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

Одиночная кнопка выпадающего меню

Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:

Самое приятное, что вы можете сделать это с любым вариантом кнопки:

Split кнопка с выпадающим меню

Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.

Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

Изменение размера

Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

Вариант списка сверху

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

Пункты меню

Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.

Выравнивание меню

По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

Заголовки меню

Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

Dropdown header

Делители меню

Отдельные группы связанных элементов меню с делителем.

Заблокированы части меню

Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.

Использование

Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

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

Примечание: data-toggle=»dropdown» атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

С помощью данных атрибутов

Добавить data-toggle=»dropdown» на ссылку или кнопку для переключения в меню.

Через JavaScript

Вызвать меню через JavaScript:

data-toggle=»dropdown» еще требуется

Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда должно присутствовать на спусковом элементе раскрывающегося меню.

Варианты

Методы

Способ Описание
$().dropdown(‘toggle’) Переключает меню данной панели навигации и вкладок навигации.

События

Все выпадающие события обстреляли .dropdown-menu ’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

Событие Описание
show.bs.dropdown Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
shown.bs.dropdown Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
hide.bs.dropdown Это событие немедленно уволили, когда скрывать метод экземпляра называется.
hidden.bs.dropdown Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения).

Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

Сравнение frontend и backend веб-разработки

Frontend в сравнении с backend разработкой

Языки, платформы и методы могут отличаться. Но есть два аспекта веб-разработки, которые общие для всех задач: front-end и backend . Цель этой статьи заключается в том, чтобы объяснить front-end и back-end разработку с профессиональной точки зрения.

Frontend-разработка

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

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

Технические навыки, необходимые для frontend-разработчиков:

  • HTML . Весь код в веб-приложении конвертируется в HTML . Понимание веб-разработчиком HTML-кода аналогично пониманию отвертки плотником;
  • CSS . Сам по себе HTML довольно прост. Он реализует основные стили, но для создания хорошего интерфейса разработчики должны иметь опыт работы с CSS . Каскадные таблицы стилей предоставляет цвета, кнопки, подсветку и многое другое, что можно использовать для улучшения веб-страниц. Такие языки, как Sass и LESS , также известные, как прекомпиляторы CSS , они используются для написания более эффективного и управляемого кода CSS ;
  • JavaScript . Это не только язык backend разработчиков. JavaScript выполняется на компьютере пользователя. Перетаскивание, бесконечная прокрутка и видео, оживающие на веб-странице, могут быть запрограммированы с помощью JavaScript . Этот язык настолько популярен, что целые фреймворки построены исключительно для упрощения создания интерфейсов приложений. Такие фреймворки, как Angular , Ember , React и Backbone , используются для реализации сложных JavaScript-интерфейсов .

Backend-разработка

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

Технические навыки, необходимые веб-разработчику back-end :

  • Ruby . Синтаксис Ruby легко читается даже людьми, которые не знают этого языка. Ruby on Rails , который представляет собой фреймворк ( построенный на основе Ruby ) для создания веб-приложений. Это один из самых популярных инструментов веб-разработки для малого бизнеса и стартапов. Такие компании, как Twitter , Hulu и Github используют Ruby on Rails ;
  • Python . Популярный веб-фреймворк Django делает Python популярным для создания веб-приложений. Dropbox был построен с использованием Python для выполнения большей части своего серверного кода;
  • SQL . Это универсальный язык запросов к базе данных. SQL используется для взаимодействия с базами данных, которые являются частью каждого веб-приложения. Независимо от того, какой язык выбрали для создания веб-приложения, frontend и backend разработку, вы все равно будете использовать SQL для взаимодействия с базой данных.

Данная публикация представляет собой перевод статьи « A Comparison of Frontend and Backend Web Development » , подготовленной дружной командой проекта Интернет-технологии.ру

Front-end разработка

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

Современный developer должен легко владеть html5, css3, JavaScript (и как минимум JQuery). У каждого специалиста есть свои наработки, которые он хранит в виде framework. Многие разработчики в работе пользуются популярными , такими как: Twitter, Bootstrap, Foundation 3, Compass.

Что необходимо знать разработчику:

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

Вот основные базовые навыки:

    JavaScript

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

Система управления версиями файлов GIT

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

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

RequireJS инструменты делают возможной разработку с использованием небольших модульных файлов JS и CSS , а затем конкатенируют и минифицируют их с помощью своего инструмента оптимизации для дальнейшего использования.

Если вышеописанный вариант не подходит по причинам, можно использовать инструменты вроде UglifyJS или Closure Compiler, которые грамотно сжимают необходимый код, а затем конкатенируют эти сжатые файлы перед выдачей результата.

Инструменты разработчика, встроенные в браузер

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

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

  1. ssh для подключения к другой машине или серверу
  2. scp для копирования файлов на другую машину или сервер
  3. ack или grep для поиска файлов в проекте по строке или шаблону
  4. find для обнаружения файлов, чьи названия совпадают с данным шаблоном
  5. git для выполнения хотя бы базовых действий вроде add, commit, status и pull
  6. brew для использования Homebrew для установки пакетов
  7. npm для установки пакетов Node
  8. gem для установки пакетов Ruby

  • Тестирование

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

    В то время, как тестирование модульного, свободно сопряжённого кода является приятным, тестирование плохо организованного кода может быть средним между сложным и невозможным. С другой стороны, если принудить себя написать тесты, возможно, даже до того, как написан код — это поможет систематизировать свой подход и код. Это также даст возможность перестроить код с большей уверенностью в будущем.

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

    Удобная среда разработки для фронтенд-разработчика

    Вкратце опишу суть проблемы. Есть сайт, который крутиться в продакшене. Используемые технологии — flask, Python, БД (неважно какая). Сервер поднят с использованием apache2 и virtualenv. Проблема заключается в том, что структура папок в проекте flask:

    templates (тут html скрипты, на которые происходят перенаправления с питоновских скриптов)

    static (здесь лежат все css и js файлы)

    Проблема заключается в том, что фронтэнд-разработчику неудобно отлаживать программы, так как фреймворк flask требует, чтобы html код лежал в templates, в папке static лежали css, а пути к css файлам были указаны через шаблонизаторы, примерно вот так:

    Только в этом случае на сервере в продакшене все будет нормально и css файлы будут найдены. Разработчик таким образом может либо постоянно менять пути, убирая шаблонизаторы, вот так:

    либо отлаживаться на сервере. Ни то, ни другое неудобно.

    Вопрос, как организовать удобную среду разработки для фронтэндера?

    1 ответ 1

    Есть три способа:

    1. Верстальщик делает для каждого типа страниц рыбу, бэкендер напяливает её на шаблонизатор. При дальнейших правках верстальщик правит рыбу, бэкендер правит шаблон. Можно даже организовать процесс через накатывание diff-патчей. Плюс в простоте включения верстальщика в процесс, минус в дополнительной нагрузке на бэкендера. Хорошо подходит для привлечения верстальщиков со стороны.
    2. Поднимаете отдельный сервер для разработки. Настраиваете на нём FTP. Запускаете на нём нужные проекты, выдаёте права только на шаблоны. Запускаете верстальщика по FTP с chroot’ом в каталоге с проектами. Минус — нужен дополнительный сервер и понимание языка шаблонизатора со стороны верстальщика. Плюс — снижение нагрузки на бэкендера и возможность тестировать правки на живом проекте.
    3. На комп верстальщика ставится python и git. Верстальщик клонирует проект, запускает из корня проекта специально подготовленный батник, который активирует виртуальное окружение, ставит зависимости и запускает dev-сервер. Требует от верстальщика умения работать с git (а других нанимать и не надо), а от бэкендера делать нормальные приложения, которые не требуют долгих танцев с бубном для запуска (а других нанимать и не надо).

    Как стать frontend-разработчиком и всё таки делать сайты

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

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

    Специалистам и критике — рада. Если обратите моё внимание на недоработки, буду благодарна за подсказки и советы.

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

    1. Создание идеи сайта, определение с видом и структурой сайта, знание видов сайта (статичный/динамичный, адаптивный/отзывчивый дизайн), определение с контентом (текст, графика, фото) — этот пункт сугубо ознакомительный, с этого можно начать понимание основной информации о сайтах.

    2. Сервер, хостинг, домен — также понимать, как это работает, какой хостинг выбрать, и тд.

    3. Проектирование сайта

    3.1. Навигация сайта, карта сайта — создание основной структуры, отрисовка основных блоков (можно здесь посмотреть, как работают препроцессоры, либо как отрисовывать вручную).

    3.2. Юзабилити (изучить хотя бы основные принципы эргономичного расположения элементов сайта)

    4. Дизайн — этот этап реализуют дизайнеры, но верстальщику знание Photoshopa необходимо и для верстки макета в дальнейшем, и для общего развития, конечно.

    4.1. Отрисовка макета в Photoshop

    4.1.1. Основные инструменты рисования, техника, горячие клавиши.

    4.1.3. Шрифты, цвета

    4.2. Фреймворки (использование дополнительных бибилиотек может сэкономить время при разработке проекта — дизайне, верстке)

    4.2.4. Material Design

    5. Разработка — начинаем оживлять дизайн

    5.1. Редакторы кода (Notepad++, Sublime Text, DreamViewer)

    5.2. Структура и хранение файлов (создание директорий, помещение файлов в определенные папки, именование файлов)

    6. Вёрстка/нарезка макета сайта — трансформация дизайна в HTML / CSS. Вот и добрались до основной части нашей работы.

    6.1. HTML — изучаем досконально, не ленимся практиковаться, делать хотя бы легкие странички, экспериментировать.

    6.2. CSS — то же самое, только можно изучить еще и применение препроцессорных языков SASS и LESS.

    6.3. JavaScript — мне однажды дали совет, что для фронтендщика достаточно знать JQuery, и понимать JavaScript. Так или иначе, покорпеть над ними обоими придется.

    6.4. JQuery — им нужно владеть больше чем хорошо.

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

    6.6. Git — сюда же поместила и систему управления версиями. Пригодится работающим в команде.

    7. Интеграция макета в CMS — если, конечно, вы работаете через CMS. Но мне кажется, всё же мы должны знать хотя бы основные моменты популярных CMS — установка, модули, функционал:

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

    9. Ну и напоследок, средства автоматизации, такие как Emmet, Jade, владение командной строкой, Gulp и Grunt, но это уже после первых 8 пунктов, и еще сюда можно добавить СЕО-оптимизацию, но это всё же не наша зона работы.

    Чувствую, что критика будет, готова её принять, ещё раз напоминаю о своём дилетантизме в этом деле.

    Вывод стандартного выпадающего Bootstrap меню

    Последнее изменение поста: 24 октября 2020 в 0:54

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

    Вывод одна уровневого и 2х-уровневого bootstrap меню при помощи PdoMenu

    Создаём стандартную bootstrap навигацию (getbootstrap.com/components/#navbar), и на месте основной навигации выводим следующий код:

    Если вам нужен только один уровень, то значение level меняем на 1.

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

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

    Для этого создаете файл к примеру hover-bs-3.js, вставляете в него выше приведенный код и подключаете к шаблону

    Если что то не получается пишите в комментариях, обязательно помогу.

    Ну а на сегодня все, теперь вы знаете как в modx выводить стандартное Bootstrap меню помощи сниппета PdoMenu.

    Если Вам нужно 3, и более уровней вложенности, то для вас я подготовил еще один урок: Многоуровневое MODX меню с использованием Bootstrap.

    Frontend-разработка — Как в enterprise делают dropdown меню?

    Евгений Смолин: Сам кувыркался с непонятками (пока курсы учебные не прочитал и руками не попробовал то, что там написано). Битрикс из тех систем, где изучение «методом тыка» не очень эффективно без предварительного изучения учебных курсов. Уважаемые новички, потратьте немного своего драгоценного времени, пройдите пару-тройку учебных курсов и масса вопросов просто испарится — там есть ответы на множество вопросов.

    Курс для разработчиков — продолжение линейки учебных курсов по Bitrix Framework. Получение сертификата по курсу рекомендуется после успешной сдачи тестов по всей линейке курсов, так как без понятия о работе Контент-менеджера и Администратора создание успешных сайтов будет затруднено.

    Чтобы научиться программировать в Bitrix Framework, нет необходимости изучать всю линейку курсов. Но есть моменты, которые необходимо знать разработчикам о системе, они раскрыты в начальных курсах:

    • Интерфейс программы — в главе Элементы управления курса Контент-менеджер.
    • Компоненты 2.0 (начальные сведения) в главе Компоненты 2.0 (начальные сведения) курса Контент-менеджер.
    • Информационные блоки — в главе Информационные блоки (начальные сведения) курса Контент-менеджер.
    • Управление доступом к файлам, элементам контента, модулям и другие права доступа в главе Управление доступом курса Администратор. Базовый.
    • Работа с инструментами системы — в главе Работа с инструментами курса Администратор. Базовый.
    • Модуль Поиск — в главе Поиск курса Администратор. Базовый.
    • Вся информация по администрированию модулей размещена в курсах:
      • Администрирование. Модули — модули «1С-Битрикс: Управление сайтом»
      • Администратор. Бизнес — модули «1С-Битрикс: Управление сайтом», связанные с коммерческой деятельностью в Интернете.
      • Администратор «1С-Битрикс: Корпоративный портал» — модули «1С-Битрикс: Корпоративный портал»

      По завершению изучения этого курса можно продолжить изучение работы в продуктах Bitrix Framework по следующим курсам:

    • Бизнес-процессы — настройка и создание бизнес-процессов.
    • Бот платформа Битрикс24 — приложения, основанных на чатах в веб-мессенджере.
    • Маркетплейс Битрикс24 — приложения для коробочной и облачной версий Битрикс24.
    • Маркетплейс Bitrix Framework — расширение функционала проектов на основе Bitrix Framework с помощью сторонних модулей и решений.
    • Многосайтовость — система многосайтовости и принципы работы с многосайтовой конфигурацией.

    Начальные требования к подготовке

    Для успешного изучения курса и овладения мастерством разработки сайтов на Bitrix Framework необходимо владеть (хотя бы на начальном уровне):

    • основами PHP, баз данных;
    • основами HTML, CSS.

    После изучения курса вам будет предложено пройти тесты на сертификацию. При успешной сдаче последовательности тестов на странице Моё обучение можно просмотреть результат обучения и загрузить сертификат в формате PDF.

    На каждой странице курса авторизованный на сайте посетитель может дать комментарий к содержимому страницы. Комментарий — не форум, там не ведётся обсуждений или разъяснений. Это инструмент для сообщений нам об ошибках, неточностях. Для отправки комментария воспользуйтесь расположенной в правом нижнем углу окна браузера кнопкой:

    Для преподавания оффлайн

    Если данный курс берётся в качестве основы для оффлайного преподавания, то рекомендуемая продолжительность: 5 дней (40 академических часов).

    Примечание: В тексте курса вы встретите цитаты, высказанные в разное время разработчиками системы и разработчиками проектов на базе Bitrix Framework. Надеемся, что такие неформальные замечания внесут некоторое разнообразие в процесс изучения. Заодно опытные специалисты поделятся и своим опытом.

    Имена авторов цитат даются в том написании, в каком авторы зарегистрировали себя на сайте «1С-Битрикс».

    Скачать материалы курса в формате CHM. Файлы формата CHM обновляются ежемесячно, тем не менее, возможно некоторое отставание их от онлайновой версии курса.

    Чтобы отключить подобное отношение к файлу необходимо:

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

    Отсутствие кнопки Разблокировать возможно в двух случаях:

    1. Файл лежит не локально, а на сетевом ресурсе.
    2. Если файл лежит на локальном диске, но путь к нему содержит спецсимволы (# и прочие).

    От нуля до героя фронтенда (Часть 1)

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

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

    Руководство разбито на две части для более простого усвоения материала. Часть 1 посвящена разработке интерфейсов на HTML и CSS. Часть 2 будет о Javascript, фреймворках и паттернах дизайна.

    Основы HTML и CSS

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

    Для начала прочитайте пособия по HTML (рус.) и CSS (рус.) от Mozilla Developer Network (MDN). MDN предоставляет пошаговые объяснения важных концепций HTML и CSS. К тому же каждая глава длинной всего в один экран и проиллюстрирована интерактивными демо на CodePen и JSFiddle.

    После прочтения этих материалов загляните на курс Создай сайт (англ.) от CodeAcademy. Потребуется всего несколько часов для прохождения этого курса. Он даст хорошую основу для построения сайтов на HTML и CSS. Если вы хотите больше, то Построение веб-форм (англ.) — еще одно руководство от CodeAcademy, которое научит вас создавать и стилизовать веб-формы.

    Чтобы попрактиковаться в CSS попробуйте CSS Diner (англ.). Это забавная игра с задачками по CSS. Другой важный аспект HTML и CSS — раскладка. LearnLayout (рус.) интерактивный учебник, показывающий как создавать раскладки на HTML и CSS.

    Так же изучите как пользоваться Google Fonts (англ.) при помощи статьи Основы Google Font API (англ.) от CSSTricks или Руководство по Google Font API (рус.). Типографика — это фундаментальная основа интерфейса. Когда у вас появится время, я крайне рекомендую вам прочитать эту бесплатную онлайн-книгу Professional Web (англ.) от Donny Truong. Она научит вас всему, что вы должны знать о типографике во фронтенд-разработке.

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

    Практика основ HTML и CSS

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

    Эксперимент 1

    В нашем первом эксперименте мы будем использовать CodePen. CodePen это площадка для фронтенда (“песочница”), где вы можете писать HTML и CSS код без создания файлов на вашем компьютере. Там так же есть функция живого предпросмотра, которая обновляется сразу после сохранения кода.

    Используя CodePen, вы убиваете двух зайцев сразу. С одной стороны вы практикуете HTML и CSS. C другой стороны вы создаете основу для портфолио с иллюстрациями вашего прогресса. Мы так же будем использовать Dribbble, который полон вдохновляющего дизайна.

    Идите на Dribbble и найдите дизайн, код для которого вы сможете написать за пару часов. Я выбрал несколько примеров, с которых вы можете начать: 1, 2, 3, 4 и 5. Я выбирал дизайны, ориентированные в первую очередь на мобильную разработку, потому что они менее сложны, чем их аналоги для обычных экранов. Тем не менее вы вольны выбрать вариант для десктопов.

    Когда вы определились с дизайном, идите и попробуйте сверстать его на CodePen. Если вы застряли, помните что StackOverflow (англ.) ваш друг. Другой полезной практикой будет пойти на такие сайты, как Medium, AirBnB и Dropbox и при помощи инструментов разработчика (англ.) посмотреть как реализована разметка и стили. Так же взгляните на некоторые примеры на CodePen. Я прикрепляю несколько хороших ссылок:

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

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

    Эксперимент 2

    Надеюсь, первый эксперимент дал вам определенную уверенность в написании HTML и CSS. Для эксперимента 2 мы заглянем на ряд сайтов, затем напишем код нескольких компонентов.

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

    • Dropbox for Business: Попробуйте повторить их секцию с баннерами (так называемые hero image (англ.))
    • AirBnB: Попробуйте повторить их футер
    • PayPal: Попробуйте повторить их навигацию
    • Invision: Попробуйте повторить секцию регистрации (signup) в нижней части страницы
    • Stripe: Попробуйте повторить секцию оплаты

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

    Вы можете использовать CodePen для своих экспериментов или выполните их на своем компьютере. Если вы планируете работать локально, то так же можете скачать этот пример проекта в качестве шаблона или создать файлы с нуля. Я советую вам использовать редакторы Atom или Sublime.

    К тому же помните, что вы всегда можете посмотреть HTML или CSS любого сайта. Просто кликните правой кнопкой мыши на странице или на определенном элементе, выберите “Просмотреть код” и появится панель с HTML кодом в левой части и CSS кодом в правой. После окончания верстки или в момент, когда вы в тупике проинспектируйте свой код и посмотрите, как взаимодействуют ваши HTML и CSS.

    Лучшие практики HTML и CSS

    То, что вы узнали выше — основы HTML и CSS. Следующим шагом будет изучение лучших практик. Лучшие практики представляют из себя набор правил, которые улучшат качество вашего кода.

    Семантичная разметка

    Одним из лучших правил для HTML и CSS это написание семантичной разметки. Хорошая веб-семантика означает использование подходящих HTML тегов и “говорящих” названий классов в CSS, которые будут передавать структурный смысл.

    Например, тег h1 говорит нам, что вложенный текст является важным заголовком. Другим примером является тег footer, который говорит нам что элемент должен располагаться внизу страницы. Для дальнейшего изучения прочтите Основы семантической верстки на HTML5 (рус.) и Для чего нужна семантика в именах классов (англ.) от CSSTricks.

    Соглашение об именах в CSS

    Следующая важная хорошая практика в CSS собственно соглашение об именах. Хорошее именование, как семантичная разметка, передает смысл и помогает сделать наш код предсказуемым, удобным для чтения и поддержки. Вы можете почитать о разных соглашениях в статье OOCSS, ACSS, BEM, SMACSS: что это? Что мне использовать? (англ.) или Правильный CSS: OOCSS, SMACSS, BEM и SASS (рус.).

    В общем я предлагаю вам начать с простых соглашений об именах, которые будут вам интуитивно понятны. Со временем придет понимание, с каким лично вам удобнее всего работать. Чтобы посмотреть, как большие компании типа Medium используют в своей работе BEM можете почитать CSS у Medium чертовски хорош (англ.). В этой статье вы так же узнаете, что составление эффективного набора CSS правил это процесс итеративный.

    Сброс CSS

    Браузеры имеют небольшие различия при отрисовке стилей, начиная от отступов и до высоты строк. По этой причине всегда сбрасывайте CSS. MeyerWeb — самый популярный способ. Если вы хотите копнуть глубже, то можете почитать Создайте свой собственный файл Reset.css (англ.).

    Кроссбраузерная поддержка

    Кроссбраузерная поддержка означает что ваш код поддерживает большую часть современных брузеров. Некоторые свойства CSS^ например transition, требуют префиксов (англ.) для их верной работы в разных браузерах. Можете почитать о префиксах в статьях CSS Vendor Prefixes (англ.) или Вендорные префиксы (рус.). Главное что вы должны запомнить — тестируйте свои сайты во всех браузерах, включая Chrome, Firefox и Safari.

    Препроцессоры и постпроцессоры CSS

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

    Препроцессоры представляют из себя расширения для языка CSS, которые добавляют наворотов типа переменных, миксинов и наследования. Два самых главных препроцессора Sass и Less. На 2020 год Sass более распространен. Bootstrap, популярный CSS фреймворк, переключился с Less на Sass. К тому же когда большинство людей заводят речь о Sass, то они на самом деле говорят о SCSS (рус.).

    Постпроцессоры CSS вносят изменения в код после того, как он был написан или после компиляции препроцессора. Например, некоторые постпроцессоры, тот же PostCSS, имеют плагины для автоматического добавления префиксов.

    Когда вы впервые открываете для себя препроцессоры и постпроцессоры, появляется соблазн использовать их везде. Тем не менее начните с простого и добавляйте переменные, миксины только там, где это действительно необходимо. Статья, о которой я упоминал ранее, CSS у Medium чертовски хорош (англ.), так же рассказывает о том, какие возможны излишки при работе с препроцессорами.

    Система сеток и отзывчивость

    Сетки в CSS это структура, позволяющая вам “укладывать” элементы горизонтально и вертикально.

    Такие фреймворки, как Bootstrap, Skeleton и Foundation предусматривают стили, управляющие строками и колонками в раскладке. В то время как фреймворки, безусловно, полезны, стоит понимать саму суть работы сеток. Прекрасные обзоры на эту тему: Понимание CSS сеток (англ.) и Don’t Overthink Grids (англ.).

    Одна из главных возможностей, которую дают сетки, это обеспечение отзывчивости вашего сайта. Отзывчивость ( responsiveness) означает, что сайт изменяет свои размеры в зависимости от ширины окна браузера. Долгое время отзывчивость достигалась при помощи медиавыражений в CSS (рус.): правил, срабатывающих только при определенных размерах экрана.

    Вы можете почитать больше на тему медиавыражений в статье Введение в медиавыражения (англ.). Так же, поскольку мы вступили в эру mobile-first (рус.), загляните в Введение в медиавыражения Mobile-First (англ.).

    Отработка лучших практик HTML и CSS

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

    Эксперимент 3

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

    Умение проводить эффективный рефакторинг кода — очень важный навык для фронтенд-разработчика. Создание эффективного кода- постоянный процесс. Возьмите статью CSS архитектура: рефакторинг CSS (англ.) в качестве отправной точки для вашей работы над рефакторингом.

    Ниже несколько вопросов, на которые вы должны себе ответить в процессе рефакторинга.

    • Не двусмысленны ли названия классов? Через полгода я все еще смогу понять, что означает название класса?
    • Семантичен ли мой HTML и CSS? Можно ли с первого взгляда определить структуру и взаимоотношения элементов?
    • Использую ли я одни и те же цвета в коде? Не будет ли логичнее вынести их в переменные Sass (англ.)?
    • Работает ли мой код в Safari так же хорошо, как в Chrome?
    • Нельзя ли заменить часть кода на систему сеток, например Skeleton?
    • Не слишком ли часто я использую !important? Как я могу это исправить?

    Эксперимент 4

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

    В качестве последнего эксперимента создайте собственный сайт-портфолио. Для фронтенд-разработчика портфолио—самый важный актив. Сайт-портфолио предназначен для демонстрации ваших работ. Что еще более важно, это постоянно обновляющийся отчет вашего прогресса в разработке. Поэтому создавайте портфолио даже если у вас 1–2 работы.

    Если первый вариант вашего портфолио не идеален — это нормально! Портфолио пройдет через множество итераций (рус.). В первую очередь важно использовать при разработке все ваши навыки.

    Будьте в курсе

    До тех пор, пока HTML и CSS не выйдут из употребления, важно оставаться в курсе всех событий в области фронтенда.

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

    Учитесь на примерах

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

    Стайлгайды

    Стайлгайды в вебе это наборы CSS компонентов и паттернов, которые могут быть использованы на разных сайтах. Ключевой вещью для обучения является понимание того, как повторно использовать компоненты на основе HTML и CSS и не нарушать принцип “Не повторяйся” (рус.).

    Соглашения о коде

    Соглашения о коде призваны сделать ваш код читабельным и легким в поддержке. Некоторые из этих ссылок, например CSS Guidelines (англ.), являются набором советов по улучшению написания HTML и CSS в то время, как другие ссылки, например Github internal CSS toolkit and guidelines (англ.) являются примерами эффективного кода.

    Сворачиваемся

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

    Эта статья первая из двух запланированных. Во второй части мы поговорим об интерактиве с помощью JavaScript и библиотеках/фреймворках. Кроме того если вы хотите чтобы я подробно на чем-то остановился или у вас появились вопросы, то не стесняйтесь писать мне в Twitter.

    P.S. Поделитесь этой статьей с друзьями, если она вам понравилась. Это много значит для меня.

    Нашли ошибку? Воспользуйтесь функцией Private notes: выделяете текст с ошибкой, нажимаете на символ замка в появившемся дудле и оставляете свой комментарий. Спасибо!

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

    Как это работает

    Вот что вам надо знать перед использованием навбара:

    • Навбары требуют «обертки» из классов .navbar и .navbar-expand <-sm|-md|-lg|-xl>для отзывчивости при «складывании»и классы , а также классы цветовых схем.
    • Навбары и их содержимое по умолчанию занимают 100% ширины. Используйте опциональные контейнеры для ограничения их горизонтальной ширины.
    • Используйте наши классы спейсинга и «флекс» для контроля над пространством и выравниванием внутри навбаров.
    • Навбары отзывчивы по умолчанию, но вы можете легко изменить это. Отзывчивое поведение зависит от нашего «плагина свертывания» JavaScript.
    • Навбары скрыты по умолчанию при печати. Сделайте их печатаемыми, добавив класс .d-print в .navbar . Смотри класс отображения.
    • Придайте им доступность использованием элемента

    В этом примере использованы классы цвета bg-light и спейсинга my-2 , my-lg-0 , mr-sm-0 , my-sm-0 .

    Бренд

    .navbar-brand можно применять к большинству элементов, но лучше всего – к ссылке, т.к. некоторые элементы могут потребовать классы или стили.

    Добавление изображений к .navbar-brand почти всегда потребует дополнительной стилизации CSS и классов.

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

    Активные состояния – с классом .active – нужны для индикации возможности применения текущей страницы напрямую к .nav-link или их непосредственному «родителю» .nav-item .

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

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

    Формы

    Размещайте внутри навбара различные элементы контроля форм и компоненты, добавив в них класс .form-inline .

    Выравнивайте содержимое ваших строчных форм классами-утилитами, как необходимо.

    Работают и формы ввода, также:

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

    Текст

    Благодаря классу .navbar-text навбары могут содержать «крупицы» текста. Этот класс придает строкам текста вертикальное выравнивание и горизонтальный спейсинг.

    Смешивайте и добивайтесь необходимого соответствия с другими компонентами и утилитами, как вам надо.

    Цветовые схемы

    Настройка оформления навбаров в BS4 стала столь легкой благодаря сочетанию классов оформления и утилит background-color . Выбирайте .navbar-light для навбара со светлым фоном, или .navbar-dark для навбара с темным фоном. Далее настраивайте их классами .bg-* .

    Контейнеры

    Хотя это и не требуется, вы можете обернуть навбар в .container для центрирования навбара на странице или добавить один навбар в .container лишь для центрирования содержимого навбара с фиксированной позицией “top”.

    Когда контейнер внутри вашего навбара, его горизонтальный паддинг удаляется на брейкпойнтах, меньших чем заданный вами .navbar-expand <-sm|-md|-lg|-xl>. Это гарантирует, что не произойдет ненужного удвоения паддинга на меньших вьюпортах, когда ваш навбар свернут.

    Размещение

    Используйте наши утилиты позиционирования для размещения навбаров в нестатичных позициях. Выбирайте из фиксированного наверху, внизу или «приклеивающегося» (прокручивается со страницей, пока не достигнет верха, и остается там). Фиксированные навбары используют position: fixed , поэтому они «исключены» из нормального строения DOM и могут потребовать добавления CSS (например, padding-top в ).

    Также обратите внимание, что .sticky-top использует position: sticky , которая не поддерживается полностью в каждом браузере.

    Компоненты

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

    Выпадающие меню

    Раскрывающиеся списки переключаемой, контекстная накладки для отображения списков ссылок и более. Они сделаны интерактивными с включенным Bootstrap выпадающего JavaScript плагин. Они переключаются нажатием, не парит; это преднамеренное дизайнерское решение.

    Содержание

    Примеры

    Переключение обернуть выпадающем (ваша кнопка или ссылка) и в выпадающем меню в .dropdown , или другой элемент, который заявляет, position: relative; . Раскрывающиеся списки могут быть вызваны из или элементы, чтобы лучше соответствовать вашим потенциальным потребностям.

    Одиночная кнопка выпадающего меню

    Ни один .btn можно превратить в выпадающем тумблер с некоторыми изменениями разметки. Вот как вы можете положить их на работу с элементы:

    Самое приятное, что вы можете сделать это с любым вариантом кнопки:

    Split кнопка с выпадающим меню

    Аналогичным образом создайте сплит кнопки раскрывающиеся списки с практически такой же разметки, как одной кнопки раскрывающиеся списки, но с добавлением .dropdown-toggle-split для правильного шрифта выпадающего каре.

    Мы используем эту экстра-класса, чтобы уменьшить горизонтальную padding по обе стороны от каретки на 25% и удалите margin-left , который добавляется для обычной кнопки выпадающих меню. Эти изменения держать курсор по центру кнопку разделить и обеспечить более точного размера нажмите рядом с основной кнопкой.

    Изменение размера

    Кнопка меню работы с кнопками всех размеров, в том числе по умолчанию и секущихся выпадающих кнопок.

    Вариант списка сверху

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

    Пункты меню

    Исторически выпадающем меню had чтобы быть одной, но это уже не в случае с v4. Теперь при необходимости можно использовать элементы в раскрывающихся списках, а не просто ы.

    Выравнивание меню

    По умолчанию, выпадающее меню автоматически устанавливается 100% от верхнего и вдоль левого края его родителя. Добавьте .dropdown-menu-right к .dropdown-menu для выравнивание выпадающего меню справа.

    Внимание! меню расположены только с CSS и может потребоваться некоторые дополнительные стили для точного выравнивания.

    Заголовки меню

    Добавьте заголовок чтобы маркировать участки в любом выпадающего меню.

    Dropdown header

    Делители меню

    Отдельные группы связанных элементов меню с делителем.

    Заблокированы части меню

    Добавить .disabled для пунктов в раскрывающемся меню стиль их как отключенные.

    Использование

    Через атрибуты данных или JavaScript, выпадающее плагин переключает скрытое содержание (выпадающие меню), переключая .open класс родительского элемента списка.

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

    Примечание: data-toggle=»dropdown» атрибут является основанием для закрытия выпадающего меню на уровне приложения, так что это хорошая идея, чтобы всегда использовать его.

    С помощью данных атрибутов

    Добавить data-toggle=»dropdown» на ссылку или кнопку для переключения в меню.

    Через JavaScript

    Вызвать меню через JavaScript:

    data-toggle=»dropdown» еще требуется

    Независимо от того, вызываете ли вы свой выпадающий список через JavaScript или вместо этого используете data-api, data-toggle=»dropdown» всегда должно присутствовать на спусковом элементе раскрывающегося меню.

    Варианты

    Методы

    Способ Описание
    $().dropdown(‘toggle’) Переключает меню данной панели навигации и вкладок навигации.

    События

    Все выпадающие события обстреляли .dropdown-menu ’родительский элемент S и relatedTarget свойство, значением которого является переключение элемента привязки.

    Событие Описание
    show.bs.dropdown Это событие немедленно срабатывает при вызове метода экземпляра-шоу называется.
    shown.bs.dropdown Это событие запускается, когда выпадающее меню становится видимым для пользователя (будет ждать CSS переходы для завершения).
    hide.bs.dropdown Это событие немедленно уволили, когда скрывать метод экземпляра называется.
    hidden.bs.dropdown Это событие запускается, когда в списке есть, который скрыт от пользователя (будет ждать CSS переходы для завершения).

    Спроектированы и построены со всей любовью в мире @mdo и @fat. Поддерживается основной командой с помощью наших спонсоров.

    Сейчас v4.0.0-alpha.4. Код лицензии MIT, документы CC BY 3.0.

    Цукерберг рекомендует:  Демонстрация модификации слайдера Nivo Slider
  • Понравилась статья? Поделиться с друзьями:
    Все языки программирования для начинающих