Metadata

Date :: 13-04-2025
Tags :: web-dev project done✅

Notes

🎯 Final Project: Build a Motivational Poster Website (Meme Style!)

📝 Project Overview

The final project in this section involves creating a motivational meme-style poster website. This type of design was made famous by inspirational posters with bold titles and quotes, typically featuring a meaningful or humorous image.

You’re going to apply all the CSS concepts you’ve learned so far:

The Box Model (margin, padding, border, content, width, height)
Text styling and custom fonts
Layout and positioning
CSS centering techniques
File/folder structure & referencing assets correctly

🔖 What Are Motivational Posters?

There are two kinds:

Serious motivational posters
- Bold uppercase titles like “POTENTIAL”
- A motivating sentence like: “We all have the tools for greatness within us.”
- Often paired with serene or powerful images.
Funny meme-style posters
- Humor-driven:
  Example:
  - Title: “COOLNESS”
  - Text: “You may be cool…but you’ll never be 4 popped-collars cool.”
  - Paired with something ridiculous or exaggerated.

You’ll create your own version of this poster with the same layout concept.

📁 Project Setup

Download the starter project files.
Extract the zip and open the folder in Visual Studio Code.
Inside, you’ll see:
- index.html
- style.css
- assets/ (contains an images/ folder where you’ll add your picture)

✅ Key Requirements (Core Learning Objectives)

Your final poster website must include the following:

Requirement	Description
1. Image	Use your own or sample image inside the `assets/images/` folder.
2. Border	The image should have a 5px white border using `border` property.
3. Background	Entire page should have a black background.
4. Typography	Use Libre Baskerville font (from Google Fonts) for styling your heading and paragraph.
5. Text Styling	Title (`h1`) and subtitle (`p`) should be centered, and title should be uppercase using CSS.
6. Layout	The entire content should be centered horizontally using width + margin trick and pushed vertically using margin-top.

📦 Box Model Recap (For Styling the Poster)

Make sure you apply box model properties effectively:

border: To frame your image
margin: For centering the div (horizontal & vertical)
padding: (optional) to space internal elements if needed
width: To limit the div’s width on screen

🧰 HTML Structure (Suggested Layout)

You should wrap all content inside a <div> with a class or ID. For example:

<div class="poster">
  <img src="assets/images/your-image.jpg" alt="Motivational Image">
  <h1>POTENTIAL</h1>
  <p>We all have the tools for greatness within us.</p>
</div>

Why wrap everything inside a div?

Makes it easy to center everything together
You apply styles to the whole block, instead of managing individual alignment for image, title, and text.

🎨 CSS Styling Breakdown

1. Set Up Google Fonts

Include this line in your <head> section:

<link href="https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap" rel="stylesheet">

In CSS:

body {
  font-family: 'Libre Baskerville', serif;
}

2. Set the Background

body {
  background-color: black;
  color: white;
}

3. Style the Poster Container

.poster {
  width: 50%;
  margin-left: 25%; /* horizontally center the container */
  margin-top: 100px; /* visually center it vertically */
  text-align: center;
}

💡 The width: 50% and margin-left: 25% combo centers the container. There’s 25% space on both sides.

4. Style the Image

.poster img {
  width: 100%; /* fills the container width */
  border: 5px solid white;
}

💡 Making the image width: 100% ensures it resizes with the container div.

5. Style the Heading

h1 {
  font-size: 3rem;
  text-transform: uppercase;
  margin: 20px 0 10px;
}

text-transform: uppercase – Makes all text in h1 appear in uppercase even if typed in lowercase.
Use rem for responsive font sizes.

6. Style the Paragraph

p {
  font-size: 1.2rem;
  font-style: italic;
  margin: 0;
}

💡 Centering Elements in CSS – A Quick Summary

Method	How it works	Use Case
`margin: auto`	Auto-calculates equal margin left and right	Great for `block` elements
`margin-left/right: %`	Manual spacing using percentage	Used when width is also in %
`text-align: center`	Center text inside containers	For text and inline elements
`display: flex`	More advanced (upcoming lessons)	For complete centering both directions

🧠 In this project, we use percentage margins and text-align: center.

🧪 Developer Tools & Debugging Tips

Use Chrome DevTools to inspect spacing, font rendering, and centering.
Use the Pesticide extension to visualize boxes and layout issues.
Check if the Google Font loaded correctly (verify in DevTools > Elements > Styles).

🛠️ Troubleshooting Common Issues

Problem	Likely Fix
Image not centered?	Make sure it’s `width: 100%` inside a centered container.
Font not working?	Double-check Google Font link and font-family syntax.
Text not uppercase?	Use `text-transform: uppercase;` in `h1` styling.
Container not centered?	Check that container has a width and matching `margin-left`.

🎉 Customization Ideas (After Finishing the Core Tasks)

Add more motivational posters below the first one.
Add hover effects to the image or text.
Use multiple fonts for title and subtitle.
Add a gradient background or background image.
Create a responsive layout using media queries.

✅ Final Checklist

Before you move on, confirm that your project includes:

✅ Black background (background-color: black)
✅ Centered image with white border (border: 5px solid white)
✅ Custom font (Libre Baskerville)
✅ Uppercase h1 using text-transform
✅ Centered container using width + margin technique
✅ Centered text (text-align: center)
✅ Clean HTML with semantic structure

📌 Summary

This final project is the perfect opportunity to practice everything from this section:

Box model
Custom fonts
Layout with margins
Text alignment and transformation
Image styling

It’s simple yet powerful, and by the end, you’ll feel more confident in working with real-world CSS layout and styling techniques.

Quartz 4

Explorer

Motivational Poster Website