- Create a repository `goit-markup-hw-03`.
- Clone the created repository and copy the files of the previous work into it.
- Perform page layout HTML markup and page layout styling homework #3.
- Set up `GitHub Pages` and add a link to the live page in the header of the GitHub-repository.
- Створи репозиторій `goit-markup-hw-03`.
- Схиляй створений репозиторій та скопіюй у нього файли попередньої роботи.
- Додай стилі для геометрії (ширини, відступи, поля та рамки) та позиціонування контенту за допомогою Flexbox для сторінок макета homework #3.
- Налаштуйте `GitHub Pages` та додай посилання на живу сторінку в шапку GitHub-репозиторія.
- Создай репозиторий `goit-markup-hw-03`.
- Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
- Добавь стили для геометрии (ширины, отступы, поля и рамки) и позиционирование контента при помощи Flexbox для страниц макета homework #3.
- Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку GitHub-репозитория.
«A1» At the root of the project there is a folder images with images.
«A2» At the root of the project there is a css folder with style files.
«A3» All styles are written in one styles.css file, which is located in the css folder.
«A4» There are no capital letters, spaces and transliteration in the file names, only letters and words of the English language.
«A5» Source code formatted with Prettier.
«A6» All images and text content are taken from the layout.
«A7» All HTML pages have a style normalizer modern-nomalize.
«A8» The code is written as follows manual.
«B1» Allow global reset of styles by tag selector for elements <h1>...<h6>, <p> и <ul>.
«B2» Elements do not have margins (the margin property) that "pierce" parent element.
«B3» In single-line element collections, cleared the leftmost or rightmost margin elements (if any).
«B4» For padding between two adjacent elements, use the property margin.
«B5» For the gap between the border of the parent and its child, use the padding property.
«B6» Sizes of outer margins (margin property) and inner margins (the padding property) of the elements are set exactly according to the layout.
«B7» Generic .container helper class created for centering and content width restrictions.
«B8» The width of the "container" corresponds to the layout and is equal to 1200px.
«B9» "Container" wraps the content of the header, footer and sections. That is inside them.
«B10» Flexbox is used to position elements, but only where necessary. For example, in the header, navigation, lists in sections, and so on, that is, where it is impossible to arrange elements horizontally differently.
«B11» The final sizes of the blocks in the browser correspond to the layout.
«B12» Elements do not have a fixed height, it is determined by their content.
«B13» The header has a bottom frame, you need to zoom in very close to the layout to see it.
«B14» The sections are stacked on top of each other like a stack of books, with no outside padding.
«B15» For all sections, one .section class is used, top and bottom paddings are set by 94px, pushing the content inside the section.
«B16» To build grids, the technique described in the abstract and video workshop is used.
«B17» The cards on the Portfolio page have a border (the border property), but only at the bottom of the card.
📚 UK 📚 ⬆ Home ⬆
«A1» У корені проекту є папка images із зображеннями.
«A2» У корені проекту є папка css з файлами стилів.
«A3» Усі стилі написані в одному файлі styles.css, який знаходиться в
папці css.
«A4» У назвах файлів немає великих літер, пробілів і трансліту, тільки
літери та слова англійської мови.
«A5» Вихідний код відформатований за допомогою Prettier.
«A6» Усі зображення та текстовий контент взяті з макета.
«A7» На всіх HTML-сторінках підключений нормалізатор стилів modern-nomalize.
«A8» Код написаний за керівництво.
«B1» Допускається глобальне скидання стилів по селектору тега для елементів
<h1>...<h6>, <p> і <ul>.
«B2» У елементів немає зовнішніх відступів (властивість margin) «пробиваючих»
Батьківський елемент.
«B3» В однорядкових колекціях елементів очищений крайній лівий або правий
margin елементів (якщо він є).
«B4» Для відступів між двома сусідніми елементами використовується властивість
Margin.
«B5» Для зазору між кордоном батька та його дитиною використовується
властивість Padding.
«B6» Розміри зовнішніх відступів (властивість margin) та внутрішніх полів
(Властивість padding) елементів задані точно за макетом.
«B7» Створено загальний допоміжний клас .container для центрування та
обмеження контенту за шириною.
B8 Ширина "контейнера" відповідає макету і дорівнює 1200px.
«B9» «Контейнер» обертає контент хедера, футера та секцій. Тобто
знаходиться усередині них.
«B10» Для розташування елементів використовується Flexbox, але тільки там,
де це потрібно. Наприклад у шапці, навігації, списках у секціях тощо,
тобто там, де розташувати елементи горизонтально інакше неможливо.
«B11» Фінальні розміри блоків у браузері відповідають макету.
«B12» У елементів немає фіксованої висоти, вона визначається їх контентом.
«B13» У хедера є нижня рамка, необхідно сильно наблизити макет щоб
побачити її.
«B14» Секції розташовані один під одним як стопка книг, без зовнішніх
відступів.
«B15» Для всіх секцій використовується один клас .section, задані верхні та
нижні падинги по 94px, що відсувають контент усередину секції.
«B16» Для побудови сіток використовується техніка описана в конспекті та
відео-майстерні.
«B17» У картках на сторінці Портфоліо є рамка (властивість border),
але лише у нижній частині картки.
📚 RU 📚 ⬆ Home ⬆
«A1» В корне проекта есть папка images с изображениями.
«A2» В корне проекта есть папка css с файлами стилей.
«A3» Все стили написаны в одном файле styles.css, который находится в
папке css.
«A4» В названиях файлов нет заглавных букв, пробелов и транслита, только
буквы и слова английского языка.
«A5» Исходный код отформатирован при помощи Prettier.
«A6» Все изображения и текстовый контент взяты из макета.
«A7» На всех HTML-страницах подключен нормализатор стилей modern-nomalize.
«A8» Код написан следуя руководству.
«B1» Допускается глобальный сброс стилей по селектору тега для элементов
<h1>...<h6>, <p> и <ul>.
«B2» У элементов нет внешних отступов (свойство margin) «пробивающих»
родительский элемент.
«B3» В однострочных коллекциях элементов очищен крайний левый или правый
margin элементов (если он есть).
«B4» Для отступов между двумя соседними элементами используется свойство
margin.
«B5» Для зазора между границей родителя и его ребёнком используется
свойство padding.
«B6» Размеры внешних отступов (свойство margin) и внутренних полей
(свойство padding) элементов заданы точно по макету.
«B7» Создан общий вспомогательный класс .container для центрирования и
ограничения контента по ширине.
«B8» Ширина «контейнера» соответствует макету и равна 1200px.
«B9» «Контейнер» оборачивает контент хедера, футера и секций. То есть
находится внутри них.
«B10» Для расположения элементов используется Flexbox, но только там,
где это необходимо. Например в шапке, навигации, списках в секциях и так далее,
то есть там, где расположить элементы горизонтально по другому невозможно.
«B11» Финальные размеры блоков в браузере соответствуют макету.
«B12» У элементов нет фиксированной высоты, она определяется их контентом.
«B13» У хедера есть нижняя рамка, необходимо сильно приблизить макет чтобы
увидеть её.
«B14» Секции расположены друг под другом как стопка книг, без внешних
отступов.
«B15» Для всех секций используется один класс .section, заданы верхние и
нижние падинги по 94px, отодвигающие контент внутрь секции.
«B16» Для построения сеток используется техника описанная в конспекте и
видео-мастерской.
«B17» В карточках на странице Портфолио есть рамка (свойство border),
но только в нижней части карточки.