Frontend Development — All-in-One Interactive Lesson

1 — Markdown to HTML Conversion

What this shows: Markdown is shorthand that converts to HTML. Write on the left, click Convert, see the rendered HTML on the right.

Markdown Cheat Sheet REFERENCE

# H1 → <h1> · ## H2 → <h2>
**bold** → bold · *italic* → italic
- item → unordered list · 1. item → ordered list
[text](url) → link · ![alt](url) → image
Backtick `code` → inline code · > text → blockquote

✏️ Markdown Input

markdown

👁️ Rendered HTML Preview

Live Preview

Click "Convert to HTML" to see output here.

Pro tip: Jekyll and GitHub Pages auto-convert .md files to HTML.

2 — CSS Styling Playground

What this shows: CSS controls how HTML looks. Edit the rules on the left and click Apply CSS to see them instantly on the right.

Key CSS Concepts REFERENCE

Selector — targets elements: .class #id element:hover
Box model — margin → border → padding → content
Flexbox — display:flex aligns items in a row or column
Transitions — transition: all 0.3s ease animates changes
Gradients — background: linear-gradient(direction, color1, color2)

✏️ CSS Editor

css

👁️ Live Preview

CSS Output

Hover over me ✨

Try changing border-radius to 50% or swapping the gradient for a solid color.

3 — Tailwind CSS & Sass

What this shows: Two professional CSS tools. Tailwind uses utility classes directly in HTML. Sass adds variables and nesting for large projects.

Tailwind CSS — Live Demo INTERACTIVE

Adjust the dropdowns and the card updates instantly.

Padding Color Border Radius Shadow

Live Preview

Tailwind Card

Generated Class String

HTML

<div class="p-4 bg-blue-600 text-white rounded-lg shadow-md">
  Tailwind Card
</div>

Sass vs CSS REFERENCE

Sass compiles to plain CSS. Here is what it adds:

Sass (.scss)

scsspreprocessor

$primary: #667eea;
$radius: 12px;

.card {
  padding: 1rem;
  background: $primary;
  border-radius: $radius;

  &:hover { transform: scale(1.05); }
  &__title { font-size: 1.25rem; }
}

CSS output

csscompiled

.card {
  padding: 1rem;
  background: #667eea;
  border-radius: 12px;
}
.card:hover { transform: scale(1.05); }
.card__title { font-size: 1.25rem; }

4 — JavaScript Fundamentals

What this shows: JavaScript makes pages interactive. Pick a tab, read the concept, then hit Run Code to see output in the console.

Variables & Types BASICS

JavaScript has three ways to declare variables: let, const, and var (old — avoid).

✏️ JavaScript Editor

javascript

📟 Console Output

ConsoleReady

Run your code to see output here…

Use console.log() to print any value. Errors appear in red.

5 — Live Code Sandbox

What this shows: Write HTML, CSS, and JavaScript together and see the result live in an isolated preview.

✏️ HTML + CSS + JS

html · css · js

👁️ Live Preview

Sandbox Output

The sandbox is isolated — use alert(), addEventListener(), setInterval(), and more.

6 — Reflection & What's Next

You covered the full frontend stack. Here is a summary of each piece and where to go next.

📝 Markdown & HTML

Markdown is shorthand for HTML. Tools like Jekyll convert .md to .html automatically.

🎨 CSS

CSS controls layout, colors, spacing, and animation. Master selectors, the box model, flexbox, and grid.

⚡ Tailwind CSS

Utility-first classes let you build UI without CSS files.

🔧 Sass

Sass adds variables, nesting, and mixins. Use it in larger projects with reusable design tokens.

📦 JavaScript

JS makes pages interactive. The beginner stack: variables → functions → arrays → DOM → events.

🚀 Next Steps

Build a calculator in the sandbox. Then explore React, fetch APIs, and GitHub Pages to deploy live.

🎯 Challenge: Go back to the sandbox and build a simple calculator. Use <button> elements for digits and JavaScript to handle clicks and compute results.