Skip to content

README.md

Latest commit

 

History

History
215 lines (162 loc) · 4.77 KB

README.md

File metadata and controls

215 lines (162 loc) · 4.77 KB

First-Javascript-App

HTML + CSS Starter Guide (especially for navbars and layout)

Designing websites feels hard at first because you are learning two things at once:

  1. Structure (HTML: what content exists)
  2. Layout + style (CSS: how content looks and where it goes)

A useful rule:

  • HTML answers: “What is this?”
  • CSS answers: “How should it look and be arranged?”

1) Where to put divs (and where not to)

You should only use a div when there is no semantic tag that better describes the content.

Use semantic tags first:

  • <header>: top area of page
  • <nav>: site navigation links
  • <main>: primary page content
  • <section>: grouped content with a theme
  • <article>: standalone item (post/product/card)
  • <aside>: sidebar/extra info
  • <footer>: bottom area

Use <div> for:

  • generic wrappers for layout (rows, columns, spacing groups)
  • hooks for styling when semantic tags are not appropriate

So: don’t start with “I need 20 divs.” Start with “What parts does this page have?”

2) Navbar mental model

A navbar usually has 3 chunks:

  1. Brand/logo
  2. Links
  3. Call-to-action button (optional)

Good HTML structure:

<header class="site-header">
  <nav class="navbar container">
    <a class="logo" href="/">MySite</a>

    <ul class="nav-links">
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#pricing">Pricing</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>

    <a class="btn" href="#signup">Sign up</a>
  </nav>
</header>

Why this is good:

  • Uses <nav> for navigation (semantic)
  • Uses <ul><li> for a list of links
  • Has only a few classes and clear sections

3) CSS to place navbar items correctly

Use Flexbox for navbars almost every time:

* { box-sizing: border-box; }
body { margin: 0; font-family: Arial, sans-serif; }

.container {
  width: min(1100px, 92%);
  margin-inline: auto;
}

.site-header {
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
}

.navbar {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.nav-links {
  list-style: none;
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}

.nav-links a {
  text-decoration: none;
  color: #1f2937;
  font-weight: 500;
}

.btn {
  text-decoration: none;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  background: #2563eb;
  color: white;
}

Key lines to remember:

  • display: flex;
  • align-items: center; → vertical alignment
  • justify-content: space-between; → left/middle/right spacing
  • gap: ...; → consistent spacing between items

4) “How do I know where things go?” (practical workflow)

When building any page, follow this order:

  1. Sketch blocks on paper:
    • header
    • hero
    • features
    • footer
  2. Write semantic HTML skeleton only (no styling yet).
  3. Add CSS layout:
    • first with Flexbox/Grid
    • then spacing (margin, padding)
  4. Style typography/colors last.

If you skip straight to styling before structure, everything feels chaotic.

5) Easy rule for layout choices

  • Use Flexbox for one-dimensional layout
    • navbar rows
    • button groups
    • card rows
  • Use Grid for two-dimensional layout
    • full page sections
    • dashboard tiles
    • gallery cards

For beginners: build 80% with Flexbox first, then learn Grid.

6) Common beginner mistakes (and fixes)

  1. Too many nested divs
    • Fix: use semantic tags + remove wrappers that do nothing
  2. Using position: absolute for normal layout
    • Fix: use Flexbox/Grid first
  3. Random spacing values everywhere
    • Fix: choose a spacing scale (8px, 16px, 24px, 32px)
  4. No container width
    • Fix: center content with a .container class
  5. Styling before structure
    • Fix: write clean HTML skeleton first

7) Minimal page blueprint you can reuse

<body>
  <header>
    <nav>...</nav>
  </header>

  <main>
    <section id="hero">...</section>
    <section id="features">...</section>
    <section id="pricing">...</section>
  </main>

  <footer>...</footer>
</body>

If you can structure pages like this, you're already doing it right.

8) One-week practice plan

  • Day 1: Build only a navbar (logo + 4 links + button)
  • Day 2: Build a hero section under it
  • Day 3: Add a 3-card feature row
  • Day 4: Make it responsive (mobile menu can wait)
  • Day 5: Rebuild from scratch without copying
  • Day 6-7: Build one full landing page

Repetition beats “perfect design instincts.”

Final encouragement

You're not bad at design — you’re just early in the pattern-recognition phase. Use semantic HTML for structure, Flexbox for navbars/layout, and simple spacing rules. After a few rebuilds, placement decisions become automatic.