├── 001_HTML_Environment_Setup └── index.html ├── 002_HTML_ DOCTYPE └── index.html ├── 003_HTML_Basic └── index.html ├── 004_HTML_Elements └── index.html ├── 005_HTML_Attributes ├── index.html └── logo.png ├── 006_HTML_Headings └── index.html ├── 007_HTML_Paragraph └── index.html ├── 008_HTML_Styles └── index.html ├── 009_HTML_Text_Formatting └── index.html ├── 010_HTML_Quotation └── index.html ├── 011_HTML_Comments └── index.html ├── 012_HTML_CSS ├── index.html └── style.css ├── 013_HTML_JS ├── app.js ├── index.html └── style.css ├── 014_HTML_Links ├── about.html ├── contact.html ├── index.html ├── logo.png └── style.css ├── 015_HTML_ Images ├── img │ ├── giphy.gif │ └── logo.png ├── index.html └── style.css ├── 016_HTML_Favicon ├── img │ ├── giphy.gif │ └── logo.png ├── index.html └── style.css ├── 017_HTML_Tables ├── index.html └── style.css ├── 018_HTML_Lists ├── index.html └── style.css ├── 019_HTML_Block_Inline ├── index.html └── style.css ├── 020_HTML_Class_ID ├── index.html └── style.css ├── 021_HTML_Iframes ├── index.html └── style.css ├── 022_HTML_File_Paths ├── css │ ├── custom.css │ └── new.css ├── index.html ├── live_server │ ├── home.html │ └── test │ │ └── test.html └── style.css ├── 023_HTML_Forms ├── index.html └── style.css ├── 024_HTML_Media ├── index.html └── style.css ├── 025_HTML_Layout ├── index.html └── style.css ├── 026_HTML_Meta ├── index.html └── style.css ├── README.md └── html-final ├── index.html └── style.css /001_HTML_Environment_Setup/index.html: -------------------------------------------------------------------------------- 1 | My first HTML -------------------------------------------------------------------------------- /002_HTML_ DOCTYPE/index.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /003_HTML_Basic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | Learning HTML 😊 new 10 | 11 | 12 | -------------------------------------------------------------------------------- /004_HTML_Elements/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 |

Title

10 |

Learning HTML 😊 new

11 |

HTML is NOT case Sensitive

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /005_HTML_Attributes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 |

Title

10 |

Learning HTML 😊

11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /005_HTML_Attributes/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-Course/18041343a18c06a379854e7fa01dc88a7138f3a8/005_HTML_Attributes/logo.png -------------------------------------------------------------------------------- /006_HTML_Headings/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML is Fun 7 | 8 | 9 | 10 | 11 |

I am Ali Hossain

12 |

Hello H2

13 |

Hello h3

14 |

Hello h4

15 |
Hello h5
16 |
Hello h6
17 | 18 |

I am Ali Hossain

19 |
Hello h6
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /007_HTML_Paragraph/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 |

Hello HTML

10 |

Velit iusto architecto perspiciatis nostrum nemo corporis 11 | molestias culpa?
12 | Incidunt inventore alias ullam quis voluptatem. Distinctio voluptatem similique eum iste hic 13 | suscipit?

14 |

Molestias quam hic, natus veniam, autem similique est 15 | totam temporibus voluptates a sequi eius quasi delectus qui, impedit sed quod voluptatibus libero.

16 |
17 |

Tenetur voluptatum aspernatur sapiente facere velit! Quo 18 | dicta, possimus unde pariatur amet quasi molestiae quisquam assumenda quos! Soluta odio alias nulla recusandae error 19 | eligendi dolores vitae nam provident eum ipsa, ratione officiis ab mollitia necessitatibus unde doloribus autem 20 | corrupti omnis, neque sequi.

21 |

22 | by Emily Dickinson 😍 23 | Because I could not stop for Death,
24 | He kindly stopped for me;
25 | The carriage held but just ourselves
26 | And Immortality. 27 |

28 | 
29 |     Because I could not stop for Death
30 |     
31 |     by Emily Dickinson         😍
32 | 
33 |     Because I could not stop for Death,
34 |     He kindly stopped for me;
35 |     The carriage held but just ourselves
36 |     And Immortality.
37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /008_HTML_Styles/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 11 | 12 |

Hello HTML

13 |

Velit iusto architecto perspiciatis nostrum nemo corporis 14 | molestias culpa?
15 | Incidunt inventore alias ullam quis voluptatem. Distinctio voluptatem similique eum iste hic 16 | suscipit?

17 |

Molestias quam hic, natus veniam, autem similique est 18 | totam temporibus voluptates a sequi eius quasi delectus qui, impedit sed quod voluptatibus libero.

19 |
20 |

Tenetur voluptatum aspernatur sapiente facere velit! Quo 21 | dicta, possimus unde pariatur amet quasi molestiae quisquam assumenda quos! Soluta odio alias nulla recusandae error 22 | eligendi dolores vitae nam provident eum ipsa, ratione officiis ab mollitia necessitatibus unde doloribus autem 23 | corrupti omnis, neque sequi.

24 |

25 | by Emily Dickinson 😍 26 | Because I could not stop for Death,
27 | He kindly stopped for me;
28 | The carriage held but just ourselves
29 | And Immortality. 30 |

31 | 
32 |     Because I could not stop for Death
33 |     
34 |     by Emily Dickinson         😍
35 | 
36 |     Because I could not stop for Death,
37 |     He kindly stopped for me;
38 |     The carriage held but just ourselves
39 |     And Immortality.
40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /009_HTML_Text_Formatting/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dolorem quam asperiores 10 | hic quod 11 | corrupti, alias 12 | necessitatibus quasi. perspiciatis Enim assumenda blanditiis alias perspiciatis 13 | ad ipsam 14 | aliquam 15 | voluptatum et inventore 16 | exercitationem corporis, aperiam animi culpa obcaecati recusandae voluptas quisquam ex debitis tempore, impedit 17 | quibusdam laboriosam earum cum pariatur? Fugiat laboriosam assumenda molestiae. 18 |

19 |

(a+b)2=a2+2ab+b2

20 |

log10(10) = 1

21 |

log10(100) = 2

22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /010_HTML_Quotation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea placeat cumque culpa quod 10 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

11 |
12 | It does not matter how slowly you go as long as you do not stop. 13 | --Confucius 14 |
15 | 16 | It always seems impossible until it's done. --Nelson Mandela 17 | 18 | 19 |

HTML is not a Programming Language

20 | 21 |
22 | Mirpur, 23 | Dhaka 24 | Bangladesh 25 |
26 |

The Mona Lisa is a half-length portrait painting by Italian artist Leonardo da Vinci.

27 | HTML 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /011_HTML_Comments/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 12 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea placeat cumque culpa quod 13 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

14 | 15 | 21 | 22 | 23 | It always seems until it's done. --Nelson Mandela 24 | 25 | 26 |

HTML is not a Programming Language

27 | 28 |
29 | Mirpur, 30 | Dhaka 31 | Bangladesh 32 |
33 |

The Mona Lisa is a half-length portrait painting by Italian artist Leonardo da Vinci.

34 | HTML 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /012_HTML_CSS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 11 | 12 | 13 | 14 | 15 | 18 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea 19 | placeat cumque culpa quod 20 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

21 | 22 | It always seems impossible until it's done. --Nelson Mandela 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /012_HTML_CSS/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /013_HTML_JS/app.js: -------------------------------------------------------------------------------- 1 | alert('External'); 2 | -------------------------------------------------------------------------------- /013_HTML_JS/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 11 | 12 | 15 | 16 | 17 | 18 | 21 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea 22 | placeat cumque culpa quod 23 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

24 | 25 | It always seems impossible until it's done. --Nelson Mandela 26 | 27 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /013_HTML_JS/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /014_HTML_Links/about.html: -------------------------------------------------------------------------------- 1 |

About Page

-------------------------------------------------------------------------------- /014_HTML_Links/contact.html: -------------------------------------------------------------------------------- 1 |

Contact Page

-------------------------------------------------------------------------------- /014_HTML_Links/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 13 |

About

14 |

Contact Us

15 | Procoder BD 16 | 17 | info@yourdomain.com 18 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea 19 | placeat cumque culpa quod 20 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

21 | 22 | It always seems impossible until it's done. --Nelson Mandela 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /014_HTML_Links/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-Course/18041343a18c06a379854e7fa01dc88a7138f3a8/014_HTML_Links/logo.png -------------------------------------------------------------------------------- /014_HTML_Links/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | -------------------------------------------------------------------------------- /015_HTML_ Images/img/giphy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-Course/18041343a18c06a379854e7fa01dc88a7138f3a8/015_HTML_ Images/img/giphy.gif -------------------------------------------------------------------------------- /015_HTML_ Images/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-Course/18041343a18c06a379854e7fa01dc88a7138f3a8/015_HTML_ Images/img/logo.png -------------------------------------------------------------------------------- /015_HTML_ Images/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 13 | Procoder Logo 14 | This is a cat 15 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea 16 | placeat cumque culpa quod 17 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

18 | 19 | It always seems impossible until it's done. --Nelson Mandela 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /015_HTML_ Images/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | img { 5 | width: 200px; 6 | } 7 | -------------------------------------------------------------------------------- /016_HTML_Favicon/img/giphy.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-Course/18041343a18c06a379854e7fa01dc88a7138f3a8/016_HTML_Favicon/img/giphy.gif -------------------------------------------------------------------------------- /016_HTML_Favicon/img/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/shovoalways/HTML-Course/18041343a18c06a379854e7fa01dc88a7138f3a8/016_HTML_Favicon/img/logo.png -------------------------------------------------------------------------------- /016_HTML_Favicon/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML is Fun 7 | 8 | 9 | 10 | 11 | 14 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eaque deleniti eligendi aut, ea 15 | placeat cumque culpa quod 16 | officia ducimus corrupti voluptatem laboriosam ratione dolor temporibus! Possimus tempore vero fugit cupiditate.

17 | 18 | It always seems impossible until it's done. --Nelson Mandela 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /016_HTML_Favicon/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | img { 5 | width: 200px; 6 | } 7 | -------------------------------------------------------------------------------- /017_HTML_Tables/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML is Fun 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 |
SerialLanguageFun
01HTMLYes
02CSSYes
03JSYes
33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |
Serial010203
LanguageHTMLCSSJS
FunYesYesYes
54 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /017_HTML_Tables/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | img { 5 | width: 200px; 6 | } 7 | table { 8 | margin-bottom: 20px; 9 | } 10 | table, 11 | tr, 12 | td, 13 | th { 14 | border: 1px solid #ddd; 15 | border-collapse: collapse; 16 | padding: 10px; 17 | } 18 | -------------------------------------------------------------------------------- /018_HTML_Lists/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML is Fun 7 | 8 | 9 | 10 | 11 | 17 | 18 | 19 | 20 | 26 | 31 | 32 | 39 |
    40 |
  1. HTML
    2. 41 |
  2. CSS
    3. 42 |
  3. JS
    4. 43 |
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /018_HTML_Lists/style.css: -------------------------------------------------------------------------------- 1 | q { 2 | font-size: 25px; 3 | } 4 | img { 5 | width: 200px; 6 | } 7 | ul { 8 | margin: 0 0 15px; 9 | padding: 0; 10 | list-style: none; 11 | text-align: center; 12 | } 13 | ul li { 14 | display: inline-block; 15 | } 16 | ul li a { 17 | color: white; 18 | background: tomato; 19 | padding: 10px 25px; 20 | } 21 | -------------------------------------------------------------------------------- /019_HTML_Block_Inline/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | HTML is Fun 7 | 8 | 9 | 10 | 11 |

Hello

12 |

Hi

13 | 17 | 18 | 24 | 25 | Home 26 | 27 | Hi 28 | Hello 29 | 30 | 34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /019_HTML_Block_Inline/style.css: -------------------------------------------------------------------------------- 1 | h1, 2 | strong, 3 | a { 4 | border: 2px solid tomato; 5 | } 6 | -------------------------------------------------------------------------------- /020_HTML_Class_ID/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 |
11 |

This is title

12 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eos aspernatur tempore voluptate dolores 13 | saepe autem veniam, possimus corrupti beatae.

14 | Read More 15 |
16 |
17 |

This is title

18 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eos aspernatur tempore voluptate dolores 19 | saepe autem veniam, possimus corrupti beatae.

20 | Read More 21 |
22 |
23 |

This is title

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eos aspernatur tempore voluptate dolores 25 | saepe autem veniam, possimus corrupti beatae.

26 | Read More 27 |
28 |
29 |

This is title

30 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Laboriosam eos aspernatur tempore voluptate dolores 31 | saepe autem veniam, possimus corrupti beatae.

32 | Read More 33 |
34 | 35 | 36 | 37 | -------------------------------------------------------------------------------- /020_HTML_Class_ID/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background: tomato; 3 | padding: 10px 20px; 4 | margin-bottom: 20px; 5 | } 6 | .two { 7 | background: aqua; 8 | } 9 | .title { 10 | font-size: 20px; 11 | color: white; 12 | } 13 | #four { 14 | background: greenyellow; 15 | } 16 | -------------------------------------------------------------------------------- /021_HTML_Iframes/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 14 | 15 | 16 | 18 | 19 | 20 | 21 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /021_HTML_Iframes/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background: tomato; 3 | padding: 10px 20px; 4 | margin-bottom: 20px; 5 | } 6 | .two { 7 | background: aqua; 8 | } 9 | .title { 10 | font-size: 20px; 11 | color: white; 12 | } 13 | #four { 14 | background: greenyellow; 15 | } 16 | -------------------------------------------------------------------------------- /022_HTML_File_Paths/css/custom.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: tomato; 3 | } 4 | -------------------------------------------------------------------------------- /022_HTML_File_Paths/css/new.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: teal; 3 | } 4 | -------------------------------------------------------------------------------- /022_HTML_File_Paths/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /022_HTML_File_Paths/live_server/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Home 6 | 7 | 8 | 9 | 10 |

Home

11 | 12 | 13 | -------------------------------------------------------------------------------- /022_HTML_File_Paths/live_server/test/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /022_HTML_File_Paths/style.css: -------------------------------------------------------------------------------- 1 | div { 2 | background: tomato; 3 | padding: 10px 20px; 4 | margin-bottom: 20px; 5 | } 6 | .two { 7 | background: aqua; 8 | } 9 | .title { 10 | font-size: 20px; 11 | color: white; 12 | } 13 | #four { 14 | background: greenyellow; 15 | } 16 | -------------------------------------------------------------------------------- /023_HTML_Forms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 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 | -------------------------------------------------------------------------------- /023_HTML_Forms/style.css: -------------------------------------------------------------------------------- 1 | label { 2 | display: block; 3 | } 4 | .one label { 5 | display: inline-block; 6 | } 7 | -------------------------------------------------------------------------------- /024_HTML_Media/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 | 14 | 15 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /024_HTML_Media/style.css: -------------------------------------------------------------------------------- 1 | video { 2 | width: 500px; 3 | } 4 | -------------------------------------------------------------------------------- /025_HTML_Layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML is Fun 6 | 7 | 8 | 9 | 10 |
11 |

Procoder BD

12 |
13 | 21 |
22 |

Welcome to my Site

23 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, commodi.

24 | Learn More 25 |
26 |
27 |
28 |

This is Title

29 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam rerum eos est natus at nesciunt laborum 30 | temporibus? Labore, nesciunt, eaque ipsum aliquam, neque commodi molestias obcaecati numquam provident nam 31 | debitis.

32 |
33 | 42 |
43 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /025_HTML_Layout/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | header { 7 | background: #e66767; 8 | padding: 20px; 9 | text-align: center; 10 | margin-bottom: 10px; 11 | color: white; 12 | } 13 | nav { 14 | background: #574b90; 15 | padding: 20px; 16 | text-align: center; 17 | margin-bottom: 10px; 18 | } 19 | nav ul { 20 | list-style: none; 21 | } 22 | nav ul li { 23 | display: inline-block; 24 | margin: 0 10px; 25 | } 26 | nav a { 27 | color: #fff; 28 | text-decoration: none; 29 | font-size: 18px; 30 | } 31 | section { 32 | display: flex; 33 | justify-content: space-between; 34 | } 35 | div { 36 | background: #786fa6; 37 | flex-basis: 60%; 38 | padding: 25px 30px; 39 | } 40 | aside { 41 | padding: 25px 30px; 42 | background: #f7d794; 43 | flex-basis: 38%; 44 | } 45 | aside ul { 46 | margin-left: 18px; 47 | margin-top: 10px; 48 | } 49 | footer { 50 | margin-top: 10px; 51 | background: #596275; 52 | padding: 10px; 53 | text-align: center; 54 | color: white; 55 | } 56 | 57 | #hero { 58 | background: #546de5; 59 | padding: 20px; 60 | text-align: center; 61 | margin-bottom: 10px; 62 | color: white; 63 | height: 300px; 64 | flex-direction: column; 65 | align-items: center; 66 | justify-content: center; 67 | } 68 | #hero h1 { 69 | font-size: 25px; 70 | margin-bottom: 10px; 71 | } 72 | #hero a { 73 | background: #262626; 74 | color: #fff; 75 | display: inline-block; 76 | padding: 10px 25px; 77 | margin-top: 15px; 78 | } 79 | -------------------------------------------------------------------------------- /026_HTML_Meta/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | HTML is Fun 11 | 12 | 13 | 14 | 15 |
16 |

Procoder BD

17 |
18 | 26 |
27 |

Welcome to my Site

28 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, commodi.

29 | Learn More 30 |
31 |
32 |
33 |

This is Title

34 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam rerum eos est natus at nesciunt laborum 35 | temporibus? Labore, nesciunt, eaque ipsum aliquam, neque commodi molestias obcaecati numquam provident nam 36 | debitis.

37 |
38 | 47 |
48 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /026_HTML_Meta/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | header { 7 | background: #e66767; 8 | padding: 20px; 9 | text-align: center; 10 | margin-bottom: 10px; 11 | color: white; 12 | } 13 | nav { 14 | background: #574b90; 15 | padding: 20px; 16 | text-align: center; 17 | margin-bottom: 10px; 18 | } 19 | nav ul { 20 | list-style: none; 21 | } 22 | nav ul li { 23 | display: inline-block; 24 | margin: 0 10px; 25 | } 26 | nav a { 27 | color: #fff; 28 | text-decoration: none; 29 | font-size: 18px; 30 | } 31 | section { 32 | display: flex; 33 | justify-content: space-between; 34 | } 35 | div { 36 | background: #786fa6; 37 | flex-basis: 60%; 38 | padding: 25px 30px; 39 | } 40 | aside { 41 | padding: 25px 30px; 42 | background: #f7d794; 43 | flex-basis: 38%; 44 | } 45 | aside ul { 46 | margin-left: 18px; 47 | margin-top: 10px; 48 | } 49 | footer { 50 | margin-top: 10px; 51 | background: #596275; 52 | padding: 10px; 53 | text-align: center; 54 | color: white; 55 | } 56 | 57 | #hero { 58 | background: #546de5; 59 | padding: 20px; 60 | text-align: center; 61 | margin-bottom: 10px; 62 | color: white; 63 | height: 300px; 64 | flex-direction: column; 65 | align-items: center; 66 | justify-content: center; 67 | } 68 | #hero h1 { 69 | font-size: 25px; 70 | margin-bottom: 10px; 71 | } 72 | #hero a { 73 | background: #262626; 74 | color: #fff; 75 | display: inline-block; 76 | padding: 10px 25px; 77 | margin-top: 15px; 78 | } 79 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # HTML-Course 2 | 3 | ## 📝 Description 4 | এই Modern HTML Tutorial Bangla প্লেলিস্ট ফলো করলে আমি আশা করি আপনার আর কোথাও থেকে HTML শিখতে হবে না। আমি এই একটা প্লে-লিস্ট এ ডিটেইলে আপনাকে HTML শিখাব, ইনশাআল্লাহ্‌। তাই আপনি যদি আগ্রিহী হন দেখতে থাকুন। Learn HTML for the first time or brush up your HTML skills and dive in even deeper. EVERY web developer has to know HTML. 5 | 6 | ## ⏳ Prerequisite 7 | You need the following skills to start with 8 | - Basic Computing 9 | - NO HTML knowledge is required at all! 10 | 11 | ## 📚 What You will learn 12 | - What is HTML 13 | - Why HTML 14 | - Basic as well as advanced HTML features 15 | 16 | 17 | 18 | ## Course URL (Playlist)👇 19 | - [Modern HTML Tutorial Bangla](#) 20 | 21 | 22 | ## 🧑‍💻 Contributors 23 | - [@Ali Hossain](https://github.com/shovoalways/) 24 | 25 | 26 | ## 🥰 Follow me 27 | - [@Github](https://github.com/shovoalways/) 28 | - [@Facebook](https://facebook.com/shovoalways/) 29 | - [@Twitter](https://twitter.com/shovoalways/) 30 | - [@Instagram](https://instagram.com/shovoalways/) 31 | -------------------------------------------------------------------------------- /html-final/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | HTML is Fun 11 | 12 | 13 | 14 | 15 |
16 |

Procoder BD

17 |
18 | 26 |
27 |

Welcome to my Site

28 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sint, commodi.

29 | Learn More 30 |
31 |
32 |
33 |

This is Title

34 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam rerum eos est natus at nesciunt laborum 35 | temporibus? Labore, nesciunt, eaque ipsum aliquam, neque commodi molestias obcaecati numquam provident nam 36 | debitis.

37 |
38 | 47 |
48 | 51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /html-final/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | header { 7 | background: #e66767; 8 | padding: 20px; 9 | text-align: center; 10 | margin-bottom: 10px; 11 | color: white; 12 | } 13 | nav { 14 | background: #574b90; 15 | padding: 20px; 16 | text-align: center; 17 | margin-bottom: 10px; 18 | } 19 | nav ul { 20 | list-style: none; 21 | } 22 | nav ul li { 23 | display: inline-block; 24 | margin: 0 10px; 25 | } 26 | nav a { 27 | color: #fff; 28 | text-decoration: none; 29 | font-size: 18px; 30 | } 31 | section { 32 | display: flex; 33 | justify-content: space-between; 34 | } 35 | div { 36 | background: #786fa6; 37 | flex-basis: 60%; 38 | padding: 25px 30px; 39 | } 40 | aside { 41 | padding: 25px 30px; 42 | background: #f7d794; 43 | flex-basis: 38%; 44 | } 45 | aside ul { 46 | margin-left: 18px; 47 | margin-top: 10px; 48 | } 49 | footer { 50 | margin-top: 10px; 51 | background: #596275; 52 | padding: 10px; 53 | text-align: center; 54 | color: white; 55 | } 56 | 57 | #hero { 58 | background: #546de5; 59 | padding: 20px; 60 | text-align: center; 61 | margin-bottom: 10px; 62 | color: white; 63 | height: 300px; 64 | flex-direction: column; 65 | align-items: center; 66 | justify-content: center; 67 | } 68 | #hero h2 { 69 | font-size: 25px; 70 | margin-bottom: 10px; 71 | } 72 | #hero a { 73 | background: #262626; 74 | color: #fff; 75 | display: inline-block; 76 | padding: 10px 25px; 77 | margin-top: 15px; 78 | } 79 | --------------------------------------------------------------------------------