Финальный проект: создание своего собственного, основанного на сетках фреймворка

В этом финальном проекте вам придется вспомнить все, что вы уже изучили, и использовать это для построения своего собственного простого, основанного на сетках фреймворка. Как и в других финальных проектах, мы не будем ничем вас ограничивать, чтобы дать возможность попрактиковаться в креативности и решении проблем. Это будет прекрасный проект для того, чтобы произвести впечатления на ваших потенциальных работодателей.

Когда вы отрегулируете свой фреймворк, вы используете его для клонирования любого сайта, который вам понравится. Если вы не знаете, какой выбрать, попробуйте клонировать CodenameCRUD!

Шаги к победе

Фреймворк

Вы создадите свой собственный, основанный на сетках фреймворк

1. 2. Следуя инструкциям в проекте "домашняя страница Google", создайте Github репозиторий для этого проекта (разумеется, необходимо поменять название)
2. Создайте новый CSS документ.
3. Продумайте основные элементы фреймворка, которые будут необходимы. Это включает в себя сброс CSS, фиксированное количество колонок сетки, разделенных промежутками ("gutter"), способ создания новых рядов и значения по умолчанию для шрифтовых свойств элементов.
4. Напишите CSS, необходимые для создания базового фреймворка с 12-колоночной сеткой. Посмотрите документацию 960 Grid System, чтобы увидеть, как они это делают. Сложность - на ваше усмотрение, нет необходимости сходить с ума и слишком углубляться в детали (вы ведь не пытаетесь воссоздать Bootstrap).
5. Отправьте ваше решение на Github.

Применение фреймворка

1. Создайте новый HTML документ и новый Github репозиторий.
2. Определитесь со страницей, которую вы хотите клонировать, и разберите ее на основные элементы, как мы делали в предыдущих проектах.
3. Добавьте свой фреймворк к проекту.
4. Используйте фреймворк для проектирования структуры страницы.
5. Заполните страницу необходимыми деталями/картинками и др.
6. Отправьте ваше решение на Github.
7. Выпейте какой-нибудь освежающий напиток, вы закончили с проектами по HTML/CSS!

Решения других студентов

• Решение Artur Janik - Фреймворк | Решение - сайт | Просмотр десктопной версии в браузере | Просмотр мобильной версии в браузере
• Решение AtActionPark - Фреймворк | Пример сайта | HTML Preview