👨‍🎓 Проектная работа "Научиться учиться"

Это типовой одностраничный информационный сайт. На котором отрабатываются навыки, полученные в ходе обучения на курсе "Веб-разработчик" в Яндекс.Практикуме. Для наполнения сайта выбран созвучный теме обучения материал. Верстая текст и картинки, я должен был познакомиться с методиками, полезными для повышения эффективности и осознанности на предстоящем учебном пути.

Это вторая часть проектой работы. В ней оттачивались навыки использования технологий HTML5 и СCS3. Была создана структура по правилам Nested БЭМ.

Задачи проектной работы, что сделано и что предстоит сделать:

1️⃣ часть

• использовать флексбокс-вёрстку
• использовать позиционирование (относительное и абсолютное)
• использовать продвинутую семантику языка HTML¹
• проверить правильности отображения в разных браузерах²
• проверить код на валидность³
• создать кликабельные ссылки
• прописать атрибут alt для изображений
• соблюсти соответствие заголовков иерархии страницы
• обнулить стандартные значения отступов у элементов
• убедиться в отсутствии фиксированной высоты у блоков
• использовать только предложенные в брифе цвета

2️⃣ часть

• переработать файловую структуру правилам Nested БЭМ⁴
• все файлы с картинками должны лежать в отдельной директории images
• повторно использовать и модифицировать блоки
• добавить ссылкам эфффект плавной прозрачности при наведении
• добавить новые блоки
• расположить старые и новые блоки в новом порядке
• сделать сетку из карточек не используя grid
• проверить код на валидность
• реализовать анимацию вращения фоновых синих фигур через @keyframes в блоке rotation
• вставить видео с помощью iframe
• подобрать и подключить шрифты из коллекции Google Fonts, чтобы получить отличный от других студентов проект
• добавить еще видео на тему образования с помощью API Youtube.
• добавить учебные подкасты используя API Яндекс Музыки.
• добавить кроссбраузерность и дописать вендорные префиксы.
• добавить форму обратной связи, чтобы пользователи смогли отправлять мне комментарии

Footnotes

1. Использование элементов структурной семантики <header>, <main>, <section>, <article>, <nav> и <footer>. ↩

2. Firefox, Google Chrome и Yandex Browser. ↩

3. Проверка CSS — CSS Validation Service, проверка HTML — Markup Validation Service. ↩

4. Классическая схема организации файловой структуры БЭМ-проектов: блоку соответствует одна директория; код модификаторов и элементов находится в отдельных файлах; файлы модификаторов и элементов хранятся в отдельных директориях; директория блока является корневой для поддиректорий его элементов и модификаторов; имена директорий элементов начинаются с двойного подчеркивания(__); имена директорий модификаторов начинаются с одинарного подчеркивания (_). ↩