├── README.md
├── html_tutorial
    ├── about.css
    ├── about.html
    ├── app.js
    ├── file_path
    │   ├── about.html
    │   ├── css
    │   │   └── style.css
    │   ├── img
    │   │   ├── google.jpg
    │   │   ├── google.png
    │   │   ├── googles.gif
    │   │   ├── logo.jpg
    │   │   └── logo.png
    │   ├── index.html
    │   └── js
    │   │   └── app.js
    ├── google.jpg
    ├── google.png
    ├── googles.gif
    ├── index.html
    ├── logo.jpg
    ├── logo.png
    ├── pexels-pixabay-68507.jpg
    ├── style.css
    └── viddeo.mp4
└── layout.png


/README.md:
--------------------------------------------------------------------------------
 1 | # html-tutorial
 2 | 
 3 | ## 📝 Description
 4 | Welcome to the "Learn HTML in One Video" repository, I will try my best to teach you all about HTML. After completing this course, I hope you will be able HTML properly. This is a completely free course and it's now available on YouTube.
 5 |  - [👉 Learn HTML in One Video](https://youtu.be/BSvo4i5t-Kg)
 6 |  
 7 |  
 8 | ## 🙋‍♀️  What is HTML?
 9 | - HTML stands for Hyper Text Markup Language
10 | - HTML is not considered a programming language 
11 | - HTML is the standard markup language for creating Web pages.
12 | - HTML elements tell the browser how to display the content
13 | - It's easy to learn
14 | 
15 | 
16 | ## ⏳ Prerequisite
17 | - 👉 Basic Computing skills
18 | - The first thing you should learn about HTML documents is the structure of web pages and how web pages are created. This will give you a clear indication of how a web page comes together. This is an insight you'll need to have for every website you build.
19 | 
20 | 
21 | 
22 | ## 🎯 What to do with HTML?
23 |  - **Web development**. Developers use HTML code to design how a browser displays web page elements, such as text, hyperlinks, and media files. 
24 |  - **Internet navigation**. Users can easily navigate and insert links between related pages and websites as HTML is heavily used to embed hyperlinks. 
25 |  - **Web documentation**. HTML makes it possible to organize and format documents, similarly to Microsoft Word.
26 | 
27 | 
28 | ## 🧑‍💻 Contributors
29 | - [@Ali Hossain](https://github.com/shovoalways/)
30 | 
31 | 
32 | 
33 | ## 🥰 Follow me
34 | - [@Github](https://github.com/shovoalways/) 
35 | - [@Facebook](https://facebook.com/shovoalways/) 
36 | - [@Twitter](https://twitter.com/shovoalways/) 
37 | - [@Instagram](https://instagram.com/shovoalways/) 
38 | 


--------------------------------------------------------------------------------
/html_tutorial/about.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 |   margin: 0;
 4 |   padding: 0;
 5 | }
 6 | body {
 7 |   font-family: Arial, Helvetica, sans-serif;
 8 |   font-size: 15px;
 9 |   line-height: 1.5em;
10 | }
11 | img {
12 |   max-width: 100%;
13 | }
14 | header {
15 |   background: #fadadd;
16 |   padding: 20px;
17 | }
18 | 
19 | header img {
20 |   width: 250px;
21 |   margin: 0 auto;
22 |   display: block;
23 | }
24 | 
25 | #main_menu {
26 |   margin-top: 20px;
27 |   list-style: none;
28 |   text-align: center;
29 | }
30 | #main_menu li {
31 |   display: inline-block;
32 |   margin: 0 5px 10px;
33 | }
34 | #main_menu a {
35 |   background: #e8336d;
36 |   color: #fff;
37 |   font-size: 14px;
38 |   padding: 5px 15px;
39 |   text-decoration: none;
40 | }
41 | section {
42 |   background: #cdeaff;
43 |   display: flex;
44 | }
45 | div {
46 |   padding: 20px;
47 |   width: 60%;
48 | }
49 | div h1 {
50 |   margin-bottom: 20px;
51 | }
52 | aside {
53 |   padding: 20px;
54 |   width: 40%;
55 | }
56 | aside ul {
57 |   margin-left: 20px;
58 |   margin-top: 10px;
59 | }
60 | footer {
61 |   background: #eaffcd;
62 |   padding: 20px;
63 |   text-align: center;
64 | }
65 | footer p {
66 |   font-size: 12px;
67 | }
68 | 


--------------------------------------------------------------------------------
/html_tutorial/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Document</title>
 9 |   <link rel="stylesheet" href="about.css">
10 | </head>
11 | 
12 | <body>
13 |   <header>
14 |     <img src="logo.jpg" alt="">
15 |     <ul id="main_menu">
16 |       <li><a href="">Home</a></li>
17 |       <li><a href="">About</a></li>
18 |       <li><a href="">Service</a></li>
19 |       <li><a href="">Download</a></li>
20 |     </ul>
21 |   </header>
22 |   <section>
23 |     <div>
24 |       <h1>Website Title</h1>
25 |       <img src="pexels-pixabay-68507.jpg" alt="">
26 |       <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident facere iusto amet, corporis aperiam,
27 |         voluptatum esse nisi ducimus veritatis sequi aliquam omnis ipsum! Dolorum quaerat doloremque aperiam quas
28 |         ratione! Provident tenetur ratione iure modi! Non quod nesciunt, reprehenderit vel fugiat dolore quisquam quas,
29 |         mollitia consequatur illum, veniam modi ad eos aliquid sint facilis ratione voluptatem corporis nulla odit.
30 |         error a voluptas accusantium rerum ad mollitia vel explicabo? Ratione necessitatibus dolorem exercitationem sed
31 |       </p>
32 |     </div>
33 |     <aside>
34 |       <h2>Recent Post</h2>
35 |       <ul>
36 |         <li><a href="">Blog Post</a></li>
37 |         <li><a href="">Blog Post</a></li>
38 |         <li><a href="">Blog Post</a></li>
39 |         <li><a href="">Blog Post</a></li>
40 |       </ul>
41 |     </aside>
42 |   </section>
43 |   <footer>
44 |     <p>All Right Reserved by Ali Hossain | Procoder Bd</p>
45 |   </footer>
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/html_tutorial/app.js:
--------------------------------------------------------------------------------
1 | alert("Hi! JavaScript");
2 | 


--------------------------------------------------------------------------------
/html_tutorial/file_path/about.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 8 |   <title>Document</title>
 9 | </head>
10 | 
11 | <body>
12 |   <h1 id="title">Subscribe</h1>
13 |   <h1 class="title">Subscribe</h1>
14 |   <h1 class="title">Subscribe</h1>
15 | </body>
16 | 
17 | </html>


--------------------------------------------------------------------------------
/html_tutorial/file_path/css/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #eaffcd;
 3 | }
 4 | /* a {
 5 |   color: #000000;
 6 |   font-size: 50px;
 7 |   text-decoration: none;
 8 | } */
 9 | img {
10 |   max-width: 90%;
11 | }
12 | table {
13 |   font-family: "Courier New", Courier, monospace;
14 |   border-collapse: collapse;
15 | }
16 | td,
17 | th {
18 |   border: 1px solid #000000;
19 | }
20 | ul {
21 |   /* list-style-type: circle; */
22 |   /* list-style-type: square; */
23 |   /* list-style-type: disc; */
24 |   list-style-type: none;
25 | }
26 | ol {
27 | }
28 | h1,
29 | p,
30 | span,
31 | strong {
32 |   border: 1px solid red;
33 | }
34 | #title {
35 |   background: red;
36 |   color: #fff;
37 |   padding: 10px;
38 | }
39 | .title {
40 |   font-family: "Courier New", Courier, monospace;
41 | }
42 | .font-size {
43 |   font-size: 20px;
44 | }
45 | iframe {
46 |   border: 0;
47 | }
48 | 


--------------------------------------------------------------------------------
/html_tutorial/file_path/img/google.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/file_path/img/google.jpg


--------------------------------------------------------------------------------
/html_tutorial/file_path/img/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/file_path/img/google.png


--------------------------------------------------------------------------------
/html_tutorial/file_path/img/googles.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/file_path/img/googles.gif


--------------------------------------------------------------------------------
/html_tutorial/file_path/img/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/file_path/img/logo.jpg


--------------------------------------------------------------------------------
/html_tutorial/file_path/img/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/file_path/img/logo.png


--------------------------------------------------------------------------------
/html_tutorial/file_path/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <title>Learning HTML</title>
  6 |   <!-- External CSS ✔ -->
  7 |   <link rel="stylesheet" href="css/style.css">
  8 |   <!-- Internal CSS -->
  9 |   <!-- <style>
 10 |     h1 {
 11 |       font-size: 100px;
 12 |     }
 13 |   </style> -->
 14 |   <!-- Favicon -->
 15 |   <link rel="icon" type="image/x-icon" href="logo.png">
 16 | </head>
 17 | 
 18 | <body>
 19 |   <!-- <h1 style="background:red; font-size: 100px;text-align: right;">Ali</h1>
 20 |   <h2 style="color:red">Ali</h2>
 21 |   <h3 style="color:red">Ali</h3>
 22 |   <h4 style="color:red">Ali</h4>
 23 |   <h5 style="color:red">Ali</h5>
 24 |   <h6 style="color:red">Ali</h6> -->
 25 |   <!-- <p>Lorem ipsum dolor sit amet, <br>
 26 |     consectetur adipisicing elit. Nam dolore voluptatibus non et saepe recusandae <br>
 27 |     voluptates doloribus
 28 |     necessitatibus ipsum corrupti fuga laudantium aliquam sed, porro iusto aliquid vitae
 29 |     consequuntur excepturi,
 30 |     deserunt, esse eius nemo ea illum blanditiis? Quas ratione repellendus doloribus asp
 31 |     ernatur
 32 |     fugiat eius, excepturi, maxime voluptatum molestias ipsam vitae?</p> -->
 33 |   <!-- <pre>
 34 |       আমাদের ছোট নদী
 35 |       চলে বাঁকে বাঁকে
 36 |       বৈশাখ মাসে তার
 37 |       হাটু জল থাকে। 
 38 |     </pre> -->
 39 |   <!-- <p>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>
 40 |   <p>log<sub>10</sub></p>
 41 |   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 42 |     <b>Debitis blanditiis itaque hic molestiae at</b>, recusandae <strong>voluptas
 43 |       suscipit beatae sed natus reprehenderit</strong>, optio sunt, culpa deserunt! A et, laudantium facere ex soluta
 44 |     incidunt
 45 |     optio nobis <i>recusandae aut obcaecati fuga architecto ipsa</i>! Asperiores perferendis, <em>ullam earum expedita
 46 |       consequuntur</em>
 47 |     minus magnam veniam debitis, <mark>illum libero recusandae architecto voluptatem repellat sit voluptates labore
 48 |       eaque</mark>
 49 |     nihil rem id. Vel voluptates, <small>consectetur quam aliquam,</small> natus <del>distinctio eaque tempora
 50 |       suscipit</del>
 51 |     repellat quo illum
 52 |     animi <u>quibusdam nulla velit eveniet</u> alias hic explicabo. <ins>Soluta recusandae dolores sapiente facilis a
 53 |       quis</ins>
 54 |     nulla
 55 |     sequi aliquam sunt illo dolorum voluptate, animi, at corrupti illum. Quibusdam at necessitatibus rem quos atque
 56 |     earum, tempore id nostrum consequatur quo repellendus, consequuntur, libero excepturi dolore qui voluptatum quis
 57 |     minus nihil corrupti aut error vero tempora ducimus! Aut iste porro voluptates minima explicabo vitae quod et
 58 |     aspernatur iure eveniet, cumque est, nulla non fuga atque labore dolorem blanditiis.
 59 |   </p> -->
 60 |   <!-- <blockquote>
 61 |     Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quasi, labore similique voluptatibus soluta dolorem
 62 |     vel minus a ullam magnam aliquam, provident voluptatem nesciunt esse quae, illum in hic commodi.
 63 |   </blockquote>
 64 |   <q>
 65 |     abore similique voluptatibus soluta dolorem
 66 |   </q>
 67 |   <p><abbr title="Hyper Text Markup Language">HTML</abbr> is not a programming language</p> -->
 68 |   <!-- <address>
 69 |     Wonderful house, <br>
 70 |     Mirpur, Dhaka - 1216, <br>
 71 |     Bangladesh
 72 |   </address> -->
 73 |   <!-- <h1 style="color: #be1053;">Procoder</h1>
 74 |   <h1 style="border: 2px solid rgb(255,226,205);">Procoder</h1> -->
 75 |   <!-- <a href="http://www.google.com/" target="_blank">Google</a> -->
 76 |   <!-- <img src="logo.jpg">
 77 |   <img src="google.w" alt="Google logo">
 78 |   <img src="googles.gif">
 79 |   <img src="" alt=""> -->
 80 |   <!-- <table>
 81 |     <tr>
 82 |       <th>Name</th>
 83 |       <th>Language</th>
 84 |       <th>Year</th>
 85 |     </tr>
 86 |     <tr>
 87 |       <td>HTML</td>
 88 |       <td>CSS</td>
 89 |       <td>JavaScript</td>
 90 |     </tr>
 91 |     <tr>
 92 |       <td>HTML</td>
 93 |       <td>CSS</td>
 94 |       <td>JavaScript</td>
 95 |     </tr>
 96 |     <tr>
 97 |       <td>HTML</td>
 98 |       <td>CSS</td>
 99 |       <td>JavaScript</td>
100 |     </tr>
101 |   </table> -->
102 |   <!-- <ul>
103 |     <li>HTML</li>
104 |     <li>CSS</li>
105 |     <li>JS</li>
106 |   </ul>
107 |   <ol type="I">
108 |     <li>HTML</li>
109 |     <li>CSS</li>
110 |     <li>JS</li>
111 |   </ol>
112 |   <h1>ali</h1>
113 |   <p>procoder</p>
114 |   <span>Learn Technology</span>
115 |   <strong>Web Development</strong> -->
116 |   <h1 id="title">Subscribe</h1>
117 |   <!-- <h1 class="title font-size">Subscribe</h1>
118 |   <h1 class="title">Subscribe</h1> -->
119 |   <!-- <iframe src="https://www.prothomalo.com/" width="600" height="600"></iframe> -->
120 |   <!-- <iframe width="300" height="200" src="https://www.youtube.com/embed/u31qwQUeGuM" title="HTML" frameborder="0"
121 |     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe> -->
122 |   <!-- <iframe
123 |     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58403.623580890235!2d90.32726108274684!3d23.810544423860303!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c0c1c61277db%3A0xc7d18838730e2e59!2z4Kau4Ka_4Kaw4Kaq4KeB4KawLCDgpqLgpr7gppXgpr4!5e0!3m2!1sbn!2sbd!4v1670141412139!5m2!1sbn!2sbd"
124 |     width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
125 |     referrerpolicy="no-referrer-when-downgrade"></iframe> -->
126 |   <!-- <script>
127 |     alert("Hi! JavaScript");
128 | 
129 |   </script> -->
130 |   <!-- <script src="js/app.js"></script> -->
131 |   <img src="../googles.gif" alt="">
132 | </body>
133 | 
134 | </html>


--------------------------------------------------------------------------------
/html_tutorial/file_path/js/app.js:
--------------------------------------------------------------------------------
1 | alert("Hi! JavaScript");
2 | 


--------------------------------------------------------------------------------
/html_tutorial/google.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/google.jpg


--------------------------------------------------------------------------------
/html_tutorial/google.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/google.png


--------------------------------------------------------------------------------
/html_tutorial/googles.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/googles.gif


--------------------------------------------------------------------------------
/html_tutorial/index.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html>
  3 | 
  4 | <head>
  5 |   <meta charset="UTF-8">
  6 |   <meta name="keywords" content="HTML, CSS, JavaScript">
  7 |   <meta name="description" content="Free Web tutorials">
  8 |   <meta name="author" content="John Doe">
  9 |   <!-- <meta http-equiv="refresh" content="1"> -->
 10 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 11 | 
 12 | 
 13 |   <title>Learning HTML</title>
 14 |   <!-- External CSS ✔ -->
 15 |   <link rel="stylesheet" href="style.css">
 16 |   <!-- Internal CSS -->
 17 |   <!-- <style>
 18 |     h1 {
 19 |       font-size: 100px;
 20 |     }
 21 |   </style> -->
 22 |   <!-- Favicon -->
 23 |   <link rel="icon" type="image/x-icon" href="logo.png">
 24 | </head>
 25 | 
 26 | <body>
 27 |   <!-- <h1 style="background:red; font-size: 100px;text-align: right;">Ali</h1>
 28 |   <h2 style="color:red">Ali</h2>
 29 |   <h3 style="color:red">Ali</h3>
 30 |   <h4 style="color:red">Ali</h4>
 31 |   <h5 style="color:red">Ali</h5>
 32 |   <h6 style="color:red">Ali</h6> -->
 33 |   <!-- <p>Lorem ipsum dolor sit amet, <br>
 34 |     consectetur adipisicing elit. Nam dolore voluptatibus non et saepe recusandae <br>
 35 |     voluptates doloribus
 36 |     necessitatibus ipsum corrupti fuga laudantium aliquam sed, porro iusto aliquid vitae
 37 |     consequuntur excepturi,
 38 |     deserunt, esse eius nemo ea illum blanditiis? Quas ratione repellendus doloribus asp
 39 |     ernatur
 40 |     fugiat eius, excepturi, maxime voluptatum molestias ipsam vitae?</p> -->
 41 |   <!-- <pre>
 42 |       আমাদের ছোট নদী
 43 |       চলে বাঁকে বাঁকে
 44 |       বৈশাখ মাসে তার
 45 |       হাটু জল থাকে। 
 46 |     </pre> -->
 47 |   <!-- <p>(a+b)<sup>2</sup> = a<sup>2</sup> + 2ab + b<sup>2</sup></p>
 48 |   <p>log<sub>10</sub></p>
 49 |   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
 50 |     <b>Debitis blanditiis itaque hic molestiae at</b>, recusandae <strong>voluptas
 51 |       suscipit beatae sed natus reprehenderit</strong>, optio sunt, culpa deserunt! A et, laudantium facere ex soluta
 52 |     incidunt
 53 |     optio nobis <i>recusandae aut obcaecati fuga architecto ipsa</i>! Asperiores perferendis, <em>ullam earum expedita
 54 |       consequuntur</em>
 55 |     minus magnam veniam debitis, <mark>illum libero recusandae architecto voluptatem repellat sit voluptates labore
 56 |       eaque</mark>
 57 |     nihil rem id. Vel voluptates, <small>consectetur quam aliquam,</small> natus <del>distinctio eaque tempora
 58 |       suscipit</del>
 59 |     repellat quo illum
 60 |     animi <u>quibusdam nulla velit eveniet</u> alias hic explicabo. <ins>Soluta recusandae dolores sapiente facilis a
 61 |       quis</ins>
 62 |     nulla
 63 |     sequi aliquam sunt illo dolorum voluptate, animi, at corrupti illum. Quibusdam at necessitatibus rem quos atque
 64 |     earum, tempore id nostrum consequatur quo repellendus, consequuntur, libero excepturi dolore qui voluptatum quis
 65 |     minus nihil corrupti aut error vero tempora ducimus! Aut iste porro voluptates minima explicabo vitae quod et
 66 |     aspernatur iure eveniet, cumque est, nulla non fuga atque labore dolorem blanditiis.
 67 |   </p> -->
 68 |   <!-- <blockquote>
 69 |     Lorem ipsum dolor sit amet consectetur adipisicing elit. Maxime quasi, labore similique voluptatibus soluta dolorem
 70 |     vel minus a ullam magnam aliquam, provident voluptatem nesciunt esse quae, illum in hic commodi.
 71 |   </blockquote>
 72 |   <q>
 73 |     abore similique voluptatibus soluta dolorem
 74 |   </q>
 75 |   <p><abbr title="Hyper Text Markup Language">HTML</abbr> is not a programming language</p> -->
 76 |   <!-- <address>
 77 |     Wonderful house, <br>
 78 |     Mirpur, Dhaka - 1216, <br>
 79 |     Bangladesh
 80 |   </address> -->
 81 |   <!-- <h1 style="color: #be1053;">Procoder</h1>
 82 |   <h1 style="border: 2px solid rgb(255,226,205);">Procoder</h1> -->
 83 |   <!-- <a href="http://www.google.com/" target="_blank">Google</a> -->
 84 |   <!-- <img src="logo.jpg">
 85 |   <img src="google.w" alt="Google logo">
 86 |   <img src="googles.gif">
 87 |   <img src="" alt=""> -->
 88 |   <!-- <table>
 89 |     <tr>
 90 |       <th>Name</th>
 91 |       <th>Language</th>
 92 |       <th>Year</th>
 93 |     </tr>
 94 |     <tr>
 95 |       <td>HTML</td>
 96 |       <td>CSS</td>
 97 |       <td>JavaScript</td>
 98 |     </tr>
 99 |     <tr>
100 |       <td>HTML</td>
101 |       <td>CSS</td>
102 |       <td>JavaScript</td>
103 |     </tr>
104 |     <tr>
105 |       <td>HTML</td>
106 |       <td>CSS</td>
107 |       <td>JavaScript</td>
108 |     </tr>
109 |   </table> -->
110 |   <!-- <ul>
111 |     <li>HTML</li>
112 |     <li>CSS</li>
113 |     <li>JS</li>
114 |   </ul>
115 |   <ol type="I">
116 |     <li>HTML</li>
117 |     <li>CSS</li>
118 |     <li>JS</li>
119 |   </ol>
120 |   <h1>ali</h1>
121 |   <p>procoder</p>
122 |   <span>Learn Technology</span>
123 |   <strong>Web Development</strong> -->
124 |   <h1 id="title">Subscribe</h1>
125 |   <!-- <h1 class="title font-size">Subscribe</h1>
126 |   <h1 class="title">Subscribe</h1> -->
127 |   <!-- <iframe src="https://www.prothomalo.com/" width="600" height="600"></iframe> -->
128 |   <!-- <iframe width="300" height="200" src="https://www.youtube.com/embed/u31qwQUeGuM" title="HTML" frameborder="0"
129 |     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe> -->
130 |   <!-- <iframe
131 |     src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d58403.623580890235!2d90.32726108274684!3d23.810544423860303!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755c0c1c61277db%3A0xc7d18838730e2e59!2z4Kau4Ka_4Kaw4Kaq4KeB4KawLCDgpqLgpr7gppXgpr4!5e0!3m2!1sbn!2sbd!4v1670141412139!5m2!1sbn!2sbd"
132 |     width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
133 |     referrerpolicy="no-referrer-when-downgrade"></iframe> -->
134 |   <form action="">
135 |     <input type="text" placeholder="Enter your name">
136 |     <input type="email" placeholder="Enter your email">
137 |     <input type="number" placeholder="Enter your phone">
138 |     <input type="password" placeholder="Enter your password">
139 |     <div>
140 |       <input type="checkbox" checked disabled><label for="">I like code</label>
141 |     </div>
142 |     <div>
143 |       <input type="checkbox"><label for="">I do not like code</label>
144 |     </div>
145 |     <input type="submit" value="Send Message">
146 |   </form>
147 |   <video src="viddeo.mp4" width="300" height="200" controls autoplay></video>
148 |   <audio src=""></audio>
149 |   <!-- <script>
150 |     alert("Hi! JavaScript");
151 | 
152 |   </script> -->
153 |   <!-- <script src="app.js"></script> -->
154 | </body>
155 | 
156 | </html>


--------------------------------------------------------------------------------
/html_tutorial/logo.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/logo.jpg


--------------------------------------------------------------------------------
/html_tutorial/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/logo.png


--------------------------------------------------------------------------------
/html_tutorial/pexels-pixabay-68507.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/pexels-pixabay-68507.jpg


--------------------------------------------------------------------------------
/html_tutorial/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: #eaffcd;
 3 | }
 4 | /* a {
 5 |   color: #000000;
 6 |   font-size: 50px;
 7 |   text-decoration: none;
 8 | } */
 9 | img {
10 |   max-width: 90%;
11 | }
12 | table {
13 |   font-family: "Courier New", Courier, monospace;
14 |   border-collapse: collapse;
15 | }
16 | td,
17 | th {
18 |   border: 1px solid #000000;
19 | }
20 | ul {
21 |   /* list-style-type: circle; */
22 |   /* list-style-type: square; */
23 |   /* list-style-type: disc; */
24 |   list-style-type: none;
25 | }
26 | ol {
27 | }
28 | h1,
29 | p,
30 | span,
31 | strong {
32 |   border: 1px solid red;
33 | }
34 | #title {
35 |   background: red;
36 |   color: #fff;
37 |   padding: 10px;
38 | }
39 | .title {
40 |   font-family: "Courier New", Courier, monospace;
41 | }
42 | .font-size {
43 |   font-size: 20px;
44 | }
45 | iframe {
46 |   border: 0;
47 | }
48 | 


--------------------------------------------------------------------------------
/html_tutorial/viddeo.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/html_tutorial/viddeo.mp4


--------------------------------------------------------------------------------
/layout.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/shovoalways/html-tutorial/6d0d99b020d6972335202a6316da3835fd8abc28/layout.png


--------------------------------------------------------------------------------