├── .markdownlint.json ├── README.md ├── 05-preview.gif ├── 07-preview.png ├── 5-animation ├── preview.gif ├── README.en.md ├── README.md ├── README.ua.md ├── README.pl.md └── README.es.md ├── 7-bem-sass ├── preview_es.png ├── README.md ├── README.ua.md ├── README.en.md ├── README.pl.md └── README.es.md ├── .prettierrc.json ├── 00-git.md ├── 07-препроцессоры.md ├── 08-адаптивность.md ├── .gitignore ├── 8-responsive ├── README.en.md ├── README.ua.md ├── README.md ├── README.pl.md └── README.es.md ├── 01-html.md ├── 1-html ├── README.md ├── README.en.md ├── README.ua.md ├── README.pl.md └── README.es.md ├── 06-формы.md ├── 6-forms ├── README.md ├── README.ua.md ├── README.en.md ├── README.pl.md └── README.es.md ├── 04-декоративные-элементы.md ├── 4-decoration ├── README.ua.md ├── README.md ├── README.en.md ├── README.pl.md └── README.es.md ├── 03-flexbox.md ├── 3-flexbox ├── README.md ├── README.en.md ├── README.ua.md ├── README.pl.md └── README.es.md ├── 05-анимация.md ├── 02-css.md ├── 2-css ├── README.md ├── README.ua.md ├── README.en.md ├── README.pl.md └── README.es.md └── LICENSE /.markdownlint.json: -------------------------------------------------------------------------------- 1 | { 2 | "MD041": false 3 | } 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # html-css-homework 2 | 3 | Домашние задания курса HTML+CSS 4 | -------------------------------------------------------------------------------- /05-preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/html-css-homework/HEAD/05-preview.gif -------------------------------------------------------------------------------- /07-preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/html-css-homework/HEAD/07-preview.png -------------------------------------------------------------------------------- /5-animation/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/html-css-homework/HEAD/5-animation/preview.gif -------------------------------------------------------------------------------- /7-bem-sass/preview_es.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/goitacademy/html-css-homework/HEAD/7-bem-sass/preview_es.png -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "printWidth": 80, 3 | "tabWidth": 2, 4 | "useTabs": false, 5 | "semi": true, 6 | "singleQuote": true, 7 | "trailingComma": "all", 8 | "bracketSpacing": true, 9 | "jsxBracketSameLine": false, 10 | "arrowParens": "avoid", 11 | "proseWrap": "always" 12 | } 13 | -------------------------------------------------------------------------------- /00-git.md: -------------------------------------------------------------------------------- 1 | # Домашнее задание 2 | 3 | - Зарегистрируй аккаунт на [GitHub](https://github.com/). 4 | - Установи и настрой [GitHub Desktop](https://desktop.github.com/). 5 | - Создай репозиторий на GitHub с именем `my-first-repo`. 6 | - Склонируй созданный репозиторий к себе на компьютер. 7 | - В папке склонированного репозитория создай файл `README.md`. 8 | - Добавь новую запись истории, сделав коммит с комментарием 9 | `Добавляет файл README.md`. 10 | - В файле `README.md` добавь название курса. 11 | - Добавь новую запись истории, сделав коммит с комментарием 12 | `Добавляет название курса`. 13 | - В файле `README.md`, добавь свое имя и имя наставника. 14 | - Добавь изменения под контроль `git` и сделай коммит с комментарием 15 | `Добавляет имена`. 16 | - Сделай пуш в репозиторий на `GitHub`. 17 | - Настрой раздачу статических файлов в репозитории на `GitHub` через сервис 18 | `GitHub Pages` и проверь работоспособность живой страницы. 19 | - Добавь ссылку на живую страницу в описание репозитория. 20 | 21 | [Шпаргалка по синтаксису markdown](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) 22 | -------------------------------------------------------------------------------- /07-препроцессоры.md: -------------------------------------------------------------------------------- 1 | # Домашнее задание 2 | 3 | - Создай репозиторий `goit-markup-hw-07`. 4 | - Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы. 5 | - Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку 6 | GitHub-репозитория. 7 | 8 | ## Структура файлов проекта 9 | 10 | ![Структура файлов проекта](./07-preview.png) 11 | 12 | ## Критерии приёма работы наставником 13 | 14 | ## Проект 15 | 16 | **`«A1»`** Выполнен рефакторинг HTML-кода проекта используя методологию BEM. 17 | 18 | **`«A2»`** Выполнен рефакторинг CSS-кода проекта используя препроцессор `SASS`. 19 | 20 | **`«A3»`** В корне проекта создана папка `sass`, в которой лежат все файлы 21 | стилей препроцессора. 22 | 23 | **`«A4»`** В папке `sass` есть файл `main.scss` - главный файл в котрый 24 | импортируются все SASS-фрагменты (partials, файлы `_имя.scss`). 25 | 26 | **`«A5»`** Палитра цветов макета и наборы шрифтов вынесены в переменные в файле 27 | `variables.scss`, который лежит в папке `sass/utils`. Можно использовать CSS или 28 | SASS переменные (по желанию). 29 | 30 | **`«A6»`** Для каждого компонента создан отдельный файл-фрагмент стилей в папке 31 | `sass/components`. Напримпер `_page-header.scss`, `_logo.scss` и т. д. 32 | 33 | **`«A7»`** В файлах `index.html` и `portfolio.html` подключен минифицированный 34 | файл стилей `main.min.css` из папки `css`. 35 | 36 | ## Разметка 37 | 38 | **`«B1»`** Правильное именование классов блоков по методологии BEM. 39 | 40 | **`«B2»`** Правильное именование классов элементов по методологии BEM. 41 | 42 | **`«B3»`** Правильное именование классов модификаторов по методологии BEM. 43 | 44 | **`«B4»`** Правильное именование классов примесей по методологии BEM. 45 | 46 | **`«B5»`** Имена классов по методологии BEM понятные и описательные, на 47 | английском языке. 48 | 49 | ## Оформление 50 | 51 | **`«C1»`** Использована вложенность селекторов. 52 | 53 | **`«C2»`** Максимальная вложенность селекторов - 2 уровня. 54 | 55 | **`«C3»`** Оператор конкатенации (`&`) использован для описания псевдоклассов и 56 | псевдоэлементов. 57 | -------------------------------------------------------------------------------- /08-адаптивность.md: -------------------------------------------------------------------------------- 1 | # Домашнее задание 2 | 3 | - Создай репозиторий `goit-markup-hw-08`. 4 | - Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы. 5 | - Выполни вёрстку адаптивной версии всех страниц и элементов макета 6 | [**домашнего задания #8**](). 7 | - Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку 8 | GitHub-репозитория. 9 | 10 | ## Критерии приёма работы наставником 11 | 12 | ### Проект 13 | 14 | **`«A1»`** Используется методология `BEM`. 15 | 16 | **`«A2»`** Ипользуется препроцессов `SASS`. 17 | 18 | **`«A3»`** В файлах `index.html` и `portfolio.html` подключен минифицированный 19 | файл стилей `main.min.css` из папки `css`. 20 | 21 | **`«A4»`** При просмотре страницы на любом устройстве шириной от `320px`, не 22 | появляется горизонтальная полоса прокрутки. 23 | 24 | **`«A5»`** Скрипт мобильного меню подключен в HTML отдельным файлом 25 | `mobile-menu.js`. 26 | 27 | ## Разметка 28 | 29 | **`«B1»`** У всех страниц в блоке `` есть метатег `viewport`. 30 | 31 | **`«B2»`** Все фоновые и контентные растровые изображения - отзывчивые, и 32 | поддерживают экраны с плотностью `x1` и `x2`. 33 | 34 | 36 | 37 | **`«B3»`** Для отзывчивых фоновых изображений использованы медиа-фукцнии 38 | `min-device-pixel-ratio` и `min-resolution`. 39 | 40 | **`«B4»`** Выполнена разметка мобильного меню. 41 | 42 | ## Оформление 43 | 44 | **`«C1»`** При написании стилей использован `Mobile First` подход и 45 | медиа-функция `(min-width: )`. 46 | 47 | **`«C2»`** Стили необходимые только в определённом промежутке, закрыты в 48 | медиа-запросы `(min-width: ) and (max-width: )` или только `(max-width: )`. 49 | 50 | **`«C3»`** В медиа-запросах отсутствует лишнее дублирование стилей. 51 | 52 | **`«C4»`** Вёрстка выполнена относительно трёх точек перелома: 480px, 768px и 53 | 1200px. 54 | 55 | **`«C5»`** Выполнено оформление мобильного меню. 56 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | criteria.md 3 | # Logs 4 | logs 5 | *.log 6 | npm-debug.log* 7 | yarn-debug.log* 8 | yarn-error.log* 9 | lerna-debug.log* 10 | 11 | # Diagnostic reports (https://nodejs.org/api/report.html) 12 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 13 | 14 | # Runtime data 15 | pids 16 | *.pid 17 | *.seed 18 | *.pid.lock 19 | 20 | # Directory for instrumented libs generated by jscoverage/JSCover 21 | lib-cov 22 | 23 | # Coverage directory used by tools like istanbul 24 | coverage 25 | *.lcov 26 | 27 | # nyc test coverage 28 | .nyc_output 29 | 30 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 31 | .grunt 32 | 33 | # Bower dependency directory (https://bower.io/) 34 | bower_components 35 | 36 | # node-waf configuration 37 | .lock-wscript 38 | 39 | # Compiled binary addons (https://nodejs.org/api/addons.html) 40 | build/Release 41 | 42 | # Dependency directories 43 | node_modules/ 44 | jspm_packages/ 45 | 46 | # TypeScript v1 declaration files 47 | typings/ 48 | 49 | # TypeScript cache 50 | *.tsbuildinfo 51 | 52 | # Optional npm cache directory 53 | .npm 54 | 55 | # Optional eslint cache 56 | .eslintcache 57 | 58 | # Microbundle cache 59 | .rpt2_cache/ 60 | .rts2_cache_cjs/ 61 | .rts2_cache_es/ 62 | .rts2_cache_umd/ 63 | 64 | # Optional REPL history 65 | .node_repl_history 66 | 67 | # Output of 'npm pack' 68 | *.tgz 69 | 70 | # Yarn Integrity file 71 | .yarn-integrity 72 | 73 | # dotenv environment variables file 74 | .env 75 | .env.test 76 | 77 | # parcel-bundler cache (https://parceljs.org/) 78 | .cache 79 | 80 | # Next.js build output 81 | .next 82 | 83 | # Nuxt.js build / generate output 84 | .nuxt 85 | dist 86 | 87 | # Gatsby files 88 | .cache/ 89 | # Comment in the public line in if your project uses Gatsby and *not* Next.js 90 | # https://nextjs.org/blog/next-9-1#public-directory-support 91 | # public 92 | 93 | # vuepress build output 94 | .vuepress/dist 95 | 96 | # Serverless directories 97 | .serverless/ 98 | 99 | # FuseBox cache 100 | .fusebox/ 101 | 102 | # DynamoDB Local files 103 | .dynamodb/ 104 | 105 | # TernJS port file 106 | .tern-port 107 | -------------------------------------------------------------------------------- /7-bem-sass/README.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Домашнее задание 5 | 6 | - Создай репозиторий `goit-markup-hw-07`. 7 | - Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы. 8 | - Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку 9 | GitHub-репозитория. 10 | 11 | ## Структура файлов проекта 12 | 13 | ![Структура файлов проекта](./preview.svg) 14 | 15 | ## Критерии приёма работы наставником 16 | 17 | ## Проект 18 | 19 | **`«A1»`** Выполнен рефакторинг HTML-кода проекта используя методологию BEM. 20 | 21 | **`«A2»`** Выполнен рефакторинг CSS-кода проекта используя препроцессор `SASS`. 22 | 23 | **`«A3»`** В корне проекта создана папка `sass`, в которой лежат все файлы 24 | стилей препроцессора. 25 | 26 | **`«A4»`** В папке `sass` есть файл `main.scss` - главный файл в котрый 27 | импортируются все SASS-фрагменты (partials, файлы `_имя.scss`). 28 | 29 | **`«A5»`** Палитра цветов макета и наборы шрифтов вынесены в переменные в файле 30 | `variables.scss`, который лежит в папке `sass/utils`. Можно использовать CSS или 31 | SASS переменные (по желанию). 32 | 33 | **`«A6»`** Для каждого компонента создан отдельный файл-фрагмент стилей в папке 34 | `sass/components`. Напримпер `_page-header.scss`, `_logo.scss` и т. д. 35 | 36 | **`«A7»`** В файлах `index.html` и `portfolio.html` подключен минифицированный 37 | файл стилей `main.min.css` из папки `css`. 38 | 39 | ## Разметка 40 | 41 | **`«B1»`** Правильное именование классов блоков по методологии BEM. 42 | 43 | **`«B2»`** Правильное именование классов элементов по методологии BEM. 44 | 45 | **`«B3»`** Правильное именование классов модификаторов по методологии BEM. 46 | 47 | **`«B4»`** Правильное именование классов примесей по методологии BEM. 48 | 49 | **`«B5»`** Имена классов по методологии BEM понятные и описательные, на 50 | английском языке. 51 | 52 | ## Оформление 53 | 54 | **`«C1»`** Использована вложенность селекторов. 55 | 56 | **`«C2»`** Максимальная вложенность селекторов - 2 уровня. 57 | 58 | **`«C3»`** Оператор конкатенации (`&`) использован для описания псевдоклассов и 59 | псевдоэлементов. 60 | -------------------------------------------------------------------------------- /7-bem-sass/README.ua.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Домашнє завдання 5 | 6 | - Створи репозиторій `goit-markup-hw-07`. 7 | - Склонуй створений репозиторій і скопіюй в нього файли попередньої роботи. 8 | - Налаштуй `GitHub Pages` і додай посилання на живу сторінку в шапку 9 | GitHub-репозиторія. 10 | 11 | ## Структура файлів проекту 12 | 13 | ![Структура файлів проекту](./preview.svg) 14 | 15 | ## Критерії приймання роботи наставником 16 | 17 | ## Проект 18 | 19 | **`«A1»`** Виконано рефакторинг HTML-коду проекту, використовуючи методологію 20 | BEM. 21 | 22 | **`«A2»`** Виконано рефакторинг CSS-коду проекту, використовуючи препроцесор 23 | `SASS`. 24 | 25 | **`«A3»`** У корені проекту створена папка `sass`, в якій лежать всі файли 26 | стилів препроцесора. 27 | 28 | **`«A4»`** В папці `sass` є файл `main.scss` - головний файл, в який 29 | імпортуються всі SASS-фрагменти (partials, файли `_имя.scss`). 30 | 31 | **`«A5»`** Палітра кольорів макета і набори шрифтів винесені у змінні у файлі 32 | `variables.scss`, який лежить в папці `sass/utils`. Можна використовувати CSS 33 | або SASS змінні (за бажанням). 34 | 35 | **`«A6»`** Для кожного компонента створений окремий файл-фрагмент стилів у папці 36 | `sass/components`. Наприклад `_page-header.scss`, `_logo.scss` тощо. 37 | 38 | **`«A7»`** У файлах `index.html` і `portfolio.html` підключений мініфікованний 39 | файл стилів `main.min.css` з папки `css`. 40 | 41 | ## Розмітка 42 | 43 | **`«B1»`** Правильне іменування класів блоків за методологією BEM. 44 | 45 | **`«B2»`** Правильне іменування класів елементів за методологією BEM. 46 | 47 | **`«B3»`** Правильне іменування класів модифікаторів за методологією BEM. 48 | 49 | **`«B4»`** Правильне іменування класів міксінів за методологією BEM. 50 | 51 | **`«B5»`** Імена класів за методологією BEM зрозумілі і описові, англійською 52 | мовою. 53 | 54 | ## Оформлення 55 | 56 | **`«C1»`** Використана вкладеність селекторів. 57 | 58 | **`«C2»`** Максимальна вкладеність селекторів - 2 рівня. 59 | 60 | **`«C3»`** Оператор конкатенації (`&`) використаний для опису псевдокласів і 61 | псевдоелементів. 62 | -------------------------------------------------------------------------------- /8-responsive/README.en.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Homework 5 | 6 | - Create a repository `goit-markup-hw-08`. 7 | - Clone the created repository and copy the previous work files into it. 8 | - Make the layout of responsive versions of all pages and elements for the 9 | layout of 10 | [**homework #8**](). 11 | - Set up `GitHub Pages` and add a link to the live page in the header of the 12 | GitHub repository. 13 | 14 | ## Criteria for work acceptance by the tutor 15 | 16 | ### Project 17 | 18 | **`«A1»`** The `BEM` methodology is used. 19 | 20 | **`«A2»`** The `SASS` preprocessor is used. 21 | 22 | **`«A3»`** In the `index.html` and `portfolio.html` files, a minified style 23 | sheet, `main.min.css` from the `css` folder, is linked. 24 | 25 | **`«A4»`** When viewing the page on any device with a width from `320px`, no 26 | horizontal scroll bar appears. 27 | 28 | **`«A5»`** The mobile menu script is linked in HTML as a separate file, 29 | `mobile-menu.js`. 30 | 31 | ## Markup 32 | 33 | **`«B1»`** All pages in the `` box have the `viewport` meta tag. 34 | 35 | **`«B2»`** All background and content raster images are responsive and support 36 | `x1` and `x2` pixel density. 37 | 38 | 40 | 41 | **`«B3»`** Responsive background images use such media features as 42 | `min-device-pixel-ratio` and `min-resolution`. 43 | 44 | **`«B4»`** The mobile menu layout is done. 45 | 46 | ## Styling 47 | 48 | **`«C1»`** For writing styles, the `Mobile First` approach and `(min-width: )` 49 | media feature are used. 50 | 51 | **`«C2»`** Styles needed only in a certain range are enclosed in media queries 52 | `(min-width: ) and (max-width: )` or just `(max-width: )`. 53 | 54 | **`«C3»`** There is no unnecessary duplication of styles in media queries. 55 | 56 | **`«C4»`** Layout is made relative to three transition points: 480px, 768px and 57 | 1200px. 58 | 59 | **`«C5»`** The mobile menu design is done. 60 | -------------------------------------------------------------------------------- /8-responsive/README.ua.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Домашнє завдання 5 | 6 | - Створи репозиторій `goit-markup-hw-08`. 7 | - Склонуй створений репозиторій і скопіюй в нього файли попередньої роботи. 8 | - Виконай верстку адаптивної версії усіх сторінок та елементів макета 9 | [**домашнього завдання #8**](). 10 | - Налаштуй `GitHub Pages` і додай посилання на живу сторінку в шапку 11 | GitHub-репозиторія. 12 | 13 | ## Критерії приймання роботи наставником 14 | 15 | ### Проект 16 | 17 | **`«A1»`** Використовується методологія `BEM`. 18 | 19 | **`«A2»`** Використовується препроцесор `SASS`. 20 | 21 | **`«A3»`** У файлах `index.html` і `portfolio.html` підключений мініфікованний 22 | файл стилів `main.min.css` з папки `css`. 23 | 24 | **`«A4»`** При перегляді сторінки на будь-якому пристрої шириною від `320px`, не 25 | з'являється горизонтальна смуга прокручування. 26 | 27 | **`«A5»`** Скрипт мобільного меню підключений в HTML окремим файлом 28 | `mobile-menu.js`. 29 | 30 | ## Розмітка 31 | 32 | **`«B1»`** У всіх сторінок в блоці `` є метатег `viewport`. 33 | 34 | **`«B2»`** Всі фонові і контентні растрові зображення - респонсивні і 35 | підтримують екрани щільністю `x1` і `x2`. 36 | 37 | 39 | 40 | **`«B3»`** Для респонсивних фонових зображень використані медіа-фукцніі 41 | `min-device-pixel-ratio` і `min-resolution`. 42 | 43 | **`«B4»`** Виконана розмітка мобільного меню. 44 | 45 | ## Оформлення 46 | 47 | **`«C1»`** При написанні стилів використаний `Mobile First` підхід і 48 | медіа-функція `(min-width: )`. 49 | 50 | **`«C2»`** Стилі, необхідні тільки у певному проміжку, закриті в медіа-запити 51 | `(min-width: ) and (max-width: )` або тільки `(max-width: )`. 52 | 53 | **`«C3»`** В медіа-запитах відсутнє зайве дублювання стилів. 54 | 55 | **`«C4»`** Верстка виконана щодо трьох точок перелому: 480px, 768px і 1200px. 56 | 57 | **`«C5»`** Виконано оформлення мобільного меню. 58 | -------------------------------------------------------------------------------- /7-bem-sass/README.en.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Homework 5 | 6 | - Create a repository `goit-markup-hw-07`. 7 | - Clone the created repository and copy the previous work files into it. 8 | - Set up `GitHub Pages` and add a link to the live page in the header of the 9 | GitHub repository. 10 | 11 | ## Project file structure 12 | 13 | ![Project file structure](./preview.svg) 14 | 15 | ## Criteria for work acceptance by the tutor 16 | 17 | ## Project 18 | 19 | **`«A1»`** Refactoring of the project HTML-code is done using the BEM 20 | methodology. 21 | 22 | **`«A2»`** Refactoring of the project CSS code is done using the `SASS` 23 | preprocessor. 24 | 25 | **`«A3»`** In the root of the project, there is a `sass` folder, which contains 26 | all the preprocessor style sheets. 27 | 28 | **`«A4»`** In the `sass` folder, there is a `main.scss` file, the main file into 29 | which all SASS fragments are imported (partials, `_name.scss` files). 30 | 31 | **`«A5»`** Layout color palette and font sets are presented as variables in the 32 | `variables.scss` file in the `sass/utils` folder. CSS or SASS variables can be 33 | used (optionally). 34 | 35 | **`«A6»`** For each component, a separate fragment style sheet is created in the 36 | `sass/components` folder. For example, `_page-header.scss`, `_logo.scss`, etc. 37 | 38 | **`«A7»`** In the `index.html` and `portfolio.html` files, a minified style 39 | sheet, `main.min.css` from the `css` folder, is linked. 40 | 41 | ## Markup 42 | 43 | **`«B1»`** Proper naming of box classes according to the BEM methodology. 44 | 45 | **`«B2»`** Proper naming of element classes according to the BEM methodology. 46 | 47 | **`«B3»`** Proper naming of modifier classes according to BEM methodology. 48 | 49 | **`«B4»`** Proper naming of mixin classes according to BEM methodology. 50 | 51 | **`«B5»`** BEM class names are clear and descriptive, all in English. 52 | 53 | ## Styling 54 | 55 | **`«C1»`** Selector nesting is used. 56 | 57 | **`«C2»`** Maximum selector nesting is 2 levels. 58 | 59 | **`«C3»`** The concatenation operator (`&`) is used to describe pseudo-classes 60 | and pseudo-elements. 61 | -------------------------------------------------------------------------------- /8-responsive/README.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Домашнее задание 5 | 6 | - Создай репозиторий `goit-markup-hw-08`. 7 | - Склонируй созданный репозиторий и скопируй в него файлы предыдущей работы. 8 | - Выполни вёрстку адаптивной версии всех страниц и элементов макета 9 | [**домашнего задания #8**](). 10 | - Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку 11 | GitHub-репозитория. 12 | 13 | ## Критерии приёма работы наставником 14 | 15 | ### Проект 16 | 17 | **`«A1»`** Используется методология `BEM`. 18 | 19 | **`«A2»`** Ипользуется препроцессов `SASS`. 20 | 21 | **`«A3»`** В файлах `index.html` и `portfolio.html` подключен минифицированный 22 | файл стилей `main.min.css` из папки `css`. 23 | 24 | **`«A4»`** При просмотре страницы на любом устройстве шириной от `320px`, не 25 | появляется горизонтальная полоса прокрутки. 26 | 27 | **`«A5»`** Скрипт мобильного меню подключен в HTML отдельным файлом 28 | `mobile-menu.js`. 29 | 30 | ## Разметка 31 | 32 | **`«B1»`** У всех страниц в блоке `` есть метатег `viewport`. 33 | 34 | **`«B2»`** Все фоновые и контентные растровые изображения - отзывчивые, и 35 | поддерживают экраны с плотностью `x1` и `x2`. 36 | 37 | 39 | 40 | **`«B3»`** Для отзывчивых фоновых изображений использованы медиа-фукцнии 41 | `min-device-pixel-ratio` и `min-resolution`. 42 | 43 | **`«B4»`** Выполнена разметка мобильного меню. 44 | 45 | ## Оформление 46 | 47 | **`«C1»`** При написании стилей использован `Mobile First` подход и 48 | медиа-функция `(min-width: )`. 49 | 50 | **`«C2»`** Стили необходимые только в определённом промежутке, закрыты в 51 | медиа-запросы `(min-width: ) and (max-width: )` или только `(max-width: )`. 52 | 53 | **`«C3»`** В медиа-запросах отсутствует лишнее дублирование стилей. 54 | 55 | **`«C4»`** Вёрстка выполнена относительно трёх точек перелома: 480px, 768px и 56 | 1200px. 57 | 58 | **`«C5»`** Выполнено оформление мобильного меню. 59 | -------------------------------------------------------------------------------- /7-bem-sass/README.pl.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Zadanie domowe 5 | 6 | - Utwórz repozytorium `goit-markup-hw-07`. 7 | - Sklonuj utworzone repozytorium i skopiuj do niego pliki poprzedniej pracy 8 | - Skonfiguruj `GitHub Pages` i dodaj link do aktywnej strony do nagłówka 9 | repozytorium GitHub. 10 | 11 | ## Struktura plików projektu 12 | 13 | ![Struktura plików projektu](./preview.svg) 14 | 15 | ## Kryteria akceptacji projektu przez mentora 16 | 17 | ## Projekt 18 | 19 | **`«A1»`** Refaktoryzacja kodu HTML projektu z wykorzystaniem metodologii BEM. 20 | 21 | **`«A2»`** Refaktoryzacja kodu CSS projektu przy użyciu preprocesora `SASS`. 22 | 23 | **`«A3»`** Folder `sass`, został utworzony w katalogu głównym projektu, który 24 | zawiera wszystkie pliki stylów preprocesora. 25 | 26 | **`«A4»`** W folderze `sass` znajduje się plik `main.scss` - główny plik, do 27 | którego wszystkie fragmenty SASS (partials, pliki `_nazwa.scss`) są importowane. 28 | 29 | **`«A5»`** Paleta kolorów układu i zestawy czcionek są przenoszone do zmiennych 30 | w pliku `variables.scss`, który znajduje się w folderze `sass/utils`. Możesz 31 | użyć zmiennych CSS lub SASS (opcjonalnie). 32 | 33 | **`«A6»`** Dla każdego komponentu tworzony jest oddzielny fragmentu pliku stylów 34 | w folderze `sass/components`. Na przykład `_page-header.scss`, `_logo.scss` itd. 35 | 36 | **`«A7»`** Pliki `index.html` i `portfolio.html` zawierają zminimalizowany plik 37 | stylów `main.min.css` z folderu `css`. 38 | 39 | ## Znaczniki HTML 40 | 41 | **`«B1»`** Poprawne nazewnictwo klas bloków zgodnie z metodologią BEM. 42 | 43 | **`«B2»`** Poprawne nazewnictwo klas elementów zgodnie z metodologią BEM. 44 | 45 | **`«B3»`** Poprawne nazewnictwo klas modyfikatorów zgodnie z metodologią BEM. 46 | 47 | **`«B4»`** Poprawne nazewnictwo klas domieszek zgodnie z metodologią BEM. 48 | 49 | **`«B5»`** Nazwy klas zgodnie z metodologią BEM są zrozumiałe i opisowe, w 50 | języku angielskim. 51 | 52 | ## Stylizacja 53 | 54 | **`«C1»`** Stosowane jest zagnieżdżanie selektorów. 55 | 56 | **`«C2»`** Maksymalne zagnieżdżenie selektorów to 2 poziomy. 57 | 58 | **`«C3»`** Operator konkatenacji (`&`) jest używany do opisywania pseudoklas i 59 | pseudoelementów. 60 | -------------------------------------------------------------------------------- /8-responsive/README.pl.md: -------------------------------------------------------------------------------- 1 | **Read in other languages: [Russian](README.md), [Ukrainian](README.ua.md), 2 | [English](README.en.md), [Spanish](README.es.md), [Polish](README.pl.md).** 3 | 4 | # Zadanie domowe 5 | 6 | - Utwórz repozytorium `goit-markup-hw-08`. 7 | - Sklonuj utworzone repozytorium i skopiuj do niego pliki poprzedniej pracy. 8 | - Sprojektuj layout wersji adaptacyjnej wszystkich stron i elementów układu 9 | [**zadania domowego #8**](https://www.figma.com/file/SqiyweSseH96c3wVZmnGfq/Zadanie-domowe-GOIT-Polska?node-id=5766%3A1364). 10 | - Skonfiguruj `GitHub Pages` i dodaj link do aktywnej strony do nagłówka 11 | repozytorium GitHub. 12 | 13 | ## Kryteria akceptacji projektu przez mentora 14 | 15 | ### Projekt 16 | 17 | **`«A1»`** Stosowana jest metodologia `BEM`. 18 | 19 | **`«A2»`** Używany jest preprocesor `SASS`. 20 | 21 | **`«A3»`** Pliki `index.html` i `portfolio.html` zawierają zminimalizowany plik 22 | stylów `main.min.css` z folderu `css`. 23 | 24 | **`«A4»`** Podczas przeglądania strony na dowolnym urządzeniu o szerokości 25 | `320px` i więcej, poziomy pasek przewijania nie pojawia się. 26 | 27 | **`«A5»`** Skrypt menu mobilnego jest zawarty w HTML w osobnym pliku 28 | `mobile-menu.js`. 29 | 30 | ## Znaczniki HTML 31 | 32 | **`«B1»`** Wszystkie strony w bloku `` mają metatag `viewport`. 33 | 34 | **`«B2»`** Wszystkie bitmapy tła i treści są responsywne i obsługują gęstości 35 | `x1` i `x2`. 36 | 37 | 39 | 40 | **`«B3»`** W przypadku responsywnych obrazów tła używane są funkcje 41 | multimedialne `min-device-pixel-ratio` i `min-resolution`. 42 | 43 | **`«B4»`** Oznaczanie menu mobilnego znacznikami HTML zostało zakończone. 44 | 45 | ## Stylizacja 46 | 47 | **`«C1»`** Podczas pisania stylów zastosowano podejście `Mobile First` i funkcja 48 | multimedialna `(min-width: )`. 49 | 50 | **`«C2»`** Style są potrzebne tylko w określonym zakresie, zamknięte w 51 | zapytaniach o media `(min-width: ) and (max-width: )` lub tylko `(max-width: )`. 52 | 53 | **`«C3»`** Nie ma niepotrzebnego powielania stylów w zapytaniach o media. 54 | 55 | **`«C4»`** Układ jest wykonany z uwzględnieniem trzech punktów przerwania: 56 | 480px, 768px i 1200px. 57 | 58 | **`«C5»`** Projektowanie menu mobilnego zostało ukończone. 59 | -------------------------------------------------------------------------------- /01-html.md: -------------------------------------------------------------------------------- 1 | # Домашнее задание 2 | 3 | - Создай репозиторий `goit-markup-hw-01`. 4 | - Выполни HTML-разметку макета страницы 5 | [**домашнего задания #1**](), 6 | без CSS оформления. 7 | - Настрой `GitHub Pages` и добавь ссылку на живую страницу в шапку 8 | GitHub-репозитория. 9 | 10 | ## Критерии приёма работы наставником 11 | 12 | ### Проект 13 | 14 | **`«A1»`** Главный HTML-файл называется `index.html`. 15 | 16 | **`«A2»`** В корне проекта есть папка `images` с изображениями. 17 | 18 | **`«A3»`** В названиях файлов нет заглавных букв, пробелов и транслита, только 19 | буквы и слова английского языка. 20 | 21 | **`«A4»`** Исходный код отформатирован при помощи `Prettier`. 22 | 23 | **`«A5»`** Все изображения и текстовый контент взяты из макета. 24 | 25 | **`«A6»`** Все растровые изображения оптимизированы используя 26 | [squoosh](https://squoosh.app/). 27 | 28 | **`«A7»`** Код написан следуя [**руководству**](https://codeguide.co/). 29 | 30 | ### Разметка 31 | 32 | **`«B1»`** Разметка страницы `Студия` набрана в файле `index.html`. 33 | 34 | **`«B2»`** Выполнена HTML-разметка всех элементов макета. 35 | 36 | **`«B3»`** Теги использованы согласно их семантического смысла. 37 | 38 | **`«B4»`** HTML проходит проверку [**валидатором**](http://validator.w3.org/nu/) 39 | без ошибок. 40 | 41 | **`«B5»`** В разметке есть теги для выделения основной структуры страницы: 42 | `
`, `
` и `