▶Learnly
Online Learning Portal

Learning, without the clutter.

Learnly presents courses, lessons, assignments and resources through one consistent, readable interface — every screen built from the same components and the same CSS rules.

Browse courses Try the reader

08 courses · 272 lessons · 01 design system

Readable by design

A lesson you can tune to your eyes.

Every control below changes one CSS custom property on the reader — the ruled lines even re-space themselves to match the line height.

Reading preferences

Your choices are saved in localStorage and applied via --r-size, --r-lh and [data-theme].

Responsive CSS Mastery  /  Module 2 ▶ video · 11:05 ▤ reading · 8 min

Lesson 2.2 — Reading layout like a browser

Before a browser paints a single pixel, it wraps every element in four invisible rectangles: the content, its padding, the border around that, and the margin pushing neighbours away. Layout is nothing more than the arithmetic of these boxes.

If you can predict the size of the box, you can predict the entire page. That is why this course measures everything — spacing comes from a scale, not from nudging numbers until it “looks right”.

Notice this very page: the text you are reading is capped at 65 characters per line, the classic comfortable measure, and each paragraph sits exactly on the ruled baseline grid behind it.

Assignment 3: rebuild the lesson card above using only content, padding, border and margin — no positioning allowed. Due Friday.
▤ slides · box-model.pdf ▶ recording · 11:05 ❐ starter files · lesson-2-2
Inside every course

Lessons, assignments and resources — one consistent list.

Tick a lesson and the progress updates instantly. It's stored in localStorage, so your place survives a refresh.

08courses in the catalogue
272lessons & assignments
04connected pages
₹359starting price
Why Learnly

Consistency you can feel, readability you can measure.

▣

One component system

Course cards, lesson rows and chips are each defined once and reused everywhere.

65ch

Readable by the numbers

A 65-character measure, a baseline grid, and a serif tuned for long reading.

%

Progress that persists

Lesson completion and reading preferences survive refresh via localStorage.

0kb

Zero dependencies

No frameworks, no libraries — just HTML, CSS variables and vanilla JS.

Found a course worth taking?

Enroll in under a minute — cart, GST totals and a fully validated checkout.

See all 8 courses