Elevate Your Code: Crafting a Stylish Quote Generator with Fetch API, HTML, and CSS

By Sebastian

July 9, 2025

Creating an engaging and visually appealing quote generator can be a great project to sharpen your front-end development skills. By combining HTML and CSS effectively, you can design a clean interface before adding the dynamic functionality with JavaScript. In this guide, we’ll walk through building the static structure and stylish presentation of a quote generator, setting a solid foundation for your upcoming JavaScript integration using the Fetch API.

Structuring Your Quote Generator with HTML

Start by defining the basic components of your quote generator in an index.html file. The structure includes:

A title (h2 tag) to introduce the quote generator.
A button to trigger the generation of a new quote.
A container (div) that holds the quote content and author.

Here’s the skeleton of the HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Quote Generator</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="quoteGenerator">
    <h2>Inspiration for Your Day</h2>
    <button id="generateQuote">Generate New Quote</button>
    <div id="quote">
      <p>"Your initial quote will appear here."</p>
      <em>- Author Name</em>
    </div>
  </div>
</body>
</html>

The button has an ID for future JavaScript targeting.
The div with ID quote holds the quote and the author, clearly separated in the markup.

Styling for a Clean and Centered Layout with CSS

Keeping the design minimalistic yet attractive ensures the content stands out. Open your style.css and add the following:

Reset and Base Styles

/* Universal selector resets margin and padding */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #f0f0f0;
  padding: 7%;
  font-family: 'Roboto', sans-serif;
}

Using the universal selector cleans up inconsistent default margins and padding across browsers. The body has a soft background and sufficient padding to center content nicely on various screen sizes.

Centering the Quote Generator Container

#quoteGenerator {
  margin: 0 auto;
  max-width: 500px;
  background: #fff;
  border-radius: 10px;
  padding: 40px 40px 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  position: relative;
}

margin: 0 auto; centers the container horizontally.
Rounded corners, padding, and subtle shadow add to a polished card look.
position: relative; prepares it for positioning pseudo-elements later.

Title Styling with Custom Border Underline

Instead of a basic border-bottom, use a pseudo-element for a neat underline stretching edge-to-edge, unaffected by the container’s padding:

#quoteGenerator h2 {
  font-size: 30px;
  margin-bottom: 40px;
  padding-bottom: 20px;
  position: relative;
}

#quoteGenerator h2::before {
  content: "";
  position: absolute;
  height: 1px;
  background: #000;
  left: -40px;  /* offset equal to container's padding */
  right: -40px;
  bottom: 0;
}

By applying negative offsets equivalent to the container’s horizontal padding, the underline spans fully across the visible boundary, creating a sleek separation beneath the heading.

Button Design and Interaction

button#generateQuote {
  background: #007BFF;
  border: none;
  border-radius: 10px;
  color: #FFF;
  padding: 15px;
  font-size: 22px;
  line-height: 1.6;
  font-family: 'Roboto', sans-serif;
  width: 100%;
  cursor: pointer;
  transition: opacity 0.3s linear;
  margin-bottom: 40px;
}

button#generateQuote:hover {
  opacity: 0.7;
}

A vibrant blue background and white text ensure the button stands out.
The full width and generous padding make it accessible and visually balanced.
A smooth hover effect invites interaction.

Quote Text and Author Alignment

#quote {
  text-align: center;
  font-size: 18px;
}

#quote p {
  font-size: 24px;
  margin-bottom: 20px;
  font-style: italic;
}

#quote em {
  display: block;
  text-align: right;
  font-style: normal;
  font-weight: bold;
}

The quote text is larger and italicized for emphasis.
The author’s name is aligned to the right, differentiating it visually.
Overall, the content remains centered within its container for balanced readability.

Previewing Your Work

Open the index.html file in a browser to see the result:

A centered white card with rounded edges and a shadow.
A bold, underlined heading.
A wide blue button with hover effect.
A sample quote and author styled for clarity and appeal.

This design sets the stage for the quote generator’s dynamic functionality. In the next phase, JavaScript combined with the Fetch API will bring fresh quotes on clicking the button.

By carefully structuring your HTML and applying thoughtful CSS like this, you prepare a seamless user experience and a beautiful interface. Keep experimenting to enhance your styles and functionalities!

Happy coding!

—————————————————-

Are you tired of the 9-to-5 grind? Unlock the secrets to online income generation. GetIncomeNow.com is your roadmap to financial freedom. We reveal proven methods, insider tips, and cutting-edge strategies to help you achieve your income goals. Start your journey to financial independence today!

Share0

Tweet0

Share0

Sebastian

About the author

They say the pen is mightier than the sword, but Sebastian Hayes wields email like a magic wand. This email marketing wizard transforms ordinary inboxes into enchanted realms of engagement, where open rates soar and conversions flourish like wildflowers. Forget dry newsletters and generic blasts; with Sebastian's guidance, your emails will become captivating stories and personalized journeys that resonate with every reader.