https://github.com/viktorsvertoka/test-hw3
Test task 📝
https://github.com/viktorsvertoka/test-hw3
css frontend html sass test-tasks
Last synced: 2 months ago
JSON representation
Test task 📝
- Host: GitHub
- URL: https://github.com/viktorsvertoka/test-hw3
- Owner: ViktorSvertoka
- Created: 2023-01-03T19:19:54.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-03T19:32:24.000Z (over 3 years ago)
- Last Synced: 2025-10-25T13:41:29.313Z (8 months ago)
- Topics: css, frontend, html, sass, test-tasks
- Language: SCSS
- Homepage: https://viktorsvertoka.github.io/test-hw3/
- Size: 114 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Тестовое задание на позицию Верстальщик
## Задание
Ссылка на макеты в Figma: https://www.figma.com/file/fMyOAiBkWJ4LtAacwdmIyB/testTask?node-id=0%3A1
Чтобы просматривать CSS стили блоков и работать с макетом - залогиньтесь.
Что нужно сделать:
1. Сверстать страницу по макету в Figma. Верстка должна быть кроссбраузерной и валидной, страница должна корректно отображаться во всех браузерах последней версии. (IE11 тоже).
2. Выполнить адаптив, страница должна хорошо смотреться на всех основных разрешениях.
3. Реализовать и сверстать модальные окна, без использования сторонних библиотек. Форма в модальном окне не должна быть доступна к отправке, если обязательные поля пустые и не нажат чекбокс. В инпутах для данных карты возможно вводить только числа, ограниченное количество соответственно.
4. По нажатию на блок с видео, картинка и кнопка должны пропадать и на этом месте должен запускаться плеер YouTube [скриншот](https://github.com/fugr-ru/frontend-html-3/blob/master/Screenshot%202019-09-03%20at%2017.21.30.png)
5. Реализовать блоки “показать еще”, “показать все фото”. По нажатию на кнопке, контент должен раскрываться.
Также реализуйте отображение реального количества отзывов на странице, рядом с кнопкой “Показать все”.
6. Вставить Яндекс Карту в блок с картой, с установленной меткой. По нажатию на метку открывается простенький балун с текстом.
7. Там где на мобильном макете появляется слайдер, его можно реализовать по желанию, но скролл фотографий должен быть.
Требования:
HTML:
Используйте шаблонизатор HTML кода pug (очень желательно). Можете так же использовать Bootstrap или просто сетки.
CSS:
Использование Pre/Post процессоров (SCSS/SASS, Stylus, LESS, PostCSS). Мы работаем со Stylus. Используйте методологию БЭМ.
JS:
Желательно использовать современный синтаксис языка JS, предпочтительней jQuery.
Сборка:
Для сборки проекта используйте любой известный Вам сборщик проектов (WebPack и т.д).
Заданию уделите от 5 до 25 рабочих часов, что успеете высылайте на почту. Срок 5 дней
Дополнительно напишите нам, как вы тестировали результат своей работы. Какие используете инструменты и как вы осуществляете тестирование.
---
Подготовка к реализации проекта
---
1. подключить Fonts
---
2. подключить Normalize
---
3. подключить CSS
---
4. подключить SASS
---
5. используем методологию BEM
---
6. картинки все сжать через https://squoosh.app/ или https://tinypng.com/
---
7. иконки все сжать через https://jakearchibald.github.io/svgomg/ после сжатия
забросить все в спрайт через https://icomoon.io/
---
8. закинуть в проект файлик - .gitignore
---
9. закинуть в проект файлик - .prettierrc.json
---
10. макет -
https://www.figma.com/file/jjKQXpWj3fdAHDUGhd4lFA/Britlex-Language-School-(Copy)?node-id=580%3A2&t=VQ3kgxlTI4S8v1bQ-1
---
11. на все внешние ссылки - rel="noopener noreferrer nofollow"
---
12. фонтс - Free Fonts: https://nomail.com.ua/ , https://fontsfree.net/
Google Fonts: https://fonts.google.com/
Fonts converter: http://www.font2web.com/
подключение в CSS или SCSS
@font-face { font-family: 'Proxima Nova'; src:
url('../fonts/FontsFree-Net-Proxima-Nova-Bold.eot'); src: local('в�є'),
url('../fonts/Proxima-Nova-Bold.woff') format('woff'),
url('../fonts/Proxima-Nova-Bold.ttf') format('truetype'),
url('../fonts/Proxima-Nova-Bold.svg') format('svg'); font-weight: 700;
font-style: normal; }
font-weight:
1. 100 - Thin
2. 200 - UltraLite
3. 300 - Lite
4. 400 - Normal
5. 500 - Medium
6. 600 - Semibold
7. 700 - Bold
8. 800 - Heavy
9. 900 - Black Footer