Make a Full Working Front End Website

Promote your AIPRM Prompt
1

Link to Prompt

Link to Prompt

What the Prompt does

  • Generates a full working front-end website based on user inputs.
  • Adapts to incomplete information by enhancing the website with professional touches.
  • Supports multiple pages (e.g., Index.html, Aboutus.html) based on user requests.
  • Adheres to modern or vintage design standards as specified by the user.
  • Includes images from free online libraries for demos.
  • Ensures all necessary code is included for a fully functional website.
  • Allows detailed customization through specific commands.

Who is it for?

  • Anyone needing a complete front-end website quickly and efficiently.
  • Users with varying levels of detail in their website specifications.
  • Individuals or businesses seeking modern, professional, or vintage website designs.
  • People needing multi-page websites with separate, fully coded pages.
  • Those requiring a dynamic, animation-rich website or a simple, static one.

Example Prompt Output GPT4o.mini

Input:
/Start

Output:
Should the Website be 100 percent accurate to how you give info or can it be better?

Input:
Better

Output:
’ Great! Let’s get started. Here are the questions I need you to answer:

  1. Name of the Website:
  2. Purpose of the Website:
  3. Target Audience:
  4. Primary Colors to be used:
  5. Light or Dark Theme (Optional):
  6. Number of Pages:
  7. Main pages to be made (Optional):
  8. Number of Sections (Optional):
  9. Name of the Section on which page (Optional):
  10. Complexity of Website (1-10, 10 being very complex):
  11. Should it have animations and transitions or should it be simple?
  12. What type of webpage should it be (Modern, Vintage, 1990s)?

Please provide your answers to these questions so we can proceed with creating your website.’

Input:
'1. TechNews
2. Online website where you get latest news about technology
3. People who love Technology
4. Use Colors Related to Purple and Dark Blue
5. Dark Theme
6. 4 pages
7. HomePage
News Page
Contact Us Page
About Us page
10. 10
11. Add Animations and Transitions
12. Modern and Technology Related ’

Output:
'Thank you for the details! Here’s a summary of what I’ll be working on:

Website Name: TechNews
Purpose: Online website for the latest news about technology
Target Audience: People who love technology
Primary Colors: Purple and Dark Blue
Theme: Dark
Number of Pages: 4
Pages:

  1. HomePage
  2. News Page
  3. Contact Us Page
  4. About Us Page
    Complexity: 10 (Very complex)
    Animations and Transitions: Yes
    Style: Modern and technology-related

I’ll now proceed to create a modern and professional front-end website with animations and transitions. Here’s what you’ll get:

  1. index.html (HomePage)
  2. news.html (News Page)
  3. contact.html (Contact Us Page)
  4. about.html (About Us Page)
  5. CSS files for each page
  6. JavaScript for animations and interactions

I’ll get started on this and provide the complete code for all pages.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - Home</title>
    <link rel="stylesheet" href="styles/index.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="hero">
            <h1>Welcome to TechNews</h1>
            <p>Your daily dose of the latest in technology.</p>
        </section>
        <section class="highlights">
            <h2>Top Stories</h2>
            <div class="cards">
                <!-- Card example -->
                <div class="card">
                    <img src="https://via.placeholder.com/300" alt="Tech News Image">
                    <h3>Latest Gadget Review</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
                <!-- More cards as needed -->
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts/index.js"></script>
</body>
</html>

news.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - News</title>
    <link rel="stylesheet" href="styles/news.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="news-list">
            <h1>Latest News</h1>
            <article class="news-item">
                <h2>Tech Giant Announces New Smartphone</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                <a href="#">Read more</a>
            </article>
            <!-- More news items as needed -->
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts/news.js"></script>
</body>
</html>

contact.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - Contact Us</title>
    <link rel="stylesheet" href="styles/contact.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="contact-form">
            <h1>Contact Us</h1>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                <label for="message">Message:</label>
                <textarea id="message" name="message" rows="5" required></textarea>
                <button type="submit">Send</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts/contact.js"></script>
</body>
</html>

about.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - About Us</title>
    <link rel="stylesheet" href="styles/about.css">
</head>
<body>
    <header>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section class="about">
            <h1>About Us</h1>
            <p>TechNews is dedicated to bringing you the latest updates in technology. Our team of experts provides in-depth analysis and insightful commentary on the newest tech trends.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts/about.js"></script>
</body>
</html>

CSS files

styles/index.css

body {
    font-family: Arial, sans-serif;
    background-color: #1e1e1e;
    color: #fff;
    margin: 0;
    padding: 0;
}

header {
    background-color: #2c2c2c;
    padding: 1em;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-right: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
}

.hero {
    text-align: center;
    padding: 2em 0;
}

.highlights .cards {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.card {
    background-color: #333;
    border-radius: 8px;
    padding: 1em;
    width: 300px;
}

.card img {
    width: 100%;
    border-radius: 8px;
}

footer {
    background-color: #2c2c2c;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

styles/news.css

body {
    font-family: Arial, sans-serif;
    background-color: #1e1e1e;
    color: #fff;
}

header {
    background-color: #2c2c2c;
    padding: 1em;
}

.news-list {
    padding: 2em;
}

.news-item {
    background-color: #333;
    border-radius: 8px;
    margin-bottom: 1em;
    padding: 1em;
}

.news-item h2 {
    margin: 0;
}

footer {
    background-color: #2c2c2c;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

styles/contact.css

body {
    font-family: Arial, sans-serif;
    background-color: #1e1e1e;
    color: #fff;
}

header {
    background-color: #2c2c2c;
    padding: 1em;
}

.contact-form {
    padding: 2em;
}

form {
    display: flex;
    flex-direction: column;
}

label, input, textarea,

 button {
    margin-bottom: 1em;
}

button {
    background-color: #5e5e5e;
    border: none;
    padding: 0.5em;
    cursor: pointer;
}

button:hover {
    background-color: #7e7e7e;
}

footer {
    background-color: #2c2c2c;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

styles/about.css

body {
    font-family: Arial, sans-serif;
    background-color: #1e1e1e;
    color: #fff;
}

header {
    background-color: #2c2c2c;
    padding: 1em;
}

.about {
    padding: 2em;
}

footer {
    background-color: #2c2c2c;
    text-align: center;
    padding: 1em;
    position: fixed;
    bottom: 0;
    width: 100%;
}

JavaScript files

scripts/index.js

document.addEventListener('DOMContentLoaded', () => {
    // Add any JavaScript for homepage interactions here
});

scripts/news.js

document.addEventListener('DOMContentLoaded', () => {
    // Add any JavaScript for news page interactions here
});

scripts/contact.js

document.addEventListener('DOMContentLoaded', () => {
    // Add any JavaScript for contact page interactions here
});

scripts/about.js

document.addEventListener('DOMContentLoaded', () => {
    // Add any JavaScript for about page interactions here
});

This is a basic structure for your website. Let me know if you need any specific adjustments or additional features!’

Example Prompt Output GPT4o

Input:
/Start

Output:
Should the Website be 100 percent accurate to how you give info or can it be better?

Input:
Better

Output:
’ Great! Let’s get started. Here are the questions I need you to answer:

  1. Name of the Website:
  2. Purpose of the Website:
  3. Target Audience:
  4. Primary Colors to be used:
  5. Light or Dark Theme (Optional):
  6. Number of Pages:
  7. Main pages to be made (Optional):
  8. Number of Sections (Optional):
  9. Name of the Section on which page (Optional):
  10. Complexity of Website (1-10, 10 being very complex):
  11. Should it have animations and transitions or should it be simple?
  12. What type of webpage should it be (Modern, Vintage, 1990s)?

Please provide your answers to these questions so we can proceed with creating your website.’

Input:
'1. TechNews
2. Online website where you get latest news about technology
3. People who love Technology
4. Use Colors Related to Purple and Dark Blue
5. Dark Theme
6. 4 pages
7. HomePage
News Page
Contact Us Page
About Us page
10. 10
11. Add Animations and Transitions
12. Modern and Technology Related ’

Output:
'Created with AIPRM Prompt “Create a Full working Front End Website”

Understood! Here is a summary of your requirements:

  1. Name of the Website: TechNews
  2. Purpose of the Website: Online website where you get latest news about technology
  3. Target Audience: People who love Technology
  4. Primary Colors to be used: Purple and Dark Blue
  5. Theme: Dark Theme
  6. Number of Pages: 4 pages
  7. Main pages to be made:
    • HomePage
    • News Page
    • Contact Us Page
    • About Us page
  8. Complexity of Website: 10
  9. Animations and Transitions: Yes
  10. Type of the webpage: Modern and Technology Related

Now, I will create the HTML, CSS, and JavaScript for the specified pages. Let’s start with the main page files.

index.html (HomePage)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - Home</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>TechNews</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="intro">
            <h2>Welcome to TechNews</h2>
            <p>Your go-to source for the latest in technology.</p>
        </section>
        <section id="latest-news">
            <h2>Latest News</h2>
            <div class="news-item">
                <img src="news1.jpg" alt="News Image 1">
                <h3>News Title 1</h3>
                <p>Summary of the news...</p>
            </div>
            <div class="news-item">
                <img src="news2.jpg" alt="News Image 2">
                <h3>News Title 2</h3>
                <p>Summary of the news...</p>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

news.html (News Page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - News</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>TechNews</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="news-list">
            <h2>Technology News</h2>
            <div class="news-item">
                <img src="news1.jpg" alt="News Image 1">
                <h3>News Title 1</h3>
                <p>Details of the news...</p>
            </div>
            <div class="news-item">
                <img src="news2.jpg" alt="News Image 2">
                <h3>News Title 2</h3>
                <p>Details of the news...</p>
            </div>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

contact.html (Contact Us Page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - Contact Us</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>TechNews</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="contact-form">
            <h2>Contact Us</h2>
            <form>
                <label for="name">Name:</label>
                <input type="text" id="name" name="name" required>
                
                <label for="email">Email:</label>
                <input type="email" id="email" name="email" required>
                
                <label for="message">Message:</label>
                <textarea id="message" name="message" required></textarea>
                
                <button type="submit">Submit</button>
            </form>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

about.html (About Us Page)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechNews - About Us</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>TechNews</h1>
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="news.html">News</a></li>
                <li><a href="contact.html">Contact Us</a></li>
                <li><a href="about.html">About Us</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>We are passionate about bringing you the latest in technology news.</p>
            <p>Our team of experts works around the clock to provide you with up-to-date information on the tech world.</p>
        </section>
    </main>
    <footer>
        <p>&copy; 2024 TechNews. All rights reserved.</p>
    </footer>
    <script src="scripts.js"></script>
</body>
</html>

styles.css

body {
    font-family: Arial, sans-serif;
    background-color: #121212;
    color: #ffffff;
    margin: 0;
    padding: 0;
}

header {
    background-color: #1e1e1e;
    padding: 1em;
    text-align: center;
}

header h1 {
    margin: 0;
    color: #bb86fc;
}

nav ul {
    list-style-type: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 1em;
}

nav ul li a {
    color: #bb86fc;
    text-decoration: none;
}

main {
    padding: 1em;
}

footer {
    background-color: #1e1e1e;
    padding: 1em;
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 0;
}

section {
    margin-bottom: 2em;
}

.news-item {
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

.news-item img {
    max-width: 150px;
    margin-right: 1em;
}

#contact-form form {
    display: flex;
    flex-direction: column;
}

#contact-form label {
    margin-top: 1em;
}

#contact-form input,
#contact-form textarea {
    margin-top: 0.5em;
    padding: 0.5em;
    background-color: #2c2c2c;
    border: none;
    color: #ffffff;
}

#contact-form button {
    margin-top: 1em;
    padding: 0.5em;
    background-color: #bb86fc;
    border: none;
    color: #121212;
    cursor: pointer;
}

#contact-form button:hover {
    background-color: #3700b3;
}

scripts.js



document.addEventListener('DOMContentLoaded', () => {
    console.log('TechNews website loaded');
});

You can now use the provided HTML, CSS, and JavaScript files to create your TechNews website. If you need any additional features or modifications, please use the commands provided.’

How I came up with it

I myself am a Web Developer and i find it very hard to just make simple or intermediate website, so i made this prompt it helps me make a Website in minutes! It just saves a lot of time!