Продолжительность
0 ч 53 мин 6 сек
Количество уроков
8 Видео
Дата добавления
03.09.2017
Дата обновления
14.11.2017
Прежде чем создавать веб-сайт, важно иметь какой-то план или каркас, чтобы направлять ваши усилия. Но иногда когда вы переходите от простого эскиза к цифровым пикселам - результат не совсем тот, какой вы ожидали. Когда вы работаете с реальными HTML и CSS, и вы можете видеть свой сайт на реальных экранах, вы сможете увидеть более точное представление конечного результата. В этом курсе мы собираемся создать прототип веб-сайта, используя веб-фреймворк Bootstrap.
- Урок 1: Зачем делать прототип в браузере?
Когда вы работаете с реальными HTML и CSS и можете видеть свой сайт на реальных экранах, вы сможете увидеть более точное представление конечного результата. В этом курсе мы собираемся начать с каркаса для страницы профиля в новой социальной сети для дизайнеров. Мы создадим прототип HTML и CSS, используя веб-фреймворк Bootstrap. Таким образом, у нас будет реальная веб-страница, которую мы можем просматривать и взаимодействовать в веб-браузере.
-
Урок 2: HTML разметка.
Используя наш макет, давайте начнем "рисовать" основные области содержимого для мобильных и настольных макетов. Используя Bootstrap, мы можем выполнять большую работу для обоих макетов параллельно, что является одним из больших преимуществ использования интерфейсной инфраструктуры.
-
Урок 3: Профиль и Галерея картинок.
Давайте работать над HTML для раздела профиля и галереи изображений.
-
Урок 4: Определение областей контента.
HTML - это только начало. Теперь мы будем использовать CSS.
-
Урок 5: Решения для общих проблем проектирования
Когда вы просматриваете Интернет, вы часто сталкиваетесь с элементами дизайна, которые похожи на многие другие веб-сайты, которые вы видели раньше. Те же дизайнерские решения появляются снова и снова, потому что дизайнеры снова и снова сталкиваются с такими же проблемами.
-
Урок 6: Создание гибкой галереи изображений.
На нашей странице представлены несколько изображений в нижней части экрана, и один из наиболее распространенных шаблонов проектирования, используемых для отображения коллекции изображений, представляет собой сетку строк и столбцов, обычно называемую галереей изображений. Первое изображение находится в верхнем левом углу, затем последующие изображения представлены слева направо, а затем, когда пространства больше нет, следующая строка начинается ниже первой строки.
-
Урок 7: Респонсив меню.
Меню навигации разбивается на меньшие экраны, например, на мобильном телефоне. Это выглядело бы лучше в меню, свернутом аккуратно, когда он будет в мобильных размерах. Таким образом мы можем добавить больше пунктов меню в будущем, не опасаясь загромождения навигации.
-
Урок 8: Слайдер.
Благодаря изображению в верхней части страницы вы можете найти лучшую работу дизайнера, но что если они хотят использовать разные типы изображений? Было бы неплохо, если бы пользователи могли показывать более одного изоброжения в верхней части страницы.
