HTML

New Tags That We Learned

header: Used only for the header of a website (typically the top block, usually containing navigation).
nav: Represents navigation. If you have some links that navigate users through the website, it’s a good practice to put them inside a nav tag.
ul: Unordered list (displays bullet points). Example:
```
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
```
ol: Ordered list (displays numbers like 1., 2., etc.). Example:
```
<ol>
    <li>First</li>
    <li>Second</li>
</ol>
```
li: List item. If we have a list with some items, each item must be inside an li tag.

CSS

Positioning Elements
- To center an item in the viewport, use display: flex. A fun way to learn about flex is by playing Flexbox Froggy.
- To control the position of an element, use the position property:
  - relative: Allows us to position child elements relative to their current position.
  - absolute: Positions an element relative to its closest positioned ancestor. If no such ancestor exists, it is placed relative to the document. For example, if you place an element in the center, it will remain there even if the page is scrolled.
  - fixed: Fixes an element in place on the screen. For example, headers often use this to stay at the top of the page as the user scrolls.

React

Writing Code in `.jsx` Files

In React, we combine logic and HTML (called templates) using functions. Here’s an example:

function Header() {
    // Logic goes here
    const toggle = () => {
        // Function to show and hide a modal
    };

    // HTML template goes after return
    return (
        <>
            <header>
                <nav>
                    <ul>
                        <li>About Us</li>
                        <li>Contact Us</li>
                    </ul>
                </nav>
            </header>
        </>
    );
}

Using Logic in HTML Code

To include logic in our HTML code, we use curly braces {}. Example:

return (
    <>
        <header>
            <nav>
                <ul>
                    <li>About Us</li>
                    <li>Contact Us</li>
                </ul>
            </nav>
        </header>

        {/* Logic in our HTML code */}
        {show ? (
            <div className="modal">Modal Content</div>
        ) : null}
    </>
);

Explanation:

Logic is placed inside {}.
If we need to include HTML as part of our logic, we wrap it in parentheses (...).
null in JavaScript means "nothing." When used in the example above, it ensures the user sees nothing on the screen when the condition is false.

Conditions in HTML Code

In React, we cannot use if-else directly in templates. Instead, we use the following syntax:

Example A:

show ? (
    <div className="modal">Modal Content</div>
) : null;

This is equivalent to writing:

Example B:

if (show === true) {
    return <div className="modal">Modal Content</div>;
} else {
    return null;
}

Key Takeaway:

Example A is more concise and commonly used in React.

Comparing Values in JavaScript

To compare values in JavaScript, always use the triple equals sign (===). It ensures strict equality, which means the values and their types must both match. This is the best way to compare simple values in JavaScript.

Lesson 2