Вёрстка

Использование псевдоэлементов ::after и ::before является одним из самых популярных приёмов при вёрстке фрагментов веб-страниц и их стилизации. С их помощью можно выводить произвольный текст, добавлять тени, треугольники, линии и др.

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

Мы рассмотрим, зачем нужна анимация и познакомимся со свойствами transition и animation. Узнаем, как работают переходы и какими свойствами можно управлять для изменения движения. После этого мы рассмотрим свойство animation и научимся создавать ключевые кадры.

Font Awesome — это шрифт с иконками, которые могут добавляться к любым элементам веб-страницы, чтобы повысить их наглядность и улучшить дизайн. Разработчик Дэйв Ганди собрал впечатляющую коллекцию из несколько сотен иконок подходящих под любые задачи.

HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.

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

В CSS нет функций, нет повторяющихся фрагментов кода, в общем, нет ничего, что характерно для любого языка программирования и облегчения работы. На помощь приходят препроцессоры CSS, одним из них как раз и является Sass (Syntactically Awesome Stylesheets). Sass это особый метаязык, похожий на CSS, который поддерживает множество возможностей необходимых для работы со стилями.

Вёрстка с помощью flexbox, официально называемая CSS Flexible Box Layout Module, представляет собой новый модуль компоновки в CSS3, предназначенный для улучшения выравнивания, направления и порядка элементов в контейнере, даже если они имеют динамический или неизвестный размер.

Это книга о создании сайтов на HTML5 и CSS для самых новичков. Цель этой книги — рассказать об искусстве создания сайтов простым языком, полным практических аналогий. После прочтения свыше 100 печатных страниц вы освоите основные понятия и методы веб-разработки и будете в состоянии сделать свой первый сайт!

CSS запутан. Мы все любим его, но он запутанный. Я сравниваю его с английским языком: есть куча правил и вы можете узнать их. Но иногда гораздо лучше просто попробовать всякую гадость и увидеть, что работает, а что нет. Магия — это упорядочивание того, что я узнал из этого сумасшедшего процесса.

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

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

Псевдоэлементы ::before и ::after — это невероятные универсальные помощники в наборе инструментов CSS. Их понимание поможет вам создать практичный CSS для разрешения самых разных ситуаций. Или же вы можете пойти дальше и использовать их для создания впечатляющих трюков CSS.

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

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

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

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

Bootstrap 4 капитально переработал Bootstrap 3 и многое поменял в его функционировании. Множество изменений было внесено в компоненты, таких как таблицы, формы, сетки, выпадающие списки, панели навигации и многое другое.

Bootstrap — это бесплатный набор инструментов с открытым исходным кодом для создания сайтов и веб-приложений. Это самый популярный HTML, CSS и JavaScript-фреймворк для разработки адаптивных и ориентированных на мобильные устройства проектов в Интернете.

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

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

Флексбоксы (Flexbox, от flexible box — гибкие блоки) дают веб-разработчикам контроль над расположением элементов, их выравниванием и размерами внутри контейнера.

Стилевое свойство clip-path — это способ отказаться от однообразных прямоугольных макетов, традиционно ассоциируемых с плоским, адаптивным дизайном. Вы станете думать не только о прямоугольниках, на ваших страницах они буквально начнут принимать форму шестиугольников, звёзд и восьмиугольников.

Структурные псевдоклассы позволяют выбрать элементы, основываясь на их положении в дереве документа и отношении к другим элементам. К примеру, :first-child выбирает первый элемент в группе братских элементов, т. е., имеющих одного родителя.

«Уроки по HTML и CSS» являются простым и полным руководством, целью которого служит помощь начинающим при обучении HTML и CSS. Излагая основы, это руководство проходит через все основные этапы проектирования и разработки.