├── CSS ├── DAY-1 │ ├── Pexele.jpg │ └── index.html ├── DAY-2 │ ├── DAY-2.html │ ├── Day2.html │ ├── style.css │ └── style1.css └── DAY-3 │ ├── DAY-3.html │ └── day3.html ├── Final Project ├── 🎮 Final Project_ Interactive RPG-Style Website.docx └── 🎮 Final Project_ Interactive RPG-Style Website.pdf ├── HTML ├── DAY-1 │ ├── index.html │ └── index2.html ├── DAY-2 │ └── index3.html ├── DAY-3 │ ├── portfolio.html │ └── semantic.html └── Day-1&2-notes.pdf ├── Important Links └── Links.md ├── Java Script ├── DAY-1 │ ├── index.html │ └── script.js ├── DAY-2 │ ├── Form.html │ ├── form_script.js │ ├── hw.html │ ├── index.html │ └── script.js └── DAY-3 │ ├── Index.html │ ├── index2.html │ ├── one │ └── script.js ├── Major Assignment ├── CSS Major Assignment.pdf └── HTML Major Assignment (1).pdf ├── Minor Assignment ├── CSS │ ├── Minor_Assignment_1.html │ └── Minor_Assignment_2.html ├── HTML │ ├── Minor_Assignment_1.html │ └── Minor_assignment_2.html └── JS │ ├── Minor Assignment-1 on JS.docx │ ├── Minor assignment-1 (HTML).html │ ├── Minor assignment-1 (JS).js │ └── one ├── Presentations └── one └── README.md /CSS/DAY-1/Pexele.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/CSS/DAY-1/Pexele.jpg -------------------------------------------------------------------------------- /CSS/DAY-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 81 | 82 | 83 |

Introduction to CSS

84 |

What is CSS?

85 |

Stands for Cascading Styling Sheets

86 |

Ways to add CSS

87 |

Inline Css

88 |

Internl CSS (specificity)

89 |

Selectors

90 |

Tags

91 |

Class Selectors

92 |

id selector

93 |

Universal Selector

94 |

Box Model

95 |
96 | 97 |
98 | 99 |
100 |

Box

101 |
102 | 103 | 104 | -------------------------------------------------------------------------------- /CSS/DAY-2/DAY-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Earum minima nemo ducimus eligendi? Eum, doloribus est nobis a delectus in corrupti assumenda sequi voluptatibus praesentium natus ipsa odio modi dignissimos itaque, ab ullam voluptatum ducimus aliquam quas voluptatem officia sit sed magnam? Laudantium dicta deserunt sed atque sequi deleniti soluta quasi iste, consequuntur, optio enim rem dolor placeat incidunt earum numquam officiis laborum, accusantium dolorum saepe cum inventore molestias? Repudiandae facere aliquam reiciendis est. Praesentium neque obcaecati eaque quae ex nam iure porro rerum laborum, reiciendis earum! Modi, ex at! Qui minima numquam exercitationem minus deleniti consectetur expedita quasi, facere quae illum est voluptas reprehenderit odit officiis ab dolor temporibus img consequatur rerum explicabo corporis a omnis. Ad eos error pariatur dolore eveniet quae. Ipsum, eaque vitae a quidem ea eveniet alias blanditiis, dolores asperiores sint omnis repudiandae iusto ad nam earum. Reprehenderit impedit esse repellat laboriosam, veniam placeat fugiat ullam accusamus officiis architecto dolore possimus amet ipsa suscipit eveniet dignissimos odio blanditiis nesciunt aspernatur commodi reiciendis repudiandae? Amet quos omnis dolorum consequuntur numquam, laudantium illum et veniam. Eos, error aliquid eius quae at amet vitae distinctio, fuga labore neque provident maxime sequi accusantium non reprehenderit quis. Iste similique necessitatibus aperiam.

11 | 12 |
13 |

Units

14 |

pixel = px. 1px = 1/96 of 1 inch

15 |

pc = picas (1pc =1/6th of an inch)

16 |

pt = points (1/72nd of 1 inch)

17 |

in = inches

18 |

mm = millimetres

19 |

cm = centimetres (1cm = 37.8 px)

20 |

vh = viewport Height

21 |

vw = viewport width

22 |
23 | 24 |
25 | 30 | 35 | 40 | 45 | 46 |
    47 |
  1. a
    2. 48 |
  2. b
    3. 49 |
  3. c
    4. 50 |
51 |
52 |
53 | Google 54 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni, temporibus.

55 | 56 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta numquam et aliquam quidem natus, esse dolores facere? Consectetur, id iste.

57 | 58 |
59 |

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Deleniti numquam corporis expedita assumenda debitis minima laborum dolorem, adipisci sequi veniam optio dicta exercitationem enim provident voluptate harum laudantium velit corrupti nisi ducimus at? Sapiente et laudantium nobis ex, perferendis modi quibusdam debitis est magni placeat repellat repellendus consectetur? Molestiae consequuntur nobis odit ex numquam quod esse officia corporis facilis ad voluptatibus nisi adipisci illo dolores inventore, similique maxime minima deleniti suscipit enim delectus. Officiis, alias natus vero iusto accusamus earum molestiae odit minus eos expedita rerum, mollitia asperiores fugiat architecto quisquam? Voluptas mollitia cum numquam quo necessitatibus, non assumenda facilis voluptatum provident recusandae dolorem voluptate earum consequatur quia, id eius. Dolorem ea natus beatae corporis at repellendus officiis cumque dolor nam exercitationem, ullam veritatis delectus iste molestias libero distinctio qui rerum dicta? Facilis ipsam voluptate, officia perferendis, in repudiandae aut deserunt commodi tenetur totam voluptatum quas dolor officiis autem eaque! Repudiandae voluptatum provident in culpa, voluptatem cum distinctio consequuntur minima, perspiciatis assumenda odio numquam nisi harum iste recusandae esse architecto ducimus iusto quos. Quisquam veniam hic reprehenderit molestiae qui veritatis necessitatibus molestias rerum, impedit cupiditate ut voluptate? Soluta ut ipsum impedit corrupti quisquam a velit, cupiditate debitis maiores rerum eius?

60 | 61 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nobis id nesciunt quis, dolor explicabo impedit ab iure autem aperiam illum, reiciendis nihil voluptas quidem? Fuga dignissimos, sunt nisi itaque quas, rerum voluptatum minima unde molestias qui similique doloribus incidunt tenetur molestiae dicta voluptas repellat autem veritatis exercitationem! Dolorum, ducimus commodi.

62 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellat in debitis obcaecati quisquam consequatur aperiam dolorem assumenda, perferendis consequuntur aliquam expedita cum cupiditate nemo? Ad, sint amet ullam nulla cupiditate dolorem sed tenetur blanditiis maxime?

63 |

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Dolorum iusto molestiae distinctio corrupti delectus fugiat odio officia suscipit pariatur similique.

64 | 65 |
66 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime quos sed cum assumenda temporibus molestias expedita! Optio enim, ratione rem quasi quam possimus nesciunt numquam quidem reiciendis libero aliquid soluta omnis, sunt veritatis nam tempora quos aliquam. Tempore similique delectus mollitia, eaque facilis quisquam, suscipit fugiat porro error repellendus ullam consequatur, maiores maxime ut. Fuga accusantium illo repellendus ab dicta. Quam ducimus atque, minus, modi maxime fuga officiis eveniet sunt fugiat laboriosam, impedit ullam quos quaerat dolorem animi itaque. Praesentium neque voluptatibus, alias nobis tenetur debitis sapiente dolorum! Cum eos beatae aliquam sequi saepe velit omnis nostrum eius ab, officiis dicta totam nisi ipsum culpa labore suscipit ea, magnam cupiditate est ex? Sed maxime exercitationem voluptas laboriosam! Non omnis iste voluptatum sequi nesciunt ut veritatis, natus rerum ex voluptatibus perspiciatis. Repellendus pariatur error ratione veritatis facere maxime odit adipisci similique modi id, vero distinctio quidem officia rem? Fuga ipsa autem suscipit saepe corrupti, enim sunt culpa nihil rem facere neque laboriosam consequatur accusantium fugiat, possimus architecto velit reprehenderit, provident et aperiam vitae perferendis nulla? Illum pariatur natus fuga, sequi eligendi veritatis animi molestias dolor, non deserunt adipisci. Voluptas quidem mollitia nostrum laborum numquam, maiores repudiandae. Laborum vitae neque corrupti sequi soluta minima eius possimus eos magni qui nihil repellendus, rerum assumenda fugit voluptate, quasi minus quo iusto labore sit asperiores omnis blanditiis ipsa impedit. Reiciendis nam facere saepe similique iure autem vel quam ipsa cumque sint exercitationem natus maxime dolor blanditiis, laboriosam dolorum quas pariatur nemo asperiores maiores doloribus reprehenderit. Quis molestias praesentium aut corrupti, fugit itaque! Alias, veniam quibusdam? Temporibus commodi quibusdam dignissimos blanditiis facilis, animi voluptatum autem sapiente ducimus totam libero tempora laudantium minima odit esse, nostrum voluptate ratione error vero. Architecto, sint possimus veritatis asperiores debitis repellat soluta dignissimos maiores, in, eum iusto quisquam accusamus doloribus. Est, dolores at deserunt optio, quis aut iusto molestias tempora sint ipsam error ipsa repellendus dicta ducimus! Modi velit in ipsa a cum odit perspiciatis molestias quis, temporibus voluptatibus similique error quam vel libero eos sed accusamus itaque maiores neque? Quos quae maxime consequatur temporibus repudiandae doloremque quod tempore tenetur voluptate.

67 |
68 |
69 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae debitis nulla assumenda dolorem aspernatur incidunt, quasi voluptatum consectetur optio illo quis necessitatibus eos. Consectetur explicabo a architecto vero quasi eum cum tenetur, at sapiente, voluptatum incidunt eius!

70 |
71 | 72 | -------------------------------------------------------------------------------- /CSS/DAY-2/Day2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Positioning 7 | 8 | 48 | 49 |
50 | 58 |
59 |

Lorem ipsum dolor sit amet.

60 |

Lorem ipsum dolor sit amet.

61 | 62 |

Lorem ipsum dolor sit amet.

63 |

Lorem ipsum dolor sit amet.

64 |

Absolute

65 |
66 |

Lorem ipsum dolor sit amet.

67 |

Lorem ipsum dolor sit amet.

68 | 69 |
70 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maiores, labore quidem. Atque laudantium fugiat quasi deserunt, distinctio corporis ex numquam beatae rerum natus molestiae impedit delectus quis commodi dolor labore recusandae unde in aliquid aut explicabo doloribus. Tempore blanditiis fugiat aliquid reprehenderit. Labore inventore iure est magnam similique animi qui, quia aperiam ratione dolorem. Fugit magni fuga accusamus reiciendis nisi sed nam expedita quibusdam dolores impedit, assumenda placeat voluptatum a! Possimus quidem ut sequi consequatur delectus quo itaque distinctio eaque id similique. Maiores nihil atque corporis eligendi? Mollitia fugiat animi suscipit eum, voluptate nesciunt recusandae ratione nobis dolorem quam. Iusto quia rerum ducimus adipisci laudantium doloremque fugit dolor perspiciatis doloribus alias facilis perferendis nobis exercitationem aperiam nulla eos, pariatur accusantium atque! Rem id iusto temporibus veniam culpa placeat, architecto non porro eaque ut adipisci earum dicta aperiam ea enim odit consequuntur fugiat excepturi necessitatibus dolor hic molestiae ullam. Totam voluptatem quam vero sit explicabo aliquid ipsa ipsam esse voluptas iste ipsum, doloremque provident quaerat veritatis cumque facere culpa non inventore natus consectetur nostrum. Nulla, ad laborum? Mollitia est debitis laudantium rerum id soluta eveniet consequuntur. Sed delectus, fugiat est unde error quasi aperiam explicabo similique odit incidunt reprehenderit ea accusamus assumenda, in libero ipsam adipisci cumque voluptates quas minima dolore quo! Ratione omnis repellat ipsa, at alias minus nulla nisi repellendus, aperiam quam id qui impedit totam voluptatum illum saepe officiis reiciendis. Quis a doloremque culpa possimus eum vitae praesentium sequi incidunt! Unde laboriosam quidem ipsum eum rem. Est vero, quod nobis eveniet error dolore eligendi debitis reiciendis a dicta maxime possimus necessitatibus. Maiores laborum, alias obcaecati dolore iure excepturi eveniet voluptate ad! Sequi facilis dolore deserunt delectus, voluptatum veritatis minus explicabo veniam assumenda sed provident distinctio praesentium cumque voluptate debitis blanditiis quae, possimus laborum? Fugit tempore expedita eaque atque ipsa labore suscipit at ea neque saepe sequi, quo magni blanditiis officia, obcaecati temporibus tempora reprehenderit aliquid voluptatem magnam id ullam repellendus commodi! Architecto perspiciatis accusamus consequuntur voluptatum facilis unde doloremque, sint dolore, beatae error, natus tempore. Aperiam nisi saepe sapiente aut perspiciatis officia eius perferendis ipsam nihil? Totam voluptas pariatur voluptate praesentium accusantium similique nihil mollitia explicabo minus laborum ab vero veniam amet ut delectus consectetur fuga doloribus suscipit officiis sequi inventore eligendi, voluptatum facilis! Explicabo ipsum consequatur esse ipsa facilis, repellat nostrum sequi unde dicta voluptatum fuga quaerat molestiae asperiores ad veritatis! At aut neque aspernatur, deserunt minus quaerat iure. Quia laborum repudiandae ipsam libero? Ad, amet animi atque facilis rerum cum fugit error quasi unde cupiditate nulla vitae aut explicabo enim. Neque excepturi quaerat natus eligendi illum! Dolorum sed necessitatibus assumenda nemo ex enim quia sint odit rerum cumque, sit obcaecati, dicta iusto tempore dolore atque reiciendis?

71 | 72 | -------------------------------------------------------------------------------- /CSS/DAY-2/style.css: -------------------------------------------------------------------------------- 1 | /* universal selector */ 2 | * { 3 | margin: 0px; 4 | padding: 0px; 5 | } 6 | /* tag selector*/ 7 | h1 { 8 | background-color: rgba(150, 149, 168, 0.816); 9 | color: rgb(41, 39, 39); 10 | text-align: center; 11 | margin-bottom: 20px; 12 | padding: 10px; 13 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 14 | font-weight: 800; 15 | font-size: 100px; 16 | text-decoration: underline; 17 | text-decoration-color: black; 18 | } 19 | 20 | h2 { 21 | text-align: center; 22 | font-family: 'Poppins', sans-serif; 23 | font-size: 45px; 24 | } 25 | 26 | p { 27 | background-color: rgb(164, 176, 176); 28 | text-align: center; 29 | margin: 10px; 30 | padding: 10px; 31 | border: solid 5px grey; 32 | } 33 | 34 | button { 35 | background-color: #238636; 36 | padding: 10px; 37 | margin: 5px; 38 | font-size: 14px; 39 | color: white; 40 | border-radius: 10px; 41 | font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 42 | } 43 | 44 | /* class selectors */ 45 | .c { 46 | color: black; 47 | background-color: rgb(164, 176, 176); 48 | } 49 | 50 | .a { 51 | color: aqua; 52 | background-color: black; 53 | } 54 | 55 | .d { 56 | background-color: rgb(164, 176, 176); 57 | text-align: center; 58 | margin: 10px; 59 | padding: 10px; 60 | border-style: solid; 61 | border-color: grey; 62 | border-width: 20px; 63 | border-radius: 20px; 64 | cursor:crosshair; 65 | } 66 | .d:hover{ 67 | /* border-style: dotted; 68 | border-color: #238636; */ 69 | 70 | color: blue; 71 | } 72 | 73 | 74 | .apple { 75 | width: 30px; 76 | height: 40px; 77 | } 78 | 79 | /* id selector */ 80 | #b { 81 | background-color: rgb(77, 152, 152); 82 | color: aliceblue; 83 | text-align: center; 84 | } 85 | -------------------------------------------------------------------------------- /CSS/DAY-2/style1.css: -------------------------------------------------------------------------------- 1 | img{ 2 | max-width: 25vw; 3 | margin: 10px 20px; 4 | } 5 | 6 | video{ 7 | min-height: 20px; 8 | } 9 | 10 | img:hover{ 11 | border-style: groove; 12 | border-color: chocolate; 13 | } 14 | 15 | h2{ 16 | border-style: groove; 17 | border-color: aqua; 18 | padding: 10px 20px; 19 | } 20 | 21 | .a{ 22 | list-style-type: square; 23 | } 24 | 25 | .c{ 26 | list-style-type: circle; 27 | } 28 | 29 | .d{ 30 | list-style-type: none; 31 | } 32 | 33 | .e{ 34 | list-style-type:armenian; 35 | } 36 | 37 | .a:hover{ 38 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 39 | } 40 | .b:hover{ 41 | background-color: crimson; 42 | } 43 | 44 | .c:hover{ 45 | box-shadow: inset 10px 4px grey; 46 | } 47 | 48 | .w{ 49 | border-style: solid; 50 | margin:20px; 51 | padding: 5px; 52 | border-color: black; 53 | } 54 | /* pseudo classes */ 55 | a:visited{ 56 | color: red; 57 | } 58 | 59 | a:hover{ 60 | color: green; 61 | } 62 | 63 | a:link{ 64 | color: aqua; 65 | } 66 | 67 | /* Combinators */ 68 | /* 1.Descendant Selector */ 69 | div p{ 70 | background-color: chocolate; 71 | } 72 | /* 2.Child Selector */ 73 | div>p{ 74 | color: wheat; 75 | background-color: blueviolet; 76 | } 77 | /* 3.Adjacent Sibling Selector */ 78 | div+p{ 79 | color:brown !important; 80 | background-color: blueviolet !important; 81 | } 82 | 83 | /* 4.General Selector */ 84 | 85 | div~p{ 86 | background-color: crimson; 87 | color: white; 88 | } 89 | 90 | p{ 91 | text-shadow: 2px 2px 2px black ; 92 | } 93 | 94 | img{ 95 | float: right; 96 | } 97 | 98 | .maple{ 99 | width: calc(80%); 100 | height: 360px; 101 | border-style: solid; 102 | overflow: hidden; 103 | } 104 | 105 | .cap{ 106 | border-style: solid; 107 | overflow: hidden; 108 | width: min(50px , 50%); 109 | } 110 | 111 | /* static positioning */ -------------------------------------------------------------------------------- /CSS/DAY-3/DAY-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Display and Flexbox 8 | 9 | 108 | 109 | 110 |
111 |
1
112 |
2
113 |
3
114 |
4
115 |
116 | 190 | 191 | 192 | -------------------------------------------------------------------------------- /CSS/DAY-3/day3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Transformation & Transition 7 | 8 | 69 | 70 |
71 |
1
72 |
2
73 |
3
74 |
4
75 |
76 | 77 | -------------------------------------------------------------------------------- /Final Project/🎮 Final Project_ Interactive RPG-Style Website.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Final Project/🎮 Final Project_ Interactive RPG-Style Website.docx -------------------------------------------------------------------------------- /Final Project/🎮 Final Project_ Interactive RPG-Style Website.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Final Project/🎮 Final Project_ Interactive RPG-Style Website.pdf -------------------------------------------------------------------------------- /HTML/DAY-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | First file 7 | 8 | 9 |

About Me !!!

10 |

About Me !!!

11 |

About Me !!!

12 |

About Me !!!

13 |
About Me !!!
14 |
About Me !!!
15 | 16 |
17 | 18 |

Intoduction:

19 |

I am a student of Data Science at IIT Madras.

20 |

I want to become a frontend developer

21 |

My top 3 qualities:

22 |

23 |         1)Hardworking 26 |

27 |

   2)Dedicated

28 |

   3)Quick learner

29 | 30 |
31 | 32 |

Just a line

33 |

Just a line

34 |

Just a line

35 | 36 |

37 | It seems like this line...
...has been broken...
...and broken 38 | again. 39 |

40 | 41 | 42 | -------------------------------------------------------------------------------- /HTML/DAY-1/index2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Photosynthesis

10 |

Process by which plants convert CO2 to O2.

11 |

x + x + x = x3

12 |
13 |

My favourite quote:

14 |
15 | "There is nothing either good or bad, but thinking makes it so" 16 |
17 |

-William Shakespear, Hamlet

18 | 19 |
20 | 21 | 22 |

<body>

23 |     <p>Hello World <p> 24 |

<body>

25 | 26 |
27 | 
28 | No tab
29 |             3 tabs
30 |                         6 tabs
31 |
32 |
33 |

Below is an address

34 |
35 |

3/456, Sector-A,

36 |

Delhi-110001

37 |
38 |
39 |

To highlight something you can this is highlighted it.

40 | 41 |

<body>

42 |

No tab 3 tabs.

43 | 44 | 45 | -------------------------------------------------------------------------------- /HTML/DAY-2/index3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Anchor tags:

10 | Google | 11 | BS degree | 12 | Mango| 13 | 14 | Mango2 | 15 | 16 | First file | 17 | 18 | Mail| 19 | Contact| 20 | 21 |

hello

World

hello again

22 |
23 |

My top 3 qualities:

24 | 29 |
30 |
    31 |
  1. Hard working
    2. 32 |
  2. Dedication
    3. 33 |
  3. Quick Learner
    4. 34 |
35 | 36 |
37 |
Rainbow
38 |
It is a beautiful thing
39 |
Anchor Tag
40 |
It is used to link to other pages
41 |
42 |
43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
Student Details
NameAgeGender
John25Male
Lily24Female
68 |
69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 |
HeadingsStudentsDetails
IdNameDepartmentRoll No.
Student1VictorComputer Science1234
2WilliamElectronics2345
2RickCivil3456
105 | 106 | -------------------------------------------------------------------------------- /HTML/DAY-3/portfolio.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Personal Portfolio 7 | 8 | 9 |
10 |

Agrim Srivastava

11 |
12 | 13 |
14 |
15 |
16 |
17 | 18 | 19 |
20 | 21 |
22 | 23 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 |
32 | 33 | 34 |
35 | 36 |
37 | 38 | 39 |
40 | 41 |
42 | 43 | 44 |
45 | 46 |
47 | 48 | 49 | 50 | 51 |
52 | 53 |
54 | 55 | 56 |
57 | 58 |
59 |
60 | 61 |
62 |

About Me

63 |
64 |

Hello! My name is Agrim Srivastava. I am passionate about learning new things and applying my skills to solve real-world problems.

65 |
66 | 67 |
68 |

Currently, I am pursuing a degree in Data Science and am eager to make an impact in my chosen field.

69 |
70 | 71 |
72 |

I study in IIT Madras

73 |
74 | 75 |
76 | 77 |
78 |

Hobbies & Interests

79 | 86 |
87 | 88 |
89 |

Learning

90 |
91 | Mango image 92 |
93 | Another Mango image 94 |
95 |
96 | 97 | 98 |
99 | Mango image 100 |
101 | Image of Mango 102 |
103 | Mango image 104 |
105 | 106 | 107 |
108 | 109 | 110 | 111 | 112 | 113 | 114 |
115 | 116 |
117 | 118 | 124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | -------------------------------------------------------------------------------- /HTML/DAY-3/semantic.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Benefits of a Healthy Lifestyle 7 | 8 | 9 | 10 |
11 |

Embracing a Healthy Lifestyle

12 | 21 |
22 | 23 | 24 |
25 | 26 |
27 |
28 |

Introduction

29 |

Maintaining a healthy lifestyle is essential for physical and mental well-being. It encompasses a balanced diet, regular exercise, and positive habits that contribute to long-term health.

30 |
31 |
32 | 33 | 34 |
35 |

Benefits of a Healthy Lifestyle

36 |
37 |

Physical Health

38 |

Engaging in physical activity and eating nutritious food can reduce the risk of chronic diseases, improve energy levels, and enhance overall fitness.

39 |
40 |
41 |

Mental Well-being

42 |

A healthy lifestyle promotes mental clarity, reduces stress, and improves emotional resilience.

43 |
44 |
45 | 46 | 47 |
48 |

Practical Tips

49 |
50 |

Diet

51 |

Incorporate whole grains, lean proteins, and a variety of fruits and vegetables into your meals.

52 |
53 |
54 |

Exercise

55 |

Engage in at least 30 minutes of physical activity daily, such as walking, jogging, or yoga.

56 |
57 |
58 | 59 | 60 | 68 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio corporis autem, eum similique nesciunt ad obcaecati expedita necessitatibus deserunt sapiente omnis assumenda, quas facilis cupiditate repellat quos hic earum fugit eaque modi vero! Quae aliquam animi accusantium, quidem, praesentium magnam doloremque, rerum aliquid quis tempora ut alias. Quis, unde earum. Iste hic minima eligendi eum ullam voluptas ipsa assumenda dolorum ad cumque? Aliquid alias cumque maiores perspiciatis, expedita dicta ipsam dolorem rem natus deserunt voluptate officia. Modi eos officia provident architecto nulla excepturi voluptatibus sunt distinctio nemo atque inventore hic id ex sed consectetur, maxime doloremque suscipit voluptas? Distinctio ipsa autem, deserunt beatae pariatur ipsam illum laudantium commodi adipisci at temporibus magnam minima facilis maxime, ad possimus explicabo iure nostrum dolorum maiores! Saepe assumenda, recusandae adipisci cupiditate consequatur sit, natus temporibus esse voluptate non atque perspiciatis rerum aut libero? At nihil maxime harum pariatur! Hic eaque quos, aperiam laborum soluta possimus temporibus corporis unde modi fuga tenetur expedita velit ut maiores, molestiae asperiores at ab ex dolor accusantium corrupti iste tempore! Provident, itaque ipsa eius quo hic facilis veritatis cupiditate officia laboriosam, qui nulla autem corrupti dolor inventore. Nihil earum, cum explicabo quam quisquam dolor itaque! Commodi voluptate quis excepturi.

69 |

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Excepturi aspernatur obcaecati rerum fuga repudiandae consequuntur quam. Facilis placeat, deserunt perferendis quidem doloremque eligendi voluptatem facere repudiandae obcaecati libero natus totam optio maiores incidunt repellat aliquid unde minus quam! Placeat animi provident quae. Architecto ducimus laudantium cupiditate repellendus consequatur mollitia facilis. Beatae quo perferendis quasi repudiandae voluptatibus. Eius dolorem enim neque debitis a. Voluptate assumenda placeat culpa laboriosam, atque odit nam sapiente doloribus corrupti et reprehenderit neque quidem iste quod molestiae aperiam perferendis? Deleniti cupiditate fugiat natus ullam consequuntur mollitia repellat veniam quo quasi nihil, adipisci in! Delectus, est eos! Quod, eius. Excepturi dolore autem veritatis quaerat explicabo fuga iure beatae adipisci doloremque soluta eum nulla error aliquam dignissimos quasi, maiores cumque, at voluptatum. Atque, nam voluptatibus quasi similique, sunt voluptatum impedit molestiae architecto beatae et ducimus velit nihil commodi nulla animi! Dignissimos quia nemo assumenda esse suscipit autem commodi rem ab labore necessitatibus, quae veritatis voluptas iste libero voluptate consectetur quis sint dolor a iusto. Reiciendis sint, quia distinctio fugit, ipsa numquam quaerat dolorum quas dolores est ipsum natus eos sit ea sunt suscipit perspiciatis porro illum placeat possimus explicabo. Atque accusamus molestias aperiam nihil ipsum a vel nostrum hic iste voluptas ab, magnam excepturi quis beatae animi. Nihil vitae delectus quibusdam voluptas veniam libero animi reprehenderit sint dolor exercitationem sapiente corrupti soluta inventore error, atque quo temporibus! Corporis ad laboriosam id sunt. Officia quos exercitationem perspiciatis reprehenderit, tempore, maiores nemo recusandae voluptatum quasi tempora natus provident inventore aliquid similique voluptates deserunt consequatur dolorum modi repudiandae laborum adipisci, ipsum quae. Error aperiam neque voluptas consequuntur veniam incidunt, dolorum nulla sit. Accusantium mollitia pariatur aut dolorem, aliquam nulla inventore, quia totam corrupti voluptatem sit? Ab modi quo illo laudantium quaerat odit, debitis reiciendis tempore eaque sint sed blanditiis rem atque porro quisquam? Officiis nisi nemo quo nam error praesentium ea officia. Rem dolores enim officiis dolor, officia sit voluptatibus ipsam quasi. Minus corporis magnam pariatur quo veritatis reprehenderit, dolorem nisi at vitae expedita repellat. Ipsa facilis eius non dolorem quisquam iste voluptates cum consequatur distinctio! Ipsa sequi, provident quo saepe laboriosam ullam vel commodi sapiente aliquid repellat natus iusto magni veniam modi. Ratione, dicta quae aperiam, voluptate id eveniet quo corrupti tempore quod, eum in sapiente repudiandae ipsum quos reiciendis iure similique totam? Dignissimos voluptatem alias atque accusantium hic! Doloremque id, accusantium labore possimus adipisci aliquam consectetur distinctio incidunt natus delectus ipsum repellendus voluptas eveniet quaerat eaque quisquam modi voluptates unde aperiam perspiciatis iste eius. Dolorum, iusto nisi veniam ullam reiciendis quo sapiente quaerat porro quos eius. Ab, consequatur saepe. Possimus dignissimos voluptates fugit. At provident quis illum. Ipsam voluptatum necessitatibus labore magnam velit nesciunt ullam dolor impedit, laboriosam delectus? Nobis ipsum quod commodi. Debitis numquam asperiores ducimus similique. Quae, ducimus atque nisi accusantium magni incidunt? Doloremque, laudantium corrupti hic ad a tenetur inventore voluptates, non libero, autem explicabo provident totam? Eius veritatis sunt saepe, praesentium consequatur iusto excepturi sapiente labore temporibus, quia odit aut dicta laboriosam, fugiat amet eveniet dolorem.

70 |
71 | 72 | 73 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /HTML/Day-1&2-notes.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/HTML/Day-1&2-notes.pdf -------------------------------------------------------------------------------- /Important Links/Links.md: -------------------------------------------------------------------------------- 1 | # 📚 Important Links 2 | 3 | ## 🧑‍🏫 LinkedIN 4 | - [STEMONEF-COMMUNITY](https://www.linkedin.com/company/stemonefcommunity/) 5 | - [STEMONEF COMMUNITY SUPPORT](https://www.linkedin.com/showcase/stemonef-community-support-01/) 6 | 7 | ## 📖 Documentation 8 | - [VSC Docs](https://code.visualstudio.com/docs) 9 | - [HTML Tags](https://developer.mozilla.org/en-US/docs/Web/HTML) 10 | 11 | ## 📹 Session Links 12 | #### 👉 HTML 13 | - [DAY-1](https://www.youtube.com/watch?v=xEFiBHjTxk0) 14 | - [DAY-2](https://www.youtube.com/watch?v=UzyLBaAw1-0) 15 | - [DAY-3](https://www.youtube.com/watch?v=HWrEd5t4F08) 16 | 17 | #### 👉 CSS 18 | - [DAY-1](https://www.youtube.com/live/MDPF3JMKx8o) 19 | - [DAY-2](https://www.youtube.com/watch?v=1FCaO6kQbh4) 20 | - [DAY-3](https://www.youtube.com/watch?v=wSPzBlDcuv8&t=1729s) 21 | 22 | #### 👉 Java Script 23 | - [DAY-1](https://www.youtube.com/watch?v=goOARwcj-NY) 24 | - [DAY-2](https://www.youtube.com/watch?v=dPYu4uG57fY) 25 | - [DAY-3](https://www.youtube.com/watch?v=Q3wGEFtubrs) 26 | 27 | #### 👉 JSON 28 | - [DAY-1](https://www.youtube.com/watch?v=6Ore5WJnYao&t=13s) 29 | 30 | ## 🔧 Tools 31 | - [Visual Studio Code](https://code.visualstudio.com/download) 32 | 33 | ## 🎓 Learning Platforms 34 | - [Coding Enthusiasts](https://chat.whatsapp.com/F7MAST874qH2TzkAZjYjSk) 35 | - [Whatsapp](https://chat.whatsapp.com/KnaIexqqEymGHdz3O6KYlh) 36 | 37 | ## 🐦‍🔥 Channel Links 38 | - [STEMONEF Channel](https://www.youtube.com/channel/UCVI1nHwDJIWu5jEouXidXuA) 39 | - [Namdapha Channel](https://www.youtube.com/@Namdapha_IITM/streams) 40 | 41 | ## 🦹 Support 42 | - Contact US : community@stemonef.org 43 | 44 | ## 📝 Membership 45 | - [Form](https://forms.gle/MrCE384D9biGonZ66) 46 | 47 | -------------------------------------------------------------------------------- /Java Script/DAY-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | JS D-1 7 | 8 | 9 |

None of the JS will be shown here

10 | 12 | 13 | -------------------------------------------------------------------------------- /Java Script/DAY-1/script.js: -------------------------------------------------------------------------------- 1 | console.log("Hello all the participants") 2 | // this is us, trying to see if we can create an inline comment 3 | /*1 4 | 2 5 | 3 6 | 4 7 | 5 8 | 6 9 | 7 10 | 8 11 | */ 12 | var x=10; 13 | var x=20; 14 | var y=5; 15 | var a=x+y; 16 | console.log(a); 17 | let z = 30; 18 | const b = 20; 19 | console.log(b); 20 | 21 | var Student = "Samriddhi"; 22 | var sTudent = "Participants"; 23 | console.log(Student); 24 | console.log(sTudent); 25 | var Numbers = 12; 26 | var boolean = true; 27 | 28 | //arithmetic operators 29 | var sum = 10+10; 30 | console.log(sum) 31 | var diff = 66-33; 32 | var multiplication = 3*4; 33 | var division = 60/10; 34 | 35 | console.log(diff); 36 | console.log(multiplication); 37 | console.log(division); 38 | 39 | var d; 40 | d= 8+5-3+8*7+9/3; 41 | console.log(d) 42 | 43 | var deci1 = 5.7; 44 | var deci2 = 6.8; 45 | console.log(deci1+deci2); 46 | 47 | //incrementing 48 | var num = 87; 49 | console.log(num); 50 | num++; 51 | console.log(num); 52 | // ++ : num = num+1 53 | num--; //-- : num=num-1 54 | console.log(num); 55 | 56 | var rem = 11 57 | console.log(rem%3) 58 | 59 | //compound assignment with the augmented arithmentic 60 | var p= 13; 61 | var q= 14; 62 | var r= 15; 63 | 64 | p+=3;//p = p+3 65 | console.log(p); 66 | q-=7; 67 | console.log(q); 68 | r*=8; 69 | console.log(r); 70 | 71 | // arithmentic: +, -, *, /, ++, --, +=, -=, *=, /= 72 | // assignment: =, == 73 | // comparing: >, <, <=, >= 74 | // (1,2,3,4,5) * 75 | 76 | //strings 77 | var name = "Samriddhi Bagchi" 78 | var line1 = "I am a \"student\" of IITM"; 79 | console.log(line1); 80 | 81 | var str = "Link to gmeet" 82 | console.log(str) 83 | 84 | //double quotes: 85 | var line1 = "I am a \"student\" of IITM"; 86 | console.log(line1); 87 | //single 88 | var line2 = "I am a \'student\' of IITM"; 89 | console.log(line2); 90 | 91 | var line3 = "I am a \\student\\ of IITM"; 92 | console.log(line3); 93 | 94 | //newline: \n 95 | var line4 = "I am a \\student\\ of IITM, i am learning JS, \ni don't like Maths 2"; 96 | console.log(line4); 97 | //carriage return: \r 98 | var line5 = "I am a \\student\\ of IITM, i am learning JS, \ri don't like Maths 2"; 99 | console.log(line5); 100 | // new tab: \t 101 | var line6 = "I am a \\student\\ of IITM, i am learning JS, \ti don't like Maths 2"; 102 | console.log(line6); 103 | //back space: \b 104 | var line7 = "I am a \\student\\ of IITM, i am learning JS, \bi don't like Maths 2"; 105 | console.log(line7); 106 | 107 | 108 | // concatenating strings 109 | 110 | var mystr1 = "have to write html code as string?"; 111 | // 0123456 112 | var mystr2 = "let's see what happens"; 113 | var mystr3 = mystr1 + " " + mystr2; 114 | console.log(mystr3); 115 | 116 | var mystr4 = "i am enjoying the JS D-1, i am an angel" 117 | mystr1+= mystr4; 118 | console.log(mystr1); 119 | 120 | //finding the length of a string 121 | var length_mystr1 = mystr1.length; 122 | console.log(length_mystr1) 123 | 124 | //bracket notations 125 | var letter_mystr1 = mystr1[70]; 126 | console.log(letter_mystr1) 127 | 128 | //nth to last character 129 | var s=mystr1[length_mystr1-4]; 130 | console.log(s); 131 | 132 | 133 | let x1 = 6; 134 | let y1 = "6"; 135 | console.log( x1 == y1); -------------------------------------------------------------------------------- /Java Script/DAY-2/Form.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |
10 |
11 |

12 | 13 | 14 |
15 |

16 |

17 | 18 | 19 |
20 |

21 |

22 | 23 | 24 |

25 | 26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Java Script/DAY-2/form_script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Java Script/DAY-2/form_script.js -------------------------------------------------------------------------------- /Java Script/DAY-2/hw.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Java Script/DAY-2/hw.html -------------------------------------------------------------------------------- /Java Script/DAY-2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 |

Check console

10 | 11 | 12 | -------------------------------------------------------------------------------- /Java Script/DAY-2/script.js: -------------------------------------------------------------------------------- 1 | console.log("Good evening everyone") 2 | 3 | //assignment operator 4 | var a = 3 5 | a+= 4 //a = a+4 6 | console.log(a) 7 | 8 | //ternary operators 9 | let maths_marks = 80 10 | a = (maths_marks > 39)? "Pass": "Fail"; 11 | console.log(a); 12 | 13 | //comma operators 14 | 15 | //if-else statement 16 | var math_mark = 70; 17 | if (40 2 | 3 | 4 | 5 | 6 | JS D-3 7 | 8 | 9 |

Check the console

10 |

i am a student at IITM studying BS in Data Science

11 | 16 | 17 | -------------------------------------------------------------------------------- /Java Script/DAY-3/index2.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Java Script/DAY-3/index2.html -------------------------------------------------------------------------------- /Java Script/DAY-3/one: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Java Script/DAY-3/script.js: -------------------------------------------------------------------------------- 1 | let a = new Array [1,2,3]; 2 | a.length = 1; 3 | 4 | var b = ["monkeys", "cats", "dogs"]; 5 | console.log(b.join("|")); 6 | -------------------------------------------------------------------------------- /Major Assignment/CSS Major Assignment.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Major Assignment/CSS Major Assignment.pdf -------------------------------------------------------------------------------- /Major Assignment/HTML Major Assignment (1).pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Major Assignment/HTML Major Assignment (1).pdf -------------------------------------------------------------------------------- /Minor Assignment/CSS/Minor_Assignment_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /Minor Assignment/CSS/Minor_Assignment_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /Minor Assignment/HTML/Minor_Assignment_1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Minor Assignment/HTML/Minor_assignment_2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Document 7 | 8 | 9 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Minor Assignment/JS/Minor Assignment-1 on JS.docx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RaoAviralYadav/From-Code-to-Creation/393eb85493f17b2e91b3334b280dc5341de06f36/Minor Assignment/JS/Minor Assignment-1 on JS.docx -------------------------------------------------------------------------------- /Minor Assignment/JS/Minor assignment-1 (HTML).html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | To-Do List Tracker 7 | 8 | 9 |

10 | 11 | 12 | -------------------------------------------------------------------------------- /Minor Assignment/JS/Minor assignment-1 (JS).js: -------------------------------------------------------------------------------- 1 | // To-Do List Application 2 | 3 | // Initialize the to-do list array 4 | let todoList = []; 5 | 6 | // Application loop 7 | while (true) { 8 | // Prompt the user for an action 9 | let action = prompt("WELCOME TO THE TO-DO LIST MAKER!\n\nAvailable actions, only write the name of the action:\n * Add: Add a new task\n * View: View the current to-do list\n * Remove: Remove a task\n * Quit: Exit the application\n\nEnter an action:"); 10 | 11 | // Handle the action 12 | if (action === "Add") { 13 | // Add a new task 14 | let newTask = prompt("Enter the task to add:"); 15 | if (newTask) { 16 | todoList.push(newTask); 17 | alert("Task added: " + newTask); 18 | } else { 19 | alert("Task cannot be empty."); 20 | } 21 | } else if (action === "View") { 22 | // View the to-do list 23 | if (todoList.length === 0) { 24 | alert("To-Do List:\n(empty)"); 25 | } else { 26 | let listString = "To-Do List:\n"; 27 | for (let i = 0; i < todoList.length; i++) { 28 | listString += "- " + todoList[i] + "\n"; 29 | } 30 | alert(listString); 31 | } 32 | } else if (action === "Remove") { 33 | // Remove a task 34 | let taskToRemove = prompt("Enter the task to remove:"); 35 | if (taskToRemove) { 36 | let removed = false; 37 | for (let i = 0; i < todoList.length; i++) { 38 | if (todoList[i] === taskToRemove) { 39 | todoList.splice(i, 1); 40 | alert("Task removed: " + taskToRemove); 41 | removed = true; 42 | break; // Exit the loop after removing the task 43 | } 44 | } 45 | if (!removed) { 46 | alert("Task not found: " + taskToRemove); 47 | } 48 | } else { 49 | alert("Task to remove cannot be empty."); 50 | } 51 | } else if (action === "Quit") { 52 | // Quit the application 53 | alert("Thank you for using the To-Do List Application!"); 54 | break; // Exit the while loop 55 | } else { 56 | // Invalid action 57 | alert("Invalid action. Please type Add, View, Remove, or Quit."); 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /Minor Assignment/JS/one: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Presentations/one: -------------------------------------------------------------------------------- 1 | a 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 🌟 From Code to Creation 🌟 2 | **Embark on an immersive journey into the exciting world of frontend web development!** 3 | Our hands-on workshop series, **From Code to Creation**, is designed for beginners to learn essential skills and build interactive, visually appealing web applications from scratch. 4 | 5 | This workshop covers foundational technologies like **HTML**, **CSS**, and **JavaScript**, empowering you to create stunning websites and bring your creative visions to life. 6 | 7 | --- 8 | 9 | ## 🚀 Workshop Highlights 10 | - **HTML**: Master the building blocks of the web. 11 | Learn how to structure content, work with multimedia, and create semantic, accessible web pages. 12 | - **CSS**: Dive into styling techniques. 13 | Design responsive, dynamic layouts using modern tools like Flexbox, Grid, and animations. 14 | - **JavaScript**: Unlock the power of interactivity. 15 | Manipulate the DOM, handle events, and integrate dynamic functionalities into your projects. 16 | 17 | --- 18 | 19 | ## 📅 Workshop Plan 20 | Each part focuses on a core technology with a structured learning path and assignments. 21 | 22 | ### **Part 1: HTML** 23 | | **Day** | **Topics** | **Assignment** | 24 | |---------|-----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------| 25 | | Day 1 | **Introduction to HTML**: The Building Blocks of Web Development | Minor HTML-based task to reinforce learning | 26 | | | Topics: Setting up the environment, HTML structure, text, links, multimedia, semantic elements| | 27 | | Day 2 | **Exploring Forms, Media, and Advanced HTML Elements** | Comprehensive exercise to apply your knowledge | 28 | | | Topics: Working with forms, embedding audio/video, meta tags, advanced elements | | 29 | 30 | ### **Part 2: CSS** 31 | | **Day** | **Topics** | **Assignment** | 32 | |---------|-----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------| 33 | | Day 1 | **Getting Started with CSS**: Styling the Web | Create a simple, styled webpage using basic CSS properties | 34 | | | Topics: Syntax, colors, typography, box model, advanced selectors | | 35 | | Day 2 | **Advanced CSS**: Layouts and Modern Design Techniques | Build a responsive webpage using advanced CSS techniques | 36 | | | Topics: Flexbox, Grid, responsive design, media queries, animations, gradients | | 37 | 38 | ### **Part 3: JavaScript** 39 | | **Day** | **Topics** | **Assignment** | 40 | |---------|-----------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------| 41 | | Day 1 | **Introduction to JavaScript**: Adding Interactivity | Add interactivity to a pre-styled webpage using JavaScript | 42 | | | Topics: Basics, variables, operators, loops, functions, interacting with the DOM | | 43 | | Day 2 | **JavaScript in Action**: Events and Dynamic Content | Build a dynamic web application that incorporates all learned concepts | 44 | | | Topics: Event handling, manipulating elements dynamically, integrating user input | | 45 | 46 | --- 47 | 48 | ## 🛠 Workshop Features 49 | ✔️ **Expert-led sessions** with practical examples. 50 | ✔️ **Interactive assignments** for hands-on learning. 51 | ✔️ **Review and consolidation** activities to reinforce concepts. 52 | 53 | --- 54 | 55 | ## 🎉 Join Us! 56 | Take your first step toward becoming a **frontend development expert**! 57 | This workshop will give you the knowledge and skills to create modern, responsive, and dynamic websites. 58 | 59 | --- 60 | 61 | 💻 **Happy Coding!** 62 | Feel free to reach out if you have questions or need assistance. 63 | 64 | 65 | --------------------------------------------------------------------------------