├── .DS_Store ├── README.md ├── animations.html ├── background.html ├── bootstrap.html ├── boxModel.html ├── css └── styles.css ├── display.html ├── displayandvisibility.html ├── dom-selectors.js ├── flex.html ├── grid.html ├── images └── match.jpeg ├── index.html ├── mediaquery.html ├── music.mp3 ├── opacity.html ├── overflow.html ├── position.html └── project.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vanshuhassija/juno-batch-in-class-notes/4ae0c831eef7887f7711f5fcdf53db4c453cf426/.DS_Store -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # juno-batch-in-class-notes -------------------------------------------------------------------------------- /animations.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 49 | 50 | 51 |

52 | 53 | -------------------------------------------------------------------------------- /background.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 16 | 17 | 18 |

19 |

This is h1

20 |

21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /bootstrap.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 14 | 23 | 24 | 25 |

26 |

27 |

28 |

29 |

30 |

31 |

32 | 33 | 34 | 35 | 43 | -------------------------------------------------------------------------------- /boxModel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 32 | 33 | 34 |

This is heading 1

35 |

This is Heading 2

36 | 37 | -------------------------------------------------------------------------------- /css/styles.css: -------------------------------------------------------------------------------- 1 | #target{ 2 | background:green; 3 | } -------------------------------------------------------------------------------- /display.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 16 | 17 | 18 |

19 |

20 | 21 | -------------------------------------------------------------------------------- /displayandvisibility.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 13 | 14 | 15 | This Element is Visible 16 | Another span 17 | 18 | -------------------------------------------------------------------------------- /dom-selectors.js: -------------------------------------------------------------------------------- 1 | function changeBackgroundColor(){ 2 | const paragraphs=document.querySelectorAll(".blue"); 3 | //Query Selector Only returns the first element That matches the criteria 4 | 5 | console.log("Paragraphs are",paragraphs) 6 | } 7 | 8 | //document.getElementById("Id That you want to access") 9 | //document.getElementsByClassName("Class You Want to access") 10 | //document.getElementsByTagName("Tag That You want to access") 11 | //document.querySelector("Use Css Like Sytax")---> Will return only one element 12 | //document.querySelectorAll("Use Css like Syntax") ---> Will return all elements matching 13 | //the criteria 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | changeBackgroundColor(); 22 | -------------------------------------------------------------------------------- /flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flexbox 8 | 32 | 33 | 34 |

35 |

36 |

37 |

38 |

39 |

40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 20 | 21 | 22 |

23 |

24 |

25 |

26 |

27 |

28 |

29 | 30 | -------------------------------------------------------------------------------- /images/match.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vanshuhassija/juno-batch-in-class-notes/4ae0c831eef7887f7711f5fcdf53db4c453cf426/images/match.jpeg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 25 | 26 | 27 |

This is a demo class for CSS

28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /mediaquery.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Resume 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 19 | 20 |

21 |

22 |

23 |

24 |

25 |

26 |

27 |

28 | Vanshu Hassija 29 |

30 |

31 | Senior Software Engineer 32 |

33 |

34 | I am a full stack Developer. 35 |

36 | 37 |

38 |

39 |

40 | 45 |

46 |

47 | 48 |

49 | 50 |

51 | 52 |

53 |

54 | 55 | 56 |

57 |

58 |

59 | 60 | -------------------------------------------------------------------------------- /music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/vanshuhassija/juno-batch-in-class-notes/4ae0c831eef7887f7711f5fcdf53db4c453cf426/music.mp3 -------------------------------------------------------------------------------- /opacity.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 33 | 34 | 35 |

36 |

This is the image.

37 |

38 | 39 | 40 | -------------------------------------------------------------------------------- /overflow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 15 | 16 | 17 | 18 |

CSS Overflow

19 | 20 |

The overflow property controls what happens to content that is too big to fit into an area.

21 | 22 |

This text is really long and the height of its container is only 100 pixels. Therefore, a scrollbar is added to help the reader to scroll the content. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem.

23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 25 | 26 | 27 |

28 |

29 |

30 |

31 |

32 | 33 |

34 |

35 |

36 |

Hello World

37 |

Hello World

38 |

Hello World

39 |

Hello World

40 |

Hello World

41 |

Hello World

42 |

Hello World

43 |

Hello World

44 |

Hello World

45 |

Hello World

46 |

Hello World

47 |

Hello World

48 |

Hello World

49 |

Hello World

50 |

Hello World

51 |

Hello World

52 |

Hello World

53 |

Hello World

54 |

Hello World

55 |

Hello World

56 |

Hello World

57 |

Hello World

58 |

Hello World

59 |

Hello World

60 |

Hello World

61 |

Hello World

62 | 63 | 64 | -------------------------------------------------------------------------------- /project.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 14 | 15 | 16 | 48 |

49 |

50 |

Album Example

51 |

52 | Something short and leading about the collection below—its contents, 53 | the creator, etc. Make it short and sweet, but not too short so folks 54 | don't simply skip over it entirely. 55 |

56 |

57 | 58 | 59 |

60 |

61 |

62 |

63 |

64 |

65 |

66 |

71 |

72 |

Card title

73 |

74 | Some quick example text to build on the card title and make up 75 | the bulk of the card's content. 76 |

77 | Go somewhere 78 |

79 |

80 |

81 |

82 |

83 |

88 |

89 |

Card title

90 |

91 | Some quick example text to build on the card title and make up 92 | the bulk of the card's content. 93 |

94 | Go somewhere 95 |

96 |

97 |

98 |

99 |

100 |

105 |

106 |

Card title

107 |

108 | Some quick example text to build on the card title and make up 109 | the bulk of the card's content. 110 |

111 | Go somewhere 112 |

113 |

114 |

115 |

116 |

117 |

122 |

123 |

Card title

124 |

125 | Some quick example text to build on the card title and make up 126 | the bulk of the card's content. 127 |

128 | Go somewhere 129 |

130 |

131 |

132 |

133 |

134 |

139 |

140 |

Card title

141 |

142 | Some quick example text to build on the card title and make up 143 | the bulk of the card's content. 144 |

145 | Go somewhere 146 |

147 |

148 |

149 |

150 |

151 |

156 |

157 |

Card title

158 |

159 | Some quick example text to build on the card title and make up 160 | the bulk of the card's content. 161 |

162 | Go somewhere 163 |

164 |

165 |

166 |

167 |

168 |

173 |

174 |

Card title

175 |

176 | Some quick example text to build on the card title and make up 177 | the bulk of the card's content. 178 |

179 | Go somewhere 180 |

181 |

182 |

183 |

184 |

185 |

190 |

191 |

Card title

192 |

193 | Some quick example text to build on the card title and make up 194 | the bulk of the card's content. 195 |

196 | Go somewhere 197 |

198 |

199 |

200 |

201 |

202 |

207 |

208 |

Card title

209 |

210 | Some quick example text to build on the card title and make up 211 | the bulk of the card's content. 212 |

213 | Go somewhere 214 |

215 |

216 |

217 |

218 |

219 |

224 |

225 |

Card title

226 |

227 | Some quick example text to build on the card title and make up 228 | the bulk of the card's content. 229 |

230 | Go somewhere 231 |

232 |

233 |

234 |

235 |

236 |

241 |

242 |

Card title

243 |

244 | Some quick example text to build on the card title and make up 245 | the bulk of the card's content. 246 |

247 | Go somewhere 248 |

249 |

250 |

251 |

252 |

253 |

258 |

259 |

Card title

260 |

261 | Some quick example text to build on the card title and make up 262 | the bulk of the card's content. 263 |

264 | Go somewhere 265 |

266 |

267 |

268 |

269 |

270 |

275 |

276 |

Card title

277 |

278 | Some quick example text to build on the card title and make up 279 | the bulk of the card's content. 280 |

281 | Go somewhere 282 |

283 |

284 |

285 |

286 |

287 |

292 |

293 |

Card title

294 |

295 | Some quick example text to build on the card title and make up 296 | the bulk of the card's content. 297 |

298 | Go somewhere 299 |

300 |

301 |

302 |

303 |

304 |

309 |

310 |

Card title

311 |

312 | Some quick example text to build on the card title and make up 313 | the bulk of the card's content. 314 |

315 | Go somewhere 316 |

317 |

318 |

319 |

320 |

321 |

326 |

327 |

Card title

328 |

329 | Some quick example text to build on the card title and make up 330 | the bulk of the card's content. 331 |

332 | Go somewhere 333 |

334 |

335 |

336 |

337 |

338 | 346 | 351 | 356 | 357 | 358 | --------------------------------------------------------------------------------