lordponchik/goit-markup-hw-07

Homework / Домашнее задание 📋

goit-markup-hw-07

🇺🇸

English

• Create a repository `goit-markup-hw-07`.
• Clone the created repository and copy the files of the previous work into it.
• Set up `GitHub Pages` and add a link to the live page in the header of the GitHub-repository.

Project file structure

Eligibility criteria for a mentor

Project

«A1» The project's HTML code was refactored using the BEM methodology.

«A2» The CSS code of the project has been refactored using the SASS preprocessor.

«A3» The sass folder is created in the root of the project, in which all the preprocessor style files are located.

«A4» The sass folder contains the main.scss file - the main file into which all SASS fragments (partials, _name.scss files) are imported.

«A5» The layout color palette and font sets are placed in variables in the variables.scss file, which is located in the sass/utils folder. You can use CSS or SASS variables (optional).

«A6» For each component, a separate styles fragment file has been created in the sass/components folder. For example _page-header.scss, _logo.scss etc.

«A7» The index.html and portfolio.html files include the minified style file main.min.css from the css folder.

Markup

«B1» Correct naming of block classes according to BEM methodology.

«B2» Correct naming of element classes according to BEM methodology.

«B3» Correct naming of modifier classes according to BEM methodology.

«B4» Correct naming of impurity classes according to BEM methodology.

«B5» Class names according to the BEM methodology are clear and descriptive, in English.

Formalization

«C1» Selector nesting is used.

«C2» The maximum nesting of selectors is 2 levels.

«C3» The concatenation operator (&) is used to describe pseudo-classes and pseudo-elements.

🇺🇦

Russian

• Создай репозиторий `goit-markup-hw-07`.
• Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы.
• Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку GitHub-репозитория.

Структура файлов проекта

Критерии приёма работы наставником

Проект

«A1» Выполнен рефакторинг HTML-кода проекта используя методологию BEM.

«A2» Выполнен рефакторинг CSS-кода проекта используя препроцессор SASS.

«A3» В корне проекта создана папка sass, в которой лежат все файлы стилей препроцессора.

«A4» В папке sass есть файл main.scss - главный файл в котрый импортируются все SASS-фрагменты (partials, файлы _имя.scss).

«A5» Палитра цветов макета и наборы шрифтов вынесены в переменные в файле variables.scss, который лежит в папке sass/utils. Можно использовать CSS или SASS переменные (по желанию).

«A6» Для каждого компонента создан отдельный файл-фрагмент стилей в папке sass/components. Напримпер _page-header.scss, _logo.scss и т. д.

«A7» В файлах index.html и portfolio.html подключен минифицированный файл стилей main.min.css из папки css.

Разметка

«B1» Правильное именование классов блоков по методологии BEM.

«B2» Правильное именование классов элементов по методологии BEM.

«B3» Правильное именование классов модификаторов по методологии BEM.

«B4» Правильное именование классов примесей по методологии BEM.

«B5» Имена классов по методологии BEM понятные и описательные, на английском языке.

Оформление

«C1» Использована вложенность селекторов.

«C2» Максимальная вложенность селекторов - 2 уровня.

«C3» Оператор конкатенации (&) использован для описания псевдоклассов и псевдоэлементов.