Claude's Tips Library: Website Single Page Code Generation Assistant

Website wizard original

System:

Your task is to create a one-page website based on the given specifications, delivered as an HTML file with embedded JavaScript and CSS. The website should incorporate a variety of engaging and interactive design features, such as drop-down menus, dynamic text and content, clickable buttons, and more. Ensure that the design is visually appealing, responsive, and user-friendly. The HTML, CSS, and JavaScript code should be well-structured, efficiently organized, and properly commented. The HTML, CSS, and JavaScript code should be well-structured, efficiently organized, and properly commented for readability and maintainability.

 

User:

Create a one-page website for an online learning platform called "EduQuest" with the following features and sections.

1. A fixed navigation bar with links to course categories (Math, Science, Languages, Arts) and a search bar.

2. A hero section with a video background showcasing students learning online, a dynamic tagline that rotates between "Learn at your own pace," "Discover new passions," and "Expand your horizons" every 3 seconds, and a "Get Started" button leading to a course catalog. a dynamic tagline that rotates between "Learn at your own pace," "Discover new passions," and "Expand your horizons" every 3 seconds, and a "Get Started" button leading to a course catalog.

3. A featured courses section displaying course cards with placeholders for course images, titles, instructors, and descriptions.

4. An interactive "Learning Paths" section with a short quiz to determine learning styles and interests, and a button to start the quiz.

5. A "Success Stories" section featuring testimonials from satisfied students, with placeholders for the testimonial text and student names.

6. A footer with links to the platform's blog, FAQ, privacy policy, and a "Contact Us" button that opens a modal window with a contact form and customer support information. support information.

Include filler placeholder content for the video background, course cards, and testimonials. Embed the CSS styles within the  tagged in the  section and place the JavaScript code within the  tag at the end of the  section.

The JavaScript code should handle the dynamic tagline in the hero section, rotating through the different taglines every 3 seconds.

Website wizard translation

System:

Your role is to create a one-page website according to the given specifications and submit it as an HTML file with embedded JavaScript and CSS. This website should be filled with a variety of lively and interactive design features such as drop down menus, dynamic text and content, clickable buttons, etc. Ensure that the design is visually appealing, responsive, and user-friendly.The HTML, CSS, and JavaScript code should be organized in a well-organized, efficient, and well-organized manner, and key sections should be appropriately commented for ease of reading and maintenance.

 

User:

For an e-learning platform called "EduQuest", create a one-page website with the following features and sections:

1. A navigation bar fixed at the top containing links to each curriculum category (math, science, language, art) and a search box.

2. A main block with a background video showing students in an online learning situation, containing a dynamic banner that rotates every 3 seconds with content such as "Learn at your own pace", "Tap into new hobbies" and "Expand your horizons", and a "Start Learning" button, which can be clicked to enter a course category. Display.

3. A Featured Courses block showcasing unique course cards, each with manually added placeholder text for the course image, title, instructor and course description.

4. An interactive "Learning Paths" block containing a short test to understand the learner's learning style and interests, as well as a button to start the test.

5. A "Success Stories" block showing course feedback from satisfied students, in the form of summary text and placeholder text with the student's name.

6. At the bottom of the website is a footer containing links to the Platform's blog, frequently asked questions, privacy policy, etc., as well as a "Contact Us" button that brings up a modal window with a contact form and customer support information.

In the video background, course card and feedback sections, placeholder content is temporarily filled in.CSS style code should be placed in the<head>share of<style>标签中，JavaScript代码请放在<body>部分闭合前的<script>标签中。

The JavaScript code responsible for handling the dynamic banners in the main block needs to be set to replace the banner content every 3 seconds.

The layman's guide to getting started with AI

Help you learn how to utilize AI tools at a low cost and from a zero base.AI, like office software, is an essential skill for everyone. Mastering AI will give you an edge in your job search and half the effort in your future work and studies.

View Details>