Web Design Layout Techniques

1. Semantic Elements: <article>, <section>, <aside>

<article> is used to wrap a self-contained piece of content, like a blog post or lesson. Inside it, we use <section> to divide content into logical parts. <aside> is used for tangential or supportive content like tips or related links.

<article>
  <section>Main content...</section>
  <aside>Sidebar content...</aside>
</article>

2. <figure> and <figcaption> Elements

Use the <figure> tag to wrap media like images, and the <figcaption> to describe the image.

Web layout example — Figure: A sample layout for CodeCyber Logo.

            
                <figure>
                <img src="layout.png" alt="Layout" />
                <figcaption>Figure: Layout with Grid</figcaption>
                </figure>

3. CSS Grid Layout

CSS Grid allows you to create complex, responsive layouts easily.

.grid-container {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

4. Opacity Property

The opacity property controls the transparency of an element. Values range from 0 (fully transparent) to 1 (fully opaque).

aside {
  opacity: 0.9;
}

5. Box-Sizing Property

box-sizing: border-box; ensures padding and borders are included in the element's width/height.

* {
  box-sizing: border-box;
}

6. Text Shadow

Adds shadow to text, enhancing its appearance. Syntax: text-shadow: x y blur color;

.subtitle {
  text-shadow: 1px 1px 2px #ccc;
}

7. Box Shadow

Adds depth and dimension to elements using shadows.

article {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

8. Adding a Favicon

Favicons are small icons displayed in browser tabs. Add them via the <link> tag in the <head>.

<link rel="icon" href="favicon.ico" type="image/x-icon" />