Emmet: Project 2

In lessons 1–16 you've learned HTML shorthands (8 operators) + CSS shorthands (3 lessons: basics, fuzzy matching, gradients) + Actions (5 editing accelerators). This lesson is the capstone of the entire Emmet tutorial: combining all CSS shorthand knowledge to write a 110-line responsive SaaS landing page. Alice uses HTML shorthands + CSS shorthands to go from blank file to complete page in 30 minutes.

1. What You'll Learn

• HTML section decomposition: Breaking the landing page into 5 sections (header / hero / features / pricing / footer), mapping each to an Emmet shorthand fragment
• CSS shorthand in practice: Using m10-20 p10-0 bgc#fff bdrs8 fz16 fw700 and similar shorthands to write CSS properties in one line
• Responsive grid: Using grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) for auto-responsive card grids
• Sticky navigation: Using position:sticky + top:0 to pin the nav bar while scrolling
• CSS gradient backgrounds: Using linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%) for Hero section backgrounds

2. A Full-Stack Developer's Real Story

(1) Pain Point: 5 Sections + Responsive + 3 Breakpoints — 200 Lines HTML + 100 Lines CSS by Hand

Alice is a full-stack developer at a SaaS company. It's August 2026 and she needs a landing page for a new feature, with the goal of converting 100 free trial users on launch day. The design has 5 sections:

Total: 1 header + 1 hero + 4 cards + 3 plans + 1 footer = 10 section elements. Alice estimates hand-written HTML: 200 lines (including nesting details) + CSS 100 lines (responsive + 3 breakpoints). Total 300 lines, 4–5 hours.

Even worse: it's easy to miss CSS details when hand-coding (border-radius: 8px missing = non-rounded cards; box-shadow direction wrong). Alice thinks: the HTML portion can be accelerated with everything from Emmet lessons 1–13; but what about the CSS portion? Hand-writing 100 lines of CSS is grunt work — is there a way to accelerate that too?

(2) The Emmet HTML + CSS Dual-Shorthand Solution

Alice opens VSCode, presses ! to expand the HTML skeleton, then uses Emmet HTML shorthands to write the body:

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Features})+(li>a{Pricing})+(li>a{Contact})+a.btn.btn-sm{Free Trial}
section.hero>(span.badge{v3.0 Released})+h1{Automate Your Workflow}+p.lead{Connect 200+ apps, zero-code visual builder}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo})+ul.badges>(li{No credit card})+(li{5-minute setup})+(li{10000+ teams})
section.features>h2{Core Features}+p.section-lead{Powerful capabilities}+.grid>.card*4>(h3{Feature})+p{Description})
section.pricing>h2{Pricing}+p.section-lead{Choose the right plan for your team}+.grid>.card.plan*3>(h3{Plan}+p.price{¥99}+ul>li*3{Feature}+a.btn{Select})
footer.footer>p{© 2026 CloudFlow}

Then in the <style> block she uses Emmet CSS shorthands:

* { m0 p0 }
body { ff:system-ui lh1.6 }
.nav { d:f jc:sb ai:c p16-24 }
.btn { p12-24 bdrs6 fw600 td:n }
.card { bgc#fff bdrs12 p32 box-shadow:0 2px 8px #0001 }
.btn-primary { bgc#3498db c#fff }
.btn-outline { bgc:transparent c#3498db bd2s #3498db }
.hero { p80-24 bg:lg(135deg, #f5f7fa, #c3cfe2) }

Alice writes 110 lines of HTML + 40 lines of CSS in 30 minutes — 8–10x faster than hand-coding. The CSS portion compresses 100 hand-written lines into 40 with Emmet shorthands (1.5x CSS acceleration as well).

(3) Benefits

Alice completed "Project 2" in 30 minutes for the landing page — 8–10x faster than hand-coding — with zero missing attributes in HTML and zero typos in CSS. The biggest benefit is CSS shorthands — hand-writing 100 lines of CSS used to take 1.5 hours (hand-typing + copy-paste), now it's 30 minutes (Emmet CSS abbreviations + Tab). This lesson is the capstone of the entire Emmet tutorial — master HTML + CSS dual-shorthand and boost daily frontend coding efficiency by 3–5x.

3. Landing Page Structure: Mapping 5 Sections to Emmet Operators

The table below maps all 5 sections to Emmet operators — this is the critical "requirement decomposition" step.

4. HTML Portion Emmet Shorthands

The following 3 examples build from the smallest unit to the complete composition — demonstrating the landing page "one-shot" mindset.

▶ Example: Navigation Bar header>nav>a.logo{CF}+ul.menu>(li>a)*3 (Difficulty ⭐)

The most common section: header wrapping nav, nav containing logo + menu list + CTA.

Shorthand:

header>nav>a.logo{CF}+ul.menu>(li>a)*3

Expansion:

<header>
  <nav>
    <a class="logo" href="">CF</a>
    <ul class="menu">
      <li><a href=""></a></li>
      <li><a href=""></a></li>
      <li><a href=""></a></li>
    </ul>
  </nav>
</header>

Output: Renders as a standard header + nav structure with 1 logo + 3 empty menu items. <a> defaults to href="" (Emmet default placeholder).

TEXT 📖 Display only

📋 Copy

Explanation: 3 core syntax points —
- `header>nav`: Lesson 04 child
- `a.logo{CF}`: Lesson 07 class + Lesson 09 text
- `(li>a)*3`: Lesson 06 grouping + Lesson 05 multiplication (repeats the entire li>a block 3 times)
6 lines of HTML, shorthand 28 characters — compression ratio 1:4.7.

▶ Example: Hero Section section.hero>(span.badge+h1+p.lead+.cta-row>(a.btn-primary)+(a.btn-outline)) (Difficulty ⭐⭐)

The landing page's core visual: badge + title + description + dual CTA buttons.

Shorthand:

section.hero>(span.badge{New Release}+h1{Automate Your Workflow}+p.lead{Connect 200+ Apps}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo}))

Expansion:

<section class="hero">
  <span class="badge">New Release</span>
  <h1>Automate Your Workflow</h1>
  <p class="lead">Connect 200+ Apps</p>
  <div class="cta-row">
    <a class="btn-primary" href="">Get Started Free</a>
    <a class="btn-outline" href="">Watch Demo</a>
  </div>
</section>

Output: Renders as the landing page Hero section: version badge + large title + description + dual CTA buttons.

TEXT 📖 Display only

📋 Copy

Explanation: The Hero segment is a classic case of grouping + multi-level nesting —
- `(span.badge+h1+p.lead+.cta-row>...)`: Lesson 06 grouping + Lesson 04 siblings + child
- `.cta-row>(a.btn-primary)+(a.btn-outline)`: grouping nested inside grouping (Lesson 06 advanced usage)
- Implicit tag `.cta-row` expands to `<div class="cta-row">` (Lesson 03 implicit tags)
8 lines of HTML, shorthand 85 characters — compression ratio 1:10.6.

▶ Example: Complete Landing Page (5 Shorthand Fragments → 110 Lines HTML) (Difficulty ⭐⭐���)

Chain the 5 section shorthands (header / hero / features / pricing / footer) to get the complete landing page skeleton:

Shorthand:

header.header>nav.nav>a.logo{CF}+ul.menu>(li>a{Features})+(li>a{Pricing})+(li>a{Contact})+a.btn{Free Trial}+section.hero>(span.badge{v3.0 Released})+h1{Automate Your Workflow}+p.lead{Connect 200+ Apps}+.cta-row>(a.btn-primary{Get Started Free})+(a.btn-outline{Watch Demo})+section.features>h2{Core Features}+p.section-lead{Powerful Capabilities}+.grid>(.card*4>(h3{Feature})+p{Description}))+section.pricing>h2{Pricing}+p.section-lead{Choose the right plan}+.grid>(.card.plan*3>(h3{Plan}+p.price{¥99}+ul>li*3{Feature}+a.btn{Select}))+footer.footer>p{© 2026 CloudFlow}

Press Tab and expand to 110 lines of HTML (see §6. Complete Example for the full output).

Output: Renders as a complete SaaS landing page — header with logo + 3 menu items + CTA; hero with badge + h1 + lead + dual buttons; features with 4 cards; pricing with 3 plans; footer with copyright.

TEXT 📖 Display only

📋 Copy

Explanation: This lesson's core example — 5 Emmet shorthand fragments chained into 110 lines of HTML.
- 5 `+` operators: 4 sibling connections (Lesson 04)
- Multiple `>`: child nesting
- `*3` / `*4`: Lesson 05 multiplication
- `()`: Lesson 06 grouping
- `.card.plan` / `.btn-primary`: Lesson 07 multi-class
- `{text}`: Lesson 09 text filling
Combines all HTML shorthand syntax from lessons 1–16. **Key insight**: 95% of the landing page HTML can be Emmet-ified; hand-typing accounts for only 5% (minor tweaks to actual content like symbols and copyright).

5. CSS Portion Emmet Shorthands

CSS shorthands are new in this lesson — HTML shorthands (lessons 1–10) + CSS shorthands (lessons 11–13) + Actions (lessons 14–16): all three together form the complete Emmet toolchain.

▶ Example: Responsive Navigation nav{display:flex} (Difficulty ⭐)

CSS shorthand turns display:flex from 18 characters into 2 characters.

Shorthand:

nav{display:flex}

Expansion:

nav { display: flex; }

Output: CSS selector nav gets display: flex; — nav children laid out horizontally.

TEXT 📖 Display only

📋 Copy

Explanation: Emmet CSS shorthand parsing rules —
- `nav` is the CSS selector
- `{display:flex}` is the CSS rule block
- `display:flex` uses `:` as the value bound (supported by Emmet)
- Emmet's parser finds the `display` shorthand `d` → `display: |;`, inserts the value `flex` at `|`
- Can also be written in abbreviated form: `nav{d:f}` (`d` → display, `:` value bound, `f` → flex value)

▶ Example: Feature Card bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001 (Difficulty ⭐⭐)

5 CSS properties in one line — core CSS shorthand combination.

Shorthand:

.card{bgc#fff bdrs8 p20-30 m10-0 box-shadow:0 2px 8px #0001}

Expansion:

.card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px 30px;
  margin: 10px 0;
  box-shadow: 0 2px 8px #0001;
}

Output: The .card class gets 5 styles: white background, 8px border-radius, 20px top/bottom + 30px left/right padding, 10px top/bottom + 0 left/right margin, subtle shadow (semi-transparent black at 0.4%).

TEXT 📖 Display only

📋 Copy

Explanation: 5 CSS shorthand combinations —
- `bgc#fff` → `background-color: #fff;` (`#` is the value bound, Lesson 11 CSS basics)
- `bdrs8` → `border-radius: 8px;` (the number 8 is the value bound)
- `p20-30` → `padding: 20px 30px;` (`-` is the multi-value separator)
- `m10-0` → `margin: 10px 0;`
- `box-shadow:0 2px 8px #0001` → `box-shadow: 0 2px 8px #0001;` (full property name + `:` value bound + multiple space-separated values)
5 lines of CSS, shorthand 56 characters — compression ratio 1:11.2.

▶ Example: CTA Button bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700 (Difficulty ⭐⭐)

Common button style combination — 6 CSS properties in one line.

Shorthand:

.btn{bgc#2c3e50 c#fff p10-20 bdrs4 fz16 fw700}

Expansion:

.btn {
  background-color: #2c3e50;
  color: #fff;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}

Output: The .btn class gets 6 styles: dark blue-gray background, white text, 10px top/bottom + 20px left/right padding, 4px border-radius, 16px font-size, 700 font-weight (bold).

TEXT 📖 Display only

📋 Copy

Explanation: 6 CSS shorthands —
- `bgc#2c3e50`: hex color (no spaces, quotes after `#` can be omitted)
- `c#fff`: `color` abbreviation + color value
- `p10-20`: `padding` abbreviation + dual values
- `bdrs4`: `border-radius` abbreviation (Lesson 12 fuzzy matching: `bdr` is insufficient, `bdrs` matches `border-radius`)
- `fz16`: `font-size` abbreviation (Lesson 11)
- `fw700`: `font-weight` abbreviation (unit-less, Lesson 11 unit-less values)
6 lines of CSS, shorthand 47 characters — compression ratio 1:7.8.

6. Complete Example: Responsive Landing Page — 110 Lines HTML + 40 Lines CSS

Expand the 5 HTML shorthand fragments + 12 CSS shorthand fragments to get a complete 110-line responsive landing page. This example is the capstone of this lesson — no "Try It" button (per specification v2.5 gate #26, comprehensive examples are not previewed in the editor).

HTML portion (Emmet lessons 1–13 combined):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CloudFlow - Workflow Automation Platform</title>
</head>
<body>
  <header class="header">
    <nav class="nav">
      <a class="logo" href="/">CF</a>
      <ul class="menu">
        <li><a href="#features">Features</a></li>
        <li><a href="#pricing">Pricing</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
      <a class="btn btn-sm" href="/signup">Free Trial</a>
    </nav>
  </header>
  <section class="hero">
    <span class="badge">v3.0 Released</span>
    <h1>Automate Your Workflow</h1>
    <p class="lead">Connect 200+ apps, zero-code visual workflow builder</p>
    <div class="cta-row">
      <a class="btn-primary" href="/signup">Get Started Free</a>
      <a class="btn-outline" href="#demo">Watch Demo</a>
    </div>
    <ul class="badges">
      <li>No credit card required</li>
      <li>5-minute setup</li>
      <li>Trusted by 10000+ teams</li>
    </ul>
  </section>
  <section id="features" class="features">
    <h2>Core Features</h2>
    <p class="section-lead">Powerful capabilities to make your workflows more efficient</p>
    <div class="grid">
      <div class="card">
        <h3>Visual Builder</h3>
        <p>Drag-and-drop interface — build complex workflows without writing code</p>
      </div>
      <div class="card">
        <h3>200+ Integrations</h3>
        <p>Connect with Slack, GitHub, Salesforce, and 200+ popular apps</p>
      </div>
      <div class="card">
        <h3>Team Collaboration</h3>
        <p>Real-time collaborative editing, permission management — teams maintain workflows together</p>
      </div>
      <div class="card">
        <h3>Enterprise Security</h3>
        <p>SOC 2 certified, end-to-end encryption — meets enterprise compliance requirements</p>
      </div>
    </div>
  </section>
  <section id="pricing" class="pricing">
    <h2>Simple, Transparent Pricing</h2>
    <p class="section-lead">Choose the plan that fits your team</p>
    <div class="grid grid-pricing">
      <div class="card plan">
        <h3>Free</h3>
        <p class="price">$0<span>/month</span></p>
        <ul>
          <li>5 workflows</li>
          <li>1,000 executions/month</li>
          <li>Community support</li>
        </ul>
        <a class="btn btn-outline" href="/signup">Get Started</a>
      </div>
      <div class="card plan highlight">
        <h3>Pro</h3>
        <p class="price">$12<span>/month</span></p>
        <ul>
          <li>Unlimited workflows</li>
          <li>50,000 executions/month</li>
          <li>Priority email support</li>
        </ul>
        <a class="btn btn-primary" href="/signup">Upgrade Now</a>
      </div>
      <div class="card plan">
        <h3>Enterprise</h3>
        <p class="price">$35<span>/month</span></p>
        <ul>
          <li>Everything in Pro</li>
          <li>Unlimited executions</li>
          <li>Dedicated account manager</li>
        </ul>
        <a class="btn btn-outline" href="/contact">Contact Sales</a>
      </div>
    </div>
  </section>
  <footer class="footer">
    <div class="footer-grid">
      <div>
        <h4>Product</h4>
        <ul>
          <li><a href="#features">Features</a></li>
          <li><a href="#pricing">Pricing</a></li>
        </ul>
      </div>
      <div>
        <h4>Resources</h4>
        <ul>
          <li><a href="#">Docs</a></li>
          <li><a href="#">API</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Contact Us</a></li>
        </ul>
      </div>
    </div>
    <p class="copyright">&copy; 2026 CloudFlow. All rights reserved.</p>
  </footer>
</body>
</html>

CSS portion (Emmet lessons 11–13 combined):

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; color: #2c3e50; line-height: 1.6; }
.header { background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.08); position: sticky; top: 0; z-index: 100; }
.nav { max-width: 1200px; margin: 0 auto; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.menu { display: flex; gap: 24px; list-style: none; }
.menu a { color: #34495e; text-decoration: none; font-weight: 500; }
.btn { display: inline-block; padding: 12px 24px; border-radius: 6px; text-decoration: none; font-weight: 600; cursor: pointer; border: none; transition: background 0.2s; }
.btn-primary { background: #3498db; color: #fff; }
.btn-outline { background: transparent; color: #3498db; border: 2px solid #3498db; }
.btn-sm { padding: 8px 16px; font-size: 14px; }
.hero { padding: 80px 24px; text-align: center; background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); }
.hero h1 { font-size: 48px; margin-bottom: 16px; }
.hero h1 .accent { color: #3498db; }
.lead { font-size: 20px; color: #7f8c8d; max-width: 720px; margin: 0 auto 32px; }
.cta-row { display: flex; gap: 16px; justify-content: center; margin-bottom: 32px; }
.badges { display: flex; gap: 24px; justify-content: center; list-style: none; color: #7f8c8d; }
.features { padding: 80px 24px; max-width: 1200px; margin: 0 auto; }
.section-lead { text-align: center; color: #7f8c8d; max-width: 600px; margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin-top: 32px; }
.card { background: #fff; padding: 32px; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
.pricing { padding: 80px 24px; background: #f8f9fa; }
.grid-pricing { max-width: 1100px; margin: 32px auto 0; }
.plan { text-align: center; }
.plan.highlight { border: 2px solid #3498db; transform: scale(1.05); }
.price { font-size: 36px; font-weight: 700; color: #2c3e50; margin: 16px 0; }
.price span { font-size: 16px; color: #7f8c8d; font-weight: 400; }
.footer { background: #2c3e50; color: #ecf0f1; padding: 40px 24px; text-align: center; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 800px; margin: 0 auto 24px; }
.copyright { color: #95a5a6; font-size: 14px; }
@media (max-width: 640px) { .nav { flex-direction: column; gap: 12px; } .grid { grid-template-columns: 1fr; } }

Output: The browser renders a complete SaaS landing page: sticky header (pins to top on scroll) + Hero section (gradient background + large title + dual CTAs) + Features (4 responsive cards, auto-stack on mobile) + Pricing (3 plans, middle one highlighted) + Footer (dark 3-column links + copyright). Responsive: mobile (< 640px) single-column cards, desktop (> 640px) 4-column grid.

TEXT 📖 Display only

📋 Copy

Explanation: This lesson's comprehensive example strings together all Emmet knowledge from lessons 1–13 —
- **HTML portion**: 95% generated by Emmet shorthands (§4's 5 fragments): header + hero + features + pricing + footer — 5 sections
- **CSS portion**: 12 Emmet shorthand blocks covering core styles: `nav{display:flex}`, `card{bgc#fff bdrs12 box-shadow:0 2px 8px #0001}`, `hero{bg:lg(135deg, #f5f7fa, #c3cfe2)}`, etc.
- **Responsive**: achieved with `grid-template-columns:repeat(auto-fit, minmax(240px, 1fr))` — no media query needed
- **Sticky navigation**: using `position:sticky + top:0`
Line count comparison: hand-writing 200 lines HTML + 100 lines CSS takes 4–5 hours; Emmet 110 lines HTML + 40 lines CSS takes 30 minutes. **Total time reduced by 80%**.

❓ FAQ

📖 Summary

• 5-section mental chain: header + hero + features + pricing + footer — decompose into 5 Emmet shorthand fragments, chain into 110 lines of HTML
• 12 common CSS shorthands: * { m0 p0 } body { ff:system-ui lh1.6 } .nav { d:f jc:sb ai:c } .card { bgc#fff bdrs12 box-shadow:0 2px 8px #0001 }, etc.
• Responsive grid formula: grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)) (no media queries needed)
• Sticky navigation: position:sticky; top:0; z-index:100 (pins the header to the top while scrolling)
• CSS gradient backgrounds: bgc:lg(135deg, #f5f7fa, #c3cfe2) (common Hero section effect)
• This lesson is the capstone: Lessons 1–13 HTML + CSS dual-shorthand combined — boost daily frontend coding efficiency by 3–5x

📝 Exercises

1. Basic (Difficulty ⭐): Use Emmet HTML shorthands + CSS shorthands to write a simple landing page — 5 sections (header + hero + features + pricing + footer), at least 30 lines of HTML + 20 lines of CSS. Requirements: (a) HTML portion uses > + * () — at least 3 operators; (b) CSS portion uses m10-20 bgc#fff bdrs8 — at least 3 shorthands; (c) Hero section uses a linear-gradient background.

2. Intermediate (Difficulty ⭐⭐): Adapt this lesson's 110-line complete landing page into your own SaaS product landing page — replace the product name "CloudFlow" with your product, replace the 4 features with your core features, and replace the 3 pricing plan names and prices. Requirements: (a) keep the 5-section HTML structure unchanged; (b) keep the responsive grid + sticky nav + gradient background CSS styles; (c) tally the final HTML + CSS line count vs. how many lines hand-writing the same page would take (typically 5x for HTML, 3x for CSS compression).

3. Challenge (Difficulty ⭐⭐⭐): Extend this lesson's landing page into a complete SaaS marketing page — add a testimonials section after features (3 customer reviews, each with avatar + 5 stars + text + author), and a FAQ section after pricing (5 Q/A collapsible panels). Requirements: (a) Complete page HTML in one shot (one Emmet shorthand line for the body portion); (b) CSS shorthands cover 90% of properties (no more than 10 lines of hand-written CSS); (c) Responsive: mobile — features single-column, testimonials single-column; desktop — features 4-column, testimonials 3-column; (d) FAQ uses <details> + <summary> for native collapsible panels (no JS needed). Finally, write an "Emmet Capstone Report": all Emmet knowledge gained from the 18 lessons + your top 3 most valuable shorthands + how you plan to use Emmet in your work.

Web-Tutorial Tech Team

A team of developers maintaining programming tutorials. Each tutorial is written and reviewed by developers with expertise in that field. We work to keep our content accurate and reliable — if you spot an issue, please let us know.

About Us