diff --git a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
index 547aff6cb..3051bacd4 100644
--- a/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
+++ b/content/roadmaps/100-frontend/content/102-css/101-making-layouts.md
@@ -6,6 +6,8 @@ Float, grid, flexbox, positioning, display and box model are some of the key top
 
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://flexboxfroggy.com/'>Learn and Practice Flexbox</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://cssgridgarden.com/'>Game for learning CSS Grid</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://cssgrid.io/'>Learn CSS Grid - Course</BadgeLink>
+<BadgeLink badgeText='Watch' href='https://scrimba.com/learn/cssgrid'>Learn CSS Grid for free</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/all-about-floats/'>All about Floats</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/'>Positioning Types: How Do They Differ?</BadgeLink>
 <BadgeLink colorScheme='yellow' badgeText='Read' href='https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model'>The Box Model</BadgeLink>