From fb5a7fb09f474c91a29eca8a2018f5e00a036474 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 10 Dec 2021 14:02:17 +0100
Subject: [PATCH] Add making layouts and html best practices links

---
 .../101-html/103-conventions-and-best-practices.md        | 8 +++++++-
 .../100-frontend/content/102-css/101-making-layouts.md    | 7 +++++++
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md b/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
index fba4d4986..1c2a4bfd1 100644
--- a/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
+++ b/content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
@@ -1 +1,7 @@
-# Conventions and best practices
\ No newline at end of file
+# Best Practices
+
+Learn to follow the best practices for writing maintainable and scalable HTML documents.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://github.com/hail2u/html-best-practices'>HTML Best Practices</BadgeLink>
+
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 f5a29eca9..547aff6cb 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
@@ -1,5 +1,12 @@
 # Making layouts
 
+Float, grid, flexbox, positioning, display and box model are some of the key topics that are used for making layouts. Use the resources below to learn about these topics: 
+
 <ResourceGroupTitle>Free Content</ResourceGroupTitle>
 
 <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 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>
+<BadgeLink colorScheme='yellow' badgeText='Read' href='https://www.freecodecamp.org/news/the-css-display-property-display-none-display-table-inline-block-and-more/'>The CSS Display Property</BadgeLink>