Верстка сайта html: Как сверстать веб-страницу. Часть 1 / Хабр

1185 

19

19 людям нравится этот кейс

еще 14

НОМИНАНТ WDA

#Мобильные приложения

Мобильное приложение для сети зоомаркетов Ле’Муррр

935 

40

40 людям нравится этот кейс

еще 35

НОМИНАНТ WDA

#Разработка сайтов

CarClick. Разработка онлайн-аукциона автомобилей под ключ

2818 

42

42 людям нравится этот кейс

еще 37

Что такое верстка сайта и какой она бывает

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

Рассказываем, из чего состоит верстка сайта. 

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

Каждый браузер может по-разному отображать элементы сайта. Поэтому их стоит проверять на разных платформах. 

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

После верстки проверьте, как сайт работает на разных девайсах и в браузерах.  

Также посмотрите, есть ли в коде незакрытые теги, корректна ли семантическая разметка для поисковиков. Убедитесь в кроссбраузерности и проверьте функциональность страницы.

Стандартные этапы верстки

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

Адаптивная верстка

Это самый популярный тип верстки, который будет правильно отображаться на любом устройстве. То есть у верстки будет своя версия для каждого типа девайса.  

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

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

Фиксированная верстка 

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

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

Табличная верстка

Для этого типа используют таблицы с информацией (то есть HTML-тег <table>). Сам сайт представлен как одна большая таблица. 

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

Блочная верстка 

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

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

Avocode 

Инструмент для командной работы — в нем дизайнер и девелопер могут обмениваться информацией. 

Преимущество Avocode — поддержка основных форматов без установки дополнительных плагинов. Программа поддерживает файлы Photoshop (PSD), Sketch, Adobe XD и Illustrator. Также доступна частичная интеграция с Figma.  

Стоимость: $15 — для одного человека, $22 — для команды.

Bootstrap

Здесь много переменных и миксинов Sass, адаптивных систем сеток, обширных готовых компонентов и плагинов JavaScript. Bootstrap помогает создавать и настраивать сайты, ориентированные на мобильные устройства. 

Стоимость: бесплатно.

CodeKit

Это программное обеспечение, которое помогает создавать CSS-, HTML-  и JavaScript-код для сайта. CodeKit автоматически компилирует Sass, LESS, Haml, Markdown, Coffeescript и другие языки предварительной обработки, давая возможность разработать сайт на любом языке.

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

Стоимость: $38 — $45.

Divi 

Конструктор страниц и тем WordPress. Редактор предлагает сотни готовых шаблонов для любого типа сайтов. В нем есть разные функции — от адаптивного редактирования до настраиваемого элемента управления CSS. 

Стоимость: $89 — $249. 

Framer

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

Бесплатная версия позволяет использовать до 2 редакторови до 3 проектов. Количество зрителей остается неограниченным. Платная версия подходит для команд, которые хотят управлять пользователями и сотрудничать с разработчиками. В ней доступны пользовательские шаблоны и шрифты, неограниченное количество проектов, а также частные ссылки для общего доступа. 

 Стоимость: $0 — $20.

Узнайте достаточно HTML, CSS и макета, чтобы быть опасным: введение в современные системы создания веб-сайтов и шаблонов (LiveLessons):

Описание

• онлайн видео
• ISBN-10: 0-13-784237-6
• ISBN-13: 978-0-13-784237-7

Более 16 часов видеоинструкций

В Изучите HTML, CSS и верстку, чтобы быть опасными: введение в современные системы создания веб-сайтов и шаблонов, Известные инструкторы Ли Донахью и Майкл Хартл обучают концепциям, навыкам и подходам, которые необходимы для того, чтобы современные веб-сайты размещались во всемирной паутине.

Обзор

Изучите достаточно HTML, CSS и макет, чтобы быть опасным научит вас создавать современные веб-сайты с использованием языка гипертекстовой разметки (HTML) и каскадных таблиц стилей (CSS). Видео включает в себя несколько забытых, но важных методов для макета страницы, в том числе более продвинутые методы CSS, такие как flexbox и CSS grid. Он также охватывает использование генератора статических сайтов для создания веб-сайтов, которые легко поддерживать и обновлять. Наконец, Узнайте достаточно HTML, CSS и макета, чтобы быть опасным показывает, как регистрировать и настраивать пользовательские домены, включая настраиваемые URL-адреса и настраиваемые адреса электронной почты. Вы можете думать об этом руководстве как о веб-сайте в коробке: все, что вам нужно (и ничего лишнего) для разработки, создания и развертывания современных веб-сайтов профессионального уровня.

В дополнение к обучению определенным навыкам, Learn Enough HTML, CSS and Layout to Be Dangerous также поможет вам развить техническую изощренность — кажущуюся волшебной способность решать практически любую техническую проблему. Техническая изощренность включает в себя конкретные навыки, такие как контроль версий и HTML, а также более нечеткие навыки, такие как поиск сообщения об ошибке в Google и знание того, когда просто перезагрузить чертову штуку. На протяжении всего видео у вас будет множество возможностей развить техническую сложность в контексте реальных примеров. Целенаправленные упражнения помогут вам усвоить то, что важно, не тратя время на детали, которые не волнуют профессионалов. Скоро будет как тебе родился зная это — и ты внезапно, серьезно опасен .

Об инструкторах

Ли Донахью — соучредитель программы Learn Enough, предприниматель, дизайнер и разработчик внешнего интерфейса. Помимо разработки дизайна для книг Learn Enough, Softcover и Ruby on Rails Tutorial , он также является соучредителем и разработчиком внешнего интерфейса для Coveralls, ведущей службы анализа тестового покрытия, и является техническим соучредителем Buck Mason, производителя мужской одежды. компания когда-то фигурировала на канале ABC Бак для акул . Ли является выпускником USC, где он специализировался в области экономики и изучал интерактивные мультимедиа и технологии.

Майкл Хартл — создатель Ruby on Rails Tutorial , одного из ведущих вводных материалов в веб-разработку, а также соучредитель и главный автор Learn Enough. Ранее он был преподавателем физики в Калифорнийском технологическом институте (Калифорнийский технологический институт), где получил награду Lifetime Achievement Award за выдающиеся достижения в области преподавания. Он выпускник Гарвардского колледжа, имеет докторскую степень по физике Калифорнийского технологического института и является выпускником программы для предпринимателей Y Combinator.

Уровень квалификации

• Начальник к промежуточному. страницы текста и форматирования
• Используйте CSS для создания цветов и размеров
• Используйте генератор статических сайтов для размещения одинаковых элементов на каждой странице
• Создавайте гибкие макеты страниц с помощью flexbox
• Создание профессионального приложения для блога
• Регистрация и настройка пользовательских доменов

Кому следует пройти этот курс

• Тем, кто хочет создавать и развертывать современные веб-сайты
• Начинающие дизайнеры и разработчики интерфейсов

33

• Требования к курсу
  • Знание командной строки Unix, текстового редактора и контроля версий с помощью Git (как описано, например, в Изучите достаточно инструментов разработчика, чтобы быть опасным )

  Описание уроков

  Урок 1: Базовый HTML
  Под каждым веб-сайтом, каким бы простым или сложным он ни был, вы найдете HTML. В Уроке 1 вы узнаете об основной структуре HTML-страницы. Вы создаете простой документ с элементами, необходимыми каждой HTML-странице, чтобы веб-браузер мог волшебным образом преобразовать ее из текстового документа с кучей странных символов в настоящую веб-страницу. Поскольку модуль 1 предполагает отсутствие опыта работы с HTML, вы начинаете с написания только абсолютного минимума содержимого, которое должно быть на любой HTML-странице, чтобы быть корректной. Это пока не будет выглядеть красиво, но это фундаментальные знания для всего, что вы строите в этом уроке. Вы также заведете очень полезную привычку отслеживать изменения кода с помощью системы контроля версий Git и отправлять эти изменения в GitHub для безопасного хранения. Вы даже делаете свою начальную веб-страницу общедоступной в Интернете с помощью GitHub Pages. Фактически, каждый урок во всем этом руководстве будет заканчиваться фиксацией ваших изменений и развертыванием сайта в реальном Интернете.

  Урок 2: Заполнение индексной страницы
  На уроке 2 вы берете очень простую индексную страницу, созданную на предыдущем уроке, и начинаете заполнять образец страницы содержимым. Вы будете использовать свою индексную страницу, чтобы начать изучать различные теги HTML, которые содержат и изменяют текст. Вы начнете с изучения тегов HTML, содержащих текст, например заголовки или абзацы. Эти теги могут изменять внешний вид содержащегося в них текста, но их основная цель — определить общую структуру страницы. Позже в Модуле 2 вы будете размещать блоки внутри блоков, внутри блоков, а затем размещать их на странице всевозможными способами. Далее вы узнаете о HTML-тегах, которые изменяют текст, то есть в основном используются для изменения внешнего вида содержимого, которое они содержат. Например, вы узнаете о тегах, которые могут форматировать текст курсивом или полужирным, не затрагивая все вокруг. Вы завершите урок, научившись добавлять ссылки на другие страницы, ссылки на изображения и даже связанные изображения.

  Урок 3: Больше страниц, больше тегов
  В Уроке 3 вы научитесь добавлять дополнительные страницы на свой новый веб-сайт, что даст вам возможность изучить еще больше полезных HTML-тегов. Первая новая страница, которую вы добавите, будет страницей с содержанием HTML-тегов. Это очень мета HTML-страница о HTML. Создание этой новой страницы дает вам возможность закрепить предыдущий материал, а также возможность получить опыт использования новых элементов HTML, которые не добавляют какого-либо особого внешнего вида. Например, таблицы и элементы div — это поля общего назначения, которые можно использовать для организации содержимого. Вы также заключаете текст в контейнеры общего назначения, называемые промежутками, которые позже позволят вам манипулировать определенными частями текста, не затрагивая содержимое вокруг промежутка. Вы также добавляете вторую новую страницу в виде беззаботного отчета о книге, чтобы дать вам место для дальнейшей практики организации контента. В процессе создания этой страницы вы также научитесь составлять маркированные и нумерованные списки и настраивать базовую навигацию по сайту, чтобы вы могли легко переключаться между всеми нашими страницами. К концу этого урока вы также начнете замечать некоторые ограничения, присущие нашему чисто ручному подходу к созданию веб-сайта, который включает в себя копирование и вставку таких элементов, как меню навигации, с одной страницы на другую. Модуль 2 охватывает решение этих ограничений.

  Урок 4: Встроенные стили и CSS
  В Уроке 4 мы приступим к изучению стилей контента. Настоящие уроки стилей начнутся в Модуле 2, но сначала мы собираемся использовать метод применения стилей, называемый встроенным стилем, где код для визуального стиля применяется непосредственно к элементам. Мы начнем с рассмотрения основных функций, таких как изменение цвета или размера текста. Затем вы научитесь перемещать изображение, чтобы текст обтекал его, а также применять поля для создания границы между текстом и изображением. Позиционирование и размещение изображений внутри текста — полезный навык при создании страницы, на которой смешаны текст и изображения, описывающие большую часть интернет-контента. Вы также узнаете, как использовать поля и новую концепцию, называемую отступами, для создания элементарного макета страницы для вашего контента. Урок 4 завершается перемещением встроенных стилей во внутреннюю таблицу стилей на наших HTML-страницах. Затем мы перемещаем все эти стили со страниц в один внешний файл, на который мы можем ссылаться на каждой странице. В результате сложная в обслуживании HTML-страница с разбросанными повсюду стилями превращается в более чистый HTML-файл и отдельный файл стилей. Такие отдельные файлы являются наиболее распространенным способом организации каскадных таблиц стилей, которым посвящен модуль 2.

  Урок 5: Введение в CSS
  В Уроке 5, первом уроке модуля 2, вы погружаетесь в каскадные таблицы стилей, язык веб-дизайна. В этом уроке вы сделаете первые шаги на пути к разработке гораздо более сложного стиля веб-сайта с использованием CSS. Вы начинаете с краткого обзора того, как развивался CSS. А затем вы создаете новую страницу с чистого листа, чтобы начать работу над ней. Это будет главная страница нашего нового сайта. Вы исследуете, что означает «каскадная» часть каскадных таблиц стилей и как стили, которые вы применяете к одному элементу, распространяются на другие элементы внутри. Вы также узнаете о различных методах, которые можно использовать для идентификации отдельных элементов или групп элементов на странице с помощью имен классов и идентификаторов. В уроке 5 тема стилей рассматривается с несколько более тонкой точки зрения и дает более глубокое понимание того, как браузеры отображают стили на веб-страницах.

  Урок 6: Стиль стиля
  В Уроке 6 вы опираетесь на то, что узнали на предыдущем уроке, чтобы развить понимание стиля стиля. Другой способ сказать это также может заключаться в том, как сделать правильный выбор при наименовании и структурировании различных частей нашего сайта. Попутно вы также расширите свое понимание того, о чем заботятся браузеры. В Уроке 5 вы применяли стили к объектам, используя идентификаторы и классы, а также ориентируясь на типы элементов в целом, но в этом уроке мы углубимся в то, как различные их комбинации влияют на то, что отображается в браузере.

  Урок 7: Значения CSS: Цвет и размер
  В Уроке 7 мы начинаем изучать, что можно сделать со стилями, в частности, как цвет работает на веб-страницах и как указывать размеры. Цвет и размер — это два типа значений CSS, которые могут принимать различные формы. Большинство объявлений CSS говорят сами за себя. Не так уж много людей запутается в выравнивании текста по левому краю, но есть немало тех, у кого есть дополнительные сложности, странные исключения или просто странные способы написания значения. Так что этот урок описывает некоторые из того, как и почему эти стили.

  Урок 8: Блочная модель
  Во второй половине урока 7 мы рассказывали, как определять размеры в CSS. В уроке 8 вы берете эти значения и смотрите, как их использовать для понимания одной из самых важных концепций CSS — блочной модели. Блочная модель CSS — это собирательное название для всех правил, которые определяют, как высота, ширина, поля, отступы и границы применяются к элементам и как эти элементы затем взаимодействуют со всем остальным на странице. Этот урок даст вам инструменты, которые вам нужны, чтобы изучить различные способы стилизации элементов, изучить несколько методов размещения блоков рядом друг с другом и использовать свое новое понимание того, как браузер отображает элементы для создания основы. для макета, который в конечном итоге станет вашим полноценным веб-сайтом.

  Урок 9: Разметка всего
  Урок 9, вы действительно начнете работать с материалом, который вы вряд ли увидите в каком-либо другом учебнике по CSS — посмотрите, как он вписывается в систему, которая позволяет вам модульно структурировать весь веб-сайт. На этом уроке вы установите и настроите генератор статических сайтов под названием Jekyll. Это позволяет вам нарезать ваш HTML-код, чтобы Jekyll мог автоматически рекомбинировать его части для отображения всего, что необходимо для конкретной страницы. После установки и запуска Jekyll вы начинаете процесс разделения своей предыдущей работы, чтобы преобразовать ее в набор шаблонов и макетов страниц, которые можно легко повторно использовать и обновлять. В процессе реструктуризации вашего сайта вы также добавляете дополнительные стили, чтобы изучить более сложные аспекты CSS, а затем используете эти методы, чтобы помочь нам усовершенствовать наш дизайн, чтобы сделать его более подходящим для использования в качестве личного или делового веб-сайта. .

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

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

  Урок 12: Добавление блога
  Приведя свой сайт в порядок с помощью flexbox, в Уроке 12 вы научитесь делать второй макет. Вы используете этот новый макет в качестве основы для добавления блога на свой образец веб-сайта, но вы можете использовать ту же концепцию для любого вида контента, такого как документация или информация о продукте. Добавление блога на ваш сайт даст вам возможность применить большую часть рассмотренного CSS, например стили шрифтов, поля, отступы, селекторы и, конечно же, flexbox. Jekyll — это платформа для работы с блогами, предварительно настроенная для понимания того, как обрабатывать и читать контент для создания сайтов, похожих на блоги. В отличие от некоторых других контент-платформ, с которыми вы, возможно, знакомы, здесь нет системы управления контентом. Вы не сможете ввести текст в поле и нажать кнопку, чтобы сделать что-то курсивом или жирным шрифтом. Вместо этого вы будете писать контент в виде отдельных текстовых файлов, использующих упрощенный формат разметки, называемый Markdown, а затем Jekyll возьмет эти файлы и автоматически превратит их в HTML. Это без излишеств, но это бесконечно настраиваемая система, которая позволяет вам создавать контент с помощью текстового редактора по вашему выбору. Это не оставляет вас на милость стороннего сервиса, который может закрыться в любой момент. А поместив проект под контроль версий с помощью Git, вы также получите полный архив истории сайта. О, и вишенка на торте: со страницами GitHub у вас есть бесплатный хостинг.

  Урок 13: Запросы мобильных медиа
  В Уроке 13 вы добавите несколько слоев полировки, которые помогут вашему сайту выглядеть профессионально. Самым важным изменением будет стиль, который позволит вашему сайту хорошо выглядеть как на настольных, так и на мобильных устройствах, практика, известная как адаптивный дизайн. Чтобы наш сайт реагировал на разные размеры экрана, вы используете магию CSS, называемую медиа-запросами, которые можно настроить на применение определенных стилей к странице только тогда, когда экран имеет определенную ширину или какой-либо другой атрибут. В конце урока вы также убедитесь, что меню вашего сайта хорошо работает на мобильных устройствах. До сих пор меню выпадало только при наведении на него курсора мыши, а теперь вы собираетесь заставить его реагировать и на касания экрана. Самое приятное то, что вы собираетесь делать все это с помощью только HTML и CSS, вместо того, чтобы приглашать на вечеринку более сложные технологии, такие как JavaScript.

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

  Урок 15: CSS-сетка
  Урок 15 представляет собой в значительной степени самостоятельное введение в невероятно мощную современную технику CSS, известную как CSS-сетка. Используя две страницы-скелеты, сначала обложку с помощью сетки, чтобы (что неудивительно) создать простую сетку контента. Затем немного изменим нашу точку зрения на то, как браузер понимает сетку CSS, и используем ее для создания двух разных макетов: один с сеткой за пределами всей страницы, а другой, где мы размещаем сетку внутри каждого основного раздела страницы, чтобы предоставить структуру, к которой мы можем привязывать дочерние элементы. К концу у вас будет четкое представление о том, как можно использовать сетку CSS для различных макетов сайта.

  О Pearson Video Training

  Pearson публикует видеоуроки под руководством экспертов, охватывающие широкий спектр технологических тем, предназначенные для обучения навыкам, необходимым для достижения успеха. В этих профессиональных и личных видеороликах по технологиям представлены ведущие мировые авторы-инструкторы, опубликованные вашими надежными технологическими брендами: Addison-Wesley, Cisco Press, Pearson IT Certification, Sams и Que. Темы включают: сертификацию ИТ, сетевую безопасность, технологии Cisco, программирование, веб-разработку. , мобильная разработка и многое другое. Узнайте больше об обучении Pearson Video на странице informit.com/video.

  Видеоуроки доступны для скачивания для просмотра офлайн в потоковом формате. Ищите зеленую стрелку в каждом уроке.

  

  Содержание выборки

  СОДЕРЖАНИЕ

  ВВЕДЕНИЕ

  Модуль 1: HTML

  Урок 1: базовый HTML
  . 1.4 Первый тег
  1.5 Скелет HTML

  Урок 2: заполнение на странице индекса
  Темы
  2.1 Заголовки
  2.2 Форматирование текста
  2.3 Ссылки
  2.4 Добавление изображений

  Урок 3: больше страниц, больше тегов
  ТЕХОДНЫЕ
  3.1. Таблицы
  3.3 Разделы и диапазоны
  3.4 Списки
  3.5 Меню навигации

  Урок 4: Встроенные стили и CSS
  Темы
  4. 1 Стиль текста
  4.2 Плавающие элементы
  4.94 Применение полей 491 Дополнительные приемы0119 4.5 Стиль блока
  4.6 Стиль навигации
  4.7 Вкус CSS
  4.8 Заключение

  Модуль 2: CSS и макет

  Урок 5: Введение в CSS 19-191 Темы
  5.2 Обзор и история CSS
  5.3 Пример настройки сайта
  5.4 Начать стилизацию
  5.5 Селекторы CSS

  Урок 6: Стиль стиля
  Темы
  6.1 Именование вещей
  6.2 Когда и почему
  Специфичность 6.3
  6.4 Как быть хорошим гражданином стиля

  Урок 7: Значения CSS: цвет и размер
  Темы
  7.1 Цвет CSS
  7.2 Введение в изменение размера
  7.3 Пиксели (и их менее используемый родственник, точка)
  7.4 Проценты
  7.5 em
  7.6 rem не только для мечтаний
  7.7 vh, vw: Новые дети в блоке
  7.8 Приятные шрифты

  Урок 8: Блочная модель
  отступы и границы
  8. 3 Поплавки
  8.4 Еще немного о стиле переполнения
  8.5 Встроенный блок
  8.6 Поля для ящиков
  8.7 Набивка … не только для стульев
  8.8 Веселье с границами

  9.1 Основы макета
  9.2 Jekyll
  9.3 Макеты, включения и страницы (о боже!)
  9.4 Файл макета
  9.5 Файл CSS и сброс
  9.6 Включает введение: заголовок и заголовок
  9.7 Расширенные селекторы
  9.8 Позиционирование
  9.9 Фиксированный заголовок
  9.10 нижний колонтитул и включает в себя

  Урок 10: Шаблоны страниц и передняя мешка
  Темы
  10.1 Содержание шаблонов
  10.2 Нет места, как Home
  10.3. Более продвинутые селекторы
  10.4 Другие страницы, другие папки

  Урок 11: 1: 10.4, другие папки

  . Специализированные макеты страниц с Flexbox
  Темы
  11.1 Содержимое заполняет контейнер
  11.2 Вертикальное центрирование flexbox
  11.3 Параметры стиля Flexbox и сокращение
  11. 4 Макет страницы с тремя столбцами
  11,5 Галерея Стаб

  Урок 12: Добавление блога
  Темы
  12.1 Добавление в блогах посты
  12.2 Индекс блога контент контент
  12.3. Страница сообщения в блоге

  Урок 13: Мобильные СМИ
  Топарки 13.1 Начатые начало. Строительные началы. Строты. Не начаты начала начало. Стартовые начало. Стартовые начало. Стартовые начало. Стартовые начало. с дизайном для мобильных устройств
  13.2 Адаптация для мобильных устройств
  13.3 Область просмотра для мобильных устройств
  13.4 Выпадающее меню
  13.5 Выпадающее меню для мобильных устройств

  Урок 14. Добавление дополнительных штрихов
  Темы
  14.1 Пользовательские шрифты
  14.2 Фавиконки
  14.3 Пользовательский заголовок и метаописание
  14.4 Заключение и дополнительная литература

  Урок 15: CSS Grid

  Резюме

  Тестирование вашего веб-сайта by Purrweb

  Обычно фронтендеры берут на себя роль разработчика HTML/CSS. Самая большая ловушка, которой следует избегать, — это самоуверенность. Почему? Потому что даже если макет выглядит великолепно на одном рабочем столе, это не обязательно означает, что он так же «отличен» на других экранах, браузерах и разрешениях.

  Предположим, вам дали проект. Допустим, это веб-сайт. Дизайн сайта представлен в виде макета: в Figma, Zeplin (Sketch) или Adobe XD. Итак, вы взяли дизайн проекта и уже создали первый шаблон HTML/CSS. Пришло время начать фронтальное тестирование производительности. Какие шаги предпринять? Давайте разберемся с этим!

  Эта статья будет очень полезна для вас, если:

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

  Теперь давайте сразу к делу.

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

  «Контакты», вы ошиблись адресом!

  Выше вы можете увидеть экран «Свяжитесь с нами» с веб-сайта Purrweb. Мы разработали и разработали его в прошлом году. Макет, т.е. «Как должно быть», находится слева. То, что вы можете увидеть справа, это «Как это было».

  Еще один пример.

  Расстояние между значками другое — это ошибка

  Другой случай, та же ошибка. Макет один слева, фактический результат справа. Тут что-то пошло не так со значками.

  Чтобы избежать ошибок при внешнем тестировании, проверьте, идентичны ли размеры элементов, шрифты и цвета. Чтобы добиться идеальной точности, попробуйте Pixel Perfect (название инструмента говорит само за себя, не так ли?).

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

  Что будет, если не учитывать размер экрана? Чтобы дать вам ответ, давайте рассмотрим несколько ошибок, которые мы допустили при разработке нашего веб-сайта.

  Здесь высота экрана меньше 700 пикселей, поэтому форма «Свяжитесь с нами» обрезана, а кнопка «Отправить» полностью исчезла

  На каких экранах будет использоваться сайт? — Разберись с этим сначала. Это поможет вам свести к минимуму риск неожиданных сюрпризов в будущем, а пользователи смогут легко открыть его. Даже на очень маленьком экране.

  Вот 10 самых популярных разрешений экрана, используемых посетителями веб-сайта Purrweb:

  Как минимум, нам нужно было проверить макет для каждого из них

  У пользователей могут быть самые разные предпочтения. Некоторые могут предпочесть MacBook Air, в то время как другим могут понравиться огромные дисплеи. Но вне зависимости от предпочтений, все они ожидают увидеть четкие и качественные сайты — здорово, когда верстка этому не помеха.

  Еще одна вещь, которую следует учитывать при внешнем тестировании, заключается в том, что вы должны выйти за рамки Google Chrome и протестировать производительность веб-сайта также в Safari, Firefox и Microsoft Edge. Чтобы избежать ситуации, как:

  Шрифты в Firebox кажутся жирнее. В этом примере заполнитель «Поиск» почти исчез. Safari снова. Здесь мы видим проблему с горизонтальной полосой прокрутки

  . Кажется, я уже поделился слишком большим количеством экранов веб-сайта Purrweb. Но это совершенно нормально, не так ли? Давайте проверим еще один пример.

  В MS Edge и меню, и кнопка «Читать» выделены, а значок стрелки выглядит как квадратный блок

  Вероятно, вам также следует посмотреть, как веб-сайт работает в «почти мертвом» Internet Explorer. Статистика веб-сайта Purrweb только подтверждает тот факт, что некоторые люди все еще используют его.

  По статистике IE входит в десятку самых популярных браузеров. Видеть?

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

  В IE ширина текста меню и текстового блока не регулируется

  Поддержка Internet Explorer за последние несколько лет стала головной болью. Когда дело доходит до совместимости браузеров, разработчики игнорируют ее. НО! IE жив до тех пор, пока живут пользователи IE, верно? Так что протестируйте свой сайт и в этом браузере — если что-то не так, обсудите это со своей командой (можно начать с менеджеров проектов).

  Небольшой совет: имейте в виду, что Google Chrome в Mac OS полностью отличается от версии для Windows.

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

  Эта штука… случайно расположенные значки!

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