From d864f7ae488b59fc091be692dd87c6721563f6bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?RUBEN=20PE=C3=91A=20PARADA?= <46791460+rubenpenap@users.noreply.github.com> Date: Sat, 28 Jun 2025 11:33:11 -0400 Subject: [PATCH 1/7] fix: correct typos in comments for layout instructions in App.tsx --- .../01.problem.structural-layout/src/App.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/exercises/02.mobile-first/01.problem.structural-layout/src/App.tsx b/exercises/02.mobile-first/01.problem.structural-layout/src/App.tsx index c901540..8c0ecef 100644 --- a/exercises/02.mobile-first/01.problem.structural-layout/src/App.tsx +++ b/exercises/02.mobile-first/01.problem.structural-layout/src/App.tsx @@ -7,25 +7,25 @@ export default function App() { 🐨 We need to wrap our entire markup inside two container divs. The first one is the full-page container. It needs to: - - have at minimum the full screen height (min-h-screen) + - have at minimum the full screen height (min-h-screen) - centers its children with a grid (grid place-items-center) - - handle horizontal and verticall padding (see Figma) + - handle horizontal and vertical padding (see Figma) */} {/* - 🐨 Inside of that, wrap the entire markup in another 'div'. + 🐨 Inside of that, wrap the entire markup in another 'div'. This is our layout container, a common parent to both - the logo list and the text content. - + the logo list and the text content. + It needs to: - be a grid (grid) that contains two children (cells) - have a gap (gap-12) - center its children (place-items-center) */} - {/* + {/* 🐨 Wrap the Logo, h1 and paragraph in a common parent 'div'. - It will become one of the two grid cells in our layout. + It will become one of the two grid cells in our layout. */}

From 2ad9b616847082b2a80fc1d9ba8d0252e8fd5f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?RUBEN=20PE=C3=91A=20PARADA?= <46791460+rubenpenap@users.noreply.github.com> Date: Sat, 28 Jun 2025 11:33:27 -0400 Subject: [PATCH 2/7] fix: correct typo in comment for vertical flexbox setup in App.tsx --- exercises/02.mobile-first/02.problem.text-styles/src/App.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/02.mobile-first/02.problem.text-styles/src/App.tsx b/exercises/02.mobile-first/02.problem.text-styles/src/App.tsx index ea1c10a..6851cf9 100644 --- a/exercises/02.mobile-first/02.problem.text-styles/src/App.tsx +++ b/exercises/02.mobile-first/02.problem.text-styles/src/App.tsx @@ -8,7 +8,7 @@ export default function App() { 🐨 Set a max-width of 'md' on the wrapping div below. Center the elements horizontally: - - Setup a veritcal flexbox container with 'flex flex-col' + - Setup a vertical flexbox container with 'flex flex-col' - Align the items horizontally with 'items-center' - Center the children text elements with 'text-center' */} From 2d3aae616c04e3abc950ac184cbe58646265b20e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?RUBEN=20PE=C3=91A=20PARADA?= <46791460+rubenpenap@users.noreply.github.com> Date: Sat, 28 Jun 2025 11:36:02 -0400 Subject: [PATCH 3/7] fix: correct typo in README regarding grid properties --- .../02.solution.grid-class-composition/README.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/exercises/04.art-directed-grid/02.solution.grid-class-composition/README.mdx b/exercises/04.art-directed-grid/02.solution.grid-class-composition/README.mdx index b2eecfb..8417d81 100644 --- a/exercises/04.art-directed-grid/02.solution.grid-class-composition/README.mdx +++ b/exercises/04.art-directed-grid/02.solution.grid-class-composition/README.mdx @@ -4,4 +4,4 @@ Whew! That was actually pretty easy 😁 -πŸ¦‰ **Warning**: One thing to keep in mind is thatΒ when you start placing items manually in your grid like that, any element that _does not_ have a `grid-colum-start` or `grid-row-start` property will find the first available cell in the flow of the grid, and occupy that! +πŸ¦‰ **Warning**: One thing to keep in mind is thatΒ when you start placing items manually in your grid like that, any element that _does not_ have a `grid-column-start` or `grid-row-start` property will find the first available cell in the flow of the grid, and occupy that! From 62fb717b0ac2b3d27f6eaa668953c883f0c82422 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?RUBEN=20PE=C3=91A=20PARADA?= <46791460+rubenpenap@users.noreply.github.com> Date: Sat, 28 Jun 2025 11:36:42 -0400 Subject: [PATCH 4/7] fix: correct typos in comments for tailwind.config.ts --- .../03.problem.roll-reveal/tailwind.config.ts | 22 +++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/exercises/06.animation/03.problem.roll-reveal/tailwind.config.ts b/exercises/06.animation/03.problem.roll-reveal/tailwind.config.ts index 5bc1a08..3b0cc53 100644 --- a/exercises/06.animation/03.problem.roll-reveal/tailwind.config.ts +++ b/exercises/06.animation/03.problem.roll-reveal/tailwind.config.ts @@ -2,9 +2,9 @@ import easings from 'open-props/src/easing' import { type Config } from 'tailwindcss' /* - πŸ§β€β™€οΈ I've added the 'open-props' npm package and + πŸ§β€β™€οΈ I've added the 'open-props' npm package and imported a series of easing timing functions. - + You can use one of these to fine-tune the "roll-reveal" animation below! */ @@ -27,7 +27,7 @@ export default { '5.5xl': ['3.375rem', '1'], }, keyframes: { - /* + /* 🐨 1. Create a 'roll-reveal' keyframe object. It should start with... @@ -43,10 +43,10 @@ export default { /* πŸ‘¨β€πŸ’Ό We want to respect the user's system preferences for reduced motion, - so let's also create an "alternative", simpler reveal. + so let's also create an "alternative", simpler reveal. + + 🐨 2. Create a 'fade-in' keyframes definition. - 🐨 2. Create a 'fade-in' keyframes definition. - It should start at 0% opacity and end at 100% opacity. */ 'slide-left': { @@ -59,17 +59,17 @@ export default { }, }, animation: { - /* + /* 🐨 1. Add a 'roll-reveal' animation. It should use the 'roll-reveal' keyframe you just created, and animate once over 0.4 seconds. - Try your own easigns (https://cubic-bezier.com is a great resource ✨), - or have fun playing with Open Props' easing function we've imported! - + Try your own easings (https://cubic-bezier.com is a great resource ✨), + or have fun playing with Open Props' easing function we've imported! + In the solution, we use the `--ease-spring-2` easing function. */ - /* + /* 🐨 2. Add a 'fade-in' animation. It should use the 'fade-in' keyframe you just created, and animate once over 0.4 seconds. */ From 3d017e8bee5faa9a1cc0cae5a9633d7237f7c567 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?RUBEN=20PE=C3=91A=20PARADA?= <46791460+rubenpenap@users.noreply.github.com> Date: Sat, 28 Jun 2025 11:37:00 -0400 Subject: [PATCH 5/7] fix: correct typo in comment regarding row-span utilities in App.tsx --- .../07.subgrid-alignment/01.problem.sub-grid/src/App.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/exercises/07.subgrid-alignment/01.problem.sub-grid/src/App.tsx b/exercises/07.subgrid-alignment/01.problem.sub-grid/src/App.tsx index 55f3731..05d1707 100644 --- a/exercises/07.subgrid-alignment/01.problem.sub-grid/src/App.tsx +++ b/exercises/07.subgrid-alignment/01.problem.sub-grid/src/App.tsx @@ -65,14 +65,14 @@ export default function App() { guide file for how to get your project off the ground!

- {/* + {/* 🐨 At the `xl` breakpoint... - + 1. Defer the grid rows to the parent grid with `subgrid` 2. Span the grid across 6 rows πŸ’° You can define grid-template-rows as a `subgrid` with `grid-rows-subgrid` - πŸ’° You can span an element acorss multiple rows with the `row-span-*` utilities + πŸ’° You can span an element across multiple rows with the `row-span-*` utilities */}