youtube-tutorial/index.html at main · rftecpro-ai/youtube-tutorial · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>YouTube Tutorial</title>
        <style>
            body {
                font-family: Arial, sans-serif;
                max-width: 800px;
                margin: 60px auto;
                background-color: #f9f9f9;
                color: #333;
                padding: 0 20px;
            }
            h1 { color: #ff0000; border-bottom: 2px solid #ff0000; padding-bottom: 10px; }
            h2 { color: #555; margin-top: 30px; }
            p, li { font-size: 1.1rem; line-height: 1.6; }
            ul { padding-left: 20px; }
            footer { margin-top: 50px; padding-top: 15px; border-top: 1px solid #ccc; font-size: 0.9rem; color: #888; }
            a { color: #ff0000; text-decoration: none; }
            a:hover { text-decoration: underline; }
        </style>
    </head>
    <body>
        <h1>YouTube Tutorial: Building with HTML &amp; CSS</h1>
        <p>Welcome to this step-by-step tutorial where we walk through building a webpage from scratch.
           Whether you're a complete beginner or brushing up on the basics, this guide has you covered.</p>
        <h2>What You'll Learn</h2>
        <ul>
            <li>How to structure an HTML document</li>
            <li>Styling with CSS &mdash; fonts, colors, and layout</li>
            <li>Using version control with Git and GitHub</li>
            <li>Best practices for clean, readable code</li>
        </ul>
        <h2>Prerequisites</h2>
        <p>No prior experience needed! Just a text editor and a browser.
           We recommend <a href="https://code.visualstudio.com/" target="_blank">VS Code</a> for editing.</p>
        <h2>Resources</h2>
        <ul>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/HTML" target="_blank">MDN HTML Docs</a></li>
            <li><a href="https://developer.mozilla.org/en-US/docs/Web/CSS" target="_blank">MDN CSS Docs</a></li>
            <li><a href="https://github.com/rftecpro-ai/youtube-tutorial" target="_blank">GitHub Repository</a></li>
        </ul>
        <footer>
            <p>Created by rftecpro-ai &mdash; Follow along on <a href="https://github.com/rftecpro-ai" target="_blank">GitHub</a></p>
        </footer>
    </body>
</html>