why hello 11 compsci class of 25. Hows being annoying in I1 going huh!?
Plant Monitoring Panel - HTML & CSS Tutorial
Welcome to the Plant Status Panel Tutorial
In this tutorial, you will create a simple web interface using HTML and CSS that displays the status of a plant. This interface will show sensor data such as soil moisture levels, water tank levels, and will include buttons to control different actions like watering the plant.
This project will serve as a basic template for you to customize and expand. You can add more features, change the design, or adjust it to fit your specific project needs. Whether you're building a real monitoring system or just practicing your web development skills, this template will help you get started.
Here's an image of what the finished plant status panel will look like:
Follow the steps below to begin building your own plant status panel!
Step 1: Setting Up the Project Folder
Create a folder called plant_monitoring_panel. Inside the folder, create two files:
Explanation: The index.html file will contain the structure of the webpage. This is the framework that browsers use to display content.
The style.css file will contain rules that define how the webpage looks (colors, fonts, positioning, etc.). You’ll link the two together in the next steps.
Copy-paste location: Create these two empty files inside the plant_monitoring_panel folder on your computer.
Step 2: Adding the HTML Foundation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Plant Monitoring Panel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Plant Monitoring Dashboard</h1>
</header>
</body>
</html>
Explanation:
<!DOCTYPE html> tells the browser you’re using the latest version of HTML5.<html lang="en"> defines the document as an HTML file and sets the language to English for accessibility and SEO.- The
<head> section holds metadata like the character set (UTF-8) and the link to the external stylesheet (style.css).
- The
<body> contains all the visible content of the page.
- The
<header> tag is used to define the header area of the page, with an <h1> heading that displays "Plant Monitoring Dashboard."
Copy-paste location: Paste this code into the index.html file you created earlier.
Step 3: Adding a Section for Sensor Readouts
<section class="plant-status">
<h2>Plant Status</h2>
<p>Soil Moisture Level: <span id="moisture-level">50%</span></p>
<p>Water Tank Level: <span id="water-tank-level">75%</span></p>
</section>
Explanation:
<section> groups content into logical sections, in this case for the plant’s status.<h2> creates a secondary heading for this section.<p> creates paragraphs for each sensor reading (e.g., soil moisture and water tank levels).<span> tags wrap the dynamic sensor values, allowing you to update them with JavaScript later.
Copy-paste location: Paste this code into the index.html file, right after the closing </header> tag.
Step 4: Adding Control Buttons
<div class="control-buttons">
<button>Water Plant</button>
<button>Increase Humidity</button>
</div>
Explanation:
<div> is used to group the buttons together.<button> creates interactive buttons that can trigger actions, such as watering the plant or increasing humidity.
Copy-paste location: Paste this code into the index.html file, just before the </section> tag.
Step 5: Adding an Image
<img src="sadtree.avif" alt="Sad Tree" id="plant-image">
Explanation:
<img> is used to display an image. The src attribute specifies the image file's location.- The
alt attribute provides alternative text for screen readers or in case the image fails to load.
- The
id allows you to style or manipulate the image later using CSS or JavaScript.
Copy-paste location: Paste this code into the index.html file, after the closing </div> tag (right after the control buttons).
Step 6: Styling the Page with CSS
/* Basic reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Body styling */
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
color: #333;
padding: 20px;
}
Explanation:
* { margin: 0; padding: 0; } resets default browser styles for padding and margins, making sure that all elements start from a consistent baseline.box-sizing: border-box; ensures that padding and borders are included in the element’s total width and height.body styles the entire page with a light background color, default text color, and applies a padding to the page content.
Copy-paste location: Paste this code into the style.css file you created earlier.
Step 7: Styling the Header
/* Header styling */
header {
background-color: #4CAF50;
color: white;
padding: 10px 0;
text-align: center;
margin-bottom: 20px;
border-radius: 8px;
}
Explanation:
background-color sets the background color of the header to green (#4CAF50).color changes the text color to white.padding adds space around the text within the header.text-align: center; centers the text horizontally within the header.margin-bottom adds space below the header to separate it from other sections.border-radius rounds the corners of the header for a softer look.
Copy-paste location: Paste this code into the style.css file, after the body styling.
Step 8: Styling the Plant Status Section
/* Plant status section */
.plant-status {
background-color: #fff;
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
max-width: 400px;
margin: 0 auto;
text-align: center;
}
.plant-status h2 {
margin-bottom: 10px;
font-size: 1.5em;
}
.plant-status p {
margin: 10px 0;
font-size: 1.2em;
}
.plant-status span {
font-weight: bold;
}
Explanation:
.plant-status adds a white background, padding, and a border around the sensor readout section.max-width: 400px; ensures that the section doesn’t get too wide, even on large screens.margin: 0 auto; centers the section horizontally on the page.text-align: center; centers the text inside this section.h2 adjusts the heading size and adds space below it.p adjusts the spacing and size of the sensor readout paragraphs.span makes the sensor values bold to stand out.
Copy-paste location: Paste this code into the style.css file, after the header styling.
Step 9: Styling the Buttons
/* Buttons styling */
.control-buttons {
margin-top: 20px;
}
button {
background-color: #4CAF50;
color: white;
border: none;
padding: 10px 20px;
margin: 5px;
cursor: pointer;
border-radius: 5px;
font-size: 1em;
}
button:hover {
background-color: #45a049;
}
Explanation:
background-color gives the buttons the same green color as the header.color changes the text on the buttons to white.padding adds space inside the buttons to make them easier to click.margin adds space between each button.cursor: pointer; makes the mouse pointer change to a hand icon when hovering over the buttons, indicating that they are clickable.border-radius gives the buttons rounded corners.hover changes the background color when the user hovers over the button, providing visual feedback.
Copy-paste location: Paste this code into the style.css file, after the plant status section styling.
Step 10: Styling the Image
/* Image styling */
#plant-image {
margin-top: 20px;
width: 200px;
border-radius: 10px;
}
Explanation:
margin-top adds space above the image to separate it from the buttons.width limits the image to a fixed width of 200px.border-radius adds rounded corners to the image for a polished look.
Copy-paste location: Paste this code into the style.css file, after the button styling.