Pieces

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.

313–336 of 902

Feature177 Content#feature177

Heading

No tutorials needed.

Description

If you can order food online, you can build a website with Beste.

Content Panel

editor46

Side-panel content editor with a header chip row, locale and history pills, and stacked rich-text fields for heading and description.

Your page looks empty

Start by adding your first block.

Empty Page

editor47

Centered editor placeholder with a soft icon tile, headline, hint line, and a recolorable call-to-action pill.

Website URLs

https://beste.co

Domain verified

Unpublished Changes

You have changes that are not yet published

Publish Panel

editor48

Compact deploy card pairing a live URL row, domain verification badge, unpublished-change hint, and a recolorable publish button.

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.