COURSE: How to create a single-page website without coding using ChatGPT and Replit Agent

📘 3.1. What is "website styling"

In Module 2, we created the framework (HTML structure). Now we need to add visuals — everything the user sees.

This is done via CSS (Cascading Style Sheets) — style sheets. But instead of writing them manually, we will "talk" to Replit Agent about what the design should look like.

🧠 3.2. Principle: "Talk like a designer, not like a programmer"

Replit Agent does not need technical commands — it needs a description of how you want the site to look.

🖋️ 3.3. Basic styling prompt

Before you start styling the site, open your project in Replit (the one created in Module 2).

1. Click 🤖 Ask AI (Replit Agent).
2. Enter the request:

🔍 What the agent will do

• • Will link the Poppins font in index.html.
• • Will add CSS to style.css.
• • Will create spacing, colors, and contrast.
• • Will add transition for smooth effects.
• • Will configure responsiveness.

🎨 3.4. Understanding basic design elements

To confidently formulate prompts, let's break down the key parameters that should be mentioned in prompts.

🧩 3.5. Example of a full styling prompt

🧱 3.6. How Replit Agent changes style.css

Here is an example of styles that the agent can create:

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  color: #333;
}

header {
  background-color: #0066ff;
  padding: 20px;
  text-align: center;
  color: white;
  position: fixed;
  width: 100%;
  top: 0;
}

nav ul {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}

section {
  padding: 100px 20px;
  max-width: 1000px;
  margin: auto;
}

.service {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  padding: 20px;
  border-radius: 10px;
  transition: transform 0.3s;
}

.service:hover {
  transform: translateY(-5px);
}

🎯 3.7. Selecting color palettes

🔹 ChatGPT query:

Response example:

1. Energetic: orange, black, white.
2. Premium: black, gold, cream.
3. Minimalist: white, gray, blue.

After selecting the scheme — request to Replit Agent:

🖋️ 3.8. Working with Google Fonts

Fonts are the "clothes" for text. They can be selected via ChatGPT:

Examples:

• • Playfair Display — classic, elegant.
• • Poppins — modern and readable.
• • Montserrat — geometric, technical.

After choosing a font — request to Replit Agent:

💡 3.9. Animations and effects

Now let's add smooth movements and soft effects.

🔹 Replit Agent query:

The agent will create code like:

section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease;
}

section.visible {
  opacity: 1;
  transform: translateY(0);
}

and will add JS that activates the visible class on scroll.

📱 3.11. Adapting design for mobile devices

To make the design look good on smartphones:

Replit will automatically add something similar in CSS:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }
  section {
    padding: 60px 10px;
  }
  h1 {
    font-size: 1.8rem;
  }
}

🧭 3.12. Checking the result

1. Click Run.
2. Open the site in a new tab.
3. Open developer tools (F12 → "Toggle Device Toolbar") and check how the site looks on iPhone/Android.
4. If something doesn't fit — clarify:

   "Make the text larger on mobile and add more breathing room between blocks."

🧩 3.13. Typical styling problems

🧠 3.15. Summary of Module 3