Как разработать веб-сайт с помощью ChatGPT?
Приветствую всех!
В этой статье мы разработаем свой сайт-портфолио с нуля, используя учебное пособие w3school bootstrap 4 и ChatGPT. Я объясню, как создать свой собственный веб-сайт, следуя простым шагам.
Прежде чем перейти к программированию и ChatGPT, я провёл небольшое исследование того, что содержится на веб-сайтах – портфолио других менеджеров по продуктам и как они размещают элементы пользовательского интерфейса на своих сайтах. Затем я окончательно определился с тем, какие разделы я должен поместить на свой сайт и как они будут называться.
Я рисую макет от руки. Он содержит разделы: navbar, header, footer, about me, summary, services, career, product studies, tools и липкую кнопку “contact me”.
Первый шаг: Выбор языка программирования
Я испытал на себе, как боты Google обращаются с невосприимчивыми веб-сайтами, когда руководил продуктом, ориентированным на клиента. Я знаю, что Google не будет оценивать вас достаточно высоко или даже индексировать ваши сайты, если они не адаптированы к мобильным устройствам. Вот почему я выбираю Bootstrap 4 для своего продукта. Сеточная система Bootstrap проста для понимания. Для достижения этой цели я использовал базовые шаблоны bootstrap 4 от w3schools. Ссылка
Второй шаг: Соберите изображения и определитесь с цветовой палитрой
При выборе цветовой палитры я выбрал изображение, которое мне нравится. Я загрузил его в adobe color finder и извлёк HEX-коды понравившихся цветов.
Как извлечь цвета из изображения
При определении цветов элементов я старался придерживаться правила %60,%30,%10. 60% дизайна – белый, 30% – фиолетовый и 10% – зеленый.
Эти 3 цвета хорошо сочетаются друг с другом и имеют особое значение для женщин. На международном уровне фиолетовый цвет символизирует женщин. Кроме того, сочетание фиолетового, зелёного и белого цветов является символом равенства женщин.
Как найти изображения, не содержащие авторские права
Я использовал сервис pixabay для загрузки изображений без авторских прав. На этой платформе есть тысячи изображений, пиктограмм, векторных файлов, gif-файлов и видео. Вы даже можете найти на ней бесплатные SVG-файлы.
Как бесплатно размещать изображения
Чтобы разместить изображение на своём сайте, вам нужен хостинг. Я использовал free.image.com для размещения изображений.
А теперь приступаем к использованию ChatGPT!
Третий шаг: Написание HTML и CSS
Как я уже упоминал, я немного разбираюсь в HTML, а с CSS дела обстоят хуже. Раньше я уже писал коды стилей внутри HTML, но никогда не делал чего-то невероятного при использовании Каскадных Таблиц Стиля.
Я использовал шаблоны w3school bootstrap 4 для написания каркаса моего веб-сайта.
Сначала я начал писать коды стилей поверх HTML-раздела header, но появились непредвиденные ошибки. Я спросил ChatGPT, как подключить CSS к HTML-файлу.
NAVBAR
Я хотел, чтобы моя панель навигации была липкой при прокрутке вниз и позволяла осуществлять навигацию по разделам, когда пользователь нажимает на её элементы. Я также хотел изменить её цвета.
ABOUT ME
Я хотел, чтобы “ABOUT ME” отображалось на изображении для мобильных устройств, а не под ним. Поэтому я спросил ChatGPT, как это сделать. Я использовал изображение, загруженное с pixabay.
Мне нудно было использовать значки, которые ведут к моим учётным записям LinkedIn, medium и GitHub. Я спросил ChatGPT, как это сделать и как подключить font-awesome к HTML-коду.
SERVICES
Я хотел показывать текст при наведении курсора мыши на изображение.
Мне нужен был адаптивный размер шрифта. Хотелось, чтобы тексты становились меньше при уменьшении ширины устройства.
Как получить адаптивные размеры шрифта
Я хотел, чтобы теги <h> имели разные стили.
PRODUCT & STUDIES
Мне нужно было показать все детали своей работы: описание продукта, особенности и достижения. Это поможет людям понять, какими продуктами вы руководили раньше. Я привёл так много продуктов, что это выглядело достаточно длинно, поэтому я решил использовать функцию collapse в Bootstrap 4.
Bootstrap 4 Card-Deck
Функция collapse в Bootstrap 4
TOOLS & SKILLS
Я выбираю специальную панель, чтобы показать, какие инструменты я могу использовать. Я хочу показывать несколько изображений одновременно, и хочу, чтобы высота этой панели была фиксированной.
Как создать панель, показывающую несколько изображений одновременно
Я хотел иметь липкую кнопку “Contact me”, которая позволяет пользователям отправлять мне электронное письмо.
Я хочу, чтобы стили кнопок отличались друг от друга.
Заключение
Я нашёл ChatGPT полезным для разработки веб-сайтов, даже если вы не знаете, как писать код. Если вы освоите техническую литературу, то будете получать точные ответы с первой попытки.
ChatGPT документирует свои ответы и помогает вам настроить сервис.
Вы можете научиться программировать с помощью ChatGPT. Я считаю, что научиться программировать – это не о том, как бы потратить побольше денег и посидеть за теорией; это то, чему можно научиться только постоянно практикуясь!