├── .gitignore ├── Introduction to CSS ├── Lesson 1 │ ├── Fonts │ │ ├── Booter - Zero Zero.woff │ │ └── Booter - Zero Zero.woff2 │ ├── Images │ │ ├── Album 1.png │ │ ├── Album 2.png │ │ ├── Album 3.png │ │ ├── Album 4.png │ │ ├── Band Members.png │ │ ├── Cofee.png │ │ ├── Facebook Logo.png │ │ ├── Header Background.jpg │ │ ├── Shirt.png │ │ ├── Spotify Logo.png │ │ └── YouTube Logo.png │ ├── about.html │ ├── index.html │ ├── store.html │ └── styles.css ├── Lesson 2 │ ├── Fonts │ │ ├── Booter - Zero Zero.woff │ │ └── Booter - Zero Zero.woff2 │ ├── Images │ │ ├── Album 1.png │ │ ├── Album 2.png │ │ ├── Album 3.png │ │ ├── Album 4.png │ │ ├── Band Members.png │ │ ├── Cofee.png │ │ ├── Facebook Logo.png │ │ ├── Header Background.jpg │ │ ├── Shirt.png │ │ ├── Spotify Logo.png │ │ └── Youtube Logo.png │ ├── about.html │ ├── index.html │ ├── store.html │ └── styles.css └── Lesson 3 │ ├── Fonts │ ├── Booter - Zero Zero.woff │ └── Booter - Zero Zero.woff2 │ ├── Images │ ├── Album 1.png │ ├── Album 2.png │ ├── Album 3.png │ ├── Album 4.png │ ├── Band Members.png │ ├── Cofee.png │ ├── Facebook Logo.png │ ├── Header Background.jpg │ ├── Shirt.png │ ├── Spotify Logo.png │ └── Youtube Logo.png │ ├── about.html │ ├── index.html │ ├── store.html │ └── styles.css ├── Introduction to HTML ├── Lesson 1 │ └── index.html ├── Lesson 2 │ ├── Images │ │ ├── Band Members.png │ │ ├── Facebook Logo.png │ │ ├── Spotify Logo.png │ │ └── YouTube Logo.png │ └── about.html ├── Lesson 3 │ ├── Images │ │ ├── Band Members.png │ │ ├── Facebook Logo.png │ │ ├── Spotify Logo.png │ │ └── YouTube Logo.png │ ├── about.html │ └── index.html └── Lesson 4 │ ├── Images │ ├── Album 1.png │ ├── Album 2.png │ ├── Album 3.png │ ├── Album 4.png │ ├── Band Members.png │ ├── Cofee.png │ ├── Facebook Logo.png │ ├── Shirt.png │ ├── Spotify Logo.png │ └── YouTube Logo.png │ ├── about.html │ ├── index.html │ └── store.html ├── Introduction to JavaScript └── Lesson 1 │ ├── Fonts │ ├── Booter - Zero Zero.woff │ └── Booter - Zero Zero.woff2 │ ├── Images │ ├── Album 1.png │ ├── Album 2.png │ ├── Album 3.png │ ├── Album 4.png │ ├── Band Members.png │ ├── Cofee.png │ ├── Facebook Logo.png │ ├── Header Background.jpg │ ├── Shirt.png │ ├── Spotify Logo.png │ └── Youtube Logo.png │ ├── about.html │ ├── index.html │ ├── store.html │ ├── store.js │ └── styles.css └── README.md /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Fonts/Booter - Zero Zero.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Fonts/Booter - Zero Zero.woff -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Fonts/Booter - Zero Zero.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Fonts/Booter - Zero Zero.woff2 -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Album 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Album 1.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Album 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Album 2.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Album 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Album 3.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Album 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Album 4.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Cofee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Cofee.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Header Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Header Background.jpg -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Shirt.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/Images/YouTube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 1/Images/YouTube Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | About 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 |

ABOUT

22 | 23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

24 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

25 |
26 | 27 | 49 | 50 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 |

TOURS

26 |
27 |
28 | JUL 16 29 | <> 30 | DETROIT, MI 31 | <> 32 | DTE ENERGY MUSIC THEATRE 33 | <> 34 | 35 |
36 |
37 |
38 | JUL 19 39 | <> 40 | TORONTO, ON 41 | <> 42 | BUDWEISER STAGE 43 | <> 44 | 45 |
46 |
47 |
48 | JUL 22 49 | <> 50 | BRISTOW, VA 51 | <> 52 | JIGGY LUBE LIVE 53 | <> 54 | 55 |
56 |
57 |
58 | JUL 29 59 | <> 60 | PHOENIX, AZ 61 | <> 62 | AK-CHIN PAVILION 63 | <> 64 | 65 |
66 |
67 |
68 | AUG 2 69 | <> 70 | LAS VEGAS, NV 71 | <> 72 | T-MOBILE ARENA 73 | <> 74 | 75 |
76 |
77 |
78 | AUG 7 79 | <> 80 | CONCORD, CA 81 | <> 82 | CONCORD PAVILION 83 | <> 84 | 85 |
86 |
87 |
88 | 108 | 109 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/store.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | Store 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 |
19 |
20 |

MUSIC

21 |
22 |
23 | Album 1 24 |
25 | 26 |
27 | $12.99 28 | 29 |
30 |
31 |
32 |
33 | Album 2 34 |
35 | 36 |
37 | $14.99 38 | 39 |
40 |
41 |
42 |
43 | Album 3 44 |
45 | 46 |
47 | $9.99 48 | 49 |
50 |
51 |
52 |
53 | Album 4 54 |
55 | 56 |
57 | $19.99 58 | 59 |
60 |
61 |
62 |
63 |

MERCH

64 |
65 |
66 | T-Shirt 67 |
68 | 69 |
70 | $19.99 71 | 72 |
73 |
74 |
75 |
76 | Cofee Cup 77 |
78 | 79 |
80 | $6.99 81 | 82 |
83 |
84 |
85 |
86 |

CART

87 |
88 | ITEM 89 | <> 90 | PRICE 91 | <> 92 | QUANTITY 93 |
94 |
95 | 96 | T-Shirt 97 | <> 98 | $19.99 99 | <> 100 | 101 | 102 |
103 |
104 | 105 | Album 3 106 | <> 107 | $9.99 108 | <> 109 | 110 | 111 |
112 |
113 |
114 | Total 115 | $39.97 116 |
117 |
118 | 119 |
120 |
121 | 141 | 142 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 1/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Raleway:300,400'); 2 | @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); 3 | 4 | @font-face { 5 | font-family: "Booter - Zero Zero"; 6 | src: url("Fonts/Booter - Zero Zero.woff") format("woff"), 7 | url("Fonts/Booter - Zero Zero.woff2") format("woff2"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | font-family: Raleway; 15 | color: #777; 16 | } 17 | 18 | html, body { 19 | margin: 0; 20 | padding: 0; 21 | } 22 | 23 | .nav ul { 24 | margin: 0; 25 | } 26 | 27 | .nav li { 28 | display: inline; 29 | } 30 | 31 | .nav a { 32 | display: inline-block; 33 | padding: .5em; 34 | color: white; 35 | text-decoration: none; 36 | } 37 | 38 | .main-nav { 39 | text-align: center; 40 | font-size: 1.1em; 41 | font-weight: lighter; 42 | border-bottom: 1px solid rgba(255, 255, 255, .3) 43 | } 44 | 45 | .main-nav li { 46 | padding: 0 5%; 47 | } 48 | 49 | .nav a:hover { 50 | background-color: rgba(255, 255, 255, .3) 51 | } 52 | 53 | .main-header { 54 | background-color: rgba(0, 0, 0, .6); 55 | background-image: url("Images/Header Background.jpg"); 56 | background-blend-mode: multiply; 57 | background-size: cover; 58 | padding-bottom: 30px; 59 | } 60 | 61 | .band-name { 62 | text-align: center; 63 | margin: 0; 64 | font-size: 4em; 65 | font-family: "Booter - Zero Zero"; 66 | font-weight: normal; 67 | color: white; 68 | } 69 | 70 | .band-name-large { 71 | font-size: 8em; 72 | } 73 | 74 | .content-section { 75 | margin: 1em; 76 | } 77 | 78 | .container { 79 | max-width: 900px; 80 | margin: 0 auto; 81 | padding: 0 1.5em; 82 | } 83 | .section-header { 84 | font-family: "Metal Mania"; 85 | font-weight: normal; 86 | color: #333; 87 | text-align: center; 88 | font-size: 2.5em; 89 | } 90 | 91 | .about-band-image { 92 | float: left; 93 | height: 200px; 94 | width: 200px; 95 | margin: 15px; 96 | border-radius: 50%; 97 | } 98 | 99 | .main-footer { 100 | background-color: #56CCF2; 101 | color: white; 102 | padding: .25em 0; 103 | } 104 | 105 | .main-footer-container { 106 | display: flex; 107 | align-items: center; 108 | } 109 | 110 | .main-footer-container ul { 111 | flex-grow: 1; 112 | text-align: end; 113 | } 114 | 115 | .footer-nav li { 116 | padding: 0 .5em; 117 | } 118 | 119 | .footer-nav img { 120 | width: 30px; 121 | height: 30px; 122 | } -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Fonts/Booter - Zero Zero.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Fonts/Booter - Zero Zero.woff -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Fonts/Booter - Zero Zero.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Fonts/Booter - Zero Zero.woff2 -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Album 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Album 1.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Album 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Album 2.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Album 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Album 3.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Album 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Album 4.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Cofee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Cofee.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Header Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Header Background.jpg -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Shirt.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/Images/Youtube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 2/Images/Youtube Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | About 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 |

ABOUT

22 | 23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

24 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

25 |
26 | 27 | 49 | 50 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 | 22 |
23 |
24 |

TOURS

25 |
26 |
27 | JUL 16 28 | DETROIT, MI 29 | DTE ENERGY MUSIC THEATRE 30 | 31 |
32 |
33 | JUL 19 34 | TORONTO, ON 35 | BUDWEISER STAGE 36 | 37 |
38 |
39 | JUL 22 40 | BRISTOW, VA 41 | JIGGY LUBE LIVE 42 | 43 |
44 |
45 | JUL 29 46 | PHOENIX, AZ 47 | AK-CHIN PAVILION 48 | 49 |
50 |
51 | AUG 2 52 | LAS VEGAS, NV 53 | T-MOBILE ARENA 54 | 55 |
56 |
57 | AUG 7 58 | CONCORD, CA 59 | CONCORD PAVILION 60 | 61 |
62 |
63 |
64 | 86 | 87 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/store.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | Store 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 |
19 |
20 |

MUSIC

21 |
22 |
23 | Album 1 24 |
25 | 26 |
27 | $12.99 28 | 29 |
30 |
31 |
32 |
33 | Album 2 34 |
35 | 36 |
37 | $14.99 38 | 39 |
40 |
41 |
42 |
43 | Album 3 44 |
45 | 46 |
47 | $9.99 48 | 49 |
50 |
51 |
52 |
53 | Album 4 54 |
55 | 56 |
57 | $19.99 58 | 59 |
60 |
61 |
62 |
63 |

MERCH

64 |
65 |
66 | T-Shirt 67 |
68 | 69 |
70 | $19.99 71 | 72 |
73 |
74 |
75 |
76 | Cofee Cup 77 |
78 | 79 |
80 | $6.99 81 | 82 |
83 |
84 |
85 |
86 |

CART

87 |
88 | ITEM 89 | <> 90 | PRICE 91 | <> 92 | QUANTITY 93 |
94 |
95 | 96 | T-Shirt 97 | <> 98 | $19.99 99 | <> 100 | 101 | 102 |
103 |
104 | 105 | Album 3 106 | <> 107 | $9.99 108 | <> 109 | 110 | 111 |
112 |
113 |
114 | Total 115 | $39.97 116 |
117 |
118 | 119 |
120 |
121 | 141 | 142 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 2/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Raleway:300,400'); 2 | @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); 3 | 4 | @font-face { 5 | font-family: "Booter - Zero Zero"; 6 | src: url("Fonts/Booter - Zero Zero.woff") format("woff"), 7 | url("Fonts/Booter - Zero Zero.woff2") format("woff2"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | font-family: Raleway; 15 | color: #777; 16 | } 17 | 18 | html, body { 19 | margin: 0; 20 | padding: 0; 21 | min-height: 100%; 22 | } 23 | 24 | .nav ul { 25 | margin: 0; 26 | } 27 | 28 | .nav li { 29 | display: inline; 30 | } 31 | 32 | .nav a { 33 | display: inline-block; 34 | padding: .5em; 35 | color: white; 36 | text-decoration: none; 37 | } 38 | 39 | .main-nav { 40 | text-align: center; 41 | font-size: 1.1em; 42 | font-weight: lighter; 43 | border-bottom: 1px solid rgba(255, 255, 255, .3) 44 | } 45 | 46 | .main-nav li { 47 | padding: 0 5%; 48 | } 49 | 50 | .nav a:hover { 51 | background-color: rgba(255, 255, 255, .3) 52 | } 53 | 54 | .main-header { 55 | background-color: rgba(0, 0, 0, .6); 56 | background-image: url("Images/Header Background.jpg"); 57 | background-blend-mode: multiply; 58 | background-size: cover; 59 | padding-bottom: 30px; 60 | } 61 | 62 | .band-name { 63 | text-align: center; 64 | margin: 0; 65 | font-size: 4em; 66 | font-family: "Booter - Zero Zero"; 67 | font-weight: normal; 68 | color: white; 69 | } 70 | 71 | .band-name-large { 72 | font-size: 8em; 73 | } 74 | 75 | .content-section { 76 | margin: 1em; 77 | } 78 | 79 | .container { 80 | max-width: 900px; 81 | margin: 0 auto; 82 | padding: 0 1.5em; 83 | } 84 | .section-header { 85 | font-family: "Metal Mania"; 86 | font-weight: normal; 87 | color: #333; 88 | text-align: center; 89 | font-size: 2.5em; 90 | } 91 | 92 | .about-band-image { 93 | float: left; 94 | height: 200px; 95 | width: 200px; 96 | margin: 15px; 97 | border-radius: 50%; 98 | } 99 | 100 | .main-footer { 101 | background-color: #56CCF2; 102 | color: white; 103 | padding: .25em 0; 104 | } 105 | 106 | .main-footer-container { 107 | display: flex; 108 | align-items: center; 109 | } 110 | 111 | .main-footer-container ul { 112 | flex-grow: 1; 113 | text-align: end; 114 | } 115 | 116 | .footer-nav li { 117 | padding: 0 .5em; 118 | } 119 | 120 | .footer-nav img { 121 | width: 30px; 122 | height: 30px; 123 | } 124 | 125 | .btn { 126 | text-align: center; 127 | vertical-align: middle; 128 | padding: .67em .67em; 129 | cursor: pointer; 130 | } 131 | 132 | .btn-header { 133 | margin: .5em 15% 2em 15%; 134 | color: white; 135 | border: 2px solid #2D9CDB; 136 | background-color: rgba(255, 255, 255, .1); 137 | border-radius: 0; 138 | font-size: 1.5em; 139 | font-weight: lighter; 140 | padding-left: 2em; 141 | padding-right: 2em; 142 | } 143 | 144 | .btn-header:hover { 145 | background-color: rgba(255, 255, 255, .3); 146 | } 147 | 148 | .btn-play { 149 | display: block; 150 | margin: 0 auto; 151 | color: #2D9CDB; 152 | font-size: 4em; 153 | border-radius: 50%; 154 | width: 100px; 155 | height: 100px; 156 | padding: 0; 157 | text-align: center; 158 | } 159 | 160 | .btn-primary { 161 | color: white; 162 | background-color: #56CCF2; 163 | border: none; 164 | border-radius: .3em; 165 | font-weight: bold; 166 | } 167 | 168 | .btn-primary:hover { 169 | background-color: #2D9CDB; 170 | } 171 | 172 | .tour-row { 173 | border-bottom: 1px solid black; 174 | padding-bottom: 1em; 175 | margin-bottom: 1em; 176 | } 177 | 178 | .tour-row:last-child { 179 | border: none; 180 | } 181 | 182 | .tour-item { 183 | display: inline-block; 184 | padding-right: .5em; 185 | } 186 | 187 | .tour-date { 188 | color: #555; 189 | width: 11%; 190 | font-weight: bold; 191 | } 192 | 193 | .tour-city { 194 | width: 24%; 195 | } 196 | 197 | .tour-arena { 198 | width: 42%; 199 | } 200 | 201 | .tour-btn { 202 | max-width: 19%; 203 | } -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Fonts/Booter - Zero Zero.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Fonts/Booter - Zero Zero.woff -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Fonts/Booter - Zero Zero.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Fonts/Booter - Zero Zero.woff2 -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Album 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Album 1.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Album 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Album 2.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Album 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Album 3.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Album 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Album 4.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Cofee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Cofee.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Header Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Header Background.jpg -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Shirt.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/Images/Youtube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to CSS/Lesson 3/Images/Youtube Logo.png -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | About 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 |

ABOUT

22 | 23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

24 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

25 |
26 | 27 | 49 | 50 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 | 22 |
23 |
24 |

TOURS

25 |
26 |
27 | JUL 16 28 | DETROIT, MI 29 | DTE ENERGY MUSIC THEATRE 30 | 31 |
32 |
33 | JUL 19 34 | TORONTO, ON 35 | BUDWEISER STAGE 36 | 37 |
38 |
39 | JUL 22 40 | BRISTOW, VA 41 | JIGGY LUBE LIVE 42 | 43 |
44 |
45 | JUL 29 46 | PHOENIX, AZ 47 | AK-CHIN PAVILION 48 | 49 |
50 |
51 | AUG 2 52 | LAS VEGAS, NV 53 | T-MOBILE ARENA 54 | 55 |
56 |
57 | AUG 7 58 | CONCORD, CA 59 | CONCORD PAVILION 60 | 61 |
62 |
63 |
64 | 86 | 87 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/store.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | Store 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 |
20 |

MUSIC

21 |
22 |
23 | Album 1 24 | 25 |
26 | $12.99 27 | 28 |
29 |
30 |
31 | Album 2 32 | 33 |
34 | $14.99 35 | 36 |
37 |
38 |
39 | Album 3 40 | 41 |
42 | $9.99 43 | 44 |
45 |
46 |
47 | Album 4 48 | 49 |
50 | $19.99 51 | 52 |
53 |
54 |
55 |
56 |
57 |

MERCH

58 |
59 |
60 | T-Shirt 61 | 62 |
63 | $19.99 64 | 65 |
66 |
67 |
68 | Coffee Cup 69 | 70 |
71 | $6.99 72 | 73 |
74 |
75 |
76 |
77 |
78 |

CART

79 |
80 | ITEM 81 | PRICE 82 | QUANTITY 83 |
84 |
85 |
86 |
87 | 88 | T-Shirt 89 |
90 | $19.99 91 |
92 | 93 | 94 |
95 |
96 |
97 |
98 | 99 | Album 3 100 |
101 | $9.99 102 |
103 | 104 | 105 |
106 |
107 |
108 |
109 | Total 110 | $39.97 111 |
112 | 113 |
114 | 136 | 137 | -------------------------------------------------------------------------------- /Introduction to CSS/Lesson 3/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); 2 | @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); 3 | 4 | @font-face { 5 | font-family: "Booter - Zero Zero"; 6 | src: url("Fonts/Booter - Zero Zero.woff") format("woff"), 7 | url("Fonts/Booter - Zero Zero.woff2") format("woff2"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | font-family: Raleway; 15 | color: #777; 16 | } 17 | 18 | html, body { 19 | margin: 0; 20 | padding: 0; 21 | min-height: 100%; 22 | } 23 | 24 | .nav ul { 25 | margin: 0; 26 | } 27 | 28 | .nav li { 29 | display: inline; 30 | } 31 | 32 | .nav a { 33 | display: inline-block; 34 | padding: .5em; 35 | color: white; 36 | text-decoration: none; 37 | } 38 | 39 | .main-nav { 40 | text-align: center; 41 | font-size: 1.1em; 42 | font-weight: lighter; 43 | border-bottom: 1px solid rgba(255, 255, 255, .3) 44 | } 45 | 46 | .main-nav li { 47 | padding: 0 5%; 48 | } 49 | 50 | .nav a:hover { 51 | background-color: rgba(255, 255, 255, .3) 52 | } 53 | 54 | .main-header { 55 | background-color: rgba(0, 0, 0, .6); 56 | background-image: url("Images/Header Background.jpg"); 57 | background-blend-mode: multiply; 58 | background-size: cover; 59 | padding-bottom: 30px; 60 | } 61 | 62 | .band-name { 63 | text-align: center; 64 | margin: 0; 65 | font-size: 4em; 66 | font-family: "Booter - Zero Zero"; 67 | font-weight: normal; 68 | color: white; 69 | } 70 | 71 | .band-name-large { 72 | font-size: 8em; 73 | } 74 | 75 | .content-section { 76 | margin: 1em; 77 | } 78 | 79 | .container { 80 | max-width: 900px; 81 | margin: 0 auto; 82 | padding: 0 1.5em; 83 | } 84 | .section-header { 85 | font-family: "Metal Mania"; 86 | font-weight: normal; 87 | color: #333; 88 | text-align: center; 89 | font-size: 2.5em; 90 | } 91 | 92 | .about-band-image { 93 | float: left; 94 | height: 200px; 95 | width: 200px; 96 | margin: 15px; 97 | border-radius: 50%; 98 | } 99 | 100 | .main-footer { 101 | background-color: #56CCF2; 102 | color: white; 103 | padding: .25em 0; 104 | } 105 | 106 | .main-footer-container { 107 | display: flex; 108 | align-items: center; 109 | } 110 | 111 | .main-footer-container ul { 112 | flex-grow: 1; 113 | text-align: end; 114 | } 115 | 116 | .footer-nav li { 117 | padding: 0 .5em; 118 | } 119 | 120 | .footer-nav img { 121 | width: 30px; 122 | height: 30px; 123 | } 124 | 125 | .btn { 126 | text-align: center; 127 | vertical-align: middle; 128 | padding: .67em .67em; 129 | cursor: pointer; 130 | } 131 | 132 | .btn-header { 133 | margin: .5em 15% 2em 15%; 134 | color: white; 135 | border: 2px solid #2D9CDB; 136 | background-color: rgba(255, 255, 255, .1); 137 | border-radius: 0; 138 | font-size: 1.5em; 139 | font-weight: lighter; 140 | padding-left: 2em; 141 | padding-right: 2em; 142 | } 143 | 144 | .btn-header:hover { 145 | background-color: rgba(255, 255, 255, .3); 146 | } 147 | 148 | .btn-play { 149 | display: block; 150 | margin: 0 auto; 151 | color: #2D9CDB; 152 | font-size: 4em; 153 | border-radius: 50%; 154 | width: 100px; 155 | height: 100px; 156 | padding: 0; 157 | text-align: center; 158 | } 159 | 160 | .btn-primary { 161 | color: white; 162 | background-color: #56CCF2; 163 | border: none; 164 | border-radius: .3em; 165 | font-weight: bold; 166 | } 167 | 168 | .btn-primary:hover { 169 | background-color: #2D9CDB; 170 | } 171 | 172 | .tour-row { 173 | border-bottom: 1px solid black; 174 | padding-bottom: 1em; 175 | margin-bottom: 1em; 176 | } 177 | 178 | .tour-row:last-child { 179 | border: none; 180 | } 181 | 182 | .tour-item { 183 | display: inline-block; 184 | padding-right: .5em; 185 | } 186 | 187 | .tour-date { 188 | color: #555; 189 | width: 11%; 190 | font-weight: bold; 191 | } 192 | 193 | .tour-city { 194 | width: 24%; 195 | } 196 | 197 | .tour-arena { 198 | width: 42%; 199 | } 200 | 201 | .tour-btn { 202 | max-width: 19%; 203 | } 204 | 205 | .shop-item { 206 | margin: 30px; 207 | } 208 | 209 | .shop-item-title { 210 | display: block; 211 | width: 100%; 212 | text-align: center; 213 | font-weight: bold; 214 | font-size: 1.5em; 215 | color: #333; 216 | margin-bottom: 15px; 217 | } 218 | 219 | .shop-item-image { 220 | height: 250px; 221 | } 222 | 223 | .shop-item-details { 224 | display: flex; 225 | align-items: center; 226 | padding: 5px; 227 | } 228 | 229 | .shop-item-price { 230 | flex-grow: 1; 231 | color: #333; 232 | } 233 | 234 | .shop-items { 235 | display: flex; 236 | flex-wrap: wrap; 237 | justify-content: space-around; 238 | } 239 | 240 | .cart-header { 241 | font-weight: bold; 242 | font-size: 1.25em; 243 | color: #333; 244 | } 245 | 246 | .cart-column { 247 | display: flex; 248 | align-items: center; 249 | border-bottom: 1px solid black; 250 | margin-right: 1.5em; 251 | padding-bottom: 10px; 252 | margin-top: 10px; 253 | } 254 | 255 | .cart-row { 256 | display: flex; 257 | } 258 | 259 | .cart-item { 260 | width: 45%; 261 | } 262 | 263 | .cart-price { 264 | width: 20%; 265 | font-size: 1.2em; 266 | color: #333; 267 | } 268 | 269 | .cart-quantity { 270 | width: 35%; 271 | } 272 | 273 | .cart-item-title { 274 | color: #333; 275 | margin-left: .5em; 276 | font-size: 1.2em; 277 | } 278 | 279 | .cart-item-image { 280 | width: 75px; 281 | height: auto; 282 | border-radius: 10px; 283 | } 284 | 285 | .btn-danger { 286 | color: white; 287 | background-color: #EB5757; 288 | border: none; 289 | border-radius: .3em; 290 | font-weight: bold; 291 | } 292 | 293 | .btn-danger:hover { 294 | background-color: #CC4C4C; 295 | } 296 | 297 | .cart-quantity-input { 298 | height: 34px; 299 | width: 50px; 300 | border-radius: 5px; 301 | border: 1px solid #56CCF2; 302 | background-color: #eee; 303 | color: #333; 304 | padding: 0; 305 | text-align: center; 306 | font-size: 1.2em; 307 | margin-right: 25px; 308 | } 309 | 310 | .cart-row:last-child { 311 | border-bottom: 1px solid black; 312 | } 313 | 314 | .cart-row:last-child .cart-column { 315 | border: none; 316 | } 317 | 318 | .cart-total { 319 | text-align: end; 320 | margin-top: 10px; 321 | margin-right: 10px; 322 | } 323 | 324 | .cart-total-title { 325 | font-weight: bold; 326 | font-size: 1.5em; 327 | color: black; 328 | margin-right: 20px; 329 | } 330 | 331 | .cart-total-price { 332 | color: #333; 333 | font-size: 1.1em; 334 | } 335 | 336 | .btn-purchase { 337 | display: block; 338 | margin: 40px auto 80px auto; 339 | font-size: 1.75em; 340 | } -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | This is my first web page 7 | 8 | -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 2/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 2/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 2/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 2/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 2/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 2/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 2/Images/YouTube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 2/Images/YouTube Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 2/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 14 |
15 |

The Generics

16 |
17 | 18 |
19 |

ABOUT

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

21 | 22 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

23 |
24 | 25 | 33 | 34 | -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 3/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 3/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 3/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 3/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 3/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 3/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 3/Images/YouTube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 3/Images/YouTube Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 3/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | About 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 |
19 | 20 |
21 |

ABOUT

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

23 | 24 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

25 |
26 | 27 | 35 | 36 | -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 3/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 |

TOURS

26 |
27 |
28 | JUL 16 29 | <> 30 | DETROIT, MI 31 | <> 32 | DTE ENERGY MUSIC THEATRE 33 | <> 34 | 35 |
36 |
37 |
38 | JUL 19 39 | <> 40 | TORONTO, ON 41 | <> 42 | BUDWEISER STAGE 43 | <> 44 | 45 |
46 |
47 |
48 | JUL 22 49 | <> 50 | BRISTOW, VA 51 | <> 52 | JIGGY LUBE LIVE 53 | <> 54 | 55 |
56 |
57 |
58 | JUL 29 59 | <> 60 | PHOENIX, AZ 61 | <> 62 | AK-CHIN PAVILION 63 | <> 64 | 65 |
66 |
67 |
68 | AUG 2 69 | <> 70 | LAS VEGAS, NV 71 | <> 72 | T-MOBILE ARENA 73 | <> 74 | 75 |
76 |
77 |
78 | AUG 7 79 | <> 80 | CONCORD, CA 81 | <> 82 | CONCORD PAVILION 83 | <> 84 | 85 |
86 |
87 |
88 | 96 | 97 | -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Album 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Album 1.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Album 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Album 2.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Album 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Album 3.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Album 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Album 4.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Cofee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Cofee.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Shirt.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/Images/YouTube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to HTML/Lesson 4/Images/YouTube Logo.png -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | About 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 |
19 | 20 |
21 |

ABOUT

22 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

23 | 24 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

25 |
26 | 27 | 47 | 48 | -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 | 19 |
20 |
21 | 22 | 23 |
24 |
25 |

TOURS

26 |
27 |
28 | JUL 16 29 | <> 30 | DETROIT, MI 31 | <> 32 | DTE ENERGY MUSIC THEATRE 33 | <> 34 | 35 |
36 |
37 |
38 | JUL 19 39 | <> 40 | TORONTO, ON 41 | <> 42 | BUDWEISER STAGE 43 | <> 44 | 45 |
46 |
47 |
48 | JUL 22 49 | <> 50 | BRISTOW, VA 51 | <> 52 | JIGGY LUBE LIVE 53 | <> 54 | 55 |
56 |
57 |
58 | JUL 29 59 | <> 60 | PHOENIX, AZ 61 | <> 62 | AK-CHIN PAVILION 63 | <> 64 | 65 |
66 |
67 |
68 | AUG 2 69 | <> 70 | LAS VEGAS, NV 71 | <> 72 | T-MOBILE ARENA 73 | <> 74 | 75 |
76 |
77 |
78 | AUG 7 79 | <> 80 | CONCORD, CA 81 | <> 82 | CONCORD PAVILION 83 | <> 84 | 85 |
86 |
87 |
88 | 108 | 109 | -------------------------------------------------------------------------------- /Introduction to HTML/Lesson 4/store.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | Store 5 | 6 | 7 | 8 |
9 | 16 |
17 |

The Generics

18 |
19 |
20 |

MUSIC

21 |
22 |
23 | Album 1 24 |
25 | 26 |
27 | $12.99 28 | 29 |
30 |
31 |
32 |
33 | Album 2 34 |
35 | 36 |
37 | $14.99 38 | 39 |
40 |
41 |
42 |
43 | Album 3 44 |
45 | 46 |
47 | $9.99 48 | 49 |
50 |
51 |
52 |
53 | Album 4 54 |
55 | 56 |
57 | $19.99 58 | 59 |
60 |
61 |
62 |
63 |

MERCH

64 |
65 |
66 | T-Shirt 67 |
68 | 69 |
70 | $19.99 71 | 72 |
73 |
74 |
75 |
76 | Cofee Cup 77 |
78 | 79 |
80 | $6.99 81 | 82 |
83 |
84 |
85 |
86 |

CART

87 |
88 | ITEM 89 | <> 90 | PRICE 91 | <> 92 | QUANTITY 93 |
94 |
95 | 96 | T-Shirt 97 | <> 98 | $19.99 99 | <> 100 | 101 | 102 |
103 |
104 | 105 | Album 3 106 | <> 107 | $9.99 108 | <> 109 | 110 | 111 |
112 |
113 |
114 | Total 115 | $39.97 116 |
117 |
118 | 119 |
120 |
121 | 141 | 142 | -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Fonts/Booter - Zero Zero.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Fonts/Booter - Zero Zero.woff -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Fonts/Booter - Zero Zero.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Fonts/Booter - Zero Zero.woff2 -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Album 1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Album 1.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Album 2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Album 2.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Album 3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Album 3.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Album 4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Album 4.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Band Members.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Band Members.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Cofee.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Cofee.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Facebook Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Facebook Logo.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Header Background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Header Background.jpg -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Shirt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Shirt.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Spotify Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Spotify Logo.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/Images/Youtube Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/WebDevSimplified/Introduction-to-Web-Development/0ac2519b4093d23adc111cb82cf8d75b490a7c81/Introduction to JavaScript/Lesson 1/Images/Youtube Logo.png -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | About 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 |

ABOUT

22 | 23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta dolorum nulla accusantium perferendis quam explicabo odit quisquam ea natus? Saepe ducimus, minima error alias dolorum consectetur officia architecto voluptatem iure sunt eveniet nam, recusandae explicabo, itaque vel autem. Accusamus suscipit sit labore sed blanditiis a est rem harum expedita veritatis numquam voluptatibus dolore voluptatum sunt repellendus explicabo, excepturi beatae perferendis. Numquam dicta quis ipsum explicabo suscipit alias placeat, ea, vero minus ducimus voluptatibus iste repellendus deleniti? Eos, quas! Voluptatem tempora explicabo, corrupti dolor hic iure quo, ipsum voluptates quaerat omnis accusamus et vel, necessitatibus doloribus optio. Odio nobis ad molestias.

24 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Distinctio qui consequuntur aut. Nobis debitis ipsum soluta sit itaque officiis impedit maiores suscipit magni id harum consequuntur quas delectus culpa, saepe nostrum, autem ullam! Assumenda molestiae reprehenderit sunt ducimus id saepe porro vitae asperiores eum accusantium? Illum aliquid excepturi magni quos.

25 |
26 | 27 | 49 | 50 | -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics 5 | 6 | 7 | 8 | 9 |
10 | 17 |

The Generics

18 |
19 | 20 |
21 | 22 |
23 |
24 |

TOURS

25 |
26 |
27 | JUL 16 28 | DETROIT, MI 29 | DTE ENERGY MUSIC THEATRE 30 | 31 |
32 |
33 | JUL 19 34 | TORONTO, ON 35 | BUDWEISER STAGE 36 | 37 |
38 |
39 | JUL 22 40 | BRISTOW, VA 41 | JIGGY LUBE LIVE 42 | 43 |
44 |
45 | JUL 29 46 | PHOENIX, AZ 47 | AK-CHIN PAVILION 48 | 49 |
50 |
51 | AUG 2 52 | LAS VEGAS, NV 53 | T-MOBILE ARENA 54 | 55 |
56 |
57 | AUG 7 58 | CONCORD, CA 59 | CONCORD PAVILION 60 | 61 |
62 |
63 |
64 | 86 | 87 | -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/store.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | The Generics | Store 5 | 6 | 7 | 8 | 9 | 10 |
11 | 18 |

The Generics

19 |
20 |
21 |

MUSIC

22 |
23 |
24 | Album 1 25 | 26 |
27 | $12.99 28 | 29 |
30 |
31 |
32 | Album 2 33 | 34 |
35 | $14.99 36 | 37 |
38 |
39 |
40 | Album 3 41 | 42 |
43 | $9.99 44 | 45 |
46 |
47 |
48 | Album 4 49 | 50 |
51 | $19.99 52 | 53 |
54 |
55 |
56 |
57 |
58 |

MERCH

59 |
60 |
61 | T-Shirt 62 | 63 |
64 | $19.99 65 | 66 |
67 |
68 |
69 | Coffee Cup 70 | 71 |
72 | $6.99 73 | 74 |
75 |
76 |
77 |
78 |
79 |

CART

80 |
81 | ITEM 82 | PRICE 83 | QUANTITY 84 |
85 |
86 |
87 |
88 | Total 89 | $0 90 |
91 | 92 |
93 | 115 | 116 | -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/store.js: -------------------------------------------------------------------------------- 1 | if (document.readyState == 'loading') { 2 | document.addEventListener('DOMContentLoaded', ready) 3 | } else { 4 | ready() 5 | } 6 | 7 | function ready() { 8 | var removeCartItemButtons = document.getElementsByClassName('btn-danger') 9 | for (var i = 0; i < removeCartItemButtons.length; i++) { 10 | var button = removeCartItemButtons[i] 11 | button.addEventListener('click', removeCartItem) 12 | } 13 | 14 | var quantityInputs = document.getElementsByClassName('cart-quantity-input') 15 | for (var i = 0; i < quantityInputs.length; i++) { 16 | var input = quantityInputs[i] 17 | input.addEventListener('change', quantityChanged) 18 | } 19 | 20 | var addToCartButtons = document.getElementsByClassName('shop-item-button') 21 | for (var i = 0; i < addToCartButtons.length; i++) { 22 | var button = addToCartButtons[i] 23 | button.addEventListener('click', addToCartClicked) 24 | } 25 | 26 | document.getElementsByClassName('btn-purchase')[0].addEventListener('click', purchaseClicked) 27 | } 28 | 29 | function purchaseClicked() { 30 | alert('Thank you for your purchase') 31 | var cartItems = document.getElementsByClassName('cart-items')[0] 32 | while (cartItems.hasChildNodes()) { 33 | cartItems.removeChild(cartItems.firstChild) 34 | } 35 | updateCartTotal() 36 | } 37 | 38 | function removeCartItem(event) { 39 | var buttonClicked = event.target 40 | buttonClicked.parentElement.parentElement.remove() 41 | updateCartTotal() 42 | } 43 | 44 | function quantityChanged(event) { 45 | var input = event.target 46 | if (isNaN(input.value) || input.value <= 0) { 47 | input.value = 1 48 | } 49 | updateCartTotal() 50 | } 51 | 52 | function addToCartClicked(event) { 53 | var button = event.target 54 | var shopItem = button.parentElement.parentElement 55 | var title = shopItem.getElementsByClassName('shop-item-title')[0].innerText 56 | var price = shopItem.getElementsByClassName('shop-item-price')[0].innerText 57 | var imageSrc = shopItem.getElementsByClassName('shop-item-image')[0].src 58 | addItemToCart(title, price, imageSrc) 59 | updateCartTotal() 60 | } 61 | 62 | function addItemToCart(title, price, imageSrc) { 63 | var cartRow = document.createElement('div') 64 | cartRow.classList.add('cart-row') 65 | var cartItems = document.getElementsByClassName('cart-items')[0] 66 | var cartItemNames = cartItems.getElementsByClassName('cart-item-title') 67 | for (var i = 0; i < cartItemNames.length; i++) { 68 | if (cartItemNames[i].innerText == title) { 69 | alert('This item is already added to the cart') 70 | return 71 | } 72 | } 73 | var cartRowContents = ` 74 |
75 | 76 | ${title} 77 |
78 | ${price} 79 |
80 | 81 | 82 |
` 83 | cartRow.innerHTML = cartRowContents 84 | cartItems.append(cartRow) 85 | cartRow.getElementsByClassName('btn-danger')[0].addEventListener('click', removeCartItem) 86 | cartRow.getElementsByClassName('cart-quantity-input')[0].addEventListener('change', quantityChanged) 87 | } 88 | 89 | function updateCartTotal() { 90 | var cartItemContainer = document.getElementsByClassName('cart-items')[0] 91 | var cartRows = cartItemContainer.getElementsByClassName('cart-row') 92 | var total = 0 93 | for (var i = 0; i < cartRows.length; i++) { 94 | var cartRow = cartRows[i] 95 | var priceElement = cartRow.getElementsByClassName('cart-price')[0] 96 | var quantityElement = cartRow.getElementsByClassName('cart-quantity-input')[0] 97 | var price = parseFloat(priceElement.innerText.replace('$', '')) 98 | var quantity = quantityElement.value 99 | total = total + (price * quantity) 100 | } 101 | total = Math.round(total * 100) / 100 102 | document.getElementsByClassName('cart-total-price')[0].innerText = '$' + total 103 | } -------------------------------------------------------------------------------- /Introduction to JavaScript/Lesson 1/styles.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Raleway:300,400,700'); 2 | @import url("https://fonts.googleapis.com/css?family=Metal+Mania"); 3 | 4 | @font-face { 5 | font-family: "Booter - Zero Zero"; 6 | src: url("Fonts/Booter - Zero Zero.woff") format("woff"), 7 | url("Fonts/Booter - Zero Zero.woff2") format("woff2"); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | * { 13 | box-sizing: border-box; 14 | font-family: Raleway; 15 | color: #777; 16 | } 17 | 18 | html, body { 19 | margin: 0; 20 | padding: 0; 21 | min-height: 100%; 22 | } 23 | 24 | .nav ul { 25 | margin: 0; 26 | } 27 | 28 | .nav li { 29 | display: inline; 30 | } 31 | 32 | .nav a { 33 | display: inline-block; 34 | padding: .5em; 35 | color: white; 36 | text-decoration: none; 37 | } 38 | 39 | .main-nav { 40 | text-align: center; 41 | font-size: 1.1em; 42 | font-weight: lighter; 43 | border-bottom: 1px solid rgba(255, 255, 255, .3) 44 | } 45 | 46 | .main-nav li { 47 | padding: 0 5%; 48 | } 49 | 50 | .nav a:hover { 51 | background-color: rgba(255, 255, 255, .3) 52 | } 53 | 54 | .main-header { 55 | background-color: rgba(0, 0, 0, .6); 56 | background-image: url("Images/Header Background.jpg"); 57 | background-blend-mode: multiply; 58 | background-size: cover; 59 | padding-bottom: 30px; 60 | } 61 | 62 | .band-name { 63 | text-align: center; 64 | margin: 0; 65 | font-size: 4em; 66 | font-family: "Booter - Zero Zero"; 67 | font-weight: normal; 68 | color: white; 69 | } 70 | 71 | .band-name-large { 72 | font-size: 8em; 73 | } 74 | 75 | .content-section { 76 | margin: 1em; 77 | } 78 | 79 | .container { 80 | max-width: 900px; 81 | margin: 0 auto; 82 | padding: 0 1.5em; 83 | } 84 | .section-header { 85 | font-family: "Metal Mania"; 86 | font-weight: normal; 87 | color: #333; 88 | text-align: center; 89 | font-size: 2.5em; 90 | } 91 | 92 | .about-band-image { 93 | float: left; 94 | height: 200px; 95 | width: 200px; 96 | margin: 15px; 97 | border-radius: 50%; 98 | } 99 | 100 | .main-footer { 101 | background-color: #56CCF2; 102 | color: white; 103 | padding: .25em 0; 104 | } 105 | 106 | .main-footer-container { 107 | display: flex; 108 | align-items: center; 109 | } 110 | 111 | .main-footer-container ul { 112 | flex-grow: 1; 113 | text-align: end; 114 | } 115 | 116 | .footer-nav li { 117 | padding: 0 .5em; 118 | } 119 | 120 | .footer-nav img { 121 | width: 30px; 122 | height: 30px; 123 | } 124 | 125 | .btn { 126 | text-align: center; 127 | vertical-align: middle; 128 | padding: .67em .67em; 129 | cursor: pointer; 130 | } 131 | 132 | .btn-header { 133 | margin: .5em 15% 2em 15%; 134 | color: white; 135 | border: 2px solid #2D9CDB; 136 | background-color: rgba(255, 255, 255, .1); 137 | border-radius: 0; 138 | font-size: 1.5em; 139 | font-weight: lighter; 140 | padding-left: 2em; 141 | padding-right: 2em; 142 | } 143 | 144 | .btn-header:hover { 145 | background-color: rgba(255, 255, 255, .3); 146 | } 147 | 148 | .btn-play { 149 | display: block; 150 | margin: 0 auto; 151 | color: #2D9CDB; 152 | font-size: 4em; 153 | border-radius: 50%; 154 | width: 100px; 155 | height: 100px; 156 | padding: 0; 157 | text-align: center; 158 | } 159 | 160 | .btn-primary { 161 | color: white; 162 | background-color: #56CCF2; 163 | border: none; 164 | border-radius: .3em; 165 | font-weight: bold; 166 | } 167 | 168 | .btn-primary:hover { 169 | background-color: #2D9CDB; 170 | } 171 | 172 | .tour-row { 173 | border-bottom: 1px solid black; 174 | padding-bottom: 1em; 175 | margin-bottom: 1em; 176 | } 177 | 178 | .tour-row:last-child { 179 | border: none; 180 | } 181 | 182 | .tour-item { 183 | display: inline-block; 184 | padding-right: .5em; 185 | } 186 | 187 | .tour-date { 188 | color: #555; 189 | width: 11%; 190 | font-weight: bold; 191 | } 192 | 193 | .tour-city { 194 | width: 24%; 195 | } 196 | 197 | .tour-arena { 198 | width: 42%; 199 | } 200 | 201 | .tour-btn { 202 | max-width: 19%; 203 | } 204 | 205 | .shop-item { 206 | margin: 30px; 207 | } 208 | 209 | .shop-item-title { 210 | display: block; 211 | width: 100%; 212 | text-align: center; 213 | font-weight: bold; 214 | font-size: 1.5em; 215 | color: #333; 216 | margin-bottom: 15px; 217 | } 218 | 219 | .shop-item-image { 220 | height: 250px; 221 | } 222 | 223 | .shop-item-details { 224 | display: flex; 225 | align-items: center; 226 | padding: 5px; 227 | } 228 | 229 | .shop-item-price { 230 | flex-grow: 1; 231 | color: #333; 232 | } 233 | 234 | .shop-items { 235 | display: flex; 236 | flex-wrap: wrap; 237 | justify-content: space-around; 238 | } 239 | 240 | .cart-header { 241 | font-weight: bold; 242 | font-size: 1.25em; 243 | color: #333; 244 | } 245 | 246 | .cart-column { 247 | display: flex; 248 | align-items: center; 249 | border-bottom: 1px solid black; 250 | margin-right: 1.5em; 251 | padding-bottom: 10px; 252 | margin-top: 10px; 253 | } 254 | 255 | .cart-row { 256 | display: flex; 257 | } 258 | 259 | .cart-item { 260 | width: 45%; 261 | } 262 | 263 | .cart-price { 264 | width: 20%; 265 | font-size: 1.2em; 266 | color: #333; 267 | } 268 | 269 | .cart-quantity { 270 | width: 35%; 271 | } 272 | 273 | .cart-item-title { 274 | color: #333; 275 | margin-left: .5em; 276 | font-size: 1.2em; 277 | } 278 | 279 | .cart-item-image { 280 | width: 75px; 281 | height: auto; 282 | border-radius: 10px; 283 | } 284 | 285 | .btn-danger { 286 | color: white; 287 | background-color: #EB5757; 288 | border: none; 289 | border-radius: .3em; 290 | font-weight: bold; 291 | } 292 | 293 | .btn-danger:hover { 294 | background-color: #CC4C4C; 295 | } 296 | 297 | .cart-quantity-input { 298 | height: 34px; 299 | width: 50px; 300 | border-radius: 5px; 301 | border: 1px solid #56CCF2; 302 | background-color: #eee; 303 | color: #333; 304 | padding: 0; 305 | text-align: center; 306 | font-size: 1.2em; 307 | margin-right: 25px; 308 | } 309 | 310 | .cart-row:last-child { 311 | border-bottom: 1px solid black; 312 | } 313 | 314 | .cart-row:last-child .cart-column { 315 | border: none; 316 | } 317 | 318 | .cart-total { 319 | text-align: end; 320 | margin-top: 10px; 321 | margin-right: 10px; 322 | } 323 | 324 | .cart-total-title { 325 | font-weight: bold; 326 | font-size: 1.5em; 327 | color: black; 328 | margin-right: 20px; 329 | } 330 | 331 | .cart-total-price { 332 | color: #333; 333 | font-size: 1.1em; 334 | } 335 | 336 | .btn-purchase { 337 | display: block; 338 | margin: 40px auto 80px auto; 339 | font-size: 1.75em; 340 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction to Web Development 2 | 3 | This repository contains all of the code for each individual lesson and is broken into three sections. HTML, CSS, and Javascript. Each section contains a folder for each lesson that contains all the code for the project as of the end of that lesson. 4 | 5 | The code in these projects is only meant as a reference and should not be directly copied. Instead you should be creating your own web site for your own favorite musician. 6 | 7 | View the videos for this course [here](https://www.youtube.com/watch?v=HfTXHrWMGVY&list=PLZlA0Gpn_vH-cEDOofOujFIknfZZpIk3a). --------------------------------------------------------------------------------