Add making layouts and html best practices links

pull/1657/head
Kamran Ahmed 3 years ago
parent 68ea980126
commit 4eb63bddd3
  1. 8
      content/roadmaps/100-frontend/content/101-html/103-conventions-and-best-practices.md
  2. 7
      content/roadmaps/100-frontend/content/102-css/101-making-layouts.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>

@ -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>

Loading…
Cancel
Save