Как разработать веб-сайт с помощью ChatGPT?

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

Прежде чем приступить к программированию и использованию ChatGPT, я провел исследование содержимого веб-сайтов-портфолио других менеджеров по продуктам, чтобы узнать, как они размещают элементы пользовательского интерфейса на своих сайтах.

Затем я определил, какие разделы должны быть на моем сайте и как их лучше назвать.

На собственном опыте я узнал, как боты Google обращаются к веб-сайтам, которые не адаптированы для мобильных устройств, когда работал над клиентоориентированным продуктом.

Я понимаю, что Google не будет оценивать ваш сайт достаточно высоко или индексировать его, если он не адаптирован под мобильные устройства. Поэтому я выбрал Bootstrap 4 для своего продукта, потому что сеточная система Bootstrap проста для понимания.

Для достижения этой цели я использовал базовые шаблоны Bootstrap 4 от учебника w3schools.

При выборе цветовой гаммы для моего проекта я использовал изображение, которое мне понравилось. Я загрузил его в Adobe Color Finder и получил HEX-коды для выбранных цветов.

При выборе цветов для элементов я следовал правилу 60%, 30%, 10%. 60% дизайна — белый цвет, 30% — фиолетовый и 10% — зеленый.

Эти три цвета хорошо сочетаются между собой и имеют особое значение для женщин. Международно фиолетовый цвет ассоциируется с символикой женщин.

Кроме того, сочетание фиолетового, зеленого и белого цветов является символом равенства женщин.

Как найти свободные изображения без авторских прав

Для поиска свободных изображений без авторских прав я воспользовался сервисом pixabay. Эта платформа предоставляет доступ к тысячам изображений, пиктограмм, векторных файлов, gif-файлов и видео, а также бесплатные SVG-файлы.

Как бесплатно разместить изображения на сайте

Для того чтобы разместить изображения на своем сайте, необходимо использовать хостинг. Я выбрал free. image. com для размещения своих изображений.

Как я уже упоминал ранее, я имею базовые знания в HTML, но не так хорошо разбираюсь в CSS. Раньше я использовал встроенный CSS код в HTML, но никогда не создавал ��ложных дизайнов, используя каскадные таблицы стилей.

Для создания каркаса своего веб-сайта я использовал шаблоны bootstrap 4 от w3school.

Сначала я начал писать код стилей внутри раздела HTML header, но столкнулся с некоторыми проблемами. Тогда я обратился к ChatGPT за помощью по подключению CSS к HTML файлу.

Навигационное меню

Хотелось, чтобы навигационное меню было липким при прокрутке страницы вниз и позволяло пользователям переходить по разделам, нажимая на его элементы. Я также хотел изменить его цвета.

Обо мне

Для мобильных устройств я захотел, чтобы «ABOUT ME» отображалось на изображении, а не под ним. Для этого я обратился к ChatGPT за помощью и использовал изображение, загруженное с pixabay.

Также мне было необходимо использовать значки, чтобы перейти к моим учётным записям LinkedIn, Medium и GitHub. Я снова обратился к ChatGPT за помощью, чтобы узнать, как подключить font-awesome к HTML-коду.

Услуги

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

Продукты и исследования

Я хотел показать все детали своей работы: описание продукта, особенности и достижения. Это помогло бы людям понять, какими продуктами я руководил ранее. Я перечислил много продуктов, поэтому я использовал функцию collapse в Bootstrap 4.

Инструменты и навыки

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

Я считаю ChatGPT полезным для разработки веб-сайтов, даже если вы не являетесь опытным программистом. Он предоставляет точные ответы на технические вопросы и документирует свои ответы, что помогает настроить сервис.

Через использование ChatGPT, вы можете научиться программировать. Но, я считаю, что для того, чтобы стать хорошим программистом, нужно постоянно практиковаться, а не только читать теорию и тратить деньги.