diff --git a/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md b/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
index 8819f0624..38c0e6ef5 100644
--- a/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
+++ b/content/roadmaps/100-frontend/content/101-html/100-learn-the-basics.md
@@ -1 +1,8 @@
-# Learn the basics
\ No newline at end of file
+# HTML Basics
+
+HTML stands for Hyper Text Markup Language. It is used on the frontend and gives the structure to the webpage which you can style using CSS and make interactive using JavaScript.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' href='https://www.w3schools.com/html/html_intro.asp'>W3Schools: Learn HTML</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=pQN-pnXPaVg'>HTML Full Course - Build a Website Tutorial</BadgeLink>
+<BadgeLink badgeText='Course' colorScheme='green' href='https://www.youtube.com/watch?v=qz0aGYrrlhU'>HTML Tutorial for Beginners: HTML Crash Course</BadgeLink>
diff --git a/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md b/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
index 3aecdfad6..de52665c0 100644
--- a/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
+++ b/content/roadmaps/100-frontend/content/101-html/101-writing-semantic-html.md
@@ -1 +1,9 @@
-# Writing semantic html
\ No newline at end of file
+# Semantic HTML
+
+Semantic element clearly describes its meaning to both the browser and the developer.
+
+<ResourceGroupTitle>Free Content</ResourceGroupTitle>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://www.w3schools.com/html/html5_semantic_elements.asp'>W3Schools: Semantic HTML</BadgeLink>
+<BadgeLink badgeText='Read' colorScheme='yellow' href='https://hackernoon.com/how-to-write-semantic-html-dkq3ulo'>How To Write Semantic HTML</BadgeLink>
+
+