# **Understanding HTML & CSS in a Simple Webpage**
In this article, I will break down the HTML and CSS code used to design a simple webpage. I will explain how the different elements work together to create the layout and styling. This will help you understand the basics of web development and how to improve the design.
---
## **1. Understanding the HTML Structure**
HTML (HyperText Markup Language) is the foundation of any webpage. It helps structure the content by using different tags. Let's go through the main parts of the HTML in the code.
### **1.1 The Basic Structure**
Every HTML document starts with:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
```
- `<!DOCTYPE html>` tells the browser that we are using HTML5.
- `<html lang="en">` wraps all the content and sets the language to English.
- `<head>` contains important information like character encoding and page title.
- `<body>` is where all the visible content is placed.
---
### **1.2 The Page Layout with Divs**
Your webpage is divided into three sections: **Sedans, SUVs, and Luxury Cars**. Each section is wrapped inside a `<div>` element. A `<div>` (short for "division") is a container that helps group and style elements together.
Inside the `<body>`, you have:
```html
<div class="container">
<div class="box-orange">
<img src="./img/chuo-line-train.svg" alt="sedan image logo">
<h2>SEDANS</h2>
<p>Choose a sedan for its affordability and excellent fuel economy...</p>
<button>Learn More</button>
</div>
<div class="box-blue">
<img src="./img/ford-racing-1-logo.svg" alt="SUV car logo">
<h2>SUVS</h2>
<p>Take an SUV for its spacious interior, power, and versatility...</p>
<button>Learn More</button>
</div>
<div class="box-green">
<img src="./img/ford-racing-1-logo.svg" alt="luxury car logo">
<h2>LUXURY</h2>
<p>Cruise in a luxury car without the bloated prices...</p>
<button>Learn More</button>
</div>
</div>
```
- **`<div class="container">`** is the main wrapper that holds all three sections.
- **Each car type has its own `<div>` (`.box-orange`, `.box-blue`, `.box-green`)**, which helps in styling them differently.
- **Inside each `<div>`**, there is:
- An **`<img>` tag** for an image (car logo).
- A **`<h2>` tag** for the car type title (SEDANS, SUVS, LUXURY).
- A **`<p>` tag** for a short description.
- A **`<button>`** that users can click to learn more.
---
## **2. Understanding the CSS Styling**
CSS (Cascading Style Sheets) is used to style the HTML elements and make the webpage look good.
### **2.1 Global Styles**
```css
* {
padding: 0;
margin: 0;
}
```
- `*` is a wildcard selector that applies to **all elements**.
- This removes any default margin and padding that browsers add.
---
### **2.2 Centering the Page**
```css
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
```
- `display: flex;` makes the content inside `<body>` flexible.
- `justify-content: center;` places the content at the center of the page horizontally.
- `align-items: center;` centers the content vertically.
- `height: 100vh;` makes the page take up the full screen height.
---
### **2.3 Styling the Container**
```css
.container {
display: flex;
background-color: #f3f3f3;
padding: 60px 10px;
height: 500px;
margin: 60px 10px;
}
```
- The `.container` holds all three sections and displays them in a row.
- `display: flex;` makes the sections sit side by side.
- `background-color: #f3f3f3;` gives a light gray background.
- `padding: 60px 10px;` adds space inside the container.
- `margin: 60px 10px;` adds space around the container.
---
### **2.4 Styling the Boxes (Each Car Type)**
```css
.box-orange, .box-blue, .box-green {
padding: 10px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: white;
}
```
- Each car section (`.box-orange`, `.box-blue`, `.box-green`) is styled the same way.
- `display: flex;` makes it flexible.
- `flex-direction: column;` arranges items **vertically** inside each box.
- `justify-content: space-between;` spreads the items evenly.
- `color: white;` makes the text white.
---
### **2.5 Adding Background Colors to Each Section**
```css
.box-orange {
background-color: #e28527;
}
.box-blue {
background-color: #016972;
}
.box-green {
background-color: #01413e;
}
```
- Each section has a **different background color** to make it stand out.
- `.box-orange` (Sedans) has an orange background.
- `.box-blue` (SUVs) has a blue-green background.
- `.box-green` (Luxury) has a dark green background.
---
### **2.6 Styling the Button**
```css
button {
padding: 10px 20px;
border-radius: 20px;
border: none;
}
```
- `padding: 10px 20px;` makes the button bigger and easier to click.
- `border-radius: 20px;` gives it **rounded corners**.
- `border: none;` removes the default border.
---
## **3. How to Improve the Design**
This design is simple and works well, but here are some ways to improve it:
✅ **Make the sections responsive**
- Right now, they are always side by side. On smaller screens, they should **stack on top of each other**.
- This can be done by adding `flex-wrap: wrap;` to `.container`.
✅ **Add hover effects**
- Buttons should change color when hovered over to improve user experience.
- Example:
```css
button:hover {
background-color: white;
color: black;
cursor: pointer;
}
```
✅ **Use better fonts**
- The default font can be improved by adding a modern font like `font-family: Arial, sans-serif;` in the `<body>` styles.
✅ **Improve spacing**
- Add more padding and margins to avoid elements looking too close together.
---
## **4. Conclusion**
This article explained how the HTML and CSS in my code work together to create a structured and visually appealing design. With flexbox, background colors, and spacing, we can build a neat and simple webpage.
By making a few improvements, this design can look even better and work well on all screen sizes. Web development is all about **experimenting and improving**
Sign in with Wallet
Connect another wallet