Web Fundamentals Skill

PURPOSE

Core web development with HTML, CSS, and JavaScript.

CORE COMPETENCIES

HTML5:
├── Semantic markup
├── Forms & validation
├── Accessibility (ARIA)
└── SEO best practices

CSS:
├── Flexbox & Grid
├── Responsive design
├── CSS Variables
├── Animations
└── Tailwind/modern frameworks

JavaScript:
├── ES2024+ features
├── DOM manipulation
├── Event handling
├── Async/await
└── Modules

CODE PATTERNS

Semantic HTML

<article>
  <header>
    <h1>Article Title</h1>
    <time datetime="2024-01-15">January 15, 2024</time>
  </header>
  <main>
    <p>Content here...</p>
  </main>
  <footer>
    <nav aria-label="Article navigation">
      <a href="/prev">Previous</a>
      <a href="/next">Next</a>
    </nav>
  </footer>
</article>

Responsive CSS Grid

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .grid {
    grid-template-columns: 1fr;
  }
}

TROUBLESHOOTING