diff --git a/README.md b/README.md
index e54352e..2b9f7fa 100644
--- a/README.md
+++ b/README.md
@@ -13,3 +13,11 @@ This is the source code of the Udemy course: If you have any questions, please feel free to contact me through my Twitter: @codewithsahand.
Visit my website
+
+
+## TOP Apps
+
+- NavBar
+- Photo Gallery
+- Note App
+- Clock
diff --git a/projects/templatenavbody/La structure d'une page HTML5.pdf b/projects/templatenavbody/La structure d'une page HTML5.pdf
new file mode 100644
index 0000000..15bbd6d
Binary files /dev/null and b/projects/templatenavbody/La structure d'une page HTML5.pdf differ
diff --git a/projects/templatenavbody/README.md b/projects/templatenavbody/README.md
new file mode 100644
index 0000000..e554159
--- /dev/null
+++ b/projects/templatenavbody/README.md
@@ -0,0 +1,41 @@
+
+# Introduction
+Le HTML, ou « HyperText Markup Language », est un langage permettant de réaliser des pages web. Tout les sites internet ont besoin du HTML pour s’afficher dans le navigateur.
+
+Définition : HyperText Markup Language (HTML) est un langage de “mark up (balisage)” qui définit la structure logique d’un document HTML diffusé sur le Web.
+
+## Structure de base HTML
+Le document HTML commence toujours par ce que nous appelons la structure de base. Cette structure est obligatoire et constant.
+
+Il est possible de comprendre le document HTML de manière très simple, grâce à une division des blocs, selon la structure suivante:
+
+(!DOCTYPE)
+Le Doctype s’insère en tout début de page. Il sert à définir le type du document afin qu’il soit correctement interprété par le navigateur. Le Doctype doit toujours se situer avant la balise HTML.
+
+ATTENTION Le doctype est OBLIGATOIRE et doit toujours être la PREMIERE LIGNE de votre document.
+
+META
+Les balises Meta sont des informations incluses à l'intérieur des pages web sous forme de balises. Ces informations sont placées dans l'en-tête d'une page web à l'intérieur de la balise HEAD. Les balises meta sont relative à la page et donnent des informations plus généralement aux aux moteurs de recherche (bien que d'autres applications sont possible).
+
+HEAD
+La balise HEAD contient l'en-tête du document html, c'est à dire toutes les informations non visibles par l'internaute. C'est une balise qu'il ne faut pas oublier. Elle fait partie des 4 balises Html qui doivent être présentes dans tous les documents HTML (HTML, HEAD, TITLE, BODY)
+
+BODY
+La balise BODY contient le corps du document html, c'est à dire toutes les informations visibles par l'internaute.
+
+## Template
+
+- La balise HEADER, est l’en-tête de la page. Permet de contenir un logo, barre de navigation , titre etc...
+
+- La balise NAV,représente diffèrent liens vers d'autres pages ou des article de cette page. Autrement dit, c'est une section destinée à la navigation dans un document.
+
+- La balise SECTION, celle la permet de regrouper des contenus de même thème.
+
+- La balise ARTICLE, elle regroupe des éléments indépendant. Exemple pour des articles de journaux.
+
+- La balise ASIDE, sert a mettre des informations complémentaires, il se situe souvent à droite de la page.
+
+- La balise FOOTER, est le pied de page, on y trouve souvent les liens contact, nom, mentions légales.
+
+## HTML5 NEW TAGS
+- https://www.scaler.com/topics/html5-new-tags/
\ No newline at end of file
diff --git a/projects/templatenavbody/balise_structurante.png b/projects/templatenavbody/balise_structurante.png
new file mode 100644
index 0000000..ed97ba1
Binary files /dev/null and b/projects/templatenavbody/balise_structurante.png differ
diff --git a/projects/templatenavbody/fullsemantichtml5.png b/projects/templatenavbody/fullsemantichtml5.png
new file mode 100644
index 0000000..42abb2c
Binary files /dev/null and b/projects/templatenavbody/fullsemantichtml5.png differ
diff --git a/projects/templatenavbody/index.html b/projects/templatenavbody/index.html
new file mode 100644
index 0000000..d60aac9
--- /dev/null
+++ b/projects/templatenavbody/index.html
@@ -0,0 +1,57 @@
+
+
+
+ Template full
+
+
+
+
+
+
+
+
+ HEADER SECTION
+
+
MAIN SECTION
+
+ Article Section.
+
+ Details
+
Details and summary tags are examples of HTML5 Structural or Semantic Tag.
+ This paragraph give more info
+ about the web content. So it
+ is placed inside the header tag.
+
+
+
+
+
+
+
Header for sub heading
+
+
+
+
+ This is our original content, which
+ is introduced in both the header of
+ this web page. but the header in main
+ tag is specifically for the content
+ itself rather than web page as whole.
+
+
+
+
+
+
Article heading
+
+
+
+
+ This shows that header tag can
+ also be found inside the article
+ tag to show the article title/
+ heading. So header tag is also
+ used for that purpose also.
+
+
+
+
+
+
+
+
+
diff --git a/projects/templatenavbody/semantichtml.png b/projects/templatenavbody/semantichtml.png
new file mode 100644
index 0000000..4e23d85
Binary files /dev/null and b/projects/templatenavbody/semantichtml.png differ
diff --git a/projects/templatenavbody/squelette.jfif b/projects/templatenavbody/squelette.jfif
new file mode 100644
index 0000000..0c176aa
Binary files /dev/null and b/projects/templatenavbody/squelette.jfif differ
diff --git a/projects/templatenavbody/templatetags.png b/projects/templatenavbody/templatetags.png
new file mode 100644
index 0000000..687d4cc
Binary files /dev/null and b/projects/templatenavbody/templatetags.png differ
diff --git a/projects/templatenavbody/zoning-exo.jpg b/projects/templatenavbody/zoning-exo.jpg
new file mode 100644
index 0000000..adf3f4c
Binary files /dev/null and b/projects/templatenavbody/zoning-exo.jpg differ