├── about.html ├── assets ├── audios │ ├── audio_1.mp3 │ └── audio_2.mp3 ├── images │ ├── css_logo.png │ ├── ejs_logo.jpg │ ├── ejs_logo.png │ ├── html.png │ ├── js.png │ ├── js_logo.png │ ├── laptop.jfif │ ├── mongodb.png │ ├── mongoose.png │ ├── node-list-style-image.png │ ├── node_logo.png │ └── react_logo.png ├── styles │ └── main.css └── videos │ └── js-project.mp4 ├── contacts.html ├── index.html ├── note.md ├── notes.md ├── practice.html ├── projects.html ├── test.css ├── test.html └── week_1 ├── images ├── css_logo.png ├── ejs_logo.jpg ├── ejs_logo.png ├── html.png ├── js.png ├── js_logo.png ├── mongodb.png ├── mongoose.png ├── node-list-style-image.png ├── node_logo.png └── react_logo.png └── index.html /about.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 16 | 17 | About Page 18 | 19 | 20 |
21 |
22 |
23 |

24 | Web Development 25 |

26 | 40 |
41 |
42 |
43 |
44 |
45 |

About Me

46 |
47 |

48 | Lorem ipsum dolor sit amet consectetur adipisicing elit. 49 | Praesentium explicabo cum tenetur necessitatibus facilis tempore 50 | nulla, qui ratione debitis accusantium sint aliquam sapiente 51 | fugit deleniti, beatae harum. Ut, consectetur odio. Placeat 52 | minus esse quae unde pariatur ipsam, quas ea. Aspernatur 53 | eligendi recusandae, sequi libero vero sed ratione commodi quam, 54 | quo consequatur modi, inventore impedit repudiandae accusamus 55 | tenetur doloribus a voluptatibus? Omnis, commodi quia laboriosam 56 | amet ad accusamus aliquam totam nostrum eaque expedita? 57 | Voluptatum, consequuntur est. Vel ab, libero tempore nihil, 58 | corrupti iusto quam reiciendis provident laborum doloremque 59 | earum temporibus harum! Et incidunt modi a libero assumenda 60 | optio distinctio beatae natus totam. Aspernatur, corporis et qui 61 | repellat ab dolore minima repudiandae quis sapiente quo libero 62 | voluptatibus mollitia odio, obcaecati culpa modi. Facere 63 | voluptas consequuntur ea culpa eaque provident eligendi alias 64 | consequatur aut error est accusantium voluptatum aperiam 65 | asperiores modi iure rem id quas temporibus, ex perspiciatis 66 | delectus. Odio delectus ratione laboriosam. 67 |

68 |
69 |
70 |
71 |
72 | 73 | 97 |
98 | 99 | 100 | -------------------------------------------------------------------------------- /assets/audios/audio_1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/audios/audio_1.mp3 -------------------------------------------------------------------------------- /assets/audios/audio_2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/audios/audio_2.mp3 -------------------------------------------------------------------------------- /assets/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/css_logo.png -------------------------------------------------------------------------------- /assets/images/ejs_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/ejs_logo.jpg -------------------------------------------------------------------------------- /assets/images/ejs_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/ejs_logo.png -------------------------------------------------------------------------------- /assets/images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/html.png -------------------------------------------------------------------------------- /assets/images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/js.png -------------------------------------------------------------------------------- /assets/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/js_logo.png -------------------------------------------------------------------------------- /assets/images/laptop.jfif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/laptop.jfif -------------------------------------------------------------------------------- /assets/images/mongodb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/mongodb.png -------------------------------------------------------------------------------- /assets/images/mongoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/mongoose.png -------------------------------------------------------------------------------- /assets/images/node-list-style-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/node-list-style-image.png -------------------------------------------------------------------------------- /assets/images/node_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/node_logo.png -------------------------------------------------------------------------------- /assets/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/images/react_logo.png -------------------------------------------------------------------------------- /assets/styles/main.css: -------------------------------------------------------------------------------- 1 | /* Universal selector */ 2 | 3 | * { 4 | margin: 0; 5 | box-sizing: border-box; 6 | } 7 | 8 | body { 9 | font-family: 'Poppins', sans-serif; 10 | } 11 | 12 | /* header css */ 13 | header { 14 | top: 0; 15 | position: fixed; 16 | width: 100%; 17 | z-index: 10; 18 | padding: 50px; 19 | } 20 | header, 21 | footer { 22 | background: rgb(118, 105, 192); 23 | color: white; 24 | text-align: center; 25 | text-transform: uppercase; 26 | /* padding: 25px; */ 27 | } 28 | /* 29 | css selectors: tagname, id, class, attribue, combinators */ 30 | /* Specificity > inline is more specific, id, tagname and class */ 31 | main { 32 | margin-top: 250px; 33 | } 34 | 35 | #header-title { 36 | color: rgb(25, 50, 78); 37 | margin: 20px; 38 | } 39 | 40 | #menu { 41 | background: rgb(194, 199, 194); 42 | } 43 | 44 | #menu li { 45 | list-style: none; 46 | margin: 15px; 47 | display: inline-block; 48 | } 49 | 50 | a { 51 | color: white; 52 | text-decoration: none; 53 | } 54 | /* .section { 55 | 56 | } */ 57 | 58 | section { 59 | margin: 50px; 60 | padding: 30px; 61 | border-radius: 5px; 62 | } 63 | #section-1 { 64 | background-color: rgb(177, 231, 177); 65 | } 66 | 67 | #section-2 { 68 | background-color: rgb(108, 238, 238); 69 | } 70 | #section-3 { 71 | background-color: rgb(97, 82, 163); 72 | } 73 | #section-4 { 74 | background-color: rgb(243, 195, 91); 75 | } 76 | 77 | /* CSS for Projects */ 78 | 79 | .box { 80 | width: 200px; 81 | height: 200px; 82 | display: inline-block; 83 | margin-bottom: 30px; 84 | margin-right: 25px; 85 | border-radius: 50%; 86 | text-align: center; 87 | line-height: 200px; 88 | font-size: 42px; 89 | } 90 | 91 | #box-1 { 92 | background-color: rgb(116, 226, 116); 93 | } 94 | #box-2 { 95 | background-color: yellow; 96 | } 97 | #box-3 { 98 | background-color: rgb(231, 118, 118); 99 | } 100 | #boxes { 101 | text-align: center; 102 | } 103 | 104 | #videos { 105 | text-align: center; 106 | } 107 | 108 | hr { 109 | /* height: 3px; */ 110 | padding: 5px; 111 | background-color: rgb(145, 135, 190); 112 | } 113 | 114 | /* icons style */ 115 | i { 116 | font-size: 32px; 117 | margin: 30px; 118 | } 119 | .fa-github-square { 120 | color: #333; 121 | } 122 | .fa-linkedin { 123 | color: #0077b5; 124 | } 125 | .fa-twitter-square { 126 | color: #1da1f2; 127 | } 128 | 129 | /* Table CSS */ 130 | 131 | table, 132 | td, 133 | th { 134 | border: 1px solid gray; 135 | border-collapse: collapse; 136 | } 137 | 138 | table { 139 | width: 60%; 140 | margin: 30px auto; 141 | } 142 | 143 | td { 144 | text-align: center; 145 | } 146 | 147 | /* Form CSS */ 148 | 149 | .form-group { 150 | /* top, right, bottom, left */ 151 | margin: 0 0 8px 0px; 152 | } 153 | 154 | input[type='text'], 155 | input[type='email'], 156 | input[type='number'], 157 | input[type='datetime-local'], 158 | textarea { 159 | display: block; 160 | margin-bottom: 3px; 161 | width: 35%; 162 | padding: 8px; 163 | border: 2px solid rgb(226, 206, 238); 164 | outline: none; 165 | border-radius: 3px; 166 | } 167 | input[type='text']:hover, 168 | input[type='email']:hover, 169 | input[type='number']:hover, 170 | input[type='datetime-local']:hover, 171 | textarea:hover { 172 | border: 2px solid rgb(193, 115, 238); 173 | } 174 | 175 | /* Styling the submit button */ 176 | /* 177 | input[type='submit'] { 178 | background-color: rgb(50, 235, 50); 179 | padding: 10px 25px; 180 | border-radius: 5px; 181 | border: none; 182 | color: white; 183 | font-size: 18px; 184 | } */ 185 | 186 | #submit-btn { 187 | background-color: hsl(120, 29%, 41%); 188 | border-radius: 5px; 189 | border: none; 190 | color: white; 191 | font-size: 18px; 192 | } 193 | .category { 194 | width: 75%; 195 | margin: auto; 196 | } 197 | .form-section { 198 | margin-bottom: 30px; 199 | } 200 | 201 | article { 202 | margin-bottom: 25px; 203 | } 204 | 205 | /* Icons css */ 206 | /* .footer-wrapper { 207 | display: relative; 208 | } */ 209 | #arrow-wrapper { 210 | display: flex; 211 | justify-content: flex-end; 212 | } 213 | 214 | /* Images */ 215 | #front-end img, 216 | #backend img { 217 | max-width: 20%; 218 | min-width: 20%; 219 | } 220 | 221 | @media (max-width: 768px) { 222 | /* Images */ 223 | #front-end img, 224 | #backend img { 225 | /* max-width: 20%; 226 | min-width: 20%; */ 227 | display: block; 228 | max-width: 100%; 229 | } 230 | } 231 | 232 | -------------------------------------------------------------------------------- /assets/videos/js-project.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/assets/videos/js-project.mp4 -------------------------------------------------------------------------------- /contacts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 16 | 17 | Contacts 18 | 19 | 20 |
21 |
22 |
23 |

24 | Web Development 25 |

26 | 40 |
41 |
42 |
43 |
44 |
45 |

Application Form

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 |
75 |
76 |

What are your skills

77 | 78 | 79 |
80 | 81 | 82 |
83 | 84 | 85 |
86 | 87 | 88 |
89 | 90 | 91 |
92 |
93 | 94 | 95 |
96 | 97 |
98 |

Gender

99 | 100 | 101 |
102 | 103 | 104 |
105 | 106 |
107 | 108 | 109 |
110 | 111 |
112 |

Select your country

113 | 120 |
121 | 122 |
123 |
124 | 130 |
131 |
132 | 133 |
134 |
135 | 136 | 139 |
140 | 141 |
142 | 143 |
144 |
145 |
146 |
147 |

HTML Table

148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 |
NameAgeGenderCountry
Asab250MaleFinland
Kirsi25FaleFinland
Baptiste20MaleFrance
178 |
179 |
180 |
181 | 182 | 206 |
207 | 208 | 209 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | HTML and CSS Course 13 | 14 | 18 | 24 | 25 | 26 | 27 |
28 |
29 |
30 |

31 | Web Development 32 |

33 | 47 |
48 |
49 | 50 |
51 |
52 | 53 |
54 |

Front End

55 |
56 |
    57 |
  • HTML
    • 58 |
  • CSS
    • 59 |
  • JavaScript
    • 60 |
61 |
62 |
63 | 64 |
65 |

Back End

66 |
67 |
    68 |
  • Node
    • 69 |
  • Python
    • 70 |
  • PHP
    • 71 |
  • Java
    • 72 |
  • Ruby
    • 73 |
74 |
75 |
76 | 77 |
78 |

Database

79 |
80 |
    81 |
  • SQL
    • 82 |
  • MongoDB
    • 83 |
84 |
85 |
86 | 87 | 88 |
89 |

Tools

90 | 118 |
119 |
120 |

Front End technologies

121 |
122 | HTML logo 123 | CSS Logo 124 | JavaScript Logo 125 |
126 |
127 |
128 |

Backend Technologies

129 |
130 | Node logo 131 | MongoDB Logo 132 |
133 |
134 |
135 |
136 | 137 | 161 |
162 | 163 | 164 | -------------------------------------------------------------------------------- /note.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /notes.md: -------------------------------------------------------------------------------- 1 | BLock elements => Elements that take the whole width 2 | h1 to h6 3 | p 4 | div 5 | header 6 | footer 7 | main 8 | section 9 | article 10 | 11 | Non -block elements 12 | img 13 | a 14 | label 15 | input 16 | span 17 | small 18 | 19 | br 20 | hr 21 | html entities 22 | 23 | # We learn today 24 | 25 | Tomorrow's lesson includes: 26 | CSS 27 | Style(inline style, internal style, external style) 28 | CSS Box Model(Margin, Padding, Border) 29 | Colors(name, rgb, hexadecimal) 30 | Font Family 31 | Font Size 32 | Display(block, inline-block, inline) 33 | Position(Static, Relative, Absolute, Fixed, Sticky) 34 | 35 | CSS : What is CSS? Cascading Style Sheet. What does that really mean? 36 | Cascading? Something that flows from top to botton 37 | 38 | { 39 | property: value; 40 | } 41 | 42 | Colors: (red, blue, green), rgb(0, 0, 0), hexadecimal 43 | How many colors do you ? 44 | RGB 45 | 255 _ 255 _ 255 = 16.58M colors 46 | How could name al these colors? 144 names red, green blue, black, yellow, ... 47 | 48 | Flex Box: 49 | Hexa deciaml 50 | 51 | R G B 52 | #ff00da 53 | 0 - 9 a - f 54 | 15 x 16^1 + 15 x 16^0 55 | 56 | 240 + 15 = 255 57 | RGB(255,0, 218) 58 | 13 _ 16 ^ 1 + 10 _ 16 ^0 59 | 208 + 10 => 218 60 | 61 | Next week Lesson 62 | Responsiveness 63 | Accessibility 64 | Flex 65 | CSS Units 66 | ~~ END ~~ 67 | -------------------------------------------------------------------------------- /practice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 20 | 21 | -------------------------------------------------------------------------------- /projects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Projects 7 | 11 | 12 | 13 | 19 | 20 | 21 |
22 |
23 |
24 |

25 | Web Development 26 |

27 | 41 |
42 |
43 |
44 |
45 |
46 |

My Projects

47 |
    48 |
  • HTML
    • 49 |
  • CSS
    • 50 |
  • JavaScript
    • 51 |
52 | 53 | 54 | 55 | 56 |
57 | 58 |
59 |

Introduction to HTML

60 |
61 |

62 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 63 | Praesentium ad fugiat sapiente, consequatur officia aperiam rem 64 | magni alias, enim non numquam dolor aliquam quia quidem totam 65 | expedita voluptatum. Quo, quia! Minus soluta iusto minima 66 | aperiam dolore deserunt inventore cumque porro qui alias at 67 | quaerat autem dolorum nesciunt, voluptates, possimus fuga facere 68 | ex deleniti. Autem, soluta consectetur. Eaque quos libero 69 | perspiciatis. Explicabo aperiam ut et alias dolorem id sint 70 | pariatur nobis hic. Quis, sequi voluptatum, minus, sit neque 71 | soluta esse libero nulla ex quo facilis voluptates atque illo 72 | molestias aspernatur voluptas. 73 |

74 |
75 |
76 |
77 | 78 |
79 |

Introduction to CSS

80 |
81 |

82 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 83 | Praesentium ad fugiat sapiente, consequatur officia aperiam rem 84 | magni alias, enim non numquam dolor aliquam quia quidem totam 85 | expedita voluptatum. Quo, quia! Minus soluta iusto minima 86 | aperiam dolore deserunt inventore cumque porro qui alias at 87 | quaerat autem dolorum nesciunt, voluptates, possimus fuga facere 88 | ex deleniti. Autem, soluta consectetur. Eaque quos libero 89 | perspiciatis. Explicabo aperiam ut et alias dolorem id sint 90 | pariatur nobis hic. Quis, sequi voluptatum, minus, sit neque 91 | soluta esse libero nulla ex quo facilis voluptates atque illo 92 | molestias aspernatur voluptas. 93 |

94 |
95 |
96 |
97 | 98 |
99 |

Introduction to JavaScript

100 |
101 |

102 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 103 | Praesentium ad fugiat sapiente, consequatur officia aperiam rem 104 | magni alias, enim non numquam dolor aliquam quia quidem totam 105 | expedita voluptatum. Quo, quia! Minus soluta iusto minima 106 | aperiam dolore deserunt inventore cumque porro qui alias at 107 | quaerat autem dolorum nesciunt, voluptates, possimus fuga facere 108 | ex deleniti. Autem, soluta consectetur. Eaque quos libero 109 | perspiciatis. Explicabo aperiam ut et alias dolorem id sint 110 | pariatur nobis hic. Quis, sequi voluptatum, minus, sit neque 111 | soluta esse libero nulla ex quo facilis voluptates atque illo 112 | molestias aspernatur voluptas. 113 |

114 |
115 |
116 |
117 | 118 |
119 |

Introduction to React

120 |
121 |

122 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. 123 | Praesentium ad fugiat sapiente, consequatur officia aperiam rem 124 | magni alias, enim non numquam dolor aliquam quia quidem totam 125 | expedita voluptatum. Quo, quia! Minus soluta iusto minima 126 | aperiam dolore deserunt inventore cumque porro qui alias at 127 | quaerat autem dolorum nesciunt, voluptates, possimus fuga facere 128 | ex deleniti. Autem, soluta consectetur. Eaque quos libero 129 | perspiciatis. Explicabo aperiam ut et alias dolorem id sint 130 | pariatur nobis hic. Quis, sequi voluptatum, minus, sit neque 131 | soluta esse libero nulla ex quo facilis voluptates atque illo 132 | molestias aspernatur voluptas. 133 |

134 |
135 |
136 |
137 | 138 |
139 |

Core technologies of the web

140 |
141 | 142 | 143 |
HTML
144 |
CSS
145 |
JavaScript
146 |
147 |
148 |
149 |

Podcasts

150 |
151 |

152 | You can find all my podcast about web technologies, data science 153 | and other related technologies. 154 |

155 |
156 | 157 |
158 |

Podcast: Epsoide 1

159 | 163 |
164 |
165 |

Podcast: Epsoide 2

166 | 170 |
171 |
172 |
173 | 174 |
175 |

Videos

176 |
177 | 180 |
181 |
182 |
183 | span 1
184 | span 2
185 | span 3 186 |

2 + 3 = 5

187 |

2 >= 3 but 4 < 3

188 |

23 = 8

189 |

190 | The chemical formula of sulfuric acid is H2SO4 193 |

194 |

I & you are students.

195 |

196 | Let create two more spaces       is there space 197 |

198 | 199 |

200 | The plates will still shift and the clouds will still spew. The 201 | sun will slowly rise and the moon will follow too. 202 |

203 | 204 | 
205 | The plates will still shift
206 | and the clouds will still spew.
207 | The sun will slowly rise
208 | and the moon will follow too.
209 |
211 | 
212 |           
213 |           let firstName = 'Asabeneh' 
214 |           let lastName = 'Yetayeh' const
215 |           printFullName = (firstName, lastName) => { 
216 |             return firstName + ' ' +
217 |           lastName
218 |          }
219 |         
220 |
221 |
222 | HTML is the block block of the web. There is no website without 223 | HTML. 224 |
225 |
226 |
227 |
228 | 229 | 254 |
255 | 256 | 257 | -------------------------------------------------------------------------------- /test.css: -------------------------------------------------------------------------------- 1 | /* Universal Selector */ 2 | * { 3 | box-sizing: border-box; 4 | } 5 | 6 | /* Body css */ 7 | body { 8 | background-color: #744285; 9 | } 10 | 11 | /* Header */ 12 | 13 | header { 14 | top: 0; 15 | position: fixed; 16 | left: 250px; 17 | z-index: 10; 18 | } 19 | 20 | main { 21 | margin-top: 150px; 22 | } 23 | 24 | #header-title { 25 | font-size: 42px; 26 | text-transform: uppercase; 27 | text-align: center; 28 | color: green; 29 | } 30 | 31 | #section-id { 32 | color: purple; 33 | font-size: 12; 34 | text-align: center; 35 | } 36 | #boxes { 37 | position: relative; 38 | border: 2px solid blue; 39 | height: 600px; 40 | } 41 | .box { 42 | width: 250px; 43 | height: 250px; 44 | text-align: center; 45 | line-height: 250px; 46 | display: inline-block; 47 | position: absolute; 48 | } 49 | /* If you are using postion: absolute, you can use left, right, top, bottom */ 50 | /* 51 | position: static -> it does not change anything 52 | position: relative -> it is almost the same as static but it allows children to be absolute 53 | position:fixed 54 | position:sticky 55 | */ 56 | #box1 { 57 | background-color: rgb(231, 102, 15); 58 | } 59 | #box2 { 60 | left: 200px; 61 | top: 25px; 62 | background-color: rgb(53, 53, 219); 63 | z-index: 1; 64 | } 65 | #box3 { 66 | left: 400px; 67 | top: 50px; 68 | background-color: rgb(241, 213, 86); 69 | z-index: 2; 70 | } 71 | span { 72 | border: 2px solid orange; 73 | height: 50px; 74 | width: 150px; 75 | text-align: center; 76 | line-height: 50px; 77 | display: inline-block; 78 | } 79 | /* newsletter css */ 80 | input[type='email'] { 81 | padding: 8px; 82 | } 83 | 84 | button[type='submit'] { 85 | background-color: green; 86 | padding: 10px; 87 | border: none; 88 | border-radius: 3px; 89 | color: white; 90 | } 91 | .css-box-model { 92 | border-top: 20px solid red; 93 | border-right: 20px solid green; 94 | border-bottom: 20px solid yellow; 95 | border-left: 20px solid lightblue; 96 | width: 500px; 97 | height: 300px; 98 | margin-left: 100px; 99 | margin-top: 50px; 100 | padding: 100px; 101 | } 102 | 103 | #div-sticky, 104 | #sticky-text { 105 | top: 0; 106 | position: sticky; 107 | z-index: 8; 108 | } 109 | #sticky-text { 110 | top: 150px; 111 | } 112 | /* Footer */ 113 | -------------------------------------------------------------------------------- /test.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Test 8 | 125 | 126 | 127 | 128 | 138 | 139 | 140 | 141 | 142 | 157 | 158 |
159 |
Column 1
160 |
Column 2
161 |
Column 3
162 |
163 | 164 |

ANY TEXT HERE

165 | 166 | 167 | 168 | -------------------------------------------------------------------------------- /week_1/images/css_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/css_logo.png -------------------------------------------------------------------------------- /week_1/images/ejs_logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/ejs_logo.jpg -------------------------------------------------------------------------------- /week_1/images/ejs_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/ejs_logo.png -------------------------------------------------------------------------------- /week_1/images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/html.png -------------------------------------------------------------------------------- /week_1/images/js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/js.png -------------------------------------------------------------------------------- /week_1/images/js_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/js_logo.png -------------------------------------------------------------------------------- /week_1/images/mongodb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/mongodb.png -------------------------------------------------------------------------------- /week_1/images/mongoose.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/mongoose.png -------------------------------------------------------------------------------- /week_1/images/node-list-style-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/node-list-style-image.png -------------------------------------------------------------------------------- /week_1/images/node_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/node_logo.png -------------------------------------------------------------------------------- /week_1/images/react_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Asabeneh/HTML-CSS-Winter-2021/976959db127398153a164158c1e6b273808b6574/week_1/images/react_logo.png -------------------------------------------------------------------------------- /week_1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | 11 | 12 | HTML and CSS Course 13 | 14 | 15 |
16 |
25 |

Welcome to Web Development

26 |
27 | 28 |
29 | 30 |
31 |

Front End

32 |
    33 |
  • HTML
    • 34 |
  • CSS
    • 35 |
  • JavaScript
    • 36 |
37 |
38 | 39 |
40 |

Back End

41 |
    42 |
  • Node
    • 43 |
  • Python
    • 44 |
  • PHP
    • 45 |
  • Java
    • 46 |
  • Ruby
    • 47 |
48 |
49 | 50 |
51 |

Database

52 |
    53 |
  • SQL
    • 54 |
  • MongoDB
    • 55 |
56 |
57 | 58 | 59 |
60 |

Tools

61 |
    62 |
  1. Computer
    2. 63 |
  2. Internet
    3. 64 |
  3. 65 | Browser 68 |
    4. 69 |
  4. 70 | Code Editor 73 |
    5. 74 |
  5. 75 | Design software 76 |
    6. 77 |
  6. 78 | Git(Version control tool) 81 |
    7. 82 |
83 |
84 |
85 |

86 | Web development is a fun thing to do. If you manage to learn HTML and 87 | CSS you will be able to design a lots of beautiful websites. 88 |

89 | 90 |
91 |

92 | Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum natus 93 | tempore cumque pariatur dolorum nulla ab corporis optio beatae porro 94 | asperiores accusantium quibusdam laborum ex quis, reprehenderit 95 | vitae nihil iste. 96 |

97 |
98 | 99 | HTML logo 100 | CSS Logo 101 | JavaScript 102 |
103 |
104 | 116 |
117 | 118 | 119 | --------------------------------------------------------------------------------