Lesson 2 - HTML Review

Essential Key Elements for Web Page Layout

1. HTML Elements:

   • <header>: Used for introductory or navigational content.

   • <nav>: Defines navigation links.

   • <main>: Contains the main content of the web page.

   • <section>: Groups related content together.

   • <article>: Self-contained content such as a blog post or article.

   • <footer>: Contains footer content like copyright information.

   • <div>: A general-purpose container for structuring layouts.

Short Description of Major HTML Elements

1. <div>: A block-level container used to group other elements for layout and styling.

   • Example: <div class="container">Content here</div>

2. <header>: Represents the header section of a document or a section.

   • Example: <header><h1>Welcome to My Website</h1></header>

3. <nav>: Used to define a navigation menu.

   • Example: <nav><ul><li><a href="#">Home</a></li></ul></nav>

4. <main>: Denotes the main content area of the page.

   • Example: <main><h2>Main Content Here</h2></main>

5. <section>: Groups related content within a page.

   • Example: <section><h3>Section Title</h3><p>Details here.</p></section>

6. <article>: Represents standalone content like a blog post.

   • Example: <article><h2>Blog Title</h2><p>Article content here.</p></article>

7. <footer>: Contains footer content for a document or section.

   • Example: <footer><p>&copy; 2024 Company Name</p></footer>

8. <p>: Paragraph element for text content.

   • Example: <p>This is a paragraph.</p>

9. <a>: Anchor tag for hyperlinks.

   • Example: <a href="https://example.com">Visit Example</a>

10. <img>: Displays images on the page.

    • Example: <img src="image.jpg" alt="Description">

11. <form>: Creates a form for user input.

    • Example:

      <form>
        <label for="name">Name:</label>
        <input type="text" id="name" name="name">
        <button type="submit">Submit</button>
      </form>

12. <button>: Represents a clickable button.

    • Example: <button>Click Me</button>

Overview of HTML DOM Layout in React Project

1. React and Virtual DOM:

   • React uses a Virtual DOM to update the UI efficiently.

   • Components represent reusable UI pieces.

2. Structure of a React Project:

   • HTML Entry Point: index.html contains a single <div id="root"></div> element.

   • JavaScript Entry Point: main.jsx renders the React component tree.

   • Component Hierarchy:

     • Parent components like <App /> contain child components.

     • Example layout hierarchy:

       App
       ├── NavBar
       ├── MainContent
       │   ├── Section1
       │   ├── Section2
       └── Footer

3. CSS and Styling:

   • Inline styles: style={{ color: 'red' }}.

   • External CSS files: import './App.css';.

   • CSS frameworks: Bootstrap or Tailwind for layout and components.

4. Example Code for React Layout:

   const App = () => {
     return (
       <div>
         <header>
           <h1>My Website</h1>
         </header>
         <nav>
           <ul>
             <li><a href="#">Home</a></li>
             <li><a href="#">About</a></li>
             <li><a href="#">Contact</a></li>
           </ul>
         </nav>
         <main>
           <section>
             <h2>Welcome</h2>
             <p>This is the main content of the website.</p>
           </section>
         </main>
         <footer>
           <p>&copy; 2024 My Website</p>
         </footer>
       </div>
     );
   };
   
   export default App;