├── README.md ├── lecture-2 ├── .idea │ ├── inspectionProfiles │ │ └── profiles_settings.xml │ ├── lecture-2.iml │ ├── modules.xml │ └── workspace.xml └── lecture-2.html ├── lecture-3 ├── .idea │ ├── lecture-3.iml │ ├── modules.xml │ └── workspace.xml ├── lecture-3.css └── lecture-3.html ├── lecture-4 ├── .idea │ ├── lecture-4.iml │ ├── modules.xml │ └── workspace.xml ├── lecture-4.css └── lecture-4.html ├── lecture-5-b ├── .idea │ ├── lecture-5-b.iml │ ├── modules.xml │ └── workspace.xml └── lecture-5-b.html ├── lecture-5 ├── .idea │ ├── lecture-5.iml │ ├── modules.xml │ └── workspace.xml ├── lecture-5.css └── lecture-5.html ├── lecture-6 ├── .idea │ ├── lecture-6.iml │ ├── misc.xml │ ├── modules.xml │ └── workspace.xml ├── lecture-6.html └── lecture-6.js ├── lecture-7 ├── .idea │ ├── lecture-7.iml │ ├── misc.xml │ ├── modules.xml │ └── workspace.xml ├── lecture-7.html └── lecture-7.js ├── lecture-8-b ├── .idea │ └── workspace.xml ├── lecture-8.html └── lecture-8.js └── lecture-8 ├── .idea ├── lecture-8.iml ├── misc.xml ├── modules.xml └── workspace.xml ├── lecture-8.html └── lecture-8.js /README.md: -------------------------------------------------------------------------------- 1 | # Web Development Lectures 2 | This repository contains basic concepts of web-development in the form of a few lectures. 3 | It was made as part of a series of web development sessions I gave during my 2nd year. 4 | 5 | ##### Topics Covered 6 | * lecture-2: Basic HTML code 7 | * lecture-3: Basic HTML code with CSS 8 | * lecture-4: HTML and CSS for a 'smilie' to display position-property 9 | * lecture-5: HTML and CSS to display animation-property 10 | * lecture-5-b: HTML and CSS to display responsiveness of web-page 11 | * lecture-6: JS variables,functions and IIFE 12 | * lecture-7: Accessing HTML elements in JS 13 | * lecture-8: Todo list(without local-storage) 14 | * lecture-8-b: 'this' with 'use strict' in default binding 15 | -------------------------------------------------------------------------------- /lecture-2/.idea/inspectionProfiles/profiles_settings.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | -------------------------------------------------------------------------------- /lecture-2/.idea/lecture-2.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lecture-2/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lecture-2/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 37 | 38 | 39 | 44 | 45 | 46 | 47 | 48 | true 49 | DEFINITION_ORDER 50 | 51 | 52 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 95 | 96 | 97 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 1532007849603 106 | 111 | 112 | 113 | 114 | 116 | 117 | 118 | 119 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 142 | 143 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | -------------------------------------------------------------------------------- /lecture-2/lecture-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | HTML 6 | 7 | 8 |

9 |

HTML Tags

10 |

11 |

12 |

13 |

14 |

Semantic Tags

15 |

Semantic tags are those which describe their meaning to both the developer and the browser

16 |

Examples are :- <article> and <section> 17 | semantic tags google link 18 |

19 |

20 |
21 |

22 |

Non-semantic Tags

23 |

Non-semantic tags are do not convey any meaning to either the developer or the browser

24 |

Examples are :- <div> and <span> 25 | non-semantic tags google link 26 |

27 |

28 | 29 | -------------------------------------------------------------------------------- /lecture-3/.idea/lecture-3.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lecture-3/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lecture-3/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 51 | 52 | 53 | 59 | 60 | 61 | 62 | 63 | true 64 | DEFINITION_ORDER 65 | 66 | 67 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 116 | 117 | 118 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 1532012161563 127 | 132 | 133 | 134 | 135 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 163 | 164 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /lecture-4/lecture-4.css: -------------------------------------------------------------------------------- 1 | #face{ 2 | position:absolute; 3 | height:500px; 4 | width:500px; 5 | border:2px solid black; 6 | border-radius:50%; 7 | left:25%; 8 | } 9 | #eye1,#eye2{ 10 | position:absolute; 11 | height:100px; 12 | width:100px; 13 | border:2px solid black; 14 | border-radius:50%; 15 | display:inline-block; 16 | background-color: black; 17 | } 18 | #eye{ 19 | top:30%; 20 | width:100%; 21 | } 22 | #eye1{ 23 | left:10%; 24 | 25 | } 26 | #eye2{ 27 | right:10%; 28 | } 29 | #lips{ 30 | top:60%; 31 | border-bottom:2px solid red; 32 | position:absolute; 33 | height:100px; 34 | width:100px; 35 | border-radius:50%; 36 | left:40%; 37 | } 38 | -------------------------------------------------------------------------------- /lecture-4/lecture-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Smilie 6 | 7 | 8 | 9 |

10 |

11 |

12 | 13 |

14 |

15 | 16 |

17 |

18 |

19 | 20 |

21 |

22 | 23 | -------------------------------------------------------------------------------- /lecture-5-b/.idea/lecture-5-b.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lecture-5-b/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lecture-5-b/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 46 | 47 | 48 | 54 | 55 | 56 | 57 | 58 | true 59 | DEFINITION_ORDER 60 | 61 | 62 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 116 | 117 | 118 | 120 | 121 | 122 | 123 | 124 | 125 | 126 | 1532087558149 127 | 132 | 133 | 134 | 135 | 137 | 138 | 139 | 140 | 141 | 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 163 | 164 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | -------------------------------------------------------------------------------- /lecture-5/lecture-5.css: -------------------------------------------------------------------------------- 1 | #outer { 2 | 3 | width: 100px; 4 | height: 100px; 5 | margin:0 auto; 6 | box-sizing:border-box; 7 | position:relative; 8 | display:flex;flex-wrap: wrap; 9 | justify-content: center; 10 | animation-name: out-ani; 11 | animation-duration:4s; 12 | animation-iteration-count:infinite; 13 | animation-direction:alternate; 14 | animation-delay:-2s; 15 | } 16 | #inner{ 17 | background-color: green; 18 | border-radius:100%; 19 | width:100px; height:100px; 20 | box-sizing: border-box; 21 | animation-name:in-ani; 22 | animation-duration:4s; 23 | animation-iteration-count:infinite; 24 | animation-direction:alternate; 25 | animation-delay:-2s; 26 | } 27 | @keyframes out-ani{ 28 | 25%{border-top: 2px solid green; 29 | 30 | } 31 | 50%{ 32 | border-top: 2px solid green; 33 | border-right: 2px solid green; 34 | } 35 | 75%{ 36 | border-top: 2px solid green; 37 | border-right: 2px solid green; 38 | border-bottom: 2px solid green; 39 | } 40 | 100%{ 41 | border: 2px solid green; 42 | background-color:green; 43 | } 44 | } 45 | @keyframes in-ani{ 46 | 100%{ 47 | background-color:white; 48 | } 49 | } -------------------------------------------------------------------------------- /lecture-5/lecture-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | animate 6 | 7 | 8 | 9 | 10 |

11 |

12 | 13 |

14 |

15 | 16 | -------------------------------------------------------------------------------- /lecture-6/.idea/lecture-6.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /lecture-6/.idea/misc.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | -------------------------------------------------------------------------------- /lecture-6/.idea/modules.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lecture-6/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 48 | 49 | 50 | 56 | 57 | 58 | 59 | 60 | true 61 | 62 | true 63 | true 64 | 65 | 66 | true 67 | DEFINITION_ORDER 68 | 69 | 70 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 122 | 123 | 124 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 1532447949052 133 | 139 | 140 | 141 | 142 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 170 | 171 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | -------------------------------------------------------------------------------- /lecture-7/lecture-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Accessing HTML 6 | 7 | 8 | 9 | 10 |

11 |

12 | 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /lecture-7/lecture-7.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | var a; 3 | document.getElementById('button').onclick=function(){ 4 | a= document.getElementById('inp').value; 5 | document.getElementById('result').innerHTML=a; 6 | } 7 | 8 | })(); -------------------------------------------------------------------------------- /lecture-8-b/.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 46 | 47 | 48 | 54 | 55 | 56 | 57 | 58 | true 59 | 60 | true 61 | true 62 | 63 | 64 | true 65 | DEFINITION_ORDER 66 | 67 | 68 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 124 | 125 | 126 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 1532581319983 135 | 141 | 142 | 143 | 144 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | 157 | 158 | 159 | 160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 172 | 173 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | 184 | 185 | 186 | 187 | 188 | 189 | 190 | 191 | 192 | 193 | 194 | 195 | 196 | 197 | 198 | 199 | 200 | 201 | 202 | 203 | 204 | 205 | 206 | 207 | -------------------------------------------------------------------------------- /lecture-8/lecture-8.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TODO-LIST(without local-storage) 6 | 7 | 8 | 9 | 10 | 11 |

12 |

13 |

14 | 15 | 16 |

17 | 18 | 19 | -------------------------------------------------------------------------------- /lecture-8/lecture-8.js: -------------------------------------------------------------------------------- 1 | (function(){ 2 | 3 | var list=[]; 4 | btn=document.getElementById('btn'); 5 | inp=document.getElementById('inp'); 6 | res=document.getElementById('res'); 7 | 8 | btn.onclick=function(){ 9 | list.push(inp.value); 10 | inp.value=null; 11 | res.innerHTML=null; 12 | for(var i=0;i${list[i]}`; 14 | } 15 | btn2.onclick=function(){ 16 | res.innerHTML=null; 17 | for(var i=list.length-1;i>=0;i--) 18 | list.pop(); 19 | } 20 | })(); --------------------------------------------------------------------------------