FrontEnd RoadMap

References : Mdn Docs, W3Schools

Installation of code editor and extensions

• Visual Codes Studio
  • Live preview
  • Prettier
  • Emmets

Basic Html

Tags

<h1> => <h6>
<p></p>

element

<h1>hello</h1>

Voids

<br />
<hr />

Non Voids

<h1></h1>
<p></p>

Intermediate Html

1. Ordered List

   <ol><li></li></ol>

2. Unordered List

   <ul><li></li></ul>

3. Anchor Tags

   <a href="link-value"> direction </a>

4. Image Element

   <img src="img-url" />

5. Anchor Tags + Image Element

   <a href=""><img src="" alt=""></a>

6. File Path

   • Absolute File Path
     home/user/downloads/document/
     index.html (complete path to a file)
   • Relative File Path
     ./ (Denotes Current Directory/Folder)
     ../ (To Navigate To Root Directory/Folder)

7. MultiWebPages

   <a href="./contact.html">Contact Me</a>
   < a href="./about.html">About</a>

8. Build a Project

   • Launch on Github

     Folder structure

     • Make sure your homepage code is inside 'index.html'
     • assets folder
       • images folder
         • .jpg, .png e.t.c
     • public folder
       • other html pages
       • main.css
     • Create Repository
     • Upload All Files And Commit Changes =>Tick Readme=>Public
     • Navigate To Settings(pages)=>main=>root