├── .gitignore ├── 800x300.jpg ├── README.md ├── asset_pathing.html ├── attributes.html ├── audio.html ├── audio └── music.mp3 ├── block_vs_inline_elements.html ├── bold.html ├── buttons.html ├── comments.html ├── computer_code.html ├── css ├── mypage.css └── style.css ├── div.html ├── doctype.html ├── dropdowns.html ├── external_css.html ├── external_css2.html ├── favicon.html ├── favicons └── favicon.png ├── form_fields.html ├── forms.html ├── head_elements.html ├── headers.html ├── hello_world.html ├── html5_semantics.html ├── html_entities.html ├── images.html ├── images └── test_image.jpg ├── index.html ├── inline_css.html ├── internal_css.html ├── internal_links.html ├── italics.html ├── line_breaks.html ├── links.html ├── lists.html ├── pages └── test.html ├── paragraph.html ├── readme_images ├── cover_image.png └── download.png ├── relative_link1.html ├── relative_link2.html ├── responsive_design.html ├── semantics.html ├── style.css ├── table.html ├── textarea.html ├── title.html ├── underline.html ├── video.html ├── videos └── bunny.mp4 └── xhtml.html /.gitignore: -------------------------------------------------------------------------------- 1 | # Temporary files 2 | *.swp 3 | *.swo 4 | *.tmp 5 | *~ 6 | *.todo 7 | .vimcache 8 | .vscode 9 | 10 | # Packages 11 | *.7z 12 | *.dmg 13 | *.gz 14 | *.iso 15 | *.jar 16 | *.rar 17 | *.tar 18 | *.zip 19 | 20 | # OS generated files 21 | .DS_Store* 22 | thumbs.db 23 | Thumbs.db 24 | Desktop.ini 25 | -------------------------------------------------------------------------------- /800x300.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/800x300.jpg -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # The Ultimate HTML Developer Course 2 | This is the official source code found in The Ultimate HTML Developer Course. 3 | 4 | ![](readme_images/cover_image.png) 5 | 6 | ## Downloading these files 7 | 8 | ![](readme_images/download.png) 9 | 10 | ## Where you can get this course 11 | 12 | 1. CodingForEverybody.com (Link coming soon) 13 | 2. [Skillshare — Get 2 months premium for free!](https://skl.sh/2YVLixe) 14 | 3. [Udemy.com for $9.99 use Coupon Code CODINGFOREVERYBODY](https://www.udemy.com/the-ultimate-html-developer/?couponCode=CODINGFOREVERYBODY) 15 | -------------------------------------------------------------------------------- /asset_pathing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Asset Pathing 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /attributes.html: -------------------------------------------------------------------------------- 1 |

Hover over me

-------------------------------------------------------------------------------- /audio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Audio 8 | 9 | 10 | 11 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /audio/music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/audio/music.mp3 -------------------------------------------------------------------------------- /block_vs_inline_elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Block vs. Inline Elements 5 | 6 | 7 | 8 | 9 |

10 | Block element #1 and this is a 11 | 12 | link to relative_link1.html 13 |

14 | 15 | 16 |

17 | This is a sibling 18 |

19 | Span #1 20 | Span #2 21 | Span #3 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /bold.html: -------------------------------------------------------------------------------- 1 |

2 | Lorem ipsum dolor 3 | sit amet consectetur 4 | adipisicing elit. Dignissimos, 5 | assumenda maiores illo deserunt itaque 6 | iste vitae sint, est blanditiis 7 | deleniti eaque commodi, quo veniam! Est. 8 |

-------------------------------------------------------------------------------- /buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Buttons 8 | 9 | 10 | 11 |
12 | 13 | 19 | 20 | 21 | 24 | 25 | 26 | 27 |
28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /comments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 |

Your task:

6 | - Create a new .html page with proper structure
7 | - Create a header tag and a paragraph
8 | - Lastly, add a code comment above the header tag about what your content is about
9 | 10 | 11 | 12 |

Welcome to my first web page

13 |

14 | Hello and thank you for joining me in this web viewing experience. 15 |

16 |

17 | Feel free to contact me at twitter.com/@KalobTaulien 18 |

19 | 20 | 21 | 22 | 23 |

Welcome to my second blog post

24 |

25 | Hello and thank you for joining me in this web viewing experience. 26 |

27 |

28 | Feel free to contact me at twitter.com/@KalobTaulien 29 |

30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /computer_code.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Computer Code 5 | 11 | 12 | 13 |

14 | This is going to look like boring regular text
15 | llllllllllllllllllllllllllllllllllllllllllllll
16 | computer_code.html
17 | 10100110101 10 11 101010 101 1011 0101010 10
18 | To copy and paste you would try ctrl + c
19 | This is a var called x
20 |

21 | 
22 | This is line 1
23 |  
24 |            This is line 3
25 | 
26 | This is line 5
27 |
28 | 29 |

30 | 31 | -------------------------------------------------------------------------------- /css/mypage.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #f5f5f5; 3 | } 4 | a { 5 | color: black; 6 | text-decoration: none; 7 | } 8 | input, button { 9 | width: 80%; 10 | border: 1px solid #555; 11 | padding: 5px; 12 | } 13 | .logo { 14 | color: blue; 15 | font-size: 30px; 16 | } -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | border: 10px solid black; 3 | background-color: gainsboro; 4 | } -------------------------------------------------------------------------------- /div.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 |

Paragraph in a div

10 |
11 | 12 |

13 |

14 | Div in a paragraph wont work 15 |
16 |

17 | 18 | 19 | -------------------------------------------------------------------------------- /doctype.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Custom Title 5 | 6 | 7 |

8 | Hey whats up??? This is the BODY. 9 |

10 | 11 | -------------------------------------------------------------------------------- /dropdowns.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Dropdowns 8 | 9 | 10 | 11 |
12 | 13 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /external_css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | External CSS #1 5 | 6 | 7 | 8 | 9 |

External CSS #1

10 | 11 |
12 | Div #1 13 |
14 |
15 | Div #2 16 |
17 |
18 | Div #3 19 |
20 |
21 | Div #4 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /external_css2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | External CSS #2 5 | 6 | 7 | 8 | 9 |

External CSS #2

10 | 11 |
12 | Div #1 13 |
14 |
15 | Div #2 16 |
17 |
18 | Div #3 19 |
20 |
21 | Div #4 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /favicon.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Favicons 8 | 9 | 10 | 11 | Our body here 12 | 13 | -------------------------------------------------------------------------------- /favicons/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/favicons/favicon.png -------------------------------------------------------------------------------- /form_fields.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Input Fields 8 | 9 | 10 | 14 |
15 | 16 |
17 | 18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 | 26 | 1 27 | 2 28 | 3 29 |
30 |
31 | 32 | 33 |
34 |
35 | Email 36 | 37 |
38 |
39 | Hidden 40 | 41 |
42 |
43 | Number 44 | 45 |
46 |
47 | Password: 48 | 49 |
50 |
51 | URL 52 | 53 |
54 |
55 | File Upload 56 | 57 |
58 |
59 | 60 |
61 | 62 | 63 |
64 | 65 | 66 | -------------------------------------------------------------------------------- /forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Forms 8 | 9 | 10 | 14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /head_elements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /headers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Headers 5 | 6 | 7 |

H1 is the biggest header

8 |

H2 is this size

9 |

H3 is this size

10 |

H4 is this size

11 |
H5 is this size
12 |
H6 is the smallest header
13 |

14 | Some regular text in here 15 |

16 | 17 | -------------------------------------------------------------------------------- /hello_world.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Hello World with proper structure!

7 | 8 | -------------------------------------------------------------------------------- /html5_semantics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | HTML5 Semantics 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 |
16 | 17 | 18 |
© 2025
19 | 20 | 21 |

22 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem sequi excepturi in dignissimos molestiae nihil reprehenderit. Libero magnam iure perferendis quod amet architecto dolorum optio. 23 |

24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /html_entities.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Entities 8 | 9 | 10 | 11 | I want to talk about <div>'s 12 | 13 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /images.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Images 5 | 6 | 7 | We want an image here 8 | BROKEN IMAGE TEXT 15 | 16 | 17 | -------------------------------------------------------------------------------- /images/test_image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/images/test_image.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | My Webpage 9 | 10 | 11 | 12 | 13 | 21 | 22 |
23 | 24 | 25 | 26 | 84 | 106 | 107 | 108 |
27 | 28 |
29 |

Welcome to HTML

30 | 31 | April 12, 2030 32 | 33 |
34 | 38 |
39 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam nam recusandae obcaecati 40 | placeat minus numquam inventore fugiat laborum alias molestiae?

41 |

42 | 43 | Read More 44 | 45 |

46 |
47 | 48 |
49 | 50 |
51 |

Welcome to JavaScript

52 | 53 | April 12, 2030 54 | 55 |
56 | Test Image 57 |
58 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam nam recusandae obcaecati 59 | placeat minus numquam inventore fugiat laborum alias molestiae?

60 |

61 | 62 | Read More 63 | 64 |

65 |
66 | 67 |
68 | 69 |
70 |

Welcome to CSS

71 | 72 | April 12, 2030 73 | 74 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ullam nam recusandae obcaecati 75 | placeat minus numquam inventore fugiat laborum alias molestiae?

76 |

77 | 78 | Read More 79 | 80 |

81 |
82 | 83 | 		85 | 105 |
109 |
110 | 111 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /inline_css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Inline CSS 5 | 6 | 7 | 8 |
9 | This is a div 10 |
11 | 12 |
13 | text in here 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /internal_css.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Internal CSS 5 | 22 | 23 | 24 | 25 |

Internal CSS

26 | 27 |
28 | Div #1 29 |
30 |
31 | Div #2 32 |
33 |
34 | Div #3 35 |
36 |
37 | Div #4 38 |
39 | 40 | 41 | -------------------------------------------------------------------------------- /internal_links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Internal Links 5 | 6 | 7 | 8 | Lets link to the bottom of this page. 9 | 10 | Skip to the middle 11 | Skip to the bottom 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 |

|

50 |

|

51 |

|

52 |

|

53 |

|

54 |

|

55 |

|

56 |

|

57 |

|

58 |

|

59 |

|

60 |

|

61 |

|

62 |

|

63 |

|

64 |

|

65 |

|

66 |

|

67 |

|

68 |

|

69 |

|

70 |

|

71 |

|

72 |

|

73 |

|

74 |

This is the middle

75 |

|

76 |

|

77 |

|

78 |

|

79 |

|

80 |

|

81 |

|

82 |

|

83 |

|

84 |

|

85 |

|

86 |

|

87 |

|

88 |

|

89 |

|

90 |

|

91 |

|

92 |

|

93 |

This is the bottom

94 | 95 | -------------------------------------------------------------------------------- /italics.html: -------------------------------------------------------------------------------- 1 | Regular text
2 | Italic
3 | Emphasis -------------------------------------------------------------------------------- /line_breaks.html: -------------------------------------------------------------------------------- 1 |

2 | I am on line 1
3 | I am on line 2 4 | I am on line 3 5 | I am on line 4 6 |

7 |
8 | The space       between here |     | -------------------------------------------------------------------------------- /links.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Links Tutorial 5 | 6 | 7 | 8 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis voluptas, repellendus quisquam impedit rem, cum iste reprehenderit voluptate officia quibusdam accusantium maxime molestiae labore nobis! Laboriosam fugit est nulla amet tempora natus accusantium. In esse beatae soluta exercitationem vitae reiciendis amet corporis cupiditate mollitia reprehenderit nihil sit, quia porro aut. 9 |
10 |
11 | 12 | To read more, 13 | 14 | click here. 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /lists.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Lists 5 | 6 | 7 | 8 |

Unordered List

9 | 10 | 15 | 16 |

Ordered List

17 | 18 |
    19 |
  1. List Item
    2. 20 |
  2. List Item
    3. 21 |
  3. List Item
    4. 22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /pages/test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | We need to access an image and CSS from a different folder 12 | 13 | 14 | -------------------------------------------------------------------------------- /paragraph.html: -------------------------------------------------------------------------------- 1 |

2 | Hello World 3 |

-------------------------------------------------------------------------------- /readme_images/cover_image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/readme_images/cover_image.png -------------------------------------------------------------------------------- /readme_images/download.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/readme_images/download.png -------------------------------------------------------------------------------- /relative_link1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Relative Link Page #1 5 | 6 | 7 |

This is page #1

8 | 9 | Go to page #2 10 | 11 | 12 | -------------------------------------------------------------------------------- /relative_link2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Relative Link Page #1 5 | 6 | 7 |

This is page #2

8 | 9 | Go to page #1 10 | 11 | 12 | -------------------------------------------------------------------------------- /responsive_design.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Responsive Design 8 | 9 | 10 | 11 |
12 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas ea tempore, officiis dolorem sequi deleniti, illum sed repellat voluptas sit itaque. Quaerat tempora delectus hic, corrupti nemo voluptatem laudantium doloribus cum assumenda consequatur eos in nulla rem alias aliquam? Accusamus, quo explicabo sapiente veritatis necessitatibus non ipsum nemo accusantium illum neque exercitationem rem porro. Nesciunt rerum id, quidem voluptatum adipisci soluta, veniam voluptatem fuga eligendi officia vitae? Maxime, aliquam. Quasi nisi enim similique numquam, neque aliquam omnis laborum sequi, ratione natus veniam obcaecati ipsam. At consequuntur eum blanditiis aliquid, molestiae exercitationem quisquam id fuga quia, iusto, laborum facilis perspiciatis quas! 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /semantics.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Semantics 5 | 6 | 7 | 8 | Darth Vader shouted, "NOOOOOOOOOOOOOOOOOOOOOOO!!!!!" 9 |
10 | Really?! vs Really?! 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: black; 3 | } 4 | h1 { 5 | background-color: white; 6 | color: red; 7 | } 8 | .font-red { 9 | color: red; 10 | } 11 | #unique { 12 | border: 5px solid black; 13 | } 14 | .bg-blue { background-color: blue; } 15 | .bg-yellow { background-color: yellow; } -------------------------------------------------------------------------------- /table.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tables 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 |
ColorSubcolorHex valueRGB value
BlueBaby Blue#unknownrgba(0,0,0)
Navy Blue#unknownrgba(0,0,0)
Ocean Blue#unknownrgba(0,0,0)
32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 |
Column 1Column 2Column 3Column 4
Row 1 Cell #1Row 1 Cell #3Row 1 Cell #4
Row 2 Cell #1Row 2 Cell #2Row 2 Cell #3
Row 3 Cell #1Row 3 Cell #3Row 3 Cell #4
Row 4 Cell #3Row 4 Cell #4
Footer Title 1Footer Title 2Footer Title 3Footer Title 4
74 | 75 | 76 | -------------------------------------------------------------------------------- /textarea.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Textarea 8 | 9 | 10 | 14 |
15 | 16 | 19 | 33 | 34 | 35 | 36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /title.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Custom Title 4 | 5 | 6 |

7 | Hey whats up??? This is the BODY. 8 |

9 | 10 | -------------------------------------------------------------------------------- /underline.html: -------------------------------------------------------------------------------- 1 |

2 | Text test is an underline test 3 |

-------------------------------------------------------------------------------- /video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Videos 8 | 9 | 10 | 17 | 18 | -------------------------------------------------------------------------------- /videos/bunny.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodingForEverybody/the-ultimate-html-developer/4566cc89761d96ca30ad952b556e4cc782bb92e1/videos/bunny.mp4 -------------------------------------------------------------------------------- /xhtml.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | XHTML 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 |
13 | 14 |

15 | 16 | 17 | Underlined and empahsized in a paragraph 18 | 19 | 20 |

21 | 22 | 23 | 24 | --------------------------------------------------------------------------------