Story 2127: Learn Page Implementation by jlchilders11 · Pull Request #2243 · boostorg/website-v2

jlchilders11 · 2026-03-26T16:58:34Z

Issue: #2127

Summary & Context

Adds the Learn Page layout and styling. Uses dummy data to pass to the template.

Figma links:
- ML Figma: https://www.figma.com/design/5j0fQssrV9ipoU16P7hfKy/Website-Deliverables?node-id=1849-49685&m=dev
- CPPA Figma: https://www.figma.com/design/xlPYv76Z9gaOWMEa9rFXdg/Website-Deliverables?node-id=1644-63221&m=dev
Link to components/page: http://localhost:8000/v3/demo/learn-page/

Changes

Adds template v3/learn_page.html and stylesheet v3/learn-page.css
Adds view LearnPageView to core/views.py and urlpattern v3/demo/learn-page/ to core
Makes adjustments to existing components:
Learn Card: Adjusts restyling breakpoint to be at tablet size, not mobile size

‼️ Risks & Considerations ‼️

NOTE: While implemented as fully as possible using existing components, note should be taken for the "Posts from the boost community" and "The boost community" cards, as these do not seem to exist in a 1 to 1 form in the current project.

These have been implemented as _post_cards_v3.html, which will be updated in styling as a different item.

Additionally, while a header component exists, it contains significant additional styling that is not used in this page.

Screenshots

Self-review Checklist

Tag at least one team member from each team to review this PR
Link this PR to the related GitHub Project ticket

Frontend

UI implementation matches Figma design
Tested in light and dark mode
Responsive / mobile verified
Accessibility checked (keyboard navigation, etc.)
Ensure design tokens are used for colors, spacing, typography, etc. – No hardcoded values
Test without JavaScript (if applicable)
No console errors or warnings

sdarwin · 2026-03-30T14:48:37Z

Image hosting:

I am working on a script to facilitate very easy uploads to S3. Should be ready today.

The folder in S3 will be S3://bucketname/static/img/v3 and matches the same path as in the website-v2 repo. (/static/img/)

In fact, that S3 directory already exists with some files in it. Anything in /static/ could be hosted there, but the main purpose is large images.

hopefully this pull request can be revised to use the new method.

julioest

Good stuff, Jeremy!

I tested across breakpoints and noticed a couple of things in the masonry section:

Post cards and basic card have max-width: 458px, but Figma shows 488px (pre-existing in post-cards.css and card.css).
The .card-masonry grid has justify-items: start and width: fit-content, which prevents cards from filling their columns. On tablet/mobile they end up narrow and off-center. Swapping to width: 100% and dropping justify-items: start (so it defaults to stretch) fixes it. Also need max-width: 100% on .post-cards and .basic-card inside .card-masonry so they can stretch past their default cap.

Not sure, if we'd rather address them here or in a follow-up PR

Here's the diff of what worked on my end:

diff --git a/static/css/v3/card.css b/static/css/v3/card.css
--- a/static/css/v3/card.css
+++ b/static/css/v3/card.css
@@ -22,7 +22,7 @@
 }
 
 .basic-card {
-  max-width: 458px;
+  max-width: 488px;
 }
 
diff --git a/static/css/v3/learn-page.css b/static/css/v3/learn-page.css
--- a/static/css/v3/learn-page.css
+++ b/static/css/v3/learn-page.css
@@ -57,8 +57,12 @@
     ;
     row-gap: var(--space-card);
     column-gap: var(--space-card);
-    justify-items: start;
-    width: fit-content;
+    width: 100%;
+}
+
+.card-masonry .post-cards,
+.card-masonry .basic-card {
+    max-width: 100%;
 }
 
diff --git a/static/css/v3/post-cards.css b/static/css/v3/post-cards.css
--- a/static/css/v3/post-cards.css
+++ b/static/css/v3/post-cards.css
@@ -32,7 +32,7 @@
-  max-width: 458px;
+  max-width: 488px;
 
@@ -104,7 +104,7 @@
-  max-width: 458px;
+  max-width: 488px;

jlchilders11 · 2026-03-30T18:58:01Z

Good stuff, Jeremy!

I tested across breakpoints and noticed a couple of things in the masonry section:

* Post cards and basic card have `max-width: 458px`, but Figma shows `488px` (pre-existing in `post-cards.css` and `card.css`).

* The `.card-masonry` grid has `justify-items: start` and `width: fit-content`, which prevents cards from filling their columns. On tablet/mobile they end up narrow and off-center. Swapping to `width: 100%` and dropping `justify-items: start` (so it defaults to stretch) fixes it. Also need `max-width: 100%` on `.post-cards` and `.basic-card` inside `.card-masonry` so they can stretch past their default cap.

Not sure, if we'd rather address them here or in a follow-up PR

Here's the diff of what worked on my end:

diff --git a/static/css/v3/card.css b/static/css/v3/card.css
--- a/static/css/v3/card.css
+++ b/static/css/v3/card.css
@@ -22,7 +22,7 @@
 }
 
 .basic-card {
-  max-width: 458px;
+  max-width: 488px;
 }
 
diff --git a/static/css/v3/learn-page.css b/static/css/v3/learn-page.css
--- a/static/css/v3/learn-page.css
+++ b/static/css/v3/learn-page.css
@@ -57,8 +57,12 @@
     ;
     row-gap: var(--space-card);
     column-gap: var(--space-card);
-    justify-items: start;
-    width: fit-content;
+    width: 100%;
+}
+
+.card-masonry .post-cards,
+.card-masonry .basic-card {
+    max-width: 100%;
 }
 
diff --git a/static/css/v3/post-cards.css b/static/css/v3/post-cards.css
--- a/static/css/v3/post-cards.css
+++ b/static/css/v3/post-cards.css
@@ -32,7 +32,7 @@
-  max-width: 458px;
+  max-width: 488px;
 
@@ -104,7 +104,7 @@
-  max-width: 458px;
+  max-width: 488px;

I am happy to make them stretch to match the columns, the design doesn't exactly specify. However, I am curious as to the decision to change to 488px? The basic card in the figma is 459px: https://www.figma.com/design/VhZHw3RudFNMzfPEEYchE9/UI-Kit---Foundations-Delivery?node-id=286-3590&focus-id=286-3590&m=dev

julioest · 2026-03-30T19:50:20Z

In Figma the post card is 488px. Maybe I'm looking at something else?

julioest

LGTM

herzog0

Looking very good, thanks @jlchilders11 !!
Also thanks for removing some default CSS values and fixing some typos there.

I'm only requesting changes because of the broken img url. The non-matching designs are not a high priority I'd say, so I leave it up to you.

core/views.py

static/css/v3/learn-cards.css

julhoang

This is looking great @jlchilders11 ! I left a few requests below 🙏

julhoang · 2026-04-02T19:20:55Z

templates/v3/learn_page.html

+{% block content %}
+  <div class="px-large">
+    <div class="learn-page-header py-large">
+      <h1>Start Anywhere. Learn Everything. Build Anything</h1>


Would you mind adding text-primary color to this h1? I noticed the HEX code is slightly off.

Another nit: this text should be Start anywhere. Learn everything. Build anything.

julhoang · 2026-04-02T19:29:33Z

static/css/v3/learn-cards.css


 .learn-card__link {
-    font-size: var(--font-sizes-small, 14px);
+    font-size: var(--font-size-small);


This might be out-of-scope but I think this link should be its own component, see Figma here. Feel free to leave this to a separate ticket if you don't feel like adding it here!

This current link is just missing font-weight 500 and a hover color.

It did need some updating on styling, but I'm not sure it is used elsewhere? If it is, happy to spin it off as a separate item!

julhoang · 2026-04-02T19:50:14Z

static/img/v3/examples/Learn_Octopus.png

Looking at the Figma assets, it seems to me like the mobile and desktop versions are just different "crops" of the same image. So instead of loading two separate assets, we can use one image and let CSS do the cropping for us:

Source image:

Code:

.square-card-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; 👈🏻 add this for focal-point display: block; }

Results:

Desktop Mobile

So I considered this, and it works for the octopus. However, the cheetah actually wants to be cropped to the bottom, not the center. If I understand how picture elements work properly, it should only load the actual asset that matches the media query.

julhoang · 2026-04-02T19:54:29Z

templates/v3/learn_page.html

+      {% endfor %}
+    </div>
+    <div class="py-large three-column">
+      {% include 'v3/includes/_why_boost_cards.html' with why_boost_cards=why_boost_cards %}


I think the h2 component from this Why Boost card has the wrong font-size, it also has a default margin that doesn't really match our spacing token, would you mind adjusting those? 🙏

I'm happy to address the font-size, but could you clarify what you mean by the spacing? Looking at the css it seems to have margin: 0 0 var(--space-large);, which matches the design.

julhoang · 2026-04-02T19:56:25Z

static/css/v3/learn-page.css

+    }
+
+    .learn-page-header {
+        max-width: 488px;


I think this should be 50% instead to match with the Figma intention.

static/css/v3/learn-page.css

julhoang · 2026-04-02T20:03:09Z

static/css/v3/learn-page.css

+    }
+
+    .mobile-d-none {
+        display: none;


I understand this matches Figma but at the same time I'm wondering if this is an unintentional mistake from the design 🤔. Perhaps we should double-check with Henry just to be sure.

@henryajisegiri Any opinion on this component being hidden on mobile? (The Library Categories carousel)

…ablet

jlchilders11 requested review from julhoang and julioest March 26, 2026 16:58

jlchilders11 linked an issue Mar 26, 2026 that may be closed by this pull request

Webpage UI: Learn Page #2127

Open

julioest reviewed Mar 30, 2026

View reviewed changes

julioest approved these changes Mar 30, 2026

View reviewed changes

herzog0 requested changes Mar 31, 2026

View reviewed changes

jlchilders11 requested a review from herzog0 April 1, 2026 14:47

julhoang requested changes Apr 2, 2026

View reviewed changes

jlchilders11 added 13 commits April 2, 2026 17:02

Init

09dee21

Story 2127: Learn Page

5ad3abe

Adjust indentation

28610ec

Update to use posts_cards component

7725e9f

Undo changes to event cards

a9b9372

Undo changes to event cards

bdd3c28

Remove extra class

1226495

Additional CSS tweaks for mobile and tablet

3315fe5

Fix margin bottom on learn card on unusual screen resolutions

2570cac

Update learn card css and example images

c72a2f8

PR feedback

20c5bd7

PR feedback: update demo content, remove extra comments

2f0b0f6

PR feedback: Adjust why card size, header width, and grid layout on t…

0f68434

…ablet

jlchilders11 force-pushed the jc/learn-page branch from 4564e31 to 0f68434 Compare April 2, 2026 21:03

Update learn card stylings

8ae70da

jlchilders11 requested a review from julhoang April 2, 2026 21:15

Conversation

jlchilders11 commented Mar 26, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue: #2127

Summary & Context

Changes

‼️ Risks & Considerations ‼️

Screenshots

Self-review Checklist

Frontend

Uh oh!

sdarwin commented Mar 30, 2026

Uh oh!

julioest left a comment

Choose a reason for hiding this comment

Uh oh!

jlchilders11 commented Mar 30, 2026

Uh oh!

julioest commented Mar 30, 2026

Uh oh!

julioest left a comment

Choose a reason for hiding this comment

Uh oh!

herzog0 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

julhoang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

jlchilders11 commented Mar 26, 2026 •

edited

Loading