Прототипирование веб-сайта в браузере

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

• Урок 1: Зачем делать прототип в браузере?Когда вы работаете с реальными HTML и CSS и можете видеть свой сайт на реальных экранах, вы сможете увидеть более точное представление конечного результата. В этом курсе мы собираемся начать с каркаса для страницы профиля в новой социальной сети для дизайнеров. Мы создадим прототип HTML и CSS, используя веб-фреймворк Bootstrap. Таким образом, у нас будет реальная веб-страница, которую мы можем просматривать и взаимодействовать в веб-браузере.


• Урок 2: HTML разметка.Используя наш макет, давайте начнем "рисовать" основные области содержимого для мобильных и настольных макетов. Используя Bootstrap, мы можем выполнять большую работу для обоих макетов параллельно, что является одним из больших преимуществ использования интерфейсной инфраструктуры.


• Урок 3: Профиль и Галерея картинок.Давайте работать над HTML для раздела профиля и галереи изображений.


• Урок 4: Определение областей контента.HTML - это только начало. Теперь мы будем использовать CSS.


• Урок 5: Решения для общих проблем проектированияКогда вы просматриваете Интернет, вы часто сталкиваетесь с элементами дизайна, которые похожи на многие другие веб-сайты, которые вы видели раньше. Те же дизайнерские решения появляются снова и снова, потому что дизайнеры снова и снова сталкиваются с такими же проблемами.


• Урок 6: Создание гибкой галереи изображений.На нашей странице представлены несколько изображений в нижней части экрана, и один из наиболее распространенных шаблонов проектирования, используемых для отображения коллекции изображений, представляет собой сетку строк и столбцов, обычно называемую галереей изображений. Первое изображение находится в верхнем левом углу, затем последующие изображения представлены слева направо, а затем, когда пространства больше нет, следующая строка начинается ниже первой строки.


• Урок 7: Респонсив меню.Меню навигации разбивается на меньшие экраны, например, на мобильном телефоне. Это выглядело бы лучше в меню, свернутом аккуратно, когда он будет в мобильных размерах. Таким образом мы можем добавить больше пунктов меню в будущем, не опасаясь загромождения навигации.


• Урок 8: Слайдер.Благодаря изображению в верхней части страницы вы можете найти лучшую работу дизайнера, но что если они хотят использовать разные типы изображений? Было бы неплохо, если бы пользователи могли показывать более одного изоброжения в верхней части страницы.