🌟 CSS Crash Course: Build Your First "About Me" Page! 🎨

Welcome to this CSS Crash Course! In this project, you'll learn how to use HTML & CSS to create a simple webpage and style it. By the end, you'll be able to make your own "About Me" page with basic styling.

---

📌 What’s in This Repo?

• index.html → The main HTML file (structure of the page)
• styles.css → The CSS file (styles the page)

---

🚀 How to Run This Project?

Follow these simple steps to see the project in action:

1️⃣ Open the Files

• Download this repository as a ZIP file and extract it OR

• Clone this repository using Git:

  git clone https://github.com/include-davis/tech-ws-2025-html-css

2️⃣ Open in a Browser

• Double-click index.html to open it in your web browser.
• You should see a simple styled webpage!

3️⃣ Make Changes and See the Magic!

• Open index.html and styles.css in a text editor (like VS Code, Sublime Text, or Notepad++).
• Edit the code, save the file, and then refresh the browser to see your changes!

---

🎯 Your Task: Create Your Own "About Me" Page!

Modify the existing files to create a webpage about yourself. Here’s what you can try:

1️⃣ Update the HTML

In index.html, replace the text inside the <h1> and <p> tags to add your own name and introduction.

<h1>Hello, I'm [Your Name]!</h1>
<p>I'm learning CSS, and this is my first styled webpage. 🚀</p>

2️⃣ Style It with CSS

Go to styles.css and customize the styles. Try changing:

• Background color:

  body {
    background-color: lightblue;
  }

• Text color:

  h1 {
    color: darkblue;
  }

• Font size:

  p {
    font-size: 20px;
  }

3️⃣ Add an Image

In index.html, add an image tag inside the <section>:

<img src="your-image.jpg" alt="My Picture" width="200">

Make sure the image file is in the same folder as your HTML file.

---

📚 CSS Quick Guide

Here are some basic CSS properties to try:

Property	What It Does	Example
color	Changes text color	color: red;
background-color	Changes background color	background-color: yellow;
font-size	Changes text size	font-size: 24px;
text-align	Aligns text (left, center, right)	text-align: center;
padding	Adds space inside an element	padding: 10px;
margin	Adds space outside an element	margin: 20px;

---

🎉 Now It’s Your Turn!

1. Edit index.html and styles.css to personalize your webpage.
2. Save and refresh the browser to see changes.
3. Have fun experimenting with CSS styles!

---

💡 Need Help? Google is your best friend! Try searching for "CSS background color example" or "How to change font size in CSS."

🚀 Bonus Challenge: Try adding a contact section, a button, or even a list of your hobbies!

Happy coding! 🎨✨