JONAS'S GARDEN

Website Basics

5 min read

Class: front-end

Topic: website frontend html css

Date: 12-04-2025

1. Basic Structure of a Website (HTML)

Every webpage is divided into semantic sections for better readability and SEO. Here’s how they work:

  • The top section of the webpage.
  • Usually contains:
    • Logo / Your name
    • Navigation menu (<nav>)
    • A brief introduction (optional)
  • Contains links to different pages (Home, About, Portfolio, Contact).
  • Usually placed inside <header> or as a separate section.

<main>

  • The primary content of the webpage.
  • Contains:
    • Your projects (Portfolio)
    • About Me section
    • Blog posts (if any)
  • The bottom section of the webpage.
  • Usually contains:
    • Copyright info
    • Social media links
    • Contact details

2. HTML Code Example

Here’s how you structure these sections in HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My Portfolio</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <!-- HEADER SECTION -->
    <header>
        <h1>John Doe</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#portfolio">Portfolio</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
 
    <!-- MAIN CONTENT -->
    <main>
        <section id="home">
            <h2>Welcome to My Portfolio!</h2>
            <p>I am a web developer...</p>
        </section>
 
        <section id="about">
            <h2>About Me</h2>
            <p>I love coding and design...</p>
        </section>
 
        <section id="portfolio">
            <h2>My Projects</h2>
            <div class="project">Project 1</div>
            <div class="project">Project 2</div>
        </section>
    </main>
 
    <!-- FOOTER SECTION -->
    <footer>
        <p>&copy; 2024 John Doe</p>
        <a href="https://github.com/johndoe">GitHub</a>
    </footer>
</body>
</html>

3. Styling with CSS

Now, let’s style these sections to make them visually distinct.

Basic CSS Styling

/* Reset default margins/padding */
body, h1, h2, p, ul {
    margin: 0;
    padding: 0;
}
 
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
 
/* HEADER STYLES */
header {
    background: #333;
    color: white;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
 
nav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
}
 
nav a {
    color: white;
    text-decoration: none;
}
 
nav a:hover {
    text-decoration: underline;
}
 
/* MAIN CONTENT STYLES */
main {
    padding: 2rem;
}
 
section {
    margin-bottom: 2rem;
}
 
/* FOOTER STYLES */
footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 1rem;
}
 
footer a {
    color: lightblue;
}

4. How to Differentiate Each Section?

SectionPurposeHow to Style Differently
HeaderTop navigation barDark background, centered logo, nav links
NavNavigation menuHorizontal list, hover effects
MainPrimary contentPadding, section spacing, white background
FooterCopyright & linksDark background, centered text

5. Key Takeaways

✔ <header> → Top section (logo + navigation).
✔ <nav> → Contains links (inside <header> or standalone).
✔ <main> → Main content (projects, about, blog).
✔ <footer> → Bottom section (copyright, social links).

✔ Use <section> inside <main> to organize content.
✔ Style each part differently (colors, spacing, fonts).

📌 HTML Keywords (Tags & Attributes)

1. Structural Tags

KeywordUseExample
<!DOCTYPE html>Defines HTML5 document<!DOCTYPE html>
<html>Root element<html lang="en">
<head>Metadata (title, styles, scripts)<head><title>My Site</title></head>
<body>Visible content<body><h1>Hello</h1></body>
<header>Top section (logo, nav)<header><nav>...</nav></header>
<nav>Navigation links<nav><a href="#">Home</a></nav>
<main>Primary content<main><section>...</section></main>
<section>Content grouping<section id="about">...</section>
<article>Independent content (blog post)<article><h2>Post</h2></article>
<footer>Bottom section<footer>© 2024</footer>

2. Text & Media Tags

KeywordUseExample
<h1>-<h6>Headings<h1>Title</h1>
<p>Paragraph<p>Some text.</p>
<a>Hyperlink<a href="https://example.com">Link</a>
<img>Image<img src="pic.jpg" alt="Photo">
<ul>, <ol>, <li>Lists<ul><li>Item</li></ul>
<div>Container (no semantic meaning)<div class="box">...</div>
<span>Inline container<span class="highlight">Text</span>

3. Form Tags

KeywordUseExample
<form>Form container<form action="/submit" method="POST">
<input>Input field<input type="text" placeholder="Name">
<button>Clickable button<button type="submit">Send</button>
<textarea>Multi-line text<textarea rows="4"></textarea>
<select>, <option>Dropdown<select><option>Choice</option></select>

🎨 CSS Keywords (Properties & Values)

1. Layout & Positioning

KeywordUseVariations/ValuesExample
displayHow an element is displayedblock, inline, flex, grid, nonedisplay: flex;
positionElement positioningstatic, relative, absolute, fixed, stickyposition: fixed;
marginOuter spacingmargin: 10px; (top, right, bottom, left)margin: 0 auto;
paddingInner spacingpadding: 20px;padding: 10px 5px;
width, heightSizepx, %, vw, vhwidth: 100%;
flexboxFlexible layoutdisplay: flex;, justify-content, align-itemsjustify-content: center;
gridGrid layoutdisplay: grid;, grid-template-columnsgrid-template-columns: 1fr 1fr;

2. Typography

KeywordUseVariations/ValuesExample
font-familyText fontArial, Helvetica, sans-seriffont-family: 'Arial';
font-sizeText sizepx, em, rem, %font-size: 16px;
colorText colorHex (#FF5733), RGB, named (red)color: #333;
text-alignHorizontal alignmentleft, center, right, justifytext-align: center;
line-heightLine spacingUnitless (1.5), px, emline-height: 1.6;

3. Colors & Backgrounds

KeywordUseVariations/ValuesExample
background-colorBackground colorHex, RGB, namedbackground-color: #f4f4f4;
background-imageBackground imageurl('image.jpg')background-image: url('bg.jpg');
borderElement border1px solid #000border: 2px dashed red;
border-radiusRounded cornerspx, %border-radius: 10px;
box-shadowShadow effectx-offset y-offset blur colorbox-shadow: 2px 2px 5px grey;

4. Animations & Effects

KeywordUseVariations/ValuesExample
transitionSmooth property changesproperty duration timing-functiontransition: all 0.3s ease;
transform2D/3D transformationsrotate(), scale(), translate()transform: rotate(45deg);
animationKeyframe animations@keyframes, animation-name, durationanimation: fade 2s infinite;

5. Responsive Design

KeywordUseVariations/ValuesExample
@mediaMedia queries (breakpoints)max-width, min-width@media (max-width: 600px) { ... }
vw, vhViewport units1vw = 1% of viewport widthwidth: 50vw;
rem, emRelative font sizes1rem = root font sizefont-size: 1.2rem;

🔑 Key Takeaways

HTML

  • Structure: <header>, <main>, <footer>, <section>, <div>
  • Text: <h1>, <p>, <a>, <span>
  • Media: <img>, <video>, <audio>
  • Forms: <form>, <input>, <button>

CSS

  • Layout: display, position, flexbox, grid
  • Typography: font-family, color, text-align
  • Styling: background, border, box-shadow
  • Responsive: @media, vw, rem

🚀 Advanced HTML & CSS Cheat Sheet

(Includes Animations, Transforms, and More!)

🔷 HTML Refresher

📌 Semantic Structure

TagUseExample
<article>Independent content (blog post)<article><h2>Post</h2></article>
<aside>Sidebar/content<aside>Related links</aside>
<figure> + <figcaption>Image with caption<figure><img src="pic.jpg"><figcaption>Photo</figcaption></figure>
<time>Machine-readable date/time<time datetime="2024-01-01">Jan 1</time>

🎨 Advanced CSS

🔥 CSS Transforms

Manipulate elements in 2D/3D space.

PropertyUseValues/Example
transformApplies transformationstransform: rotate(45deg);
translate()Moves element (X,Y)transform: translate(50px, 20px);
scale()Resizes elementtransform: scale(1.2); (120%)
rotate()Rotates elementtransform: rotate(90deg);
skew()Tilts elementtransform: skew(20deg);
transform-originChanges pivot pointtransform-origin: top left;

Example:

.box {
  transform: rotate(30deg) scale(1.1);
  transform-origin: center;
}

✨ CSS Animations

Create smooth animations without JavaScript.

1. @keyframes

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

2. animation Properties

PropertyUseExample
animation-nameLinks to @keyframesanimation-name: fadeIn;
animation-durationHow long it runsanimation-duration: 2s;
animation-delayDelay before startinganimation-delay: 1s;
animation-iteration-countRepeat timesanimation-iteration-count: infinite;
animation-timing-functionSpeed curveanimation-timing-function: ease-in-out;

Example:

.element {
  animation: fadeIn 2s ease-in-out infinite alternate;
}

🌀 CSS Transitions

Smoothly animate property changes (e.g., hover effects).

PropertyUseExample
transitionShorthand for all transitionstransition: all 0.3s ease;
transition-propertyWhich properties to animatetransition-property: opacity;
transition-durationHow long it takestransition-duration: 0.5s;
transition-timing-functionSpeed curvetransition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

Example:

.button {
  background: blue;
  transition: background 0.3s ease;
}
.button:hover {
  background: red;
}

💡 Advanced Selectors

SelectorUseExample
:nth-child(n)Selects nth childli:nth-child(2) { color: red; }
:hoverMouse-over effecta:hover { color: gold; }
::before/::afterAdds pseudo-elements.box::before { content: "★"; }
[attribute]Targets HTML attributesinput[type="text"] { border: 1px solid; }

📱 Responsive Design (Advanced)

1. Flexbox Deep Dive

PropertyUseExample
flex-directionRow/column layoutflex-direction: column;
flex-wrapAllows wrappingflex-wrap: wrap;
justify-contentHorizontal alignmentjustify-content: space-between;
align-itemsVertical alignmentalign-items: center;

2. CSS Grid Advanced

PropertyUseExample
grid-template-areasNamed grid areasgrid-template-areas: "header header" "sidebar main";
grid-gapSpacing between cellsgrid-gap: 20px;
grid-auto-flowAuto-placement directiongrid-auto-flow: dense;

Example:

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

🎯 Pro Tips for Performance

✔ Use will-change for smooth animations:

.element {
  will-change: transform;
}

✔ Optimize animations with transform and opacity (GPU-accelerated).
✔ Avoid @keyframes on large/complex elements.

🚀 What’s Next?

  • Try SVG animations with <animate>.
  • Explore 3D transforms (rotateX(), perspective).
  • Learn CSS custom properties (variables): 
    :root {
  --main-color: #3498db;
}
.box {
  background: var(--main-color);
}

Graph View

Backlinks