HTML

13 2026 8

JavaScript. HTML .

1 DOM

. .

<div><div><div><p></p></div></div></div>
<p></p>

  • JavaScript

2

preload 
<link rel="preload" href="font.woff2" as="font" crossorigin>

3

defer & async 
<script src="main.js" defer></script>
<script src="analytics.js" async></script>

4 HTML

semantic HTML 
<header><nav>...</nav></header>
<main><article>...</article></main>
<footer>...</footer>

!

HTML. !

CSS

12 2026 10

CSS .

1 CSS Variables

.

variables.css 
:root {
    --primary: #0071e3;
    --spacing: 16px;
}

.btn {
    background: var(--primary);
    padding: var(--spacing);
}

  • Dark Mode

2 CSS Grid

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

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

3 Flexbox

flex.css 
.center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar {
    display: flex;
    justify-content: space-between;
}

4 Glassmorphism

glass.css 
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 15px;
}

!

CSS!

SEO 2026

14 2026 12

Google. SEO .

1 Core Web Vitals

Google .

  • LCP: < 2.5
  • INP: < 200ms
  • CLS: < 0.1
<img src="image.jpg" 
     srcset="small.jpg 400w, large.jpg 1200w"
     loading="lazy" 
     alt="">

  • CDN
  • (WebP)
  • CSS/JS
  • Browser Caching

2 HTML

semantic.html 
<!DOCTYPE html>
<html lang="ar">
<head>
    <title>  -  </title>
    <meta name="description" content="">
</head>
<body>
    <header><nav>...</nav></header>
    <main><article>...</article></main>
    <footer>...</footer>
</body>
</html>

3 Structured Data

schema.json 
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": " ",
  "jobTitle": " ",
  "url": "https://ibrahemkassap.tech"
}
</script>

4

  • (H1, H2)

!

SEO . !

Pricing