Pieces/Education

Compact, self-contained widgets that behave like assets. Drop them into any block, card, or page to add a small touch of polish without rewriting the surrounding UI.

1–24 of 30

24 lessons

Design systems for shipping teams

Beste Sözen6h 42m

58%

Course Card

education1

Course tile with a gradient thumbnail, instructor byline, duration, and an inline progress bar.

Composing tokens with Tailwind18 min

Lesson Row

education2

Single lesson entry with a status glyph on the left, title, duration, and padded index on the right.

58%

React performance14 of 24 lessons completedOn track

Course Progress

education3

Circular ring showing percent complete next to a course label and a lessons-done caption.

12:48

Chapter 4 · PerformanceRefactoring a big list into virtualized rows

Video Lesson

education4

Video lesson card with a play thumbnail, duration badge, watched bar, and a chapter eyebrow.

Typography systems3 lessons · 34 min

01Choosing a type scale9:12

02Vertical rhythm in the wild14:30

03Pairing display with body11:05

Module Accordion

education5

Collapsible course module header that reveals a timed lesson list underneath when expanded.

Full-stack TypeScript · Spring cohort

Students12,480

Rating4.8

UpdatedLast week

Enrollment Stats

education6

Course metadata strip summarizing student count, star rating, and last updated in a three-column grid.

Your learning path

Foundations

Patterns & hooks

Performance tuning

Shipping at scale

Curriculum Outline

education7

Vertical learning path with done, current, and locked steps connected by a colored rail.

Continue learningMemoizing expensive renders7 min left · Chapter 4

Continue Learning

education8

Resume-the-lesson banner with a play tile, eyebrow label, title, time remaining, and a Resume button.

14-day streakShow up tomorrow to keep it alive.

Learning Streak

education9

Streak card with a flame badge, seven-day dot grid, and an encouraging caption underneath.

TypeScript4,320 / 5,000 XP

Lv 7

680 XP to Lv 8

Skill Level

education10

Skill card with a violet level badge, XP numerator over denominator, and a gradient progress track.

Question 3 / 10

Which hook schedules an effect after the DOM is painted?

Quiz Question

education11

Multiple-choice card with a progress bar in the header, stem text, and four lettered option rows.

You passed

8/ 10

80% · Passing mark 7/10Finished in 12:42

Quiz Result

education12

Quiz outcome card with a trophy tile, pass or fail tint, score fraction, percent, and elapsed time.

Certificate of completionBeste Sözenhas completed the courseAdvanced React Performance

Issued Apr 23, 2026Beste Academy

BSTE-CRT-4K91-ZN12

Certificate

education13

Amber-trimmed completion certificate with an award medallion, italic recipient line, and credential ID.

Graded

Essay · The ethics of automation92 / 100Compelling thesis, strong citations. Tighten the conclusion.

Grade Card

education14

Graded assignment card with a color-tinted letter tile, score fraction, and a clipped feedback excerpt.

CS 401 · Advanced React

Submitted

Project 2 · State management patterns

Due Apr 30, 23:593 files

Assignment Card

education15

Course assignment card with a violet file tile, status pill, due date, and attachment count footer.

Noor AhmedStudent · Cohort 12

Resolved

In lesson 6, the dependency array skips the `setCount` setter. Isn't it a stale closure risk?

4 replies12

Discussion Thread

education16

Student Q&A card with an avatar header, resolved pill, clipped question body, and reply and like counts.

Prof. Lira VasquezInstructor · Announcement

Office hours moved to Thursday

I'll be out Tuesday for a conference. Drop in Thursday 15:00 – 17:00 instead — same Zoom link in the syllabus.

Posted 2 hours ago

Class Announcement

education17

Left-ruled amber announcement from an instructor with a megaphone chip, title, body, and timestamp.

Lesson 6 · Hooks in depth

useEffect runs after the DOM commit, not during render.Cleanup runs before the next effect, and on unmount.

Ask Priya about the stale-closure example in office hours.

Lesson Highlights

education18

Saved-quote card grouping highlighter-tinted excerpts and an italic personal note beneath them.

Live42:18 into class

Live class · Typescript generics

1423

Live Class

education19

Dark live-classroom widget with a red live chip, attendee and raised-hand counts, and mic/video toggles.

Transcript · 12:48 of 28:14

12:31

Prof. VasquezSo whenever you see a generic constraint like `T extends`, ask yourself what the caller will pass.

12:42

Prof. VasquezThis pattern prevents us from widening the type back to unknown.

12:58

PriyaWhat happens if we omit the constraint entirely?

Video Transcript

education20

Timestamped transcript panel where the currently-playing line picks up a sky background highlight.

Prof. Lira VasquezSenior instructor · React track

Top-rated

24,182 students4.9 average

Instructor Card

education21

Teacher profile with a gradient avatar wearing an amber award badge, subject line, and rating row.

Top of the cohort

Priya Shah98

Noor Ahmed94

Jordan Reyes91

Beste Sözen89

Student Roster

education22

Ranked student list with rank digits, avatar initials, and emerald score pills on the right.

CS 401 · Syllabus

W1Fundamentals of composition

W2State & reactivity

W3Hooks in depth

W4Performance patterns

W5Server components

Syllabus

education23

Weekly syllabus where completed weeks get an emerald W tile and their titles are struck through.

Live workshopLive workshop · TypeScript generics

Thu, May 218:00 UTC+390 minutes

412 enrolled · 88 seats left

Live Workshop

education24

Upcoming workshop card with a pulsing live pill, date/time/duration line, enrollment count, and a CTA.