index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Modern Webpage</title>
</head>
<body>
    <!--Creating a Button to go back to top of web page.-->
    <a href="#" id="bToTop">&UpArrow;Top</a>
    <!--This is the header section of my webpage.-->
    <header>
        <h1>Modern Webpage Tutorial</h1>
        <nav>
            <ul>
                <li><a href="#html">HTML Basics</a></li>
                <li><a href="#css">CSS Basics</a></li>
                <li><a href="#js">JavaScript Basics</a></li>
                <li><a href="/directories/langs.html">Other Programming Languages</a></li>
                <li class="tyk-hero"><a href="/directories/tyl.html">Test Your Knowledge</a></li>
            </ul>
        </nav>
    </header>
    <!--This is the main section of my webpage.-->
    <!--This will contain 3 sections: html, css, javascript.-->
    <main>
        <section id="html">
            <h2>HTML Basics</h2>
            <p>HTML (HyperText Markup Language) is the standard markup language for creating webpages. It describes the structure of a web page.</p>
            <section id="elements">
                <h2>Elements</h2>
                <p>Elements are the building blocks of a webpage. They consist of: a start tag, the content, end tag. These contain text, elements or both.</p>
                <section id="form">
                    <h2>Secure coding practice in Forms</h2>
                    <form action="https://formsubmit.co/youremail@domain" method="post">
                        <!--Input Validation Example ensuring the username is alphanumeric only.-->
                        <label for="username">Username:</label>
                        <input type="text" name="username" id="username" pattern="[a-zA-Z0-9]+" title="Only alphanumeric characters are allowed." required>
                        <small>Only alphanumeric characters are allowed.</small>

                        <!--Input sanitization example for emails-->
                        <label for="email">Email:</label>
                        <input type="email" name="email" id="email" required>
                        <small>Enter a valid email address.</small>

                        <!--Password handling: setting the length and complexity.-->
                        <label for="password">Password:</label>
                        <input type="password" name="password" id="password" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,20}" title="Must contain at least one number, one uppercase and one lowercase letter, and at least 8 to 20 characters." required>
                        <small>Must contain at least one number, one uppercase and one lowercase letter, and at least 8 to 20 characters.</small>
                        
                        <!--Secure data Handling: Submission.-->
                        <label for="comments">Comments:</label>
                        <textarea name="comments" id="comments" required></textarea>
                        <small>Avoid entering sensitive information here.</small>

                        <button type="submit">Submit</button>
                    </form>
                </section>
            </section>
        </section>
        <section id="css">
            <h2>CSS Basics</h2>
            <p>CSS (Cascading Style Sheets) is used to style and layout web pages. It controls the color, font, and spacing of your content.</p>
            <section id="colors">
                <h2>Color Schemes</h2>
                <p>This section demonstrates different ways to set colors in CSS.</p>
                <div class="color-example">Example Color Box</div>
            </section>
            <section id="layout">
                <h2>Layout Techniques</h2>
                <p>This section shows different layout techniques using Flexbox and Grid.</p>
                <div class="flex-container">
                    <div class="flex-item">Flex Item 1</div>
                    <div class="flex-item">Flex Item 2</div>
                    <div class="flex-item">Flex Item 3</div>
                </div>
                <div class="grid-container">
                    <div class="grid-item">Grid Item 1</div>
                    <div class="grid-item">Grid Item 2</div>
                    <div class="grid-item">Grid Item 3</div>
                </div>
            </section>
        </section>
        <section id="js">
            <h2>JavaScript Basics</h2>
            <p>JavaScript is a programming language that adds interactivity to your website. It can update and change both HTML and CSS.</p>
            <button id="jsButton">Click Me!</button>
            <section id="dom">
                <h2>Working with the DOM</h2>
                <p>The DOM (Document Object Model) allows JavaScript to interact with HTML Elements.</p>
                <h4 id="domTest">Hi!</h4>
                <section id="events">
                    <h2>Event Listeners</h2>
                    <p>Events are used to handle interactions in JavaSCript.</p>
                    <h3>Toggle Event</h3>
                    <button id="jsToggleBtn">Toggle Mode!</button>
                </section>
            </section>
            <section id="libs">
                <h2>JavaScript Libraries</h2>
                <p>JavaScript libraries are collections of pre-written JavaScript code that provide developers with reusable functions, methods, and components. These libraries simplify the development process by offering tools to handle common programming tasks, such as manipulating the DOM (Document Object Model), making HTTP requests, creating visualizations, and managing application state. Instead of writing code from scratch, developers can leverage these libraries to build complex functionalities more efficiently.</p>
                <p>List of some popular libraries:</p>
                <ul>
                    <li>React</li>
                    <li>jQuery</li>
                    <li>Lodash</li>
                    <li>D3</li>
                    <li>Axios</li>
                    <li>Moment</li>
                    <li>Three</li>
                    <li>Redux</li>
                    <li>Chart</li>
                    <li>Vue</li>
                  </ul>
                  <section id="install">
                    <h2>How Can I Install Libraries?</h2>
                    <p>We will be using Vite to install our packages. Using the command <b><i>npm create vite@latest</i></b></p>
                    <p>This command prompts us to enter a project name, select a framework (React, Vue, Svelte, etc)</p>
                    <p>Once completed you navigate to and run your application:</p>
                    <ol>
                        <li>npm create vite@latest</li>
                        <li>cd your-project-name</li>
                        <li>npm install</li>
                        <li>npm run dev</li>
                    </ol>
                  </section>
                  <section id="react">
                    <h2>React JS</h2>
                    <p>React JS is an open-source JavaScript library for building user interfaces, especially single-page applications. Developed by Facebook, it helps create dynamic web apps with a component-based architecture, using a virtual DOM for efficient updates and JSX for writing HTML-like code in JavaScript.</p>
                    <ul>
                      <li><strong>Component-Based Architecture:</strong> Reusable UI components.</li><br>
                      <li><strong>Virtual DOM:</strong> Efficient updates to the actual DOM.</li><br>
                      <li><strong>JSX Syntax:</strong> HTML-like code in JavaScript.</li><br>
                      <li><strong>State Management:</strong> Dynamic response to changes.</li><br>
                      <li><strong>Unidirectional Data Flow:</strong> Data flows from parent to child components.</li><br>
                      <li><strong>Ecosystem:</strong> Tools and libraries like React Router and Redux.</li><br>
                      <li><strong>Community Support:</strong> Extensive resources and active community.</li>
                    </ul>
                  </section>
            </section>
        </section>
    </main>
    <!--This the footer section.-->
    <footer><p>&copy; 2024 Modern Webpage Tutorial</p></footer>
    <script src="script.js"></script>
</body>
</html>