Skip to content

feat(curriculum): add second flexbox workshop to FSD cert#62735

Merged
majestic-owl448 merged 120 commits intofreeCodeCamp:mainfrom
sebacodes:add-flexbox-workshop
Mar 3, 2026
Merged

feat(curriculum): add second flexbox workshop to FSD cert#62735
majestic-owl448 merged 120 commits intofreeCodeCamp:mainfrom
sebacodes:add-flexbox-workshop

Conversation

@sebacodes
Copy link
Copy Markdown
Contributor

@sebacodes sebacodes commented Oct 12, 2025 •
edited
Loading

Checklist:

Closes freeCodeCamp/CurriculumExpansion#775

@github-actions github-actions bot added scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. scope: i18n language translation/internationalization. Often combined with language type label labels Oct 12, 2025
jdwilkin4
jdwilkin4 reviewed Oct 13, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@jdwilkin4 jdwilkin4 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is off to a good start. left some comments 👍🏾

majestic-owl448
majestic-owl448 reviewed Oct 14, 2025
View reviewed changes
@naomi-lgbt naomi-lgbt self-assigned this Oct 14, 2025
@sebacodes
Copy link
Copy Markdown
Contributor Author

sebacodes commented Feb 17, 2026

Hi Ilenia, the changes have been made. I also ran FCC_BLOCK='Design a Set of Colorful Boxes' pnpm run test-curriculum-content and all tests passed.

majestic-owl448
majestic-owl448 reviewed Feb 18, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@majestic-owl448 majestic-owl448 left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please check all steps for indentation issues in the seed code, and make sure that when the editable region has no code inside, it has already the indentation for the new code to add

also please use this type of formatting for body and head, meaning not indented (example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title></title>
</head>

<body>
  <main></main>
</body>

</html>

let me know if you need more help, I can add more suggestions in the PR

@sebacodes
fix: correct indentation in HTML and CSS
e73c603 
- Resolve all code review comments regarding indentation.
- Note: Indentation was intentionally skipped for steps that do not require it.
- Fix issues with the editable region in some steps.
@sebacodes
Copy link
Copy Markdown
Contributor Author

sebacodes commented Feb 19, 2026 •
edited
Loading

please check all steps for indentation issues in the seed code, and make sure that when the editable region has no code inside, it has already the indentation for the new code to add

also please use this type of formatting for body and head, meaning not indented (example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title></title>
</head>

<body>
  <main></main>
</body>

</html>

let me know if you need more help, I can add more suggestions in the PR

All requested changes have been made. I have corrected the HTML and CSS indentation across the project, excluding specific steps where indentation is not required.

Technical Note on Cursor Behavior:
I applied the indentation within the workshop steps as planned; however, I noticed a platform behavior constraint regarding the editable regions:

Initial state: The cursor defaults to the beginning of the line instead of the indented position. when a new steps start.

Workaround: If you click into the area or move the cursor with the arrow keys, it snaps to the correct indented position.

majestic-owl448
majestic-owl448 reviewed Feb 19, 2026
View reviewed changes
@sebacodes @majestic-owl448
Apply suggestions from code review
105d340 
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
Jeevankumar-s
Jeevankumar-s reviewed Feb 19, 2026
View reviewed changes
@sebacodes @Jeevankumar-s
Apply suggestions from code review II
237e11c 
Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
@sebacodes
Copy link
Copy Markdown
Contributor Author

sebacodes commented Feb 20, 2026 •
edited
Loading

Hi @Jeevankumar-s, thanks for the code review. I have a question regarding the indentation.

I made a few changes in the Challenge Editor after running pnpm run challenge-editor, and now I'm reviewing all the steps in VS Code. However, I noticed an indentation discrepancy between the two environments.

The Challenge Editor considers a TAB as 2 spaces, while VS Code treats it as 4 spaces. Which standard is the correct one to follow? I noticed this difference in several files, take the next file below as an example:

id: 68ef9a0b710ba66dd23ed260
title: Step 38
challengeType: 0
dashedName: step-38

Thanks!

@majestic-owl448
Copy link
Copy Markdown
Contributor

majestic-owl448 commented Feb 21, 2026

maybe do not use tabs at all, it gets confusing, it's shown differently in all environments. My review on indentation was looking at the steps in the challenge pages (running develop).

@Jeevankumar-s
Copy link
Copy Markdown
Member

Jeevankumar-s commented Feb 23, 2026

Hi @Jeevankumar-s, thanks for the code review. I have a question regarding the indentation.

I made a few changes in the Challenge Editor after running pnpm run challenge-editor, and now I'm reviewing all the steps in VS Code. However, I noticed an indentation discrepancy between the two environments.

The Challenge Editor considers a TAB as 2 spaces, while VS Code treats it as 4 spaces. Which standard is the correct one to follow? I noticed this difference in several files, take the next file below as an example:

id: 68ef9a0b710ba66dd23ed260
title: Step 38
challengeType: 0
dashedName: step-38

Thanks!

Hi @sebacodes ,

In VS Code, if your indentation is set to 2 spaces, pressing Tab will insert 2 spaces instead of 4. You can check this in the bottom-right corner of VS Code (it should show Spaces: 2). If it’s different, you can click on it and change it to 2.

Also, I’d recommend using the Prettier extension. It helps keep indentation consistent across files and environments. I think the 2-space indentation you’re seeing is coming from the project’s formatting configuration (Prettier/editor settings), which the Challenge Editor follows.

image

@sebacodes
fix: correct misplaced CSS properties and code indentation
813995a 
- Fix misplaced CSS properties introduced during the workshop reorganization
- Fix code indentation as suggested in code review
@sebacodes
Copy link
Copy Markdown
Contributor Author

sebacodes commented Feb 24, 2026

Thanks, both comments were considered during the last code review.

Dario-DC
Dario-DC reviewed Mar 2, 2026
View reviewed changes
@Dario-DC Dario-DC added status: waiting update Is awaiting update, after feedback or request for changes and removed status: waiting review To be applied to PR's that are ready for QA, especially when additional review is pending. labels Mar 2, 2026
@sebacodes @Dario-DC
fix: grammar, wording, and code snippets in the paragraphs from code …
fb557e5 
…review

Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
Dario-DC
Dario-DC approved these changes Mar 3, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@Dario-DC Dario-DC left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @sebacodes. Congrats on your first pull request (PR)! 🎉

Thank you for your contribution to the page! 👍
We are happy to accept these changes and look forward to future contributions. 📝

@sebacodes
Copy link
Copy Markdown
Contributor Author

sebacodes commented Mar 3, 2026 •
edited
Loading

Hi @sebacodes. Congrats on your first pull request (PR)! 🎉

Thank you for your contribution to the page! 👍 We are happy to accept these changes and look forward to future contributions. 📝

Thank @Dario-DC and team, for the opportunity, patience and help.

@majestic-owl448 majestic-owl448 enabled auto-merge (squash) March 3, 2026 10:21
majestic-owl448
majestic-owl448 approved these changes Mar 3, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@majestic-owl448 majestic-owl448 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

the PR is in automerge, but is blocked by unresolved conversations, help find unresolved conversations and resolve them to allow the PR to merge

@majestic-owl448 majestic-owl448 merged commit b9307e1 into freeCodeCamp:main Mar 3, 2026
11 checks passed
@github-project-automation github-project-automation bot moved this from In review to Done in Naomi's Contribution Sprints Mar 3, 2026
LGH831 pushed a commit to LGH831/freeCodeCamp that referenced this pull request Mar 18, 2026
@sebacodes @jdwilkin4
@l3onhard @majestic-owl448 @a2937 @Dario-DC @johndoe987654321 @Jeevankumar-s
feat(curriculum): add second flexbox workshop to FSD cert (freeCodeCa…
2ead50a 
…mp#62735)

Co-authored-by: jdwilkin4 <jwilkin4@hotmail.com>
Co-authored-by: Leonhard Gulewitsch <leonhard@gulewitsch.com>
Co-authored-by: l3onhard <l3onhard@users.noreply.github.com>
Co-authored-by: Ilenia <26656284+ilenia-magoni@users.noreply.github.com>
Co-authored-by: Anna <a.rcottrill521@gmail.com>
Co-authored-by: Dario <105294544+Dario-DC@users.noreply.github.com>
Co-authored-by: John Doe <johnDoe123@email.com>
Co-authored-by: Ilenia M <nethleen@gmail.com>
Co-authored-by: Jeevankumar S <110320697+Jeevankumar-s@users.noreply.github.com>
Co-authored-by: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@Jeevankumar-s Jeevankumar-s Jeevankumar-s left review comments

@majestic-owl448 majestic-owl448 majestic-owl448 approved these changes

@Dario-DC Dario-DC Dario-DC approved these changes

@a2937 a2937 Awaiting requested review from a2937

@jdwilkin4 jdwilkin4 Awaiting requested review from jdwilkin4

+1 more reviewer

@l3onhard l3onhard l3onhard left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

@naomi-lgbt naomi-lgbt

Labels

Naomi's Sprints This label is for issues that Naomi is managing through her sprint initiatives on Discord. platform: learn UI side of the client application that needs familiarity with React, Gatsby etc. rwd v9 cert This is for issues dealing with the Responsive Web Design V9 Certification. scope: curriculum Lessons, Challenges, Projects and other Curricular Content in curriculum directory. scope: i18n language translation/internationalization. Often combined with language type label status: waiting update Is awaiting update, after feedback or request for changes

Projects

Naomi's Contribution Sprints
Status: Done

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Add second flexbox workshop to main repo with steps and tests

10 participants

@sebacodes @jdwilkin4 @majestic-owl448 @Jeevankumar-s @a2937 @l3onhard @Dario-DC @zairahira @naomi-lgbt @johndoe987654321