Add making layouts and html best practices links

content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md

@@ -1 +1,7 @@
-# Conventions and best practices
+# 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>
+

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>