Если вы веб-разработчик или веб-дизайнер, вам необходимо иметь сайт-портфолио. Это позволяет вам предоставить информацию о себе и продемонстрировать свои лучшие работы с соответствующими навыками и опытом. Затем я покажу вам, как создать красивый адаптивный веб-сайт-портфолио для себя, используя HTML, CSS, JavaScript и Bootstrap версии 5. ]
Наличие веб-сайта портфолио имеет ряд преимуществ, в том числе:
- он предоставляет платформу для демонстрации ваших соответствующих навыков и опыта
- это показывает вашу индивидуальность
- это позволяет менеджерам по найму найти вас, а не вам связываться с ними
- вас легко найти в поисковых системах, таких как Google
Содержание статьи
Что такое Bootstrap?
Bootstrap — это популярная интерфейсная среда CSS, которая используется для разработки адаптивных и удобных для мобильных устройств веб-сайтов. Последний выпуск Bootstrap — версия 5. Вы можете найти официальную документацию по Bootstrap 5 здесь.
Структура папок
Теперь мы приступим к созданию веб-сайта портфолио.
Сначала создадим структуру папок. Вы можете получить стартовые файлы проекта на GitHub. Кроме того, вы можете посетить здесь, чтобы увидеть живую демонстрацию этого проекта. loading="lazy"/>
Структура папки состоит из файлов index.html, style.css, script.js и папки с изображениями. Мы напишем все CSS в файле style.css и JavaScript в файле script.js.
В файле index.html вы можете увидеть стандартный HTML-код с Bootstrap CDN, шрифтом awesome kit и ссылкой на внешняя таблица стилей и JavaScript.
Здесь файл script.js загружается после загрузки всего HTML-кода.
Теперь давайте поработаем над добавлением меню навигации в наш проект. Это будет помочь посетителям найти нужную им информацию.
Мы будем использовать класс Bootstrap fixed-top
в элементе навигации, чтобы панель навигации оставалась в верхней части страницы. а navbar-brand
где мы сохраняем имя человека как бренд.
Навигационная панель имеет следующие функции:
- Шесть ссылок: главная, о нас, услуги, портфолио, контакты и нижний колонтитул
- Он имеет прозрачный фон. Позже мы добавим темный фон при прокрутке страницы.
- Переключается на устройствах меньшего размера
Вы можете найти более подробную информацию о функциях панели навигации Bootstrap 5 здесь.
Однако на панели навигации возникают проблемы при прокрутке. Он полностью прозрачен на всей странице, что вызывает проблемы с читабельностью. Мы исправим эту проблему после того, как заполним раздел «Услуги», чтобы вы правильно поняли проблему.
Теперь мы добавим главное изображение с текстом в центре. Главное изображение — это термин веб-дизайна, который относится к высококачественному изображению во всю ширину, которое отображает основные цели компании или отдельного человека, репрезентативное изображение, фотографию или другие привлекающие внимание элементы. Это помогает привлечь пользователей на ваш сайт.
Привет, это я Брэд
Я профессиональный фрилансер в Нью-Йорке
Также добавим CSS для приведенного выше кода в файл style.css:
/* фоновое изображение героя */
.bgiimage {
высота:100вх;
фон: url('images/heroImage.jpeg');
размер фона: обложка;
должность: родственница;
}
/* текст css над главным изображением*/
.hero_title {
размер шрифта: 4.5rem;
}
.hero_desc {
размер шрифта: 2rem;
}
.hero-текст {
выравнивание текста: по центру;
положение: абсолютное;
верх: 50%;
слева: 50%;
преобразование: перевести (-50%, -50%);
белый цвет;
}
Здесь мы видим, что у раздела есть идентификатор с именем bgimage
который отвечает за отображение фонового изображения во всю ширину. Он также отображает некоторый текст в центре над фоновым изображением с помощью приведенного выше CSS.
Вот как на данный момент сайт выглядит с панелью навигации и разделом героев: 1293" height="708" loading="lazy"/>
Как создать раздел "О нас"
Страница "О нас" содержит важную информацию о вас и ваш фон. Посетители вашего сайта портфолио могут узнать вас по информации, которую вы предоставляете на этой странице.
Мы добавим изображение в левую часть строки, а в добавьте наше краткое введение в этот раздел. Давайте продемонстрируем это, используя код ниже:
Обо мне
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
- Имя: Дэвид Паркер
- Возраст: 28
- Профессия: веб-разработчик
- Имя: Дэвид Паркер
- Возраст: 28
- Профессия: веб-разработчик
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
Lorem Ipsum был стандартным фиктивным текстом в отрасли с 1500-х годов, когда неизвестный печатник взял гранку шрифта и перемешал ее, чтобы сделать книгу образцов шрифтов. Он пережил не только пять столетий, но и скачок в электронный набор текста, оставаясь практически неизменным.
Давайте добавим немного CSS для изображения слева:
/* about image css раздела */
.imageAboutPage {
ширина: 100%;
}
Это создаст раздел «О нас». Вы можете изменить содержимое в зависимости от ваших вариантов использования. Мы добавили классы с именами mt-4
и pt-4
с классом-контейнером, который установит верхнее поле и верхнее отступы равными 1,5 рем.
В строке есть два столбцы. У одного есть класс col-lg-4
для отображения изображения, которое будет занимать левый столбец с сеткой из 4 частей для больших экранов.
Следующему столбцу назначается класс col-lg-8
который будет занимать правый столбец с сеткой из 8 частей для больших экранов. Для средних и маленьких экранов они будут накладываться друг на друга, что мы можем видеть в приведенном ниже GIF-файле:
Раздел «Как сделать услуги»
Этот раздел помогает превратить посетителей веб-сайта в потенциальных клиентов. Здесь вы объясняете, какие конкретные услуги вы предлагаете и в какой нише вниз предлагаемые услуги.
Давайте добавим код для этого раздела и опишем его ниже:
Услуги
Разработка веб-сайта
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Дизайн веб-сайта
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Развертывание веб-сайта
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
SEO
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
DevOps
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Контроль качества
Небольшой пример текста, который будет основываться на названии карточки и составлять основную часть содержимого карточки.
Небольшой пример текста, который будет основываться на заголовке карты и составлять основную часть содержимого карты.
Поскольку этот веб-сайт предназначен для веб-разработчиков и дизайнеров, я включил некоторые услуги, которые могут предложить веб-разработчики или дизайнеры.
Мы использовали загрузку карты для отображения услуг. Наш раздел услуг состоит из 2 строк и 3 столбцов в каждой. Для больших экранов с шириной больше или равной 992 пикселям отображаются три карточки подряд. Для экранов шириной менее 992 пикселей в строке отображается только одна карточка.
Подробнее о контрольных точках начальной загрузки можно найти здесь.
Кроме того, на каждую карточку добавлены шрифты, чтобы они выглядели лучше.
Без CSS раздел сервисов выглядел бы так: