luxIA/📖 learning
🎨

HTML & CSS

🧑‍🍳 Cook

Structure and style

HTML defines structure. CSS defines how it looks. Together they create visual interfaces.

Essential HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
</head>
<body>
  <header>
    <h1>Welcome</h1>
  </header>
  <main>
    <p>Main content</p>
  </main>
  <footer>
    <p>© 2026</p>
  </footer>
</body>
</html>

Important tags

TagUse
<div>Generic container
<span>Inline text
<a href="">Links
<img src="">Images
<button>Buttons
<input>Form fields
<form>Forms

Modern CSS

/* Variables */
:root {
  --color-primary: #3b82f6;
  --spacing: 1rem;
}

/* Styles */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--spacing);
}

.button {
  background: var(--color-primary);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  border: none;
  cursor: pointer;
}

Flexbox

.flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

Grid

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Tailwind CSS

Instead of writing CSS, use utility classes:

<button class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
  Click me
</button>

💡 Recommendation: Use Tailwind for new projects.

Practice

→ Responsive Landing Page

Useful links