Да, вы не ослышались! Сегодня я проведу вас через создание всего внешнего веб-сайта с нулевым знанием всего, что связано с веб-сайтом.
Немного о себе: у меня в основном только опыт работы с CI/CD и IaC в качестве инженера DevOps. Я совершенно не разбираюсь в Frontend-дизайне, React, UI/UX; так что примите эту статью с щепоткой соли.
Теперь приступим :)
Прохождение:
Во-первых, поскольку мы (я) ничего не знаем об UI/UX. Давайте заставим ИИ понять некоторый контекст и понять наше невежество.
Первая подсказка:
Объясните мне соответствующую терминологию UI/UX при создании дизайна веб-сайтов. Сделайте это так, чтобы новичок понял и смог продумать составляющие при создании сайта.
Вторая подсказка:
продолжать
Третья подсказка:
Имея в виду эти термины, теперь представьте домашнюю страницу веб-сайта с заголовком, панелью навигации, изображением функции и страницей контента, а затем я бы хотел, чтобы вы создали веб-сайт с помощью React.
Если вы поняли задание, ответьте «Я понимаю». После того, как я отвечу «продолжить», вы можете продолжить показывать мне используемые команды, файловую структуру проекта и коды в соответствующих файлах, которые вы использовали для создания веб-сайта.
Четвертая подсказка:
Я понимаю
Теперь вам может быть интересно. Какой смысл задавать такие вопросы, это должно позволить произойти подсказке по цепочке мыслей, которая позволит модели собрать более качественную информацию о цели, которую вы пытаетесь достичь, и в целом о лучших результатах. Так что попробуйте вместо того, чтобы спрашивать подсказки из 1 предложения.
Теперь о наших результатах!
Вы можете просто быстро пролистать, если хотите
Ссылка на github: https://github.com/BrianLYS/MediumTopics/tree/main/WebsiteCreation
Шаги:
Инициализировать реакцию
npm install -g create-react-app create-react-app my-website
Заполните файлы
src ├── components │ ├── Header.js │ ├── Navbar.js │ ├── FeatureImage.js │ └── Content.js └── App.js
Запустить сервер
cd my-website npm start
Вот так выглядит сайт!
Что ж, похоже, что это могло бы потребовать гораздо больше работы, но, по крайней мере, у нас есть наши заголовки, меню, изображение и контент! Мне даже не нужно часами смотреть видео для этого.
Возможно, вы могли бы попросить второго пилота внести больше правок и прочего, но я просто закончу на этом.
Теперь получайте удовольствие, создавая свой новый веб-сайт, а затем заявляя об опыте работы с React в своем резюме. Брайан выходит :D
Бонус
Я попытался заставить GPT4 создать веб-сайт в другой теме для меня с помощью этой подсказки.
Подсказка 1:
Имея в виду эти термины, теперь представьте домашнюю страницу веб-сайта с заголовком, панелью навигации, изображением функции и страницей контента, а затем я бы хотел, чтобы вы создали веб-сайт с помощью React.
Если вы поняли задание, ответьте только «Я понимаю».
После того, как я отвечу «продолжить» и «тема веб-сайта», вы можете продолжить показывать мне используемые команды, файловую структуру проекта и коды в соответствующих файлах, которые вы использовали для создания веб-сайта.
Подсказка 2:
продолжай, научная фантастика
Эххх, похоже, нас еще не заменили? На момент написания этой статьи у меня все еще не было доступа к плагинам, так что, возможно, это могло бы оживить ситуацию. Оставайтесь с нами, чтобы узнать больше!
