├── Assignments ├── lesson-01 │ ├── 1a.html │ ├── 1b.html │ ├── 1c.html │ ├── 1d.html │ ├── 1e.html │ ├── 1f.html │ ├── 1g.html │ └── README.md ├── lesson-02 │ ├── 2a.html │ ├── 2b.html │ ├── 2c.html │ ├── 2d.html │ ├── 2e.html │ ├── 2f.html │ └── README.md ├── lesson-03 │ ├── 3a.html │ ├── 3b.html │ ├── 3c.html │ ├── 3d.html │ ├── 3e.html │ ├── 3f.html │ └── README.md ├── lesson-04 │ ├── 4a.html │ ├── 4b.html │ ├── 4c.html │ ├── 4d.html │ ├── 4e.html │ ├── 4f.html │ ├── 4g.html │ ├── 4h.html │ ├── 4i.html │ ├── 4j.html │ ├── 4k.html │ └── README.md ├── lesson-05 │ ├── 5a.html │ ├── 5b.html │ ├── 5c.html │ ├── 5d.html │ ├── 5e.html │ ├── 5f.html │ ├── 5g.html │ └── README.md ├── lesson-06 │ ├── 6abc │ │ ├── 4a.css │ │ ├── 4a.html │ │ ├── 4d.css │ │ ├── 4d.html │ │ ├── 5a.css │ │ ├── 5a.html │ │ ├── 5d.css │ │ └── 5d.html │ ├── 6d.css │ ├── 6d.html │ └── README.md ├── lesson-07 │ ├── 7a.css │ ├── 7a.html │ ├── 7b.css │ ├── 7b.html │ ├── 7c.css │ ├── 7c.html │ ├── 7d.css │ ├── 7d.html │ ├── 7e.css │ ├── 7e.html │ ├── 7f.css │ ├── 7f.html │ ├── 7g.css │ ├── 7g.html │ ├── README.md │ └── cat.jpg ├── lesson-08 │ ├── 8a.css │ ├── 8a.html │ ├── 8b.css │ ├── 8b.html │ ├── 8c.css │ ├── 8c.html │ ├── 8d.css │ ├── 8d.html │ ├── 8e.css │ ├── 8e.html │ ├── README.md │ └── google-logo.png ├── lesson-09 │ ├── 9a.css │ ├── 9a.html │ ├── 9b.css │ ├── 9b.html │ ├── 9c.css │ ├── 9c.html │ ├── 9d.css │ ├── 9d.html │ ├── 9e.css │ ├── 9e.html │ ├── 9f.css │ ├── 9f.html │ ├── 9g.css │ ├── 9g.html │ ├── 9h.css │ ├── 9h.html │ ├── README.md │ ├── cat.jpg │ ├── cat2.jpg │ ├── dog.jpg │ └── google-logo.png ├── lesson-10 │ ├── 10a-step-0.png │ ├── 10a-step-1.png │ ├── 10a-step-2.png │ ├── 10b-step-0.png │ ├── 10b-step-1.png │ ├── 10b-step-2.png │ ├── 10b-step-3.png │ ├── 10c-step-0.png │ ├── 10c-step-1.png │ ├── 10c-step-2.png │ ├── 10c-step-3.png │ ├── 10d-step-0.png │ ├── 10d-step-1.png │ ├── 10d-step-2.png │ ├── 10d-step-3.png │ ├── 10e.css │ ├── 10e.html │ ├── README.md │ ├── cat.jpg │ ├── cat2.jpg │ ├── dog.jpg │ └── dog2.jpg ├── lesson-11 │ ├── 11a.css │ ├── 11a.html │ ├── 11b.css │ ├── 11b.html │ ├── 11c.css │ ├── 11c.html │ ├── 11d.css │ ├── 11d.html │ ├── README.md │ ├── cat.jpg │ ├── cat2.jpg │ ├── dog.jpg │ └── dog2.jpg ├── lesson-12 │ ├── 12a.css │ ├── 12a.html │ ├── 12b.css │ ├── 12b.html │ ├── 12c.css │ ├── 12c.html │ ├── 12d.css │ ├── 12d.html │ ├── 12e.css │ ├── 12e.html │ ├── 12f.css │ ├── 12f.html │ ├── 12g.css │ ├── 12g.html │ ├── README.md │ ├── cat.jpg │ ├── cat2.jpg │ └── dog.jpg ├── lesson-13 │ ├── 13a.css │ ├── 13a.html │ ├── 13b.css │ ├── 13b.html │ ├── 13c-step-0.png │ ├── 13c-step-1.png │ ├── 13c-step-2.png │ ├── 13c-step-3.png │ ├── 13c-step-4.png │ ├── 13d.css │ ├── 13d.html │ ├── 13e.css │ ├── 13e.html │ ├── 13f-step-0.png │ ├── 13f-step-1.png │ ├── 13f-step-2.png │ ├── 13f-step-3.png │ ├── 13f-step-4.png │ ├── 13g.css │ ├── 13g.html │ ├── README.md │ ├── cat.jpg │ ├── cat2.jpg │ └── dog.jpg ├── lesson-14 │ ├── 14a.css │ ├── 14a.html │ ├── 14b.css │ ├── 14b.html │ ├── 14c.css │ ├── 14c.html │ ├── 14d.css │ ├── 14d.html │ ├── 14e.css │ ├── 14e.html │ ├── 14f.css │ ├── 14f.html │ ├── README.md │ ├── cat.jpg │ ├── cat2.jpg │ └── dog.jpg ├── lesson-15 │ ├── 15a.css │ ├── 15a.html │ ├── 15b.css │ ├── 15b.html │ ├── 15c.css │ ├── 15c.html │ ├── 15d.css │ ├── 15d.html │ ├── 15e.css │ ├── 15e.html │ ├── 15f.css │ ├── 15f.html │ ├── README.md │ └── shirt.jpg ├── lesson-16 │ ├── 16a │ │ ├── header.css │ │ └── youtube.html │ ├── 16b │ │ ├── video.css │ │ └── youtube.html │ ├── 16c │ │ └── youtube.html │ ├── 16d │ │ ├── video.css │ │ └── youtube.html │ └── README.md └── lesson-17 │ ├── 17a │ └── video.css │ ├── 17b │ ├── channel-pictures │ │ ├── channel-10.jpeg │ │ ├── channel-11.jpeg │ │ ├── channel-12.jpeg │ │ ├── channel-7.jpeg │ │ ├── channel-8.jpeg │ │ └── channel-9.jpeg │ ├── thumbnails │ │ ├── thumbnail-10.webp │ │ ├── thumbnail-11.webp │ │ ├── thumbnail-12.webp │ │ ├── thumbnail-7.webp │ │ ├── thumbnail-8.webp │ │ └── thumbnail-9.webp │ └── youtube.html │ ├── 17c │ ├── general.css │ └── sidebar.css │ ├── 17d-g.html │ └── README.md ├── README.md ├── W3Schools.md ├── Youtube_clone ├── Assets │ ├── css │ │ ├── Tooltip.css │ │ ├── footer.css │ │ ├── general.css │ │ ├── header.css │ │ ├── responsive.css │ │ ├── sidebar.css │ │ └── video.css │ ├── icons │ │ ├── YouTube.png │ │ ├── explore.svg │ │ ├── hamburger-menu.svg │ │ ├── home.svg │ │ ├── library.svg │ │ ├── notifications.svg │ │ ├── originals.svg │ │ ├── search.svg │ │ ├── subscriptions.svg │ │ ├── upload.svg │ │ ├── voice-search-icon.svg │ │ ├── youtube-apps.svg │ │ ├── youtube-logo.svg │ │ └── youtube-music.svg │ ├── logo │ │ ├── channel_01.jpg │ │ ├── channel_02.jpg │ │ ├── channel_03.jpg │ │ ├── channel_04.jpg │ │ ├── channel_05.jpg │ │ ├── channel_06.jpg │ │ ├── channel_07.jpg │ │ ├── channel_08.jpg │ │ ├── channel_09.jpg │ │ ├── channel_10.jpg │ │ ├── channel_11.jpg │ │ ├── channel_12.jpg │ │ └── channel_me.jpg │ └── thumbnails │ │ ├── thumbnail1.jpg │ │ ├── thumbnail10.jpg │ │ ├── thumbnail11.jpg │ │ ├── thumbnail12.jpg │ │ ├── thumbnail2.jpg │ │ ├── thumbnail3.jpg │ │ ├── thumbnail4.jpg │ │ ├── thumbnail5.jpg │ │ ├── thumbnail6.jpg │ │ ├── thumbnail7.jpg │ │ ├── thumbnail8.jpg │ │ └── thumbnail9.jpg └── index.html └── lecture code ├── lesson-01 └── website.html ├── lesson-02 ├── buttons.html └── website.html ├── lesson-03 ├── buttons.html └── website.html ├── lesson-04 ├── buttons.html └── website.html ├── lesson-05 ├── buttons.html ├── text.html └── website.html ├── lesson-06 ├── buttons.html ├── styles │ ├── buttons.css │ └── text.css ├── text.html └── website.html ├── lesson-07 ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── thumbnails │ └── thumbnail-1.webp └── youtube.html ├── lesson-08 ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── thumbnails │ └── thumbnail-1.webp └── youtube.html ├── lesson-09 ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── thumbnails │ ├── thumbnail-1.webp │ └── thumbnail-2.webp └── youtube.html ├── lesson-10 ├── channel-pictures │ ├── channel-1.jpeg │ └── channel-2.jpeg ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── thumbnails │ ├── thumbnail-1.webp │ └── thumbnail-2.webp └── youtube.html ├── lesson-11 ├── channel-pictures │ ├── channel-1.jpeg │ ├── channel-2.jpeg │ ├── channel-3.jpeg │ ├── channel-4.jpeg │ ├── channel-5.jpeg │ └── channel-6.jpeg ├── grid.html ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── thumbnails │ ├── thumbnail-1.webp │ ├── thumbnail-2.webp │ ├── thumbnail-3.webp │ ├── thumbnail-4.webp │ ├── thumbnail-5.webp │ └── thumbnail-6.webp └── youtube.html ├── lesson-12 ├── channel-pictures │ ├── channel-1.jpeg │ ├── channel-2.jpeg │ ├── channel-3.jpeg │ ├── channel-4.jpeg │ ├── channel-5.jpeg │ └── channel-6.jpeg ├── flexbox.html ├── grid.html ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── styles │ ├── general.css │ ├── header.css │ └── video.css ├── thumbnails │ ├── thumbnail-1.webp │ ├── thumbnail-2.webp │ ├── thumbnail-3.webp │ ├── thumbnail-4.webp │ ├── thumbnail-5.webp │ └── thumbnail-6.webp └── youtube.html ├── lesson-13 ├── channel-pictures │ ├── channel-1.jpeg │ ├── channel-2.jpeg │ ├── channel-3.jpeg │ ├── channel-4.jpeg │ ├── channel-5.jpeg │ ├── channel-6.jpeg │ └── my-channel.jpeg ├── flexbox.html ├── grid.html ├── icons │ ├── hamburger-menu.svg │ ├── notifications.svg │ ├── search.svg │ ├── upload.svg │ ├── voice-search-icon.svg │ ├── youtube-apps.svg │ └── youtube-logo.svg ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── styles │ ├── general.css │ ├── header.css │ └── video.css ├── thumbnails │ ├── thumbnail-1.webp │ ├── thumbnail-2.webp │ ├── thumbnail-3.webp │ ├── thumbnail-4.webp │ ├── thumbnail-5.webp │ └── thumbnail-6.webp └── youtube.html ├── lesson-14 ├── channel-pictures │ ├── channel-1.jpeg │ ├── channel-2.jpeg │ ├── channel-3.jpeg │ ├── channel-4.jpeg │ ├── channel-5.jpeg │ ├── channel-6.jpeg │ └── my-channel.jpeg ├── flexbox.html ├── grid.html ├── icons │ ├── hamburger-menu.svg │ ├── notifications.svg │ ├── search.svg │ ├── upload.svg │ ├── voice-search-icon.svg │ ├── youtube-apps.svg │ └── youtube-logo.svg ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── position.html ├── styles │ ├── general.css │ ├── header.css │ ├── sidebar.css │ └── video.css ├── thumbnails │ ├── thumbnail-1.webp │ ├── thumbnail-2.webp │ ├── thumbnail-3.webp │ ├── thumbnail-4.webp │ ├── thumbnail-5.webp │ └── thumbnail-6.webp └── youtube.html ├── lesson-15 ├── channel-pictures │ ├── channel-1.jpeg │ ├── channel-2.jpeg │ ├── channel-3.jpeg │ ├── channel-4.jpeg │ ├── channel-5.jpeg │ ├── channel-6.jpeg │ └── my-channel.jpeg ├── flexbox.html ├── grid.html ├── icons │ ├── hamburger-menu.svg │ ├── notifications.svg │ ├── search.svg │ ├── upload.svg │ ├── voice-search-icon.svg │ ├── youtube-apps.svg │ └── youtube-logo.svg ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── position.html ├── styles │ ├── general.css │ ├── header.css │ ├── sidebar.css │ └── video.css ├── thumbnails │ ├── thumbnail-1.webp │ ├── thumbnail-2.webp │ ├── thumbnail-3.webp │ ├── thumbnail-4.webp │ ├── thumbnail-5.webp │ └── thumbnail-6.webp └── youtube.html ├── lesson-16 ├── channel-pictures │ ├── channel-1.jpeg │ ├── channel-2.jpeg │ ├── channel-3.jpeg │ ├── channel-4.jpeg │ ├── channel-5.jpeg │ ├── channel-6.jpeg │ └── my-channel.jpeg ├── flexbox.html ├── grid.html ├── icons │ ├── explore.svg │ ├── hamburger-menu.svg │ ├── home.svg │ ├── library.svg │ ├── notifications.svg │ ├── originals.svg │ ├── search.svg │ ├── subscriptions.svg │ ├── upload.svg │ ├── voice-search-icon.svg │ ├── youtube-apps.svg │ ├── youtube-logo.svg │ └── youtube-music.svg ├── intro-to-html │ ├── buttons.html │ ├── styles │ │ ├── buttons.css │ │ └── text.css │ ├── text.html │ └── website.html ├── position.html ├── styles │ ├── general.css │ ├── header.css │ ├── sidebar.css │ └── video.css ├── thumbnails │ ├── thumbnail-1.webp │ ├── thumbnail-2.webp │ ├── thumbnail-3.webp │ ├── thumbnail-4.webp │ ├── thumbnail-5.webp │ └── thumbnail-6.webp └── youtube.html └── lesson-17 ├── channel-pictures ├── channel-1.jpeg ├── channel-2.jpeg ├── channel-3.jpeg ├── channel-4.jpeg ├── channel-5.jpeg ├── channel-6.jpeg └── my-channel.jpeg ├── flexbox.html ├── grid.html ├── icons ├── explore.svg ├── hamburger-menu.svg ├── home.svg ├── library.svg ├── notifications.svg ├── originals.svg ├── search.svg ├── subscriptions.svg ├── upload.svg ├── voice-search-icon.svg ├── youtube-apps.svg ├── youtube-logo.svg └── youtube-music.svg ├── intro-to-html ├── buttons.html ├── styles │ ├── buttons.css │ └── text.css ├── text.html └── website.html ├── position.html ├── styles ├── general.css ├── header.css ├── sidebar.css └── video.css ├── thumbnails ├── thumbnail-1.webp ├── thumbnail-2.webp ├── thumbnail-3.webp ├── thumbnail-4.webp ├── thumbnail-5.webp └── thumbnail-6.webp └── youtube.html /Assignments/lesson-01/1a.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Assignments/lesson-01/1b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /Assignments/lesson-01/1c.html: -------------------------------------------------------------------------------- 1 |

Hello, world!

2 | -------------------------------------------------------------------------------- /Assignments/lesson-01/1d.html: -------------------------------------------------------------------------------- 1 |

Hello, world!

2 |

Today I went to the grocery store to buy some eggs and vegetables.

3 | -------------------------------------------------------------------------------- /Assignments/lesson-01/1e.html: -------------------------------------------------------------------------------- 1 | Search with Google 2 | -------------------------------------------------------------------------------- /Assignments/lesson-01/1f.html: -------------------------------------------------------------------------------- 1 | 2 | Search with Google 3 | 4 | -------------------------------------------------------------------------------- /Assignments/lesson-01/1g.html: -------------------------------------------------------------------------------- 1 | 2 | Back to Amazon 3 | 4 | 5 |

6 | Nike Black Running Shoes 7 |

8 | 9 |

10 | $39 - in stock. 11 |

12 | 13 |

14 | Free delivery tomorrow. 15 |

16 | 17 | 20 | 21 | 24 | -------------------------------------------------------------------------------- /Assignments/lesson-01/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises1-1](https://user-images.githubusercontent.com/70604577/160036623-8bde6501-5ee6-4577-92a4-6ffbc02e858b.png) 3 | ![exercises1-2](https://user-images.githubusercontent.com/70604577/160036632-89153aef-a2ab-40a4-9fd8-7684513deedc.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-02/2a.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /Assignments/lesson-02/2b.html: -------------------------------------------------------------------------------- 1 | 11 | 12 | 15 | -------------------------------------------------------------------------------- /Assignments/lesson-02/2c.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | 18 | -------------------------------------------------------------------------------- /Assignments/lesson-02/2d.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | 32 | 35 | -------------------------------------------------------------------------------- /Assignments/lesson-02/2e.html: -------------------------------------------------------------------------------- 1 | 29 | 30 | 33 | 34 | 37 | -------------------------------------------------------------------------------- /Assignments/lesson-02/2f.html: -------------------------------------------------------------------------------- 1 | 35 | 36 | 37 | Back to Amazon 38 | 39 | 40 |

41 | Nike Black Running Shoes 42 |

43 | 44 |

45 | $39 - in stock. 46 |

47 | 48 |

49 | Free delivery tomorrow. 50 |

51 | 52 | 55 | 56 | 59 | -------------------------------------------------------------------------------- /Assignments/lesson-02/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises2-1](https://user-images.githubusercontent.com/70604577/160036745-268ed519-90ae-4eb4-aa41-ad4785ee6547.png) 3 | ![exercises2-2](https://user-images.githubusercontent.com/70604577/160036755-a0f635bf-9d61-4265-a3be-91f180959907.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-03/3a.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 20 | -------------------------------------------------------------------------------- /Assignments/lesson-03/3b.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 19 | -------------------------------------------------------------------------------- /Assignments/lesson-03/3c.html: -------------------------------------------------------------------------------- 1 | 19 | 20 | 23 | -------------------------------------------------------------------------------- /Assignments/lesson-03/3d.html: -------------------------------------------------------------------------------- 1 | 39 | 40 | 43 | 44 | 47 | -------------------------------------------------------------------------------- /Assignments/lesson-03/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | https://user-images.githubusercontent.com/70604577/160037789-e5e9b568-c3c8-498a-a89d-90ef57933c9d.mp4 3 | 4 | https://user-images.githubusercontent.com/70604577/160037791-441f091f-f9c1-402c-8b16-1186e51d31de.mp4 5 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4a.html: -------------------------------------------------------------------------------- 1 | 18 | 19 | 22 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4b.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 21 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4c.html: -------------------------------------------------------------------------------- 1 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4f.html: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4g.html: -------------------------------------------------------------------------------- 1 | 20 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4h.html: -------------------------------------------------------------------------------- 1 | 22 | 23 | 24 | 1 25 | 2 26 | 3 27 | 4 28 | 5 29 | 30 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4i.html: -------------------------------------------------------------------------------- 1 | 25 | 26 | 29 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4j.html: -------------------------------------------------------------------------------- 1 | 21 | 22 | 25 | -------------------------------------------------------------------------------- /Assignments/lesson-04/4k.html: -------------------------------------------------------------------------------- 1 | 27 | 28 | 31 | 34 | 37 | -------------------------------------------------------------------------------- /Assignments/lesson-04/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | https://user-images.githubusercontent.com/70604577/160038335-3f2aa74a-fd9e-484d-94b6-df88f66fc74d.mp4 3 | 4 | https://user-images.githubusercontent.com/70604577/160038339-d2ba5ea8-9b23-4a60-977f-82cf3cbf6bca.mp4 5 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5a.html: -------------------------------------------------------------------------------- 1 | 8 | 9 |

10 | This is Tahoma Font 11 |

12 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5b.html: -------------------------------------------------------------------------------- 1 | 17 | 18 |

19 | Biggest Deals of the Year! 20 |

21 | 22 |

23 | Sales end Tuesday 24 |

25 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5c.html: -------------------------------------------------------------------------------- 1 | 38 | 39 |

40 | HTML CSS Course 41 |

42 | 43 |

44 | Beginner to Pro 45 |

46 | 47 |

48 | In this course, we'll learn the skills you need to become a developer. 49 |

50 | 51 | 54 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5d.html: -------------------------------------------------------------------------------- 1 | 24 | 25 |

26 | Shopping for your business? 27 |

28 | 29 |

30 | See how Apple at Work can help. 31 |

32 | 33 |

34 | Learn more > 35 |

36 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5e.html: -------------------------------------------------------------------------------- 1 | 42 | 43 |

44 | New 45 |

46 | 47 |

48 | MacBook Pro 49 |

50 | 51 |

52 | Supercharged for pros. 53 |

54 | 55 |

56 | From $1999 57 |

58 | 59 |

60 | Buy 61 |

62 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5f.html: -------------------------------------------------------------------------------- 1 | 31 | 32 |

33 | 1,049.61 USD 34 |

35 | 36 |

37 | +18.05 (1.75%) today 38 |

39 | 40 |

41 | After hours 1,048.00 42 | -1.61 (0.15%) 43 |

44 | -------------------------------------------------------------------------------- /Assignments/lesson-05/5g.html: -------------------------------------------------------------------------------- 1 | 31 | 32 |

33 | freeCodeCamp.org 34 | @freeCodeCamp 1h 35 |

36 | 37 |

38 | As a web developer, you'll want to make your projects easy to use and navigate around. 39 |

40 | 41 |

42 | Here @chp_it outlines the top skills new developers should have. 43 |

44 | -------------------------------------------------------------------------------- /Assignments/lesson-05/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises5-1](https://user-images.githubusercontent.com/70604577/160038548-cd23f44e-d572-4441-9f09-9e5b363f4dce.png) 3 | ![exercises5-2](https://user-images.githubusercontent.com/70604577/160038556-34f872f8-6c92-45bf-95b2-dda66e117356.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/4a.css: -------------------------------------------------------------------------------- 1 | .uber-button { 2 | background-color: black; 3 | color: white; 4 | border: none; 5 | padding-top: 12px; 6 | padding-bottom: 12px; 7 | padding-left: 15px; 8 | padding-right: 15px; 9 | cursor: pointer; 10 | transition: opacity 0.15s; 11 | } 12 | 13 | .uber-button:hover { 14 | opacity: 0.8; 15 | } 16 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/4a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Uber Button 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/4d.css: -------------------------------------------------------------------------------- 1 | .get-started-button { 2 | background-color: rgb(121, 82, 179); 3 | color: white; 4 | border: none; 5 | padding-top: 12px; 6 | padding-bottom: 12px; 7 | padding-left: 20px; 8 | padding-right: 20px; 9 | font-weight: bold; 10 | border-radius: 4px; 11 | cursor: pointer; 12 | margin-right: 6px; 13 | transition: background-color 0.15s; 14 | } 15 | 16 | .get-started-button:hover { 17 | background-color: rgb(99, 60, 156); 18 | } 19 | 20 | .download-button { 21 | background-color: white; 22 | color: rgb(108, 117, 125); 23 | border-width: 1px; 24 | border-style: solid; 25 | border-color: rgb(108, 117, 125); 26 | padding-top: 12px; 27 | padding-bottom: 12px; 28 | padding-left: 17px; 29 | padding-right: 17px; 30 | font-weight: bold; 31 | border-radius: 4px; 32 | cursor: pointer; 33 | transition: background-color 0.15s, 34 | color 0.15s; 35 | } 36 | 37 | .download-button:hover { 38 | background-color: rgb(108, 117, 125); 39 | color: white; 40 | } 41 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/4d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Bootstrap Buttons 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/5a.css: -------------------------------------------------------------------------------- 1 | .title { 2 | font-family: Tahoma; 3 | font-size: 30px; 4 | font-weight: bold; 5 | } 6 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/5a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tahoma Font 5 | 6 | 7 | 8 |

9 | This is Tahoma Font 10 |

11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/5d.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | text-align: center; 4 | margin-top: 0; 5 | margin-bottom: 0; 6 | } 7 | 8 | .title { 9 | font-size: 28px; 10 | font-weight: bold; 11 | margin-top: 20px; 12 | margin-bottom: 20px; 13 | } 14 | 15 | .subtitle { 16 | margin-bottom: 20px; 17 | } 18 | 19 | .link { 20 | color: rgb(58, 108, 199); 21 | } 22 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6abc/5d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Apple Example 5 | 6 | 7 | 8 |

9 | Shopping for your business? 10 |

11 | 12 |

13 | See how Apple at Work can help. 14 |

15 | 16 |

17 | Learn more > 18 |

19 | 20 | 21 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6d.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Montserrat; 3 | text-align: center; 4 | margin-top: 0; 5 | margin-bottom: 0; 6 | } 7 | 8 | .title { 9 | font-size: 35px; 10 | font-weight: bold; 11 | margin-bottom: 10px; 12 | } 13 | 14 | .underlined { 15 | text-decoration: underline; 16 | } 17 | -------------------------------------------------------------------------------- /Assignments/lesson-06/6d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Tesla Example 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | Model 3 15 |

16 | 17 |

18 | Order Online for 19 | 20 | Touchless Delivery 21 | 22 |

23 | 24 | 25 | -------------------------------------------------------------------------------- /Assignments/lesson-06/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![Exercises 6](https://user-images.githubusercontent.com/70604577/160038643-817dc585-b7f9-4b93-b2f1-8a32f8ca5b69.png) 3 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7a.css: -------------------------------------------------------------------------------- 1 | .cat-picture { 2 | width: 250px; 3 | border-radius: 15px; 4 | } 5 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7b.css: -------------------------------------------------------------------------------- 1 | .cat-picture { 2 | width: 200px; 3 | height: 200px; 4 | object-fit: cover; 5 | object-position: center; 6 | } 7 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7c.css: -------------------------------------------------------------------------------- 1 | .cat-picture { 2 | width: 200px; 3 | height: 200px; 4 | border-radius: 100px; 5 | object-fit: cover; 6 | object-position: center; 7 | } 8 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7d.css: -------------------------------------------------------------------------------- 1 | input { 2 | font-size: 16px; 3 | border-width: 1px; 4 | border-style: solid; 5 | border-color: rgb(200, 200, 200); 6 | padding-top: 12px; 7 | padding-bottom: 12px; 8 | padding-left: 15px; 9 | padding-right: 15px; 10 | border-radius: 8px; 11 | } 12 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7e.css: -------------------------------------------------------------------------------- 1 | input { 2 | font-size: 16px; 3 | width: 500px; 4 | border: none; 5 | padding-top: 12px; 6 | padding-bottom: 12px; 7 | padding-left: 15px; 8 | padding-right: 15px; 9 | border-radius: 30px; 10 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); 11 | margin-top: 20px; 12 | margin-left: 20px; 13 | } 14 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7f.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | color: rgb(100, 100, 100); 4 | margin-top: 0; 5 | margin-bottom: 0; 6 | } 7 | 8 | .label { 9 | font-size: 16px; 10 | margin-bottom: 10px; 11 | } 12 | 13 | .text-box { 14 | font-size: 16px; 15 | width: 400px; 16 | border-width: 2px; 17 | border-style: solid; 18 | border-color: rgb(100, 100, 100); 19 | padding-top: 7px; 20 | padding-bottom: 7px; 21 | border-radius: 5px; 22 | margin-bottom: 20px; 23 | } 24 | 25 | .disclaimer { 26 | font-size: 16px; 27 | margin-bottom: 20px; 28 | } 29 | 30 | .join-button { 31 | background-color: rgb(10, 102, 194); 32 | color: white; 33 | border: none; 34 | font-size: 20px; 35 | width: 400px; 36 | padding-top: 16px; 37 | padding-bottom: 16px; 38 | border-radius: 30px; 39 | } 40 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Email

7 | 8 |

9 | By clicking Agree & Join, you agree to the Privacy Policy. 10 |

11 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7g.css: -------------------------------------------------------------------------------- 1 | .profile-picture { 2 | width: 50px; 3 | height: 50px; 4 | object-fit: cover; 5 | border-radius: 25px; 6 | vertical-align: middle; 7 | margin-right: 5px; 8 | } 9 | 10 | .text-box { 11 | font-size: 18px; 12 | border: none; 13 | width: 300px; 14 | vertical-align: middle; 15 | } 16 | 17 | .tweet-button { 18 | background-color: rgb(29, 155, 240); 19 | color: white; 20 | border: none; 21 | padding-top: 8px; 22 | padding-bottom: 8px; 23 | padding-left: 16px; 24 | padding-right: 16px; 25 | border-radius: 30px; 26 | font-size: 16px; 27 | font-weight: bold; 28 | vertical-align: middle; 29 | } 30 | -------------------------------------------------------------------------------- /Assignments/lesson-07/7g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/lesson-07/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises7-1](https://user-images.githubusercontent.com/70604577/160038742-a2b2c51f-aa3e-4836-8cf1-13edeab590c6.png) 3 | ![exercises7-2](https://user-images.githubusercontent.com/70604577/160038752-7a64f57d-4942-4694-b427-3ad7c81c65f4.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-07/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-07/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-08/8a.css: -------------------------------------------------------------------------------- 1 | input { 2 | display: block; 3 | margin-bottom: 5px; 4 | } 5 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8b.css: -------------------------------------------------------------------------------- 1 | p { 2 | display: inline-block; 3 | width: 200px; 4 | vertical-align: middle; 5 | } 6 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | Thanks for chatting with our customer support. Would you like to take our quick survey? 8 |

9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8c.css: -------------------------------------------------------------------------------- 1 | img { 2 | display: block; 3 | width: 200px; 4 | margin-left: 150px; 5 | margin-bottom: 10px; 6 | } 7 | 8 | input { 9 | border: none; 10 | padding-top: 12px; 11 | padding-bottom: 12px; 12 | padding-left: 16px; 13 | padding-right: 16px; 14 | font-size: 16px; 15 | width: 500px; 16 | border-radius: 30px; 17 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); 18 | } 19 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8d.css: -------------------------------------------------------------------------------- 1 | input { 2 | border-width: 1px; 3 | border-style: solid; 4 | border-color: rgb(200, 200, 200); 5 | padding-top: 12px; 6 | padding-bottom: 12px; 7 | padding-left: 16px; 8 | padding-right: 16px; 9 | font-size: 16px; 10 | border-radius: 8px; 11 | margin-bottom: 12px; 12 | } 13 | 14 | .first-name { 15 | width: 148px; 16 | } 17 | 18 | .last-name { 19 | width: 148px; 20 | } 21 | 22 | .email { 23 | display: block; 24 | width: 300px; 25 | } 26 | 27 | button { 28 | background-color: rgb(47, 127, 231); 29 | color: white; 30 | border: none; 31 | width: 300px; 32 | padding-top: 14px; 33 | padding-bottom: 14px; 34 | font-size: 18px; 35 | font-weight: bold; 36 | border-radius: 8px; 37 | } 38 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8e.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | } 4 | 5 | .title { 6 | font-size: 40px; 7 | margin-bottom: 25px; 8 | } 9 | 10 | input { 11 | display: block; 12 | background-color: rgb(240, 240, 240); 13 | border: none; 14 | margin-bottom: 10px; 15 | padding-top: 15px; 16 | padding-bottom: 15px; 17 | padding-left: 20px; 18 | padding-right: 20px; 19 | font-size: 16px; 20 | width: 400px; 21 | } 22 | 23 | .destination-textbox { 24 | margin-bottom: 35px; 25 | } 26 | 27 | .request-button { 28 | background-color: black; 29 | color: white; 30 | border: none; 31 | padding-top: 15px; 32 | padding-bottom: 15px; 33 | padding-left: 25px; 34 | padding-right: 25px; 35 | font-size: 16px; 36 | margin-right: 20px; 37 | } 38 | 39 | .schedule-button { 40 | background-color: rgb(240, 240, 240); 41 | border: none; 42 | padding-top: 15px; 43 | padding-bottom: 15px; 44 | padding-left: 25px; 45 | padding-right: 25px; 46 | font-size: 16px; 47 | } 48 | -------------------------------------------------------------------------------- /Assignments/lesson-08/8e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | Request a ride now 8 |

9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Assignments/lesson-08/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises8-1](https://user-images.githubusercontent.com/70604577/160038872-e34429d8-6e44-4066-8a96-03f3d2a32f68.png) 3 | ![exercises8-2](https://user-images.githubusercontent.com/70604577/160038875-6ac0fc2d-c2bc-4149-b48d-682bdaf603ec.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-08/google-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-08/google-logo.png -------------------------------------------------------------------------------- /Assignments/lesson-09/9a.css: -------------------------------------------------------------------------------- 1 | .red-square { 2 | background-color: red; 3 | width: 100px; 4 | height: 100px; 5 | } 6 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9b.css: -------------------------------------------------------------------------------- 1 | .green-circle { 2 | background-color: green; 3 | width: 100px; 4 | height: 100px; 5 | border-radius: 50px; 6 | } 7 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9c.css: -------------------------------------------------------------------------------- 1 | .title { 2 | font-family: Arial; 3 | } 4 | 5 | .card { 6 | border-width: 1px; 7 | border-style: solid; 8 | border-color: rgb(150, 150, 150); 9 | width: 300px; 10 | padding-left: 15px; 11 | padding-bottom: 20px; 12 | } 13 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |

8 | Satisfied with our service? 9 |

10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9d.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .card { 8 | background-color: rgb(33, 33, 33); 9 | width: 360px; 10 | padding-top: 20px; 11 | padding-bottom: 20px; 12 | padding-left: 15px; 13 | padding-right: 15px; 14 | } 15 | 16 | .title { 17 | color: white; 18 | font-size: 24px; 19 | font-weight: bold; 20 | margin-bottom: 10px; 21 | } 22 | 23 | .subtitle { 24 | color: rgb(160, 160, 160); 25 | } 26 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |

8 | Install YouTube Music 9 |

10 |

11 | Add YouTube Music to your desktop for quick and easy access 12 |

13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9e.css: -------------------------------------------------------------------------------- 1 | .card { 2 | box-shadow: 0 0 6px rgba(0, 0, 0, 0.3); 3 | padding-top: 12px; 4 | padding-bottom: 12px; 5 | padding-left: 12px; 6 | padding-right: 12px; 7 | width: 450px; 8 | border-radius: 6px; 9 | } 10 | 11 | .profile-picture { 12 | width: 50px; 13 | height: 50px; 14 | object-fit: cover; 15 | border-radius: 25px; 16 | vertical-align: middle; 17 | margin-right: 5px; 18 | } 19 | 20 | .text-box { 21 | font-size: 18px; 22 | border: none; 23 | width: 300px; 24 | vertical-align: middle; 25 | } 26 | 27 | .tweet-button { 28 | background-color: rgb(29, 155, 240); 29 | color: white; 30 | border: none; 31 | padding-top: 8px; 32 | padding-bottom: 8px; 33 | padding-left: 16px; 34 | padding-right: 16px; 35 | border-radius: 30px; 36 | font-size: 16px; 37 | font-weight: bold; 38 | vertical-align: middle; 39 | } 40 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9f.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .profile { 8 | width: 200px; 9 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 10 | } 11 | 12 | .profile-picture { 13 | width: 200px; 14 | height: 200px; 15 | object-fit: cover; 16 | margin-bottom: 12px; 17 | } 18 | 19 | .name { 20 | font-size: 18px; 21 | font-weight: bold; 22 | margin-left: 8px; 23 | margin-bottom: 4px; 24 | } 25 | 26 | .mutual-friends { 27 | color: rgb(100, 100, 100); 28 | margin-left: 8px; 29 | margin-bottom: 12px; 30 | } 31 | 32 | .add-friend-button { 33 | background-color: rgb(24, 119, 242); 34 | color: white; 35 | border: none; 36 | padding-top: 10px; 37 | padding-bottom: 10px; 38 | padding-left: 20px; 39 | padding-right: 20px; 40 | border-radius: 4px; 41 | font-size: 16px; 42 | margin-left: 8px; 43 | margin-bottom: 10px; 44 | } 45 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |

9 | Oliver 10 |

11 |

12 | 2 mutual friends 13 |

14 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9g.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .profile { 8 | width: 200px; 9 | box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); 10 | display: inline-block; 11 | margin-right: 15px; 12 | } 13 | 14 | .profile-picture { 15 | width: 200px; 16 | height: 200px; 17 | object-fit: cover; 18 | margin-bottom: 12px; 19 | } 20 | 21 | .name { 22 | font-size: 18px; 23 | font-weight: bold; 24 | margin-left: 8px; 25 | margin-bottom: 4px; 26 | } 27 | 28 | .mutual-friends { 29 | color: rgb(100, 100, 100); 30 | margin-left: 8px; 31 | margin-bottom: 12px; 32 | } 33 | 34 | .add-friend-button { 35 | background-color: rgb(24, 119, 242); 36 | color: white; 37 | border: none; 38 | padding-top: 10px; 39 | padding-bottom: 10px; 40 | padding-left: 20px; 41 | padding-right: 20px; 42 | border-radius: 4px; 43 | font-size: 16px; 44 | margin-left: 8px; 45 | margin-bottom: 10px; 46 | } 47 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |

9 | Oliver 10 |

11 |

12 | 2 mutual friends 13 |

14 | 17 |
18 |
19 | 20 |

21 | Mimi 22 |

23 |

24 | 3 mutual friends 25 |

26 | 29 |
30 |
31 | 32 |

33 | Rex 34 |

35 |

36 | 4 mutual friends 37 |

38 | 41 |
42 | 43 | 44 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9h.css: -------------------------------------------------------------------------------- 1 | div { 2 | text-align: center; 3 | } 4 | 5 | img { 6 | width: 200px; 7 | margin-top: 10px; 8 | margin-bottom: 10px; 9 | } 10 | 11 | input { 12 | border: none; 13 | padding-top: 12px; 14 | padding-bottom: 12px; 15 | padding-left: 16px; 16 | padding-right: 16px; 17 | font-size: 16px; 18 | width: 500px; 19 | border-radius: 30px; 20 | box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2); 21 | margin-bottom: 30px; 22 | } 23 | 24 | .google-button { 25 | background-color: rgb(245, 245, 245); 26 | border: none; 27 | font-size: 15px; 28 | padding-top: 12px; 29 | padding-bottom: 12px; 30 | padding-left: 20px; 31 | padding-right: 20px; 32 | } 33 | 34 | .search-button { 35 | margin-right: 10px; 36 | } 37 | -------------------------------------------------------------------------------- /Assignments/lesson-09/9h.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |
9 |
10 | 11 |
12 |
13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/lesson-09/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises9-1](https://user-images.githubusercontent.com/70604577/160038997-ed03dd0e-fcd7-4896-abe7-223eba485b21.png) 3 | ![exercises9-2](https://user-images.githubusercontent.com/70604577/160039006-2b004fce-e1b2-4909-ab97-a374a9bd8598.png) 4 | ![exercises9-3](https://user-images.githubusercontent.com/70604577/160039012-668a59ca-901c-4fcd-ba7f-aaa299df817c.png) 5 | -------------------------------------------------------------------------------- /Assignments/lesson-09/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-09/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-09/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-09/cat2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-09/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-09/dog.jpg -------------------------------------------------------------------------------- /Assignments/lesson-09/google-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-09/google-logo.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10a-step-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10a-step-0.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10a-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10a-step-1.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10a-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10a-step-2.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10b-step-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10b-step-0.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10b-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10b-step-1.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10b-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10b-step-2.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10b-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10b-step-3.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10c-step-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10c-step-0.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10c-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10c-step-1.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10c-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10c-step-2.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10c-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10c-step-3.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10d-step-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10d-step-0.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10d-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10d-step-1.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10d-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10d-step-2.png -------------------------------------------------------------------------------- /Assignments/lesson-10/10d-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/10d-step-3.png -------------------------------------------------------------------------------- /Assignments/lesson-10/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises10-1](https://user-images.githubusercontent.com/70604577/160039160-001662ec-d8c0-487c-adae-c580bc9c27cd.png) 3 | ![exercises10-2](https://user-images.githubusercontent.com/70604577/160039175-36fc2add-9700-4b3c-b9c0-b915b5c605c0.png) 4 | ![exercises10-3](https://user-images.githubusercontent.com/70604577/160039177-70e49366-1fca-46a5-802b-6bdeef29f2b6.png) 5 | -------------------------------------------------------------------------------- /Assignments/lesson-10/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-10/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/cat2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-10/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/dog.jpg -------------------------------------------------------------------------------- /Assignments/lesson-10/dog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-10/dog2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-11/11a.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | grid-template-columns: 200px 75px; 4 | } 5 | 6 | .lightblue { 7 | background-color: lightblue; 8 | } 9 | 10 | .lightpink { 11 | background-color: lightpink; 12 | } 13 | -------------------------------------------------------------------------------- /Assignments/lesson-11/11a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
200px
8 |
75px
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignments/lesson-11/11b.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | grid-template-columns: 50px 1fr 75px; 4 | } 5 | 6 | .lightblue { 7 | background-color: lightblue; 8 | } 9 | 10 | .lightpink { 11 | background-color: lightpink; 12 | } 13 | -------------------------------------------------------------------------------- /Assignments/lesson-11/11b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
col1
8 |
col2
9 |
col3
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/lesson-11/11c.css: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr 1fr 1fr; 4 | column-gap: 20px; 5 | row-gap: 10px; 6 | } 7 | 8 | .lightpink { 9 | background-color: lightpink; 10 | } 11 | -------------------------------------------------------------------------------- /Assignments/lesson-11/11c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
col1
8 |
col2
9 |
col3
10 |
col4
11 |
col1
12 |
col2
13 |
col3
14 |
col4
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/lesson-11/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises11-1](https://user-images.githubusercontent.com/70604577/160039283-6d1d5bbd-bb5f-4a99-bacd-0816e1653b9f.png) 3 | ![exercises11-2](https://user-images.githubusercontent.com/70604577/160039286-333941fe-1f01-4476-82ef-e30a932b2c39.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-11/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-11/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-11/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-11/cat2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-11/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-11/dog.jpg -------------------------------------------------------------------------------- /Assignments/lesson-11/dog2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-11/dog2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-12/12a.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-direction: row; 4 | } 5 | 6 | .lightblue { 7 | background-color: lightblue; 8 | } 9 | 10 | .lightpink { 11 | background-color: lightpink; 12 | } 13 | 14 | .item1 { 15 | width: 200px; 16 | } 17 | 18 | .item2 { 19 | width: 75px; 20 | } 21 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
200px
8 |
75px
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12b.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-direction: row; 4 | } 5 | 6 | .lightblue { 7 | background-color: lightblue; 8 | } 9 | 10 | .lightpink { 11 | background-color: lightpink; 12 | } 13 | 14 | .item1 { 15 | width: 50px; 16 | } 17 | 18 | .item2 { 19 | flex: 1; 20 | } 21 | 22 | .item3 { 23 | width: 75px; 24 | } 25 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
item1
8 |
item2
9 |
item3
10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12c.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | } 6 | 7 | .lightpink { 8 | background-color: lightpink; 9 | } 10 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
item1
8 |
item2
9 |
item3
10 |
item4
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12d.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-between; 5 | border-width: 1px; 6 | border-style: solid; 7 | border-color: rgb(150, 150, 150); 8 | height: 50px; 9 | align-items: center; 10 | } 11 | 12 | .lightpink { 13 | background-color: lightpink; 14 | } 15 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
item1
8 |
item2
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12e.css: -------------------------------------------------------------------------------- 1 | div { 2 | font-family: Arial; 3 | } 4 | 5 | .container { 6 | border-width: 1px; 7 | border-style: solid; 8 | border-color: rgb(200, 200, 200); 9 | width: 300px; 10 | border-radius: 6px; 11 | } 12 | 13 | .flexbox { 14 | display: flex; 15 | flex-direction: row; 16 | justify-content: space-between; 17 | align-items: center; 18 | padding-top: 6px; 19 | padding-bottom: 6px; 20 | padding-left: 12px; 21 | padding-right: 12px; 22 | } 23 | 24 | .notifications { 25 | background-color: rgb(49, 109, 245); 26 | color: white; 27 | padding-top: 3px; 28 | padding-bottom: 3px; 29 | padding-left: 10px; 30 | padding-right: 10px; 31 | border-radius: 20px; 32 | font-size: 14px; 33 | font-weight: bold; 34 | } 35 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
Home
9 |
14
10 |
11 |
12 |
Notifications
13 |
3
14 |
15 |
16 |
Messages
17 |
5
18 |
19 |
20 | 21 | 22 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12f.css: -------------------------------------------------------------------------------- 1 | div { 2 | font-family: Arial; 3 | } 4 | 5 | .header { 6 | background-color: rgb(120, 82, 178); 7 | color: white; 8 | display: flex; 9 | flex-direction: row; 10 | justify-content: space-between; 11 | align-items: center; 12 | padding-left: 15px; 13 | padding-right: 15px; 14 | } 15 | 16 | .home-link { 17 | font-weight: bold; 18 | } 19 | 20 | .text-box { 21 | width: 500px; 22 | border: none; 23 | margin-top: 12px; 24 | margin-bottom: 12px; 25 | height: 30px; 26 | border-radius: 15px; 27 | padding-left: 20px; 28 | } 29 | 30 | button { 31 | background-color: rgb(120, 82, 178); 32 | color: white; 33 | font-size: 16px; 34 | border-width: 1px; 35 | border-style: solid; 36 | border-color: white; 37 | border-radius: 2px; 38 | padding-top: 8px; 39 | padding-bottom: 8px; 40 | padding-left: 15px; 41 | padding-right: 15px; 42 | } 43 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
Home
8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12g.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .row { 8 | display: flex; 9 | flex-direction: row; 10 | align-items: center; 11 | margin-bottom: 20px; 12 | } 13 | 14 | .profile-picture { 15 | height: 50px; 16 | width: 50px; 17 | object-fit: cover; 18 | border-radius: 25px; 19 | margin-right: 15px; 20 | } 21 | 22 | .info { 23 | width: 200px; 24 | } 25 | 26 | .name { 27 | font-weight: bold; 28 | margin-bottom: 3px; 29 | } 30 | 31 | .handle { 32 | color: rgb(150, 150, 150); 33 | margin-bottom: 5px; 34 | } 35 | 36 | .category { 37 | color: rgb(150, 150, 150); 38 | font-size: 14px; 39 | } 40 | 41 | .follow-button { 42 | background-color: rgb(29, 155, 240); 43 | color: white; 44 | border: none; 45 | font-size: 16px; 46 | font-weight: bold; 47 | padding-top: 10px; 48 | padding-bottom: 10px; 49 | padding-left: 15px; 50 | padding-right: 15px; 51 | border-radius: 4px; 52 | cursor: pointer; 53 | } 54 | -------------------------------------------------------------------------------- /Assignments/lesson-12/12g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |
9 |

oliver

10 |

the cat

11 |

Popular

12 |
13 | 14 |
15 | 16 |
17 | 18 |
19 |

Mimi

20 |

Sleepy Cat

21 |

Popular

22 |
23 | 24 |
25 | 26 |
27 | 28 |
29 |

Rex

30 |

Happy Bulldog

31 |

Popular

32 |
33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Assignments/lesson-12/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises12-1](https://user-images.githubusercontent.com/70604577/160039403-8309aec7-863c-4de7-b454-f20f2c9219cd.png) 3 | ![exercises12-2](https://user-images.githubusercontent.com/70604577/160039412-ab647b28-bef9-4e2e-b3ee-b6e1bff5a86c.png) 4 | -------------------------------------------------------------------------------- /Assignments/lesson-12/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-12/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-12/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-12/cat2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-12/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-12/dog.jpg -------------------------------------------------------------------------------- /Assignments/lesson-13/13a.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-direction: row; 4 | height: 50px; 5 | } 6 | 7 | .column1 { 8 | background-color: lightpink; 9 | width: 100px; 10 | display: flex; 11 | flex-direction: row; 12 | justify-content: center; 13 | align-items: center; 14 | } 15 | 16 | .item1 { 17 | background-color: black; 18 | color: white; 19 | } 20 | 21 | .column2 { 22 | background-color: lightblue; 23 | width: 200px; 24 | } 25 | -------------------------------------------------------------------------------- /Assignments/lesson-13/13a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
item1
9 |
10 |
11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Assignments/lesson-13/13b.css: -------------------------------------------------------------------------------- 1 | .flexbox { 2 | display: flex; 3 | flex-direction: row; 4 | height: 50px; 5 | } 6 | 7 | .column1 { 8 | background-color: lightpink; 9 | width: 100px; 10 | } 11 | 12 | .column2 { 13 | background-color: lightblue; 14 | width: 200px; 15 | } 16 | 17 | .row2 { 18 | display: flex; 19 | flex-direction: row; 20 | justify-content: space-between; 21 | } 22 | 23 | .row2-item { 24 | background-color: black; 25 | color: white; 26 | } 27 | -------------------------------------------------------------------------------- /Assignments/lesson-13/13b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 |
9 |
row1
10 |
11 |
row2
12 |
row2
13 |
14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/lesson-13/13c-step-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13c-step-0.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13c-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13c-step-1.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13c-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13c-step-2.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13c-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13c-step-3.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13c-step-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13c-step-4.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
ALL INBOXES
8 |
9 |
10 | 11 |
12 | 24 |
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Assignments/lesson-13/13f-step-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13f-step-0.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13f-step-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13f-step-1.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13f-step-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13f-step-2.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13f-step-3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13f-step-3.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13f-step-4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/13f-step-4.png -------------------------------------------------------------------------------- /Assignments/lesson-13/13g.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 |
9 | 10 |
11 |
12 |
13 |
supersimple.dev
14 |
@SuperSimpleDev
15 |
16 |
17 | What is backend web development? A complete overview. New video is up! 18 |
19 |
20 |
21 |
22 |
youtube.com
23 |
24 | Backend web development - a complete overview (2021) 25 |
26 |
27 |
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /Assignments/lesson-13/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises13-1](https://user-images.githubusercontent.com/70604577/160039515-8d5c9d4b-b738-4642-af39-24e272d22240.png) 3 | ![exercises13-2](https://user-images.githubusercontent.com/70604577/160039523-bdf4b0fb-56a3-468e-a0d9-48e204ffcc89.png) 4 | ![exercises13-3](https://user-images.githubusercontent.com/70604577/160039532-00c02c22-3de4-4670-804c-acc651c1348d.png) 5 | -------------------------------------------------------------------------------- /Assignments/lesson-13/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-13/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/cat2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-13/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-13/dog.jpg -------------------------------------------------------------------------------- /Assignments/lesson-14/14a.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .bottom-right { 6 | background-color: black; 7 | color: white; 8 | position: fixed; 9 | bottom: 20px; 10 | right: 20px; 11 | } 12 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | bottom-right 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14b.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .right-sidebar { 6 | background-color: green; 7 | color: white; 8 | position: fixed; 9 | right: 0; 10 | top: 0; 11 | bottom: 0; 12 | width: 100px; 13 | } 14 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | right sidebar 8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14c.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .cover { 6 | background-color: black; 7 | position: fixed; 8 | top: 0; 9 | bottom: 0; 10 | left: 0; 11 | right: 0; 12 | } 13 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14d.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .right-sidebar { 6 | background-color: green; 7 | color: white; 8 | position: fixed; 9 | right: 0; 10 | top: 0; 11 | bottom: 0; 12 | width: 100px; 13 | } 14 | 15 | .overlay { 16 | background-color: rgba(0, 0, 0, 0.5); 17 | position: fixed; 18 | top: 0; 19 | bottom: 0; 20 | left: 0; 21 | right: 0; 22 | display: flex; 23 | justify-content: center; 24 | align-items: center; 25 | } 26 | 27 | .modal { 28 | background-color: white; 29 | width: 300px; 30 | padding-top: 15px; 31 | padding-bottom: 15px; 32 | padding-left: 15px; 33 | padding-right: 15px; 34 | border-radius: 5px; 35 | } 36 | 37 | .modal-title { 38 | font-family: Arial; 39 | font-weight: bold; 40 | font-size: 24px; 41 | margin-bottom: 12px; 42 | } 43 | 44 | .modal-content { 45 | font-family: Arial; 46 | margin-bottom: 12px; 47 | } 48 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | right sidebar 8 |
9 | 10 |
11 |
12 |
13 | Modal Title 14 |
15 |
16 | This is a modal 17 |
18 | 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 | 9 |
Oliver Cat
10 |
11 |
12 | 13 | 14 |
15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14f.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | div { 6 | font-family: Arial; 7 | } 8 | 9 | .sidebar1 { 10 | background-color: rgb(33, 33, 33); 11 | position: fixed; 12 | left: 0; 13 | top: 0; 14 | bottom: 0; 15 | padding-top: 10px; 16 | padding-left: 10px; 17 | padding-right: 10px; 18 | } 19 | 20 | .picture { 21 | width: 50px; 22 | height: 50px; 23 | object-fit: cover; 24 | border-radius: 25px; 25 | margin-bottom: 10px; 26 | } 27 | 28 | .sidebar2 { 29 | background-color: rgb(55, 55, 55); 30 | position: fixed; 31 | left: 70px; 32 | top: 0; 33 | bottom: 0; 34 | width: 150px; 35 | padding-top: 15px; 36 | padding-left: 15px; 37 | padding-right: 15px; 38 | } 39 | 40 | .header { 41 | display: flex; 42 | justify-content: space-between; 43 | align-items: center; 44 | margin-bottom: 10px; 45 | } 46 | 47 | .name { 48 | color: white; 49 | font-size: 14px; 50 | } 51 | 52 | .create-new { 53 | color: rgb(150, 150, 150); 54 | font-size: 25px; 55 | } 56 | 57 | .channel { 58 | color: rgb(150, 150, 150); 59 | margin-bottom: 16px; 60 | } 61 | -------------------------------------------------------------------------------- /Assignments/lesson-14/14f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
8 | 9 |
10 |
11 | 12 |
13 |
14 | 15 |
16 |
17 |
18 |
19 |
INFO
20 |
+
21 |
22 |
# new-videos
23 |
# updates
24 |
# faq
25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /Assignments/lesson-14/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises14-1](https://user-images.githubusercontent.com/70604577/160039662-c7d1f8de-29f6-447a-a476-449931665d9d.png) 3 | ![exercises14-2](https://user-images.githubusercontent.com/70604577/160039664-ae856eb1-fc15-4229-9a9f-f7ea3fa09c93.png) 4 | ![exercises14-3](https://user-images.githubusercontent.com/70604577/160039672-9b4235c6-9cb8-44fc-bc31-a21649af8ff5.png) 5 | -------------------------------------------------------------------------------- /Assignments/lesson-14/cat.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-14/cat.jpg -------------------------------------------------------------------------------- /Assignments/lesson-14/cat2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-14/cat2.jpg -------------------------------------------------------------------------------- /Assignments/lesson-14/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-14/dog.jpg -------------------------------------------------------------------------------- /Assignments/lesson-15/15a.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .close-button { 6 | background-color: black; 7 | color: white; 8 | position: absolute; 9 | top: 15px; 10 | right: 15px; 11 | font-family: Arial; 12 | font-size: 20px; 13 | width: 45px; 14 | height: 45px; 15 | border-radius: 25px; 16 | display: flex; 17 | align-items: center; 18 | justify-content: center; 19 | } 20 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15a.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
X
7 | 8 | 9 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15b.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .bottom-right { 6 | background-color: gray; 7 | position: fixed; 8 | bottom: 20px; 9 | right: 20px; 10 | width: 320px; 11 | height: 180px; 12 | } 13 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15b.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
X
8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15c.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .bottom-right { 6 | background-color: gray; 7 | position: fixed; 8 | bottom: 20px; 9 | right: 20px; 10 | width: 320px; 11 | height: 180px; 12 | } 13 | 14 | .close-button { 15 | background-color: black; 16 | color: white; 17 | position: absolute; 18 | top: -18px; 19 | left: -18px; 20 | font-family: Arial; 21 | font-size: 20px; 22 | width: 45px; 23 | height: 45px; 24 | border-radius: 25px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15c.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
X
8 |
9 | 10 | 11 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15d.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .bottom-right { 6 | background-color: gray; 7 | position: fixed; 8 | bottom: 20px; 9 | right: 20px; 10 | width: 320px; 11 | height: 180px; 12 | } 13 | 14 | .close-button { 15 | background-color: black; 16 | color: white; 17 | position: absolute; 18 | top: -18px; 19 | left: -18px; 20 | font-family: Arial; 21 | font-size: 20px; 22 | width: 45px; 23 | height: 45px; 24 | border-radius: 25px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | } 29 | 30 | .video-time { 31 | background-color: black; 32 | color: white; 33 | position: absolute; 34 | bottom: 10px; 35 | right: 10px; 36 | font-family: Arial; 37 | font-size: 18px; 38 | padding-top: 5px; 39 | padding-bottom: 5px; 40 | padding-left: 10px; 41 | padding-right: 10px; 42 | } 43 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15d.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 |
X
8 |
0:29
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15e.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .product-container { 6 | position: relative; 7 | display: inline-block; 8 | } 9 | 10 | .product-image { 11 | width: 300px; 12 | height: 300px; 13 | object-fit: cover; 14 | } 15 | 16 | .promotion { 17 | position: absolute; 18 | top: 10px; 19 | right: 0px; 20 | background-color: black; 21 | color: white; 22 | font-family: Arial; 23 | padding-top: 8px; 24 | padding-bottom: 8px; 25 | padding-left: 12px; 26 | padding-right: 12px; 27 | } 28 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15e.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |
20% OFF
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15f.css: -------------------------------------------------------------------------------- 1 | body { 2 | height: 3000px; 3 | } 4 | 5 | .product-container { 6 | position: relative; 7 | display: inline-block; 8 | } 9 | 10 | .product-image { 11 | width: 300px; 12 | height: 300px; 13 | object-fit: cover; 14 | } 15 | 16 | .promotion { 17 | position: absolute; 18 | top: 10px; 19 | right: 0px; 20 | background-color: black; 21 | color: white; 22 | font-family: Arial; 23 | padding-top: 8px; 24 | padding-bottom: 8px; 25 | padding-left: 12px; 26 | padding-right: 12px; 27 | } 28 | 29 | .bottom-overlay { 30 | position: absolute; 31 | bottom: 0; 32 | left: 0; 33 | right: 0; 34 | height: 80px; 35 | background-color: rgba(255, 255, 255, 0.8); 36 | display: flex; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | 41 | .add-to-cart-button { 42 | background-color: white; 43 | border-width: 1px; 44 | border-style: solid; 45 | border-color: black; 46 | padding-top: 10px; 47 | padding-bottom: 10px; 48 | padding-left: 15px; 49 | padding-right: 15px; 50 | } 51 | -------------------------------------------------------------------------------- /Assignments/lesson-15/15f.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
7 | 8 |
20% OFF
9 |
10 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Assignments/lesson-15/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises15-1](https://user-images.githubusercontent.com/70604577/160039784-d4f262bf-bb99-435d-b2f2-19e601077199.png) 3 | ![exercises15-2](https://user-images.githubusercontent.com/70604577/160039786-705b44e1-6173-4d02-848a-933a33c4d615.png) 4 | ![exercises15-3](https://user-images.githubusercontent.com/70604577/160039790-122e1a1e-b79a-473e-93ce-42249693f5ae.png) 5 | -------------------------------------------------------------------------------- /Assignments/lesson-15/shirt.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-15/shirt.jpg -------------------------------------------------------------------------------- /Assignments/lesson-16/16a/header.css: -------------------------------------------------------------------------------- 1 | .search-button, 2 | .voice-search-button, 3 | .upload-icon-container, 4 | .youtube-apps-icon-container, 5 | .notifications-icon-container { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | position: relative; 10 | } 11 | 12 | .search-button .tooltip, 13 | .voice-search-button .tooltip, 14 | .upload-icon-container .tooltip, 15 | .youtube-apps-icon-container .tooltip, 16 | .notifications-icon-container .tooltip { 17 | font-family: Roboto, Arial; 18 | position: absolute; 19 | background-color: gray; 20 | color: white; 21 | padding-top: 4px; 22 | padding-bottom: 4px; 23 | padding-left: 8px; 24 | padding-right: 8px; 25 | border-radius: 2px; 26 | font-size: 12px; 27 | bottom: -30px; 28 | opacity: 0; 29 | transition: opacity 0.15s; 30 | pointer-events: none; 31 | white-space: nowrap; 32 | } 33 | 34 | .search-button:hover .tooltip, 35 | .voice-search-button:hover .tooltip, 36 | .upload-icon-container:hover .tooltip, 37 | .youtube-apps-icon-container:hover .tooltip, 38 | .notifications-icon-container:hover .tooltip { 39 | opacity: 1; 40 | } 41 | -------------------------------------------------------------------------------- /Assignments/lesson-16/16a/youtube.html: -------------------------------------------------------------------------------- 1 | ... 2 |
3 | ... 4 |
5 |
6 | 7 |
Create
8 |
9 |
10 | 11 |
YouTube Apps
12 |
13 |
14 | 15 |
3
16 |
Notifications
17 |
18 | 19 |
20 |
21 | ... 22 | -------------------------------------------------------------------------------- /Assignments/lesson-16/16b/video.css: -------------------------------------------------------------------------------- 1 | .video-title-link { 2 | text-decoration: none; 3 | color: black; 4 | } 5 | -------------------------------------------------------------------------------- /Assignments/lesson-16/16d/video.css: -------------------------------------------------------------------------------- 1 | .profile-picture-container { 2 | position: relative; 3 | display: inline-block; 4 | } 5 | 6 | .channel-tooltip { 7 | background-color: white; 8 | width: 200px; 9 | padding: 12px 12px; 10 | box-shadow: 2px 3px 10px rgba(0, 0, 0, 0.3); 11 | border-radius: 6px; 12 | position: absolute; 13 | top: 55px; 14 | z-index: 300; 15 | 16 | opacity: 0; 17 | pointer-events: none; 18 | 19 | display: flex; 20 | align-items: center; 21 | transition: opacity 0.15s; 22 | } 23 | 24 | .profile-picture-container:hover .channel-tooltip { 25 | opacity: 1; 26 | } 27 | 28 | .channel-tooltip-picture { 29 | width: 50px; 30 | height: 50px; 31 | border-radius: 50px; 32 | margin-right: 8px; 33 | } 34 | 35 | .channel-tooltip-name { 36 | font-family: Roboto, Arial; 37 | font-weight: bold; 38 | font-size: 16px; 39 | margin-bottom: 4px; 40 | } 41 | 42 | .channel-tooltip-stats { 43 | font-family: Roboto, Arial; 44 | color: rgb(96, 96, 96); 45 | font-size: 14px; 46 | } 47 | -------------------------------------------------------------------------------- /Assignments/lesson-16/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![Exercise 18](https://user-images.githubusercontent.com/70604577/160039866-ee41bdb7-8b71-4adc-b76b-3bb07fdd916e.png) 3 | 4 | https://user-images.githubusercontent.com/70604577/160040128-095c8374-1f55-4afa-a99b-55a15143aad8.mp4 5 | -------------------------------------------------------------------------------- /Assignments/lesson-17/17a/video.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 1000px) { 2 | .video-title { 3 | font-size: 16px; 4 | line-height: 24px; 5 | } 6 | } 7 | 8 | @media (min-width: 1000px) { 9 | .video-author, 10 | .video-stats { 11 | font-size: 14px; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/channel-pictures/channel-10.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/channel-pictures/channel-10.jpeg -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/channel-pictures/channel-11.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/channel-pictures/channel-11.jpeg -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/channel-pictures/channel-12.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/channel-pictures/channel-12.jpeg -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/channel-pictures/channel-7.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/channel-pictures/channel-7.jpeg -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/channel-pictures/channel-8.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/channel-pictures/channel-8.jpeg -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/channel-pictures/channel-9.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/channel-pictures/channel-9.jpeg -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/thumbnails/thumbnail-10.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/thumbnails/thumbnail-10.webp -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/thumbnails/thumbnail-11.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/thumbnails/thumbnail-11.webp -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/thumbnails/thumbnail-12.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/thumbnails/thumbnail-12.webp -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/thumbnails/thumbnail-7.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/thumbnails/thumbnail-7.webp -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/thumbnails/thumbnail-8.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/thumbnails/thumbnail-8.webp -------------------------------------------------------------------------------- /Assignments/lesson-17/17b/thumbnails/thumbnail-9.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Assignments/lesson-17/17b/thumbnails/thumbnail-9.webp -------------------------------------------------------------------------------- /Assignments/lesson-17/17c/general.css: -------------------------------------------------------------------------------- 1 | @media (min-width: 1200.1px) { 2 | body { 3 | margin-left: 168px; 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /Assignments/lesson-17/17d-g.html: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /Assignments/lesson-17/README.md: -------------------------------------------------------------------------------- 1 | # Exercises 2 | ![exercises17-1](https://user-images.githubusercontent.com/70604577/160040249-40643657-777b-43dd-a69c-503af5f11ebe.png) 3 | 4 | https://user-images.githubusercontent.com/70604577/160040463-4bbba430-445d-4dc9-9b86-c4984718380e.mp4 5 | 6 | ![exercises17-2](https://user-images.githubusercontent.com/70604577/160040519-d9b7c674-11ba-4606-ae21-00aea68f6c10.png) 7 | 8 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/css/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | width: 100%; 3 | text-align: center; 4 | padding: 30px 0; 5 | } 6 | 7 | .image-about-me img { 8 | width: 150px; 9 | border-radius: 75px; 10 | } 11 | 12 | .footer h4 { 13 | margin-bottom: 25px; 14 | margin-top: 20px; 15 | font-weight: 600; 16 | } 17 | 18 | .icons .fa { 19 | color: #FF0000; 20 | margin: 0 13px; 21 | cursor: pointer; 22 | padding: 18px 0; 23 | text-decoration: none; 24 | transition: transform 0.15s ease; 25 | } 26 | 27 | .fa-heart-o { 28 | color: #FF0000; 29 | } 30 | 31 | .icons .fa:hover { 32 | color: #000000; 33 | transform: scale(1.5); 34 | } 35 | 36 | .footer h1 { 37 | margin-bottom: 25px; 38 | } 39 | 40 | .footer-intro p { 41 | font-size: 18px; 42 | color: #8b8b8b; 43 | } 44 | 45 | @media screen and (max-width: 700px) { 46 | .footer-intro p { 47 | font-size: 14px; 48 | text-align: center; 49 | margin-right: 25px; 50 | margin-left: 25px; 51 | } 52 | } 53 | 54 | 55 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/css/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto, Arial, serif; 3 | font-size: 16px; 4 | margin-top: 0; 5 | margin-bottom: 0; 6 | } 7 | 8 | body { 9 | margin: 0; 10 | padding: 100px 25px 25px 100px; 11 | background-color: #f8f8f8; 12 | } 13 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/css/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: fixed; 3 | left: 0; 4 | top: 55px; 5 | bottom: 0; 6 | background-color: white; 7 | width: 74px; 8 | margin-left: 4px; 9 | z-index: 100; 10 | padding-top: 5px; 11 | } 12 | 13 | .sidebar-link { 14 | height: 74px; 15 | display: flex; 16 | flex-direction: column; 17 | justify-content: center; 18 | align-items: center; 19 | cursor: pointer; 20 | } 21 | 22 | .sidebar-link:hover { 23 | background-color: rgb(230, 230, 230); 24 | } 25 | 26 | .sidebar-link img { 27 | height: 24px; 28 | margin-bottom: 4px; 29 | } 30 | 31 | .sidebar-link div { 32 | font-family: Roboto, Arial, serif; 33 | font-size: 10px; 34 | } -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/YouTube.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/icons/YouTube.png -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/explore.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/originals.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/subscriptions.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/voice-search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/youtube-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/icons/youtube-music.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_01.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_02.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_03.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_04.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_05.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_06.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_07.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_08.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_09.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_10.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_11.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_12.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/logo/channel_me.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/logo/channel_me.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail1.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail10.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail11.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail12.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail12.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail2.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail3.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail4.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail5.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail6.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail7.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail8.jpg -------------------------------------------------------------------------------- /Youtube_clone/Assets/thumbnails/thumbnail9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/Youtube_clone/Assets/thumbnails/thumbnail9.jpg -------------------------------------------------------------------------------- /lecture code/lesson-01/website.html: -------------------------------------------------------------------------------- 1 |

2 | paragraph of text 3 |

4 | 5 | 8 | 9 | 10 | Link to YouTube 11 | 12 | -------------------------------------------------------------------------------- /lecture code/lesson-02/buttons.html: -------------------------------------------------------------------------------- 1 | 39 | 40 | 43 | 44 | 47 | 48 | 51 | -------------------------------------------------------------------------------- /lecture code/lesson-02/website.html: -------------------------------------------------------------------------------- 1 |

2 | paragraph of text 3 |

4 | 5 | 8 | 9 | 10 | Link to YouTube 11 | 12 | -------------------------------------------------------------------------------- /lecture code/lesson-03/website.html: -------------------------------------------------------------------------------- 1 |

2 | paragraph of text 3 |

4 | 5 | 8 | 9 | 10 | Link to YouTube 11 | 12 | -------------------------------------------------------------------------------- /lecture code/lesson-04/website.html: -------------------------------------------------------------------------------- 1 |

2 | paragraph of text 3 |

4 | 5 | 8 | 9 | 10 | Link to YouTube 11 | 12 | -------------------------------------------------------------------------------- /lecture code/lesson-05/website.html: -------------------------------------------------------------------------------- 1 |

2 | paragraph of text 3 |

4 | 5 | 8 | 9 | 10 | Link to YouTube 11 | 12 | -------------------------------------------------------------------------------- /lecture code/lesson-06/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-06/styles/text.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .video-stats { 8 | font-size: 14px; 9 | color: rgb(96, 96, 96); 10 | margin-bottom: 20px; 11 | } 12 | 13 | .video-title { 14 | font-weight: bold; 15 | font-size: 18px; 16 | width: 280px; 17 | line-height: 24px; 18 | margin-bottom: 5px; 19 | } 20 | 21 | .video-author { 22 | font-size: 14px; 23 | color: rgb(96, 96, 96); 24 | margin-bottom: 20px; 25 | } 26 | 27 | .video-description { 28 | font-size: 14px; 29 | color: rgb(96, 96, 96); 30 | width: 280px; 31 | line-height: 22px; 32 | margin-bottom: 100px; 33 | } 34 | 35 | .apple-text { 36 | margin-bottom: 50px; 37 | font-size: 14px; 38 | background-color: rgb(227, 65, 64); 39 | color: white; 40 | text-align: center; 41 | padding-top: 18px; 42 | padding-bottom: 18px; 43 | } 44 | 45 | .span-example { 46 | color: red; 47 | } 48 | 49 | .span-example:hover { 50 | text-decoration: underline; 51 | } 52 | 53 | .shop-link { 54 | cursor: pointer; 55 | } 56 | 57 | .shop-link:hover { 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /lecture code/lesson-06/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-07/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-07/intro-to-html/styles/text.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .video-stats { 8 | font-size: 14px; 9 | color: rgb(96, 96, 96); 10 | margin-bottom: 20px; 11 | } 12 | 13 | .video-title { 14 | font-weight: bold; 15 | font-size: 18px; 16 | width: 280px; 17 | line-height: 24px; 18 | margin-bottom: 5px; 19 | } 20 | 21 | .video-author { 22 | font-size: 14px; 23 | color: rgb(96, 96, 96); 24 | margin-bottom: 20px; 25 | } 26 | 27 | .video-description { 28 | font-size: 14px; 29 | color: rgb(96, 96, 96); 30 | width: 280px; 31 | line-height: 22px; 32 | margin-bottom: 100px; 33 | } 34 | 35 | .apple-text { 36 | margin-bottom: 50px; 37 | font-size: 14px; 38 | background-color: rgb(227, 65, 64); 39 | color: white; 40 | text-align: center; 41 | padding-top: 18px; 42 | padding-bottom: 18px; 43 | } 44 | 45 | .span-example { 46 | color: red; 47 | } 48 | 49 | .span-example:hover { 50 | text-decoration: underline; 51 | } 52 | 53 | .shop-link { 54 | cursor: pointer; 55 | } 56 | 57 | .shop-link:hover { 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /lecture code/lesson-07/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-07/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-07/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-07/youtube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | YouTube.com Clone 5 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-08/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-08/intro-to-html/styles/text.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .video-stats { 8 | font-size: 14px; 9 | color: rgb(96, 96, 96); 10 | margin-bottom: 20px; 11 | } 12 | 13 | .video-title { 14 | font-weight: bold; 15 | font-size: 18px; 16 | width: 280px; 17 | line-height: 24px; 18 | margin-bottom: 5px; 19 | } 20 | 21 | .video-author { 22 | font-size: 14px; 23 | color: rgb(96, 96, 96); 24 | margin-bottom: 20px; 25 | } 26 | 27 | .video-description { 28 | font-size: 14px; 29 | color: rgb(96, 96, 96); 30 | width: 280px; 31 | line-height: 22px; 32 | margin-bottom: 100px; 33 | } 34 | 35 | .apple-text { 36 | margin-bottom: 50px; 37 | font-size: 14px; 38 | background-color: rgb(227, 65, 64); 39 | color: white; 40 | text-align: center; 41 | padding-top: 18px; 42 | padding-bottom: 18px; 43 | } 44 | 45 | .span-example { 46 | color: red; 47 | } 48 | 49 | .span-example:hover { 50 | text-decoration: underline; 51 | } 52 | 53 | .shop-link { 54 | cursor: pointer; 55 | } 56 | 57 | .shop-link:hover { 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /lecture code/lesson-08/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-08/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-08/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-08/youtube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | YouTube.com Clone 5 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

26 | Talking Tech and AI with Google CEO Sundar Pichai! 27 |

28 |

29 | Marques Brownlee 30 |

31 |

32 | 3.4M views · 6 months ago 33 |

34 | 35 | 36 | -------------------------------------------------------------------------------- /lecture code/lesson-09/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-09/intro-to-html/styles/text.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .video-stats { 8 | font-size: 14px; 9 | color: rgb(96, 96, 96); 10 | margin-bottom: 20px; 11 | } 12 | 13 | .video-title { 14 | font-weight: bold; 15 | font-size: 18px; 16 | width: 280px; 17 | line-height: 24px; 18 | margin-bottom: 5px; 19 | } 20 | 21 | .video-author { 22 | font-size: 14px; 23 | color: rgb(96, 96, 96); 24 | margin-bottom: 20px; 25 | } 26 | 27 | .video-description { 28 | font-size: 14px; 29 | color: rgb(96, 96, 96); 30 | width: 280px; 31 | line-height: 22px; 32 | margin-bottom: 100px; 33 | } 34 | 35 | .apple-text { 36 | margin-bottom: 50px; 37 | font-size: 14px; 38 | background-color: rgb(227, 65, 64); 39 | color: white; 40 | text-align: center; 41 | padding-top: 18px; 42 | padding-bottom: 18px; 43 | } 44 | 45 | .span-example { 46 | color: red; 47 | } 48 | 49 | .span-example:hover { 50 | text-decoration: underline; 51 | } 52 | 53 | .shop-link { 54 | cursor: pointer; 55 | } 56 | 57 | .shop-link:hover { 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /lecture code/lesson-09/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-09/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-09/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-09/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-09/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-10/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-10/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-10/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-10/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-10/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-10/intro-to-html/styles/text.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | .video-stats { 8 | font-size: 14px; 9 | color: rgb(96, 96, 96); 10 | margin-bottom: 20px; 11 | } 12 | 13 | .video-title { 14 | font-weight: bold; 15 | font-size: 18px; 16 | width: 280px; 17 | line-height: 24px; 18 | margin-bottom: 5px; 19 | } 20 | 21 | .video-author { 22 | font-size: 14px; 23 | color: rgb(96, 96, 96); 24 | margin-bottom: 20px; 25 | } 26 | 27 | .video-description { 28 | font-size: 14px; 29 | color: rgb(96, 96, 96); 30 | width: 280px; 31 | line-height: 22px; 32 | margin-bottom: 100px; 33 | } 34 | 35 | .apple-text { 36 | margin-bottom: 50px; 37 | font-size: 14px; 38 | background-color: rgb(227, 65, 64); 39 | color: white; 40 | text-align: center; 41 | padding-top: 18px; 42 | padding-bottom: 18px; 43 | } 44 | 45 | .span-example { 46 | color: red; 47 | } 48 | 49 | .span-example:hover { 50 | text-decoration: underline; 51 | } 52 | 53 | .shop-link { 54 | cursor: pointer; 55 | } 56 | 57 | .shop-link:hover { 58 | text-decoration: underline; 59 | } 60 | -------------------------------------------------------------------------------- /lecture code/lesson-10/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-10/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-10/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-10/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-10/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-11/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-11/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-11/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-11/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-11/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-11/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-11/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-11/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-11/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-11/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-11/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-11/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-11/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-11/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-11/thumbnails/thumbnail-6.webp -------------------------------------------------------------------------------- /lecture code/lesson-12/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-12/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-12/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-12/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-12/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-12/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-12/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-12/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-12/styles/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto, Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | } 10 | -------------------------------------------------------------------------------- /lecture code/lesson-12/styles/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | height: 55px; 3 | 4 | display: flex; 5 | flex-direction: row; 6 | justify-content: space-between; 7 | } 8 | 9 | .left-section { 10 | background-color: lightblue; 11 | width: 150px; 12 | } 13 | 14 | .middle-section { 15 | background-color: lightpink; 16 | flex: 1; 17 | margin-left: 70px; 18 | margin-right: 35px; 19 | max-width: 500px; 20 | } 21 | 22 | .right-section { 23 | background-color: lightblue; 24 | width: 200px; 25 | } 26 | -------------------------------------------------------------------------------- /lecture code/lesson-12/styles/video.css: -------------------------------------------------------------------------------- 1 | .thumbnail { 2 | width: 100%; 3 | } 4 | 5 | .video-title { 6 | margin-top: 0; 7 | font-size: 14px; 8 | font-weight: 500; 9 | line-height: 20px; 10 | margin-bottom: 12px; 11 | } 12 | 13 | .video-info-grid { 14 | display: grid; 15 | grid-template-columns: 50px 1fr; 16 | } 17 | 18 | .profile-picture { 19 | width: 40px; 20 | border-radius: 50px; 21 | } 22 | 23 | .thumbnail-row { 24 | margin-bottom: 12px; 25 | } 26 | 27 | .video-author, 28 | .video-stats { 29 | font-size: 12px; 30 | color: rgb(96, 96, 96); 31 | } 32 | 33 | .video-author { 34 | margin-bottom: 4px; 35 | } 36 | 37 | .video-grid { 38 | display: grid; 39 | grid-template-columns: 1fr 1fr 1fr; 40 | column-gap: 16px; 41 | row-gap: 40px; 42 | } 43 | -------------------------------------------------------------------------------- /lecture code/lesson-12/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-12/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-12/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-12/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-12/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-12/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-12/thumbnails/thumbnail-6.webp -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/channel-pictures/my-channel.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/channel-pictures/my-channel.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-13/icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-13/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-13/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-13/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-13/icons/voice-search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-13/icons/youtube-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-13/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-13/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-13/styles/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto, Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | } 10 | -------------------------------------------------------------------------------- /lecture code/lesson-13/styles/video.css: -------------------------------------------------------------------------------- 1 | .thumbnail { 2 | width: 100%; 3 | } 4 | 5 | .video-title { 6 | margin-top: 0; 7 | font-size: 14px; 8 | font-weight: 500; 9 | line-height: 20px; 10 | margin-bottom: 12px; 11 | } 12 | 13 | .video-info-grid { 14 | display: grid; 15 | grid-template-columns: 50px 1fr; 16 | } 17 | 18 | .profile-picture { 19 | width: 40px; 20 | border-radius: 50px; 21 | } 22 | 23 | .thumbnail-row { 24 | margin-bottom: 12px; 25 | } 26 | 27 | .video-author, 28 | .video-stats { 29 | font-size: 12px; 30 | color: rgb(96, 96, 96); 31 | } 32 | 33 | .video-author { 34 | margin-bottom: 4px; 35 | } 36 | 37 | .video-grid { 38 | display: grid; 39 | grid-template-columns: 1fr 1fr 1fr; 40 | column-gap: 16px; 41 | row-gap: 40px; 42 | } 43 | -------------------------------------------------------------------------------- /lecture code/lesson-13/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-13/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-13/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-13/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-13/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-13/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-13/thumbnails/thumbnail-6.webp -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/channel-pictures/my-channel.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/channel-pictures/my-channel.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-14/icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-14/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-14/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-14/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-14/icons/voice-search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-14/icons/youtube-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-14/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-14/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-14/position.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Position Practice 5 | 6 | 11 |
header
20 | 21 |
30 | sidebar 31 |
32 | 33 |
div 1
39 |
div 2
44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /lecture code/lesson-14/styles/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto, Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding-top: 80px; 10 | padding-left: 80px; 11 | } 12 | -------------------------------------------------------------------------------- /lecture code/lesson-14/styles/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: fixed; 3 | left: 0; 4 | bottom: 0; 5 | top: 55px; 6 | background-color: white; 7 | width: 72px; 8 | } 9 | -------------------------------------------------------------------------------- /lecture code/lesson-14/styles/video.css: -------------------------------------------------------------------------------- 1 | .thumbnail { 2 | width: 100%; 3 | } 4 | 5 | .video-title { 6 | margin-top: 0; 7 | font-size: 14px; 8 | font-weight: 500; 9 | line-height: 20px; 10 | margin-bottom: 12px; 11 | } 12 | 13 | .video-info-grid { 14 | display: grid; 15 | grid-template-columns: 50px 1fr; 16 | } 17 | 18 | .profile-picture { 19 | width: 40px; 20 | border-radius: 50px; 21 | } 22 | 23 | .thumbnail-row { 24 | margin-bottom: 12px; 25 | } 26 | 27 | .video-author, 28 | .video-stats { 29 | font-size: 12px; 30 | color: rgb(96, 96, 96); 31 | } 32 | 33 | .video-author { 34 | margin-bottom: 4px; 35 | } 36 | 37 | .video-grid { 38 | display: grid; 39 | grid-template-columns: 1fr 1fr 1fr; 40 | column-gap: 16px; 41 | row-gap: 40px; 42 | } 43 | -------------------------------------------------------------------------------- /lecture code/lesson-14/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-14/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-14/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-14/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-14/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-14/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-14/thumbnails/thumbnail-6.webp -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/channel-pictures/my-channel.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/channel-pictures/my-channel.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-15/icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-15/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-15/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-15/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-15/icons/voice-search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-15/icons/youtube-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-15/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-15/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-15/styles/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto, Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding-top: 80px; 10 | padding-left: 80px; 11 | } 12 | -------------------------------------------------------------------------------- /lecture code/lesson-15/styles/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: fixed; 3 | left: 0; 4 | bottom: 0; 5 | top: 55px; 6 | background-color: white; 7 | width: 72px; 8 | } 9 | -------------------------------------------------------------------------------- /lecture code/lesson-15/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-15/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-15/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-15/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-15/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-15/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-15/thumbnails/thumbnail-6.webp -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/channel-pictures/my-channel.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/channel-pictures/my-channel.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/explore.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/originals.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/subscriptions.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/voice-search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/youtube-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/icons/youtube-music.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-16/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-16/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-16/styles/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | font-family: Roboto, Arial; 3 | margin-top: 0; 4 | margin-bottom: 0; 5 | } 6 | 7 | body { 8 | margin: 0; 9 | padding-top: 80px; 10 | padding-left: 96px; 11 | padding-right: 24px; 12 | background-color: rgb(248, 248, 248); 13 | } 14 | -------------------------------------------------------------------------------- /lecture code/lesson-16/styles/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: fixed; 3 | left: 0; 4 | bottom: 0; 5 | top: 55px; 6 | background-color: white; 7 | width: 72px; 8 | z-index: 200; 9 | padding-top: 5px; 10 | } 11 | 12 | .sidebar-link { 13 | height: 74px; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | flex-direction: column; 18 | cursor: pointer; 19 | } 20 | 21 | .sidebar-link:hover { 22 | background-color: rgb(235, 235, 235); 23 | } 24 | 25 | .sidebar-link img { 26 | height: 24px; 27 | margin-bottom: 4px; 28 | } 29 | 30 | .sidebar-link div { 31 | font-family: Roboto, Arial; 32 | font-size: 10px; 33 | } 34 | -------------------------------------------------------------------------------- /lecture code/lesson-16/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-16/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-16/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-16/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-16/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-16/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-16/thumbnails/thumbnail-6.webp -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/channel-1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/channel-1.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/channel-2.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/channel-2.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/channel-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/channel-3.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/channel-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/channel-4.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/channel-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/channel-5.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/channel-6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/channel-6.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/channel-pictures/my-channel.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/channel-pictures/my-channel.jpeg -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/explore.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/hamburger-menu.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/home.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/library.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/notifications.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/originals.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/search.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/subscriptions.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/upload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/voice-search-icon.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/youtube-apps.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/icons/youtube-music.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /lecture code/lesson-17/intro-to-html/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Buttons Practice 5 | 6 | 7 | 8 | 11 | 12 | 15 | 16 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /lecture code/lesson-17/intro-to-html/website.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | First Website 5 | 6 | 7 |

8 | paragraph of text 9 |

10 | 11 | 14 | 15 | 16 | Link to YouTube 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /lecture code/lesson-17/styles/general.css: -------------------------------------------------------------------------------- 1 | p { 2 | margin-top: 0; 3 | margin-bottom: 0; 4 | } 5 | 6 | body { 7 | /* This style below will be inherited */ 8 | font-family: Roboto, Arial; 9 | margin: 0; 10 | padding-top: 80px; 11 | padding-left: 96px; 12 | padding-right: 24px; 13 | background-color: rgb(248, 248, 248); 14 | } 15 | -------------------------------------------------------------------------------- /lecture code/lesson-17/styles/sidebar.css: -------------------------------------------------------------------------------- 1 | .sidebar { 2 | position: fixed; 3 | left: 0; 4 | bottom: 0; 5 | top: 55px; 6 | background-color: white; 7 | width: 72px; 8 | z-index: 200; 9 | padding-top: 5px; 10 | } 11 | 12 | .sidebar-link { 13 | height: 74px; 14 | display: flex; 15 | justify-content: center; 16 | align-items: center; 17 | flex-direction: column; 18 | cursor: pointer; 19 | } 20 | 21 | .sidebar-link:hover { 22 | background-color: rgb(235, 235, 235); 23 | } 24 | 25 | .sidebar-link img { 26 | height: 24px; 27 | margin-bottom: 4px; 28 | } 29 | 30 | .sidebar-link div { 31 | font-size: 10px; 32 | } 33 | -------------------------------------------------------------------------------- /lecture code/lesson-17/thumbnails/thumbnail-1.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/thumbnails/thumbnail-1.webp -------------------------------------------------------------------------------- /lecture code/lesson-17/thumbnails/thumbnail-2.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/thumbnails/thumbnail-2.webp -------------------------------------------------------------------------------- /lecture code/lesson-17/thumbnails/thumbnail-3.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/thumbnails/thumbnail-3.webp -------------------------------------------------------------------------------- /lecture code/lesson-17/thumbnails/thumbnail-4.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/thumbnails/thumbnail-4.webp -------------------------------------------------------------------------------- /lecture code/lesson-17/thumbnails/thumbnail-5.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/thumbnails/thumbnail-5.webp -------------------------------------------------------------------------------- /lecture code/lesson-17/thumbnails/thumbnail-6.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RanitManik/HTML-CSS-SuperSimpleDev/0b1d18b8072e840032dbadd83fed5a95203f21bf/lecture code/lesson-17/thumbnails/thumbnail-6.webp --------------------------------------------------------------------------------