├── .all-contributorsrc
├── Fifth Session
    └── README.md
├── First Session
    ├── Practice Codes
    │   ├── contact_info.html
    │   ├── form.html
    │   └── index.html
    └── README.md
├── Fourth Session
    ├── Assests
    │   └── js.jpg
    └── README.md
├── Hackathon Images
    ├── BILASPUR LOGO.png
    ├── GS Cup Logo.png
    ├── HACKATHON_banner2.png
    └── yay logo1.png
├── Hackathon Mechanism
    └── README.md
├── README.md
├── Second Session
    ├── CSS Documentation.pdf
    └── README.md
└── Third Session
    ├── Assests
        ├── buttons.JPG
        ├── column.JPG
        ├── column1.JPG
        ├── grid.JPG
        ├── jumpo.JPG
        └── navbar.JPG
    └── README.md


/.all-contributorsrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [
 3 |     "README.md"
 4 |   ],
 5 |   "imageSize": 100,
 6 |   "commit": false,
 7 |   "contributors": [
 8 |     {
 9 |       "login": "abhishekapk",
10 |       "name": "Abhishek Kumar Gupta",
11 |       "avatar_url": "https://avatars0.githubusercontent.com/u/64025312?v=4",
12 |       "profile": "https://www.linkedin.com/in/abhishekapk/",
13 |       "contributions": [
14 |         "doc"
15 |       ]
16 |     },
17 |     {
18 |       "login": "Abhijit2505",
19 |       "name": "Abhijit Tripathy",
20 |       "avatar_url": "https://avatars3.githubusercontent.com/u/52751963?v=4",
21 |       "profile": "https://abhijit2505.github.io/portfolio/",
22 |       "contributions": [
23 |         "doc"
24 |       ]
25 |     },
26 |     {
27 |       "login": "akrishna0",
28 |       "name": "Akash Krishna",
29 |       "avatar_url": "https://avatars0.githubusercontent.com/u/46137464?v=4",
30 |       "profile": "https://github.com/akrishna0",
31 |       "contributions": [
32 |         "doc"
33 |       ]
34 |     },
35 |     {
36 |       "login": "Unknownone-af",
37 |       "name": "Ajay Kumar Shukla",
38 |       "avatar_url": "https://avatars0.githubusercontent.com/u/61351885?v=4",
39 |       "profile": "https://www.linkedin.com/in/ajayshukla19/",
40 |       "contributions": [
41 |         "doc"
42 |       ]
43 |     },
44 |     {
45 |       "login": "ruhiawasthi",
46 |       "name": "Ruhi Awasthi",
47 |       "avatar_url": "https://avatars3.githubusercontent.com/u/59197808?v=4",
48 |       "profile": "https://www.linkedin.com/in/ruhi-awasthi-5101b81a5",
49 |       "contributions": [
50 |         "doc"
51 |       ]
52 |     },
53 |     {
54 |       "login": "deepeshgarg09",
55 |       "name": "Deepesh Garg",
56 |       "avatar_url": "https://avatars1.githubusercontent.com/u/63818498?v=4",
57 |       "profile": "https://www.linkedin.com/in/deepeshgarg09",
58 |       "contributions": [
59 |         "doc"
60 |       ]
61 |     }
62 |   ],
63 |   "contributorsPerLine": 7,
64 |   "projectName": "Front-End-Hackathon-Resources",
65 |   "projectOwner": "Girlscript-Chapter-Bilaspur",
66 |   "repoType": "github",
67 |   "repoHost": "https://github.com",
68 |   "skipCi": true
69 | }
70 | 


--------------------------------------------------------------------------------
/Fifth Session/README.md:
--------------------------------------------------------------------------------
 1 | # About The Session - Basics of Git and Github
 2 | 
 3 | 
 4 | <img src="https://img.shields.io/badge/Git and Github-Code-orange"> <img src="https://img.shields.io/badge/Git and Github-Documentation-brightgreen"> <img src="https://img.shields.io/badge/License-MIT-red">
 5 | 
 6 | This session revolves around the basics of Open Source, Closed source, version control, git and github.
 7 | We will be giving a brief overview of how to use GIT and GITHUB.
 8 | 
 9 | For Official Documentation, Visit - https://guides.github.com/
10 | https://docs.github.com/en/github
11 | 
12 | ## About the Documentation
13 | 
14 | This is the **Cheat Sheet and reference** opened for everyone to use during the hackathon. There are resources and tools embeded inside which you can use as a participant.
15 | 
16 | ## Softwares And Installations
17 | 
18 | * One [GitHub](https://github.com/) account
19 | * Any of the browsers - Like Chrome, Safari,Opera etc.
20 | * [Git](https://git-scm.com/downloads) 
21 | 
22 | 
23 | ## Content
24 | 
25 | You can find the slides here - <a href = "https://www.canva.com/design/DAEBs5MWTKc/SUQiJelFrMfPSLCoi8WbMg/view?utm_content=DAEBs5MWTKc&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton">Slides (Click Here For Presentation Slides)</a>
26 | 
27 | ### Presentation Slides Contain these topics - 
28 | 
29 | * Open Source
30 | * Closed Source
31 | * Version Control System
32 | * Git
33 | * Github
34 | 
35 | 
36 | ### What is Git? - 
37 | 
38 | Git is officially defined as a *distributed version control system* (VCS).
39 | 
40 | In other words, it's a system that tracks changes to our project files over time. It enables us to record project changes and go back to a specific version of the tracked files, at any given point in time.  This system can be used by many people to efficiently work together and **collaborate on team projects**, where each developer can have their own version of the project, distributed on their computer. Later on, these individual versions of the project can be merged and adapted into the main version of the project.
41 | 
42 | Basically, it's a massively popular tool for coordinating parallel work and managing projects among individuals and teams. Needless to say, knowing how to use Git is one of the most important skills for any developer nowadays - and it's definitely a great addition to your resume!
43 | 
44 | Git official homepage: [https://git-scm.com/](https://git-scm.com/)
45 | 
46 | 
47 | For GIT Documentation, visit here - https://www.notion.so/Introduction-to-Git-ac396a0697704709a12b6a0e545db049
48 | 
49 | 
50 | ### What is Github?
51 | 
52 | GitHub is a hosting platform for Git repositories.  You can use Git on its own without Github (and other similar platforms), but it's difficult to collaborate or share your code with. others.
53 | 
54 | - **Git is the version control system, the tool that tracks changes to our files over time**
55 | - **Github is a hosting service for projects that use Git.**
56 | 
57 | ** Make sure to first familiarize yourself with Git before proceeding.
58 | 
59 | 
60 | Git is used to store projects inside *repositories* and track the complete history of all changes to the project code. Using GitHub, we can upload a local project repository to a remote cloud-based GitHub repository. We can also interact with public repositories published by other developers.
61 | 
62 | GitHub could even be looked at as a social networking website for developers. Users can follow each other, give ratings, collaborate and communicate.
63 | 
64 | GitHub allows developers to utilize, change or improve software from its repositories. Each repository contains all project files and the code history. Repositories can have multiple collaborators and can be either public or private.
65 | 
66 | GitHub is also a popular way developers to publish their project portfolio online. It's an easy way to showcase skills and experience to potential employers or clients.  It's an important technology to be familiar with, especially for a new developer who is just starting out.
67 | 
68 | GitHub homepage: [github.com](http://github.com)
69 | 
70 | 
71 | For GITHUB Documentation, visit here - https://www.notion.so/Introduction-to-GitHub-202af6f64bbd4299b15f238dcd09d2a7
72 | 
73 | 
74 | 
75 | #### References
76 | 
77 | * [Github Docs](https://docs.github.com/en)
78 | * [Github Guides](https://guides.github.com/)
79 | * [Github Official Book](https://git-scm.com/book/en/v2)
80 | * https://docs.github.com/en/github
81 | * https://guides.github.com/features/wikis/
82 | * https://guides.github.com/activities/hello-world/
83 | 
84 | #### Contributors 
85 | 
86 | * [Chhavi Verma](https://www.linkedin.com/in/chhavi-verma-605b37184/)
87 | * [Pranav Rajveer](https://www.linkedin.com/in/pranav-rajveer/)
88 | * [Yuvraj Singh](https://www.linkedin.com/in/yuvraj-singh-1889831a1/)
89 | * [Ruhi Awasthi](https://www.linkedin.com/in/ruhi-awasthi-5101b81a5/)<a href="https://github.com/ruhiawasthi"><img src = "https://img.shields.io/badge/Follow-4183C4?logo=github&style=social"></a>
90 | * [Deepesh Garg](https://www.linkedin.com/in/deepeshgarg09/) <a href="https://github.com/deepeshgarg09"><img src = "https://img.shields.io/badge/Follow-4183C4?logo=github&style=social"></a>
91 | 
92 | 


--------------------------------------------------------------------------------
/First Session/Practice Codes/contact_info.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8">
 6 |   <title>Abhijit's Contact Information</title>
 7 | </head>
 8 | 
 9 | <body>
10 |   <h1>Contact Information</h1>
11 |   <h2>Adresses:</h2>
12 |   <p>
13 |     <img src="homeicon.png" height="35" />
14 |     <strong>&nbsp;&nbsp; Home</strong><br />
15 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
16 |     Some where in the earth,<br />
17 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
18 |     from mars,<br />
19 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
20 |     India,41465165451.
21 |   </p>
22 |   <br />
23 |   <br />
24 |   <h2>Reach me Out:</h2>
25 |   <p>
26 |     <img src="gmail_icon.png" height="35" />
27 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
28 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
29 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
30 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
31 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
32 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
33 |     <img src="mobileicon.png" height="35" />
34 |     <br />
35 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
36 |     <strong>Email</strong>
37 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
38 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
39 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
40 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
41 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
42 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
43 |     <strong>Mobile No.</strong>
44 |     <br />
45 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
46 |     <a href="mailto:abhijittripathy12465148499@gmail.com">abhijittripathy2546601499@gmail.com</a>
47 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
48 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
49 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
50 |     <a href="tel:+917008187611">+91123456789</a>
51 |     <br />
52 |     <br />
53 |     <br />
54 |   <h2>Social Profiles:</h2>
55 |   <p>
56 |     <a href="https://www.linkedin.com/in/abhijit-tripathy-415912187">
57 |       <img src="linkedin_icon.png" height="35" />
58 |     </a>
59 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
60 |     <a href="https://www.facebook.com/abhijit.tripathy.75470">
61 |       <img src="facebookicon.png" height="35" />
62 |     </a>
63 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
64 |     <a href="https://www.instagram.com/the_insane_coder">
65 |       <img src="Instagram_icon.png" height="35" />
66 |     </a>
67 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
68 |     <a href="https://www.quora.com/profile/Abhijit-Tripathy-9">
69 |       <img src="quoraicon.png" height="35" />
70 |     </a>
71 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
72 |     <a href="https://medium.com/@abhijittripathy99">
73 |       <img src="mediumicon.png" height="35" />
74 |     </a>
75 |   </p>
76 |   <hr size="3" noshade />
77 |   <h2>Contact Me:</h2>
78 |   <form action="mailto:abhijittripathy99@gmail.com" method="post" enctype="text/plain">
79 |     <label>Your Name:</label>
80 |     <input type="text" name="yourName" value"" /><br />
81 |     <label>Your Email:</label>
82 |     <input type="email" name="yourEmail" value"" /><br />
83 |     <label>Your Message:</label><br />
84 |     <textarea name="yourMessage" rows="10" cols="30"></textarea><br />
85 |     <input type="submit" name="" /><br />
86 | 
87 |   </form>
88 | 
89 | </body>
90 | 
91 | </html>
92 | 


--------------------------------------------------------------------------------
/First Session/Practice Codes/form.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en" dir="ltr">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>A Small Form</title>
 6 |   </head>
 7 |   <body>
 8 |     <form>
 9 |     Username:<br>
10 |     <input type="text" name="username">
11 |     <br>
12 |     Email id:<br>
13 |     <input type="email" name="email"><br />
14 |     <label for="user-password">Password: </label><br>
15 |     <input type="password" name="user-pwd" id="user-password"><br /><br />
16 |     <input type="submit" value="Submit"><br /><br />
17 | 
18 |     <input type="radio" name="gender" id="male">
19 |     <label for="male">Male</label><br>
20 |     <input type="radio" name="gender" id="female">
21 |     <label for="female">Female</label>
22 | 
23 |     <br /><br />
24 |     <b>SELECT SUBJECTS</b>
25 |     <br>
26 |     <input type="checkbox" name="subject" id="maths">
27 |     <label for="maths">Maths</label>
28 |     <input type="checkbox" name="subject" id="science">
29 |     <label for="sceince">Science</label>
30 |     <input type="checkbox" name="subject" id="english">
31 |     <label for="english">English</label>
32 |     <br /><br />
33 |     <label for="fileselect">Upload:</label>
34 |     <input type="file" name="upload" id="fileselect">
35 |   </form>
36 | 
37 |   </body>
38 | </html>
39 | 


--------------------------------------------------------------------------------
/First Session/Practice Codes/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en" dir="ltr">
  3 | 
  4 | <head>
  5 |   <meta charset="utf-8">
  6 |   <title>Abhijit's Personal Webpage</title>
  7 | </head>
  8 | <body>
  9 |   <table cellspacing="20">
 10 |     <tr>
 11 |       <td>
 12 |         <img src="abhijit1.png" height="150" alt="Profile Pic" />
 13 |       </td>
 14 |       <td>
 15 |         <h1>Abhijit Tripathy</h1>
 16 |         <i>
 17 |           Undergraduate Student<br />
 18 |           Department Of <a href="http://www.ggu.ac.in/schools/dept%20of%20english/dept_of_ComputerEngg_index.html">
 19 |             Computer Science and Engineering,
 20 |           </a><br />
 21 |           School Of Studies in Engineering and Technology,<br />
 22 |           <a href="http://www.ggu.ac.in/">Guru Ghasidas University</a>
 23 |           <br />
 24 |           Chattisgarh,India,495009<br />
 25 |         </i>
 26 |       </td>
 27 |     </tr>
 28 |   </table>
 29 |   <hr />
 30 |     <h2>About me </h2>
 31 |   <p>
 32 |     I am an aspiring Machine Learning Engineer and AI developer,having a keen
 33 |     interest in problem solving, data structures, algorithms, discrete mathematics,
 34 |     number theory and statistical analysis.
 35 |     Also I like to solve cryptographic problems and take part in coding challenges
 36 |     organised monthly on different competitive programming sites.
 37 |     Currently, I am in search of some machine learning projects to work
 38 |     in real-time and learn from them.
 39 |     <br />
 40 |     <br />
 41 |     <strong>My specialization interest include,</strong>
 42 |   <ol>
 43 |     <li>Computer Vision</li>
 44 |     <li>Robotics</li>
 45 |     <li>Machine Learning</li>
 46 |     <li>Artificial Intelligence</li>
 47 |     <li>Micro-Economics and stocks</li>
 48 |   </ol>
 49 |   <strong>My hobbies include,</strong>
 50 |   <ol>
 51 |     <li>Technical Content writing</li>
 52 |     <li>Graphics Designing</li>
 53 |     <li>Listen to Music</li>
 54 |     <li>Watching a Movie</li>
 55 |   </ol>
 56 |   Contact information - <a href="contact-information.html">Click Here</a>
 57 |   </p>
 58 |   <hr />
 59 |   <h2>Developer Profiles</h2>
 60 |   <p>
 61 |     <a href="https://www.hackerrank.com/abhijittripathy2">
 62 |       <img src="hackerrankicon.png" height="40" />
 63 |     </a>
 64 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 65 |     &nbsp;&nbsp;&nbsp;&nbsp;
 66 |     <a href="https://www.hackerearth.com/@abhijit431">
 67 |       <img src="hackerearthicon.png" height="35" />
 68 |     </a>
 69 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 70 |     &nbsp;&nbsp;&nbsp;&nbsp;
 71 |     <a href="https://www.codechef.com/users/abhijit_tr255#">
 72 |       <img src="cpdecheficon.png" height="40" />
 73 |     </a>
 74 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 75 |     &nbsp;&nbsp;&nbsp;&nbsp;
 76 |     <a href="https://leetcode.com/coding_master1408/">
 77 |       <img src="leetcodeicon.png" height="40" />
 78 |     </a>
 79 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 80 |     &nbsp;&nbsp;&nbsp;&nbsp;
 81 |     <a href="https://auth.geeksforgeeks.org/user/abhijittripathy/practice/">
 82 |       <img src="gfgicon.png" height="40" />
 83 |     </a>
 84 |     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
 85 |     &nbsp;&nbsp;&nbsp;&nbsp;
 86 |     <a href="https://github.com/Abhijit2505">
 87 |       <img src="githubicon.png" height="40" />
 88 |     </a>
 89 |   </p>
 90 |   <hr />
 91 |   <h2>Work Experience</h2>
 92 |   <center>
 93 |     <table border='5'>
 94 |   <thead>
 95 |     <tr>
 96 |       <td>
 97 |         <center><strong>Job Name</strong></center>
 98 |       </td>
 99 |       <td>
100 |         <center><strong>Roles & responsibilities </strong></center>
101 |       </td>
102 |       <td>
103 |         <center><strong>Duration</strong></center>
104 |       </td>
105 |     </tr>
106 |   </thead>
107 |   <tbody>
108 |     <tr>
109 |       <td>
110 |         <em><b>Chapter Leader</b></em><br />
111 |         (GirlScript Foundation)
112 |       </td>
113 |       <td>
114 |         <ul>
115 |           <li>Publicize:- Spread awareness about Girlscript events and program in my region</li>
116 |           <li>Ideate:- Strategize and drive innovative word of mouth campaigns in our activities and events</li>
117 |           <li>Promote:- Ensuring enthusiastic participation from my region</li>
118 |           <li>Organize:- Planning and organizing events in my community</li>
119 |           <li>Represent:-Acting as a representative for Girlscript for promoting the festival in my circles</li>
120 |         </ul>
121 |       </td>
122 |       <td>
123 |         Jun 2020 - Present
124 |       </td>
125 |     </tr>
126 |     <tr>
127 |       <td>
128 |         <em><b>DSA Developer Intern</b></em><br />
129 |         (OpenGenus Foundation)
130 |       </td>
131 |       <td>
132 |         <ul>
133 |           <li>Open-Source contribution in the existing project codes</li>
134 |           <li>Writing technical articles</li>
135 |         </ul>
136 |       </td>
137 |       <td>
138 |         Jun 2020 - Present
139 |       </td>
140 |     </tr>
141 |     <tr>
142 |       <td>
143 |         <em><b>Data Analytics and Research Intern</b></em><br />
144 |         (Wealthy Waste)
145 |       </td>
146 |       <td>
147 |         <ul>
148 |           <li>Analysis of the provided data (Exploratory Data Analysis)</li>
149 | <li>Correlating the data with real-life incidents, by using Statistical Analysis</li>
150 | <li>Preparing a research output based on the </li>
151 |         </ul>
152 |       </td>
153 |       <td>
154 |         May 2020 - Jun 2020
155 |       </td>
156 |     </tr>
157 |     <tr>
158 |       <td>
159 |         <em><b>Mission Advocate</b></em><br />
160 |         (Widhya)
161 |       </td>
162 |       <td>
163 |         <ul>
164 |           <li>Creating content for Missions</li>
165 | <li> Creating communities and helping to reach out to more students</li>
166 | <li>Participate in the decision making processes along with the rest of Team Widhya</li>
167 |         </ul>
168 |       </td>
169 |       <td>
170 |         July 2020 - Present
171 |       </td>
172 |     </tr>
173 |     <tr>
174 |       <td>
175 |         <em><b>Problem Setter</b></em><br />
176 |         (Cutshort)
177 |       </td>
178 |       <td>
179 |         <ul>
180 |           <li>Setting Problems ranging from easy to medium and hard levels</li>
181 |         </ul>
182 |       </td>
183 |       <td>
184 |         July 2020 - Present
185 |       </td>
186 |     </tr>
187 |     <tr>
188 |       <td>
189 |         <em><b>Management Team Member</b></em></em><br />
190 |         (The Uplift Project)
191 |       </td>
192 |       <td>
193 |         <ul>
194 |           <li>Managing the entire slack application workspace for the Uplift Project</li>
195 |         </ul>
196 |       </td>
197 |       <td>
198 |         May 2020 - Present
199 |       </td>
200 |     </tr>
201 |     <tr>
202 |       <td>
203 |         <em><b>Technical Content Writer</b></em></em><br />
204 |         (Geeks For Geeks)
205 |       </td>
206 |       <td>
207 |         <ul>
208 |           <li>Writing innovative technical articles</li>
209 |           <li>Editing and improving the code and content of the existing article</li>
210 |         </ul>
211 |       </td>
212 |       <td>
213 |         May 2020 - Present
214 |       </td>
215 |     </tr>
216 |     <tr>
217 |       <td>
218 |         <em><b>Fellow</b></em></em><br />
219 |         (Incubate IND)
220 |       </td>
221 |       <td>
222 |   <ul>
223 |           <li>INCIND Technology Fellowship is a unique and exclusive program for the coders, hackers, designers and innovators of tomorrow</li></ul>
224 |       </td>
225 |       <td>
226 |         July 2020 - Present
227 |       </td>
228 |     </tr>
229 |   </tbody>
230 | </table>
231 |   </center>
232 |   <hr />
233 |   <h2>Skills</h2>
234 |   <center>
235 |     <table border="1">
236 |       <thead>
237 |         <tr>
238 |           <td>
239 |             <em><strong>Skill's Name</strong></em>
240 |           </td>
241 |           <td>
242 |             <em><strong>Grip</strong></em>
243 |           </td>
244 |           <td>
245 |             <em><strong>Skill's Name</strong></em>
246 |           </td>
247 |           <td>
248 |             <em><strong>Grip</strong></em>
249 |           </td>
250 |         </tr>
251 |       </thead>
252 |       <tbody>
253 |         <tr>
254 |           <td>
255 |             C++ Programming
256 |           </td>
257 |           <td>
258 |             ⭐⭐⭐⭐⭐
259 |           </td>
260 |           <td>
261 |             Technical Writing
262 |           </td>
263 |           <td>
264 |             ⭐⭐⭐⭐⭐
265 |           </td>
266 |         </tr>
267 |         <tr>
268 |           <td>
269 |             Python Programming
270 |           </td>
271 |           <td>
272 |             ⭐⭐⭐⭐⭐
273 |           </td>
274 |           <td>
275 |             Blogging
276 |           </td>
277 |           <td>
278 |             ⭐⭐⭐⭐
279 |           </td>
280 |         </tr>
281 |         </tr>
282 |         <tr>
283 |           <td>
284 |             Machine Learning
285 |           </td>
286 |           <td>
287 |             ⭐⭐⭐⭐
288 |           </td>
289 |           <td>
290 |             Micro-Economics
291 |           </td>
292 |           <td>
293 |             ⭐⭐⭐
294 |           </td>
295 |         </tr>
296 |         </tr>
297 |         <tr>
298 |           <td>
299 |             Web Development
300 |           </td>
301 |           <td>
302 |             ⭐⭐⭐
303 |           </td>
304 |           <td>
305 |             Git & Github
306 |           </td>
307 |           <td>
308 |             ⭐⭐⭐⭐
309 |           </td>
310 |         </tr>
311 | 
312 |       </tbody>
313 |     </table>
314 |   </center>
315 | <hr />
316 | </body>
317 | 
318 | </html>
319 | 


--------------------------------------------------------------------------------
/First Session/README.md:
--------------------------------------------------------------------------------
  1 | # About The Session - "Web Development Basics and HTML"
  2 | <img src="https://img.shields.io/badge/HTML-Code-orange"> <img src="https://img.shields.io/badge/HTML-Documentation-brightgreen"> <img src="https://img.shields.io/badge/License-MIT-red">
  3 | 
  4 | This session revolves around the basics of web, ranging from what browser,server,internet are. 
  5 | We will be giving a brief overview of how structuring of webpage is done using HTML.
  6 | 
  7 | ## About the Documentation
  8 | 
  9 | This is the **Cheat Sheet** opened for everyone to use during the hackathon. There are resources and tools embeded inside which you can use as a participant.
 10 | 
 11 | ## Softwares And Installations
 12 | 
 13 | You can install any of these Editors,
 14 | * [Sublime Text](https://www.sublimetext.com/) <img src="https://img.shields.io/badge/Editor-Sublime-yellow">
 15 | * [Atom](https://atom.io/) [Preferable, will be using in the session] <img src = https://img.shields.io/badge/Editor-Atom-green>
 16 | * NotePad - May Be present in your system already
 17 | * One [GitHub](https://github.com/) account
 18 | * Any of the browsers - Like Chrome, Safari,Opera etc.
 19 | 
 20 | ## Content
 21 | 
 22 | You can find the slides here - <a href = "https://www.canva.com/design/DAEBAah68is/share/preview?token=d58aB02L1p3sE-Aidi1LBQ&role=EDITOR&utm_content=DAEBAah68is&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton">Slides</a>
 23 | 
 24 | * [How Does The Internet Work](https://github.com/Abhijit2505/Front-End-Hackathon-Resources/blob/master/First%20Session/DOC.md#how-does-the-internet-work-)
 25 | * [What is HTML](https://github.com/Abhijit2505/Front-End-Hackathon-Resources/blob/master/First%20Session/DOC.md#what-is-html-)
 26 | * <details><summary><a href="https://github.com/Abhijit2505/Front-End-Hackathon-Resources/blob/master/First%20Session/DOC.md#tags-and-elements-cheatsheet">Tags and Elements Cheatsheet</a></summary>
 27 |    
 28 |     * [comments](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#comments)
 29 |     * [html](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#html)
 30 |     * [head](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#head)
 31 |     * [body](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#body)
 32 |     * [heading](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#heading)
 33 |     * [paragraph](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#paragraph)
 34 |     * [br](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#br)
 35 |     * [anchor](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#anchor)
 36 |     * [img](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#img)
 37 |     * [list](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#list)
 38 |     * [Text Formatting](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#text-formatting)</details> 
 39 |     
 40 |    * <details><summary><a href="https://github.com/Abhijit2505/Front-End-Hackathon-Resources/tree/master/First%20Session#some-intermediate-stuffs">Some Intermediate Stuffs</a></summary>
 41 |    
 42 |    
 43 |       * [Making HTML Table Element](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/tree/master/First%20Session#making-html-table-element)</details>
 44 | 
 45 | 
 46 | 
 47 | ### How Does The Internet Work ?
 48 | 
 49 | The Internet is made up of a massive network of specialized computers called routers. Each router’s job is to know how to move packets along from 
 50 | their source to their destination. A packet will have moved through multiple routers during its journey.
 51 | 
 52 | Along with the session slides, here is an addition from [Medium](https://medium.com/), Have a visit to the link - [How Does The Internet Work?](https://medium.com/@User3141592/how-does-the-internet-work-edc2e22e7eb8#:~:text=The%20Internet%20is%20made%20up,next%2C%20it's%20called%20a%20hop.)
 53 | to get an entire overview of how the internet works.
 54 | 
 55 | ### What is HTML ?
 56 | 
 57 | * **HTML** stands for **Hypertext Markup Language**. It allows the user to create and structure sections, paragraphs, headings, links, and blockquotes 
 58 | for web pages and applications.
 59 | 
 60 | * HTML is not a programming language, meaning it doesn’t have the ability to create dynamic functionality. Instead, it makes it possible to organize 
 61 | and format documents, similarly to Microsoft Word. That's why it is known as **Mark Up Language**.
 62 | * HTML documents are files that end with a **.html** or **.htm** extension. You can view then using any **web browser** (such as Google Chrome, Safari, or Mozilla Firefox). 
 63 | The browser reads the HTML file and renders its content so that internet users can view it.
 64 | * Usually, the average website includes several different **HTML pages**. For instance: home pages, about pages, contact pages would all have separate HTML documents.
 65 | * Each HTML page consists of a set of **tags** (also called elements), which you can refer to as the building blocks of web pages. 
 66 | They create a hierarchy that structures the content into sections, paragraphs, headings, and other content blocks.
 67 | 
 68 | * Most HTML elements have an opening and a closing that use the ```<tag></tag>``` syntax.
 69 | 
 70 | ### Tags and Elements CheatSheet
 71 | 
 72 | #### comments
 73 | 
 74 | ```<!--comments--->``` is used to add comments.
 75 | 
 76 | #### html
 77 | 
 78 | The ```<html></html>``` represents the root (top-level element) of an HTML document, so it is also referred to as the root element. 
 79 | All other elements must be descendants of this element.
 80 | 
 81 | **Example**
 82 | 
 83 |  ```html
 84 | <!DOCTYPE html>
 85 |  <html lang="en">
 86 |    <head>...</head>
 87 |    <body>...</body>
 88 |  </html>
 89 | ```
 90 |     
 91 | Providing a **lang** attribute with a valid IETF identifying language tag on the html element will help 
 92 | screen reading technology determine the proper language to announce. The identifying language tag should describe 
 93 | the language used by the majority of the content of the page. Without it, screen readers will
 94 | typically default to the operating system's set language, which may cause mispronunciations.
 95 | 
 96 | Including a valid **lang** declaration on the html element also ensures that important metadata contained in the page's 
 97 | ```<head>```, such as the page's ```<title>```, are also announced properly.
 98 | 
 99 | #### head
100 | 
101 | The ```<head>``` provides general information (metadata) about the document, including its title and links to its scripts and style sheets.
102 | 
103 | **Example**
104 | 
105 |   ```html
106 | <html>
107 |    <head>
108 |      <title>Document title</title>
109 |    </head>
110 |  </html>
111 | ```
112 | 
113 | The HTML Title element ```<title>``` defines the document's title that is shown in a browser's title bar or a page's tab. 
114 | It only contains text and tags within the element are ignored.
115 | 
116 | #### body
117 | 
118 | The ```<body>``` represents the content of an HTML document. There can be only one ```<body>``` element in a document.
119 | 
120 | **Example**
121 | 
122 |   ```html
123 | <html>
124 |    <head>
125 |      <title>Document title</title>
126 |    </head>
127 |    <body>
128 |      <p>This is a paragraph</p>
129 |    </body>
130 |  </html>
131 | ```
132 | 
133 | #### heading
134 | 
135 | This one is used to create headings with six different tags ranging from **h1** to **h6**, Have a look at the example below,
136 | 
137 | **Example**
138 | 
139 |  ```html
140 |  <h1>Heading level 1</h1>
141 |  <h2>Heading level 2</h2>
142 |  <h3>Heading level 3</h3>
143 |  <h4>Heading level 4</h4>
144 |  <h5>Heading level 5</h5>
145 |  <h6>Heading level 6</h6>
146 | ```
147 | 
148 | <h1>Heading level 1</h1>
149 | <h2>Heading level 2</h2>
150 | <h3>Heading level 3</h3>
151 | <h4>Heading level 4</h4>
152 | <h5>Heading level 5</h5>
153 | <h6>Heading level 6</h6>
154 | 
155 | #### paragraph
156 | 
157 | The ```<p>``` represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank
158 | lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.
159 | 
160 | **Example**
161 | 
162 |  ```html
163 | <p>This is the first paragraph of text.
164 |    This is the first paragraph of text.
165 |    This is the first paragraph of text.
166 |    This is the first paragraph of text.</p>
167 |  <p>This is the second paragraph.
168 |    This is the second paragraph.
169 |    This is the second paragraph.
170 |    This is the second paragraph.</p>
171 | ```
172 | 
173 | #### br
174 | 
175 | The ```<br>``` produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.
176 | 
177 | **Example**
178 | 
179 |  ```html
180 | GirlScript Bilaspur<br>
181 |  Bilaspur,Chhattisgarh<br>
182 |  123456<br>
183 |  India<br>
184 | ```
185 | 
186 | GirlScript Bilaspur<br>
187 | Bilaspur,Chhattisgarh<br>
188 | 123456<br>
189 | India<br>
190 | 
191 | #### anchor
192 | 
193 | The ```<a>``` (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.
194 | 
195 | **Example**
196 | 
197 |  ```html
198 | <a href="https://girlscript-chapter-bilaspur.github.io/Forntend-Hackathon/">
199 |  External Link
200 |  </a>   
201 | ```
202 | 
203 | <a href="https://girlscript-chapter-bilaspur.github.io/Forntend-Hackathon/">
204 | External Link
205 | </a>   
206 | 
207 | ##### Common Attributes - 
208 | ##### href
209 | Contains a URL or a URL fragment that the hyperlink points to.
210 | A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, file:, ftp:, and mailto: work in most browsers.
211 | You can use href="#top" or the empty fragment href="#" to link to the top of the current page. This behavior is specified by HTML5.
212 | 
213 | ##### rel
214 | Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
215 | 
216 | ##### target
217 | Specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or <iframe>. The following keywords have special meanings:
218 | * **_self**: Load the URL into the same browsing context as the current one. This is the default behavior.
219 | * **_blank**: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.
220 | * **_parent**: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.
221 | * **_top**: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.
222 | 
223 | #### img
224 | 
225 | The ```<img>``` embeds an image into the document. It is a replaced element.
226 | 
227 | **Example**
228 | 
229 |  ```html
230 | <img src="book_photo.png" alt="A Book Photo">
231 | ```
232 | 
233 | ##### Common Attributes - 
234 | 
235 | #### alt
236 | This attribute defines an alternative text description of the image.
237 | Note: Browsers do not always display the image referenced by the element. This is the case for non-graphical browsers 
238 | (including those used by people with visual impairments), if the user chooses not to display images, or if the browser 
239 | cannot display the image because it is invalid or an unsupported type. In these cases, the browser may replace the image 
240 | with the text defined in this element's alt attribute. You should, for these reasons and others, provide a useful value for 
241 | alt whenever possible.
242 | 
243 | #### height
244 | The intrinsic height of the image in pixels.
245 | 
246 | #### src
247 | The image URL. This attribute is mandatory for the <img> element. On browsers supporting srcset,
248 | src is treated like a candidate image with a pixel density descriptor 1x unless an image with this 
249 | pixel density descriptor is already defined in srcset, or unless srcset contains 'w' descriptors.
250 | 
251 | #### width
252 | The intrinsic width of the image in pixels.
253 | 
254 | #### list
255 | 
256 | ```<li></li>``` is used to create items in a list.
257 | 
258 | ##### unorderd list
259 | The ```<ul>``` represents an unordered list of items, typically rendered as a bulleted list.
260 | 
261 | **Example**
262 | 
263 | ```html
264 | <ul>
265 |   <li>first item</li>
266 |   <li>second item</li>
267 |   <li>third item</li>
268 | </ul>
269 | ```
270 | 
271 | <ul>
272 |         <li>first item</li>
273 |         <li>second item</li>
274 |         <li>third item</li>
275 |       </ul>
276 | 
277 | ##### ordered list
278 | The ```<ol>``` represents an ordered list of items, typically rendered as a numbered list.
279 | 
280 | **Example**
281 | 
282 |  ```html
283 | <ol>
284 |    <li>first item</li>
285 |    <li>second item</li>
286 |    <li>third item</li>
287 |  </ol>
288 | ```
289 | 
290 | <ol>
291 |   <li>first item</li>
292 |   <li>second item</li>
293 |   <li>third item</li>
294 | </ol>
295 | 
296 | #### Text Formatting
297 | 
298 | * BOLD TEXT ```<b>---</b>```
299 | * BIG TEXT ```<big>---</big>```
300 | * ITALIC TEXT ```<i>---</i>```
301 | * SMALL TEXT ```<small>---</small>```
302 | * STRONG TEXT ```<strong>---</strong>```
303 | * SUBSCRIPTED TEXT ```<sub>---</sub>```
304 | * SUPERSCRIPTED TEXT ```<sup>---</sup>```
305 | * INSERTED TEXT ```<ins>---</ins>```
306 | * DELETED TEXT ```<del>---</del>```
307 | 
308 | #### Some Intermediate Stuffs
309 | 
310 | ##### Making HTML Table Element
311 | 
312 | **Example**
313 | 
314 |    ```html
315 | <table border='1'>
316 |          <thead>
317 |            <tr>
318 |              <td>
319 |                <em><b>Name</b></em>
320 |              </td>
321 |              <td>
322 |                <em><b>Place</b></em>
323 |              </td>
324 |              <td>
325 |                <em><b>Mobile Number</b></em>
326 |              </td>
327 |            </tr>
328 |          </thead>
329 |          <tbody>
330 |            <tr>
331 |              <td>
332 |                Abhijit
333 |              </td>
334 |              <td>
335 |                Bilaspur
336 |              </td>
337 |              <td>
338 |                1234567891484
339 |              </td>
340 |            </tr>
341 |          </tbody>
342 |          <tbody>
343 |            <tr>
344 |              <td>
345 |                Ruhi
346 |              </td>
347 |              <td>
348 |                Bilaspur
349 |              </td>
350 |              <td>
351 |                9856224744714
352 |              </td>
353 |            </tr>
354 |          </tbody>
355 |          <tbody>
356 |            <tr>
357 |              <td>
358 |                Abhishek
359 |              </td>
360 |              <td>
361 |                Bilaspur
362 |              </td>
363 |              <td>
364 |                1484548145141
365 |              </td>
366 |            </tr>
367 |          </tbody>
368 |          <tbody>
369 |            <tr>
370 |              <td>
371 |                Ajay
372 |              </td>
373 |              <td>
374 |                Bilaspur
375 |              </td>
376 |              <td>
377 |                1489464965494
378 |              </td>
379 |            </tr>
380 |          </tbody>
381 |          <tbody>
382 |            <tr>
383 |              <td>
384 |                Deepesh
385 |              </td>
386 |              <td>
387 |                Bilaspur
388 |              </td>
389 |              <td>
390 |                5545415845454
391 |              </td>
392 |            </tr>
393 |          </tbody>
394 |        </table>
395 | ```
396 | 
397 | <table border='1'>
398 |       <thead>
399 |         <tr>
400 |           <td>
401 |             <em><b>Name</b></em>
402 |           </td>
403 |           <td>
404 |             <em><b>Place</b></em>
405 |           </td>
406 |           <td>
407 |             <em><b>Mobile Number</b></em>
408 |           </td>
409 |         </tr>
410 |       </thead>
411 |       <tbody>
412 |         <tr>
413 |           <td>
414 |             Abhijit
415 |           </td>
416 |           <td>
417 |             Bilaspur
418 |           </td>
419 |           <td>
420 |             1234567891484
421 |           </td>
422 |         </tr>
423 |       </tbody>
424 |       <tbody>
425 |         <tr>
426 |           <td>
427 |             Ruhi
428 |           </td>
429 |           <td>
430 |             Bilaspur
431 |           </td>
432 |           <td>
433 |             9856224744714
434 |           </td>
435 |         </tr>
436 |       </tbody>
437 |       <tbody>
438 |         <tr>
439 |           <td>
440 |             Abhishek
441 |           </td>
442 |           <td>
443 |             Bilaspur
444 |           </td>
445 |           <td>
446 |             1484548145141
447 |           </td>
448 |         </tr>
449 |       </tbody>
450 |       <tbody>
451 |         <tr>
452 |           <td>
453 |             Ajay
454 |           </td>
455 |           <td>
456 |             Bilaspur
457 |           </td>
458 |           <td>
459 |             1489464965494
460 |           </td>
461 |         </tr>
462 |       </tbody>
463 |       <tbody>
464 |         <tr>
465 |           <td>
466 |             Deepesh
467 |           </td>
468 |           <td>
469 |             Bilaspur
470 |           </td>
471 |           <td>
472 |             5545415845454
473 |           </td>
474 |         </tr>
475 |       </tbody>
476 | </table>
477 | 
478 | **Explanation Of Tags**
479 | 
480 | * ```<table></table>``` - The ```<table>``` represents tabular data — that is, information presented in a two-dimensional 
481 | table comprised of rows and columns of cells containing data.
482 | * ```<thead></thead>``` - The ```<thead>``` defines a set of rows defining the head of the columns of the table.
483 | * ```<tbody></tbody>``` - The HTML Table Body element ```<tbody>``` encapsulates a set of table row ```<tr>``` elements, 
484 | indicating that they comprise the body of the table ```<table>```.
485 | * ```<tr></tr>``` - The ```<tr>``` defines a row of cells in a table. The row's cells can then be established using a mix of ```<td>``` (data cell) and ```<th>``` (header cell) elements.
486 | 
487 | ##### HTML form element
488 | 
489 | 
490 | ```html
491 | <form action="" method="get" class="form-example">
492 | <div class="form-example">
493 |  <label for="name">Enter your name: </label>
494 |  <input type="text" name="name" id="name" required>
495 | </div>
496 | <div class="form-example">
497 |  <label for="email">Enter your email: </label>
498 |  <input type="email" name="email" id="email" required>
499 | </div>
500 | <div class="form-example">
501 |  <input type="submit" value="Follow Me">
502 | </div>
503 |    ```
504 | 
505 | **Explanation Of Tags**
506 | 
507 | * **action** - The URI of a program that processes the form information. This value can be overridden by a formaction attribute on a ```<button>``` or ```<input>``` element.
508 | * **name** - The name of the form
509 | * **target** - A name or keyword indicating where to display the response that is received after submitting the form. In HTML 4, this is the name/keyword for a frame. In HTML5, it is a name/keyword for a browsing context (for example, tab, window, or inline frame). The following keywords have special meanings:
510 |    * **_self**: Load the response into the same HTML 4 frame (or HTML5 browsing context) as the current one. This value is the default if the attribute is not specified.
511 |    * **_blank**: Load the response into a new unnamed HTML 4 window or HTML5 browsing context.
512 |    * **_parent**: Load the response into the HTML 4 frameset parent of the current frame, or HTML5 parent browsing context of the current one. If there is no parent, this option behaves the same way as ```_self```.
513 |    * **_top**: HTML 4: Load the response into the full original window, and cancel all other frames. HTML5: Load the response into the top-level browsing context (i.e., the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as ```_self```.
514 |    * **iframename**: The response is displayed in a named ```<iframe>```.
515 | * **method** - The HTTP method that the browser uses to submit the form. Possible values are:
516 |    * **post**: Corresponds to the HTTP POST method ; form data are included in the body of the form and sent to the server.
517 |    * **get**: Corresponds to the HTTP GET method; form data are appended to the action attribute URI with a ```?``` as separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
518 | This value can be overridden by a formmethod attribute on a ```<button>``` or ```<input>``` element.
519 | 
520 | For more details on HTML forms, please visit - [HTML Design Forms](https://www.geeksforgeeks.org/html-design-form/)
521 | 
522 | #### References
523 | 
524 | * [DevDocs](https://devdocs.io/)
525 | * [Mozilla Developer Network](https://developer.mozilla.org/en-US/)
526 | * [W3 Schools](https://www.w3schools.com/)
527 | 
528 | #### Contributors 
529 | 
530 | * [Shalu Kumari](https://www.linkedin.com/in/shalu-kumari-42ab8019b/)
531 | * [Prashashti Pankaj](https://www.linkedin.com/in/prashasti-pankaj-8875a8171/)
532 | * [Abhijit Tripathy](https://www.linkedin.com/in/abhijit-tripathy-415912187/) <a href="https://github.com/Abhijit2505"><img src = "https://img.shields.io/badge/Follow-4183C4?logo=github&style=social"></a>
533 | 
534 | 
535 | 
536 | 
537 | 
538 | 
539 | 
540 | 
541 | 
542 | 
543 | 
544 | 
545 | 
546 | 
547 | 
548 | 
549 | 
550 | 
551 | 


--------------------------------------------------------------------------------
/Fourth Session/Assests/js.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Fourth Session/Assests/js.jpg


--------------------------------------------------------------------------------
/Fourth Session/README.md:
--------------------------------------------------------------------------------
  1 | # About The Session - "JavaScript"
  2 | <img src="https://img.shields.io/badge/JavaScript-Code-orange"> <img src="https://img.shields.io/badge/JavaScript-Documentation-brightgreen"> <img src="https://img.shields.io/badge/License-MIT-red">
  3 | 
  4 | This session revolves around the basics of Javascript, javascript engine, Javascripts Intro - (Functions, Array, Why we use JavaScript, loop, conditional statements, etc).
  5 | We will be giving a brief overview of how structuring of webpage is done using JavaScript.
  6 | 
  7 | For Official Documentation, Visit - https://developer.mozilla.org/en-US/docs/Web/JavaScript
  8 | 
  9 | ## About the Documentation
 10 | 
 11 | This is the **Cheat Sheet** opened for everyone to use during the hackathon. There are resources and tools embeded inside which you can use as a participant.
 12 | 
 13 | ## Softwares And Installations
 14 | 
 15 | You can install any of these Editors,
 16 | * [Sublime Text](https://www.sublimetext.com/) <img src="https://img.shields.io/badge/Editor-Sublime-yellow">
 17 | * [Atom](https://atom.io/) <img src = https://img.shields.io/badge/Editor-Atom-green>
 18 | * [VS Code](https://code.visualstudio.com/docs/setup/setup-overview) [Preferable, will be using in the session] <img src = https://img.shields.io/badge/Editor-VS_Code-green>
 19 | * [Node-JS](https://atom.io/) [Preferable, will be using in the session for Using of JavaScript] <img src = https://img.shields.io/badge/Editor-Node_JS-green>
 20 | * One [GitHub](https://github.com/) account
 21 | * Any of the browsers - Like Chrome, Safari,Opera etc.
 22 | 
 23 | ## Content
 24 | 
 25 | You can find the slides here - <a href = "https://www.canva.com/design/DAEB-iYl-Go/Y8jkqq_qGVGyFmiwkb8WGw/view?utm_content=DAEB-iYl-Go&utm_campaign=designshare&utm_medium=link&utm_source=sharebutton">Slides (Click Here For Presentation Slides !</a>
 26 | 
 27 | ### Presentation Slides Contain these topics - 
 28 | 
 29 | * Basics of JavaScript
 30 | * Importance of JavaScript
 31 | * JavaScript Engine 
 32 | * Variables
 33 | * Array
 34 | * String
 35 | * Conditional Statements
 36 |   * if-else
 37 |   * switch
 38 | * Loops
 39 |   * for
 40 |   * while
 41 |   * do-while
 42 | * Break and Continue
 43 | * Function
 44 | 
 45 | ### What is JavaScript? - 
 46 | 
 47 | JavaScript is a text-based programming language used both on the client-side and server-side that allows you to make web pages interactive. Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user. Common examples of JavaScript that you might use every day include the search box on Amazon, a news recap video embedded on The New York Times, or refreshing your Twitter feed.  
 48 | Incorporating JavaScript improves the user experience of the web page by converting it from a static page into an interactive one. To recap, JavaScript adds behavior to web pages.
 49 | 
 50 | 
 51 | ### What is JavaScript used for?
 52 | 
 53 | JavaScript is mainly used for web-based applications and web browsers. But JavaScript is also used beyond the Web in software, servers and embedded hardware controls. Here are some basic things JavaScript is used for:
 54 | #### 1. Adding interactive behavior to web pages
 55 | JavaScript allows users to interact with web pages. There are almost no limits to the things you can do with JavaScript on a web page – these are just a few examples:
 56 | * Show or hide more information with the click of a button
 57 | * Change the color of a button when the mouse hovers over it
 58 | * Slide through a carousel of images on the homepage
 59 | * Zooming in or zooming out on an image
 60 | * Displaying a timer or count-down on a website
 61 | * Playing audio and video in a web page
 62 | * Displaying animations
 63 | * Using a drop-down hamburger menu.
 64 | 
 65 | #### 2. Creating web and mobile apps
 66 | Developers can use various JavaScript frameworks for developing and building web and mobile apps. JavaScript frameworks are collections of JavaScript code libraries that provide developers with pre-written code to use for routine programming features and tasks—literally a framework to build websites or web applications around. 
 67 | Popular JavaScript front-end frameworks include React, React Native, Angular, and Vue. Many companies use Node.js, a JavaScript runtime environment built on Google Chrome’s JavaScript V8 engine. A few famous examples include Paypal, LinkedIn, Netflix, and Uber!
 68 | 
 69 | #### 3. Building web servers and developing server applications
 70 | Beyond websites and apps, developers can also use JavaScript to build simple web servers and develop the back-end infrastructure using Node.js. 
 71 | 
 72 | #### 4. Game development
 73 | Of course, you can also use JavaScript to create browser games. These are a great way for beginning developers to practice their JavaScript skills. 
 74 | 
 75 | ### Why is JavaScript so important?
 76 | 
 77 | #### 1. Language of the now powerful frontend
 78 | 
 79 | For a long time, websites were mostly powered by PHP-based CMSs, such as WordPress. Server-side code was handling the major part of the logic. Things are changing though—you might have heard that “static” sites are making a comeback. However, they’re nothing like the ‘90s statically generated websites I mentioned earlier.
 80 | 
 81 | Modern browsers now have the capacity to make these interactive and fully-dynamic. A particularity they share with their ancestors, though, is the abstraction of backend development. Logic is handled client-side, directly in the browser, thanks to JavaScript.
 82 | 
 83 | Some of the most prominent web applications around today are built using JS. Think Facebook, Gmail, Twitter, and many more. If we use Facebook as an example, JavaScript enables status updates and most user interactivity. It wouldn’t have much appeal without it.These tech giants actually built their own frameworks of JavaScript, and these now allow thousands of devs to build their own web apps. You might have heard of Angular, backed by Google, and React, backed by FB. I also have to mention Vue here that, even if not supported by a tech powerhouse, completes the triad of important JS frameworks.
 84 | 
 85 | Other than reducing the amount of time and efforts required for developing JS-based sites and apps, these frameworks helped shape new web experiences. Take Single-Page Applications (SPA), for instance. A SPA is a website that interacts with users by dynamically rewriting a page in the browser rather than loading entire new pages from a server, making them behave more like desktop applications.
 86 | 
 87 | #### 2. Language of… many, many things
 88 | 
 89 | Yes, the primary use of JavaScript might still be for frontend web development. Truth is though, in 2019, it’s doing so much more than that.
 90 | 
 91 | ##### → Server-side code
 92 | 
 93 | There were unsuccessful attempts to make JavaScript run server-side from the very beginning. Many thought it would just never become a stable backend language, until the arrival of Node.js.Today, this JS runtime is a popular tool to power web servers. This means that JS developers can use Node.js to write both client-side and server-side code in JavaScript, without relying on external web servers.
 94 | 
 95 | ##### → Mobile apps
 96 | 
 97 | In the past, you would need other languages to develop great mobile applications, like Objective-C for iOS or Java for Android. It’s now easier than before to use JavaScript to connect to mobile APIs though. This means that you can use mobile devices features, such as the camera or localization to build JS-powered apps.Once again, this opened mobile app development to a more significant number of developers who no longer need to learn a new language.
 98 | 
 99 | Not only this, but the use of JavaScript in mobile apps even opened up new possibilities to make them even more performant. Take a look at Progressive Web Apps (PWA) for instance. Combining the best of the web and the best of apps, PWAs improve reliability, performance, and engagement. They enable impressive new functionalities such as offline navigation.
100 | 
101 | ##### → API integrations
102 | 
103 | Developers can use JavaScript to fetch data from other sources and display it on their own site. One concept that is more promoted than ever in web development is modularity—using different tools to execute specific tasks. Well, it’s now easy to build these kinds of stack thanks to APIs, and JavaScript.
104 | 
105 | ### JavaScript benefits -
106 | 
107 | * Client-side execution of the logic brings faster user experiences. With the code running directly in the browser, the need for server calls is abstracted, hence a cut in loading times. Even with the presence of a server, the fact that JS is asynchronous means that it’s able to communicate with the server in the background without interrupting the user interaction taking place in the frontend.
108 | 
109 | * Since the very beginning, JavaScript has brought user interface interactivity to the web. It now does the same for applications of all kind, helping to develop the most engaging UX. Today, frameworks like Vue.js are bringing transitions & animations to the next level.
110 | 
111 | * JavaScript is behind any good responsive web design. More and more, developers need to adapt their design across multiple browsers and devices. Combining HTML5, CSS3 & JavaScript, they can do so within a single codebase.
112 | 
113 | * For developers, JS is easy to learn and fast to get into active development. Its syntax is easy and flexible for newcomers. It also simplifies the development of complex applications by enabling developers to simplify the app’s composition. The many frameworks & packages out there also ease the life of developers to some extent.
114 | 
115 | * If you haven’t got this yet, JavaScript is insanely popular. If popularity doesn’t always equal quality in life in general, it at least mean one important thing: you’ll find the solution to any problem within the community. In web development, that’s not a negligible detail. If you’re someone that needs to hire developers, that’s also a big plus, as the pool of candidates is huge.
116 | 
117 | ### Future of JavaScript - 
118 | 
119 | According to Stack Overflow, a popular website used by developers to share their skills, JavaScript is used by 69.8%.
120 |  
121 | ![](https://github.com/akrishna0/Front-End-Hackathon-Resources/blob/master/Fourth%20Session/Assests/js.jpg)
122 | 
123 | 
124 | It is often remarked as a beginners’ language as it is quite easy to learn and execute. This makes it the best friend with developers! As a business person, you don’t have to go with what developers prefer.We want you to judge whether it’s really the optimum language for your custom software development project. One way to get a crystal clear image of the reality is an analysis of languages used for websites. Let’s check the insights!
125 | 
126 | One thing about JavaScript is extremely popular that it makes interactive web pages. In fact, for some people, front-end development means JavaScript development services It is well-proved through statistics as well.According to the trends evaluated by W3Techs, JavaScript is the top-notch client-side programming language. 
127 | 
128 | Since its inception in 1995, JavaScript has proved to be a dynamic language that has met the growing needs of custom web development services. This has been possible with the introduction of constant developments and innovations in its every version. No year in the past two decades has passed without JavaScript being the most used programming language. Anyone can predict the same in the future after reading the above statistics.
129 | 
130 | Although Javascript has always remained a front-end development language, Node. js has brought it to the back-end also. It's a complete stress reliever of Node. js software developers as they need to use only one language across all layers.
131 | 
132 | Undoubtedly, the various frameworks have their own established market which is constantly growing. It might be possible that some frameworks fail in the near future and some see remarkable growth.
133 | 
134 | One thing which is certain is the existence of one or the other Javascript framework in software development services. There is no chance that Javascript will lose its position as the most used language. The statistics and fact speak volumes about its bright future!
135 | 
136 | #### What is Node.js? 
137 | 
138 | • Node.js is an open source server environment
139 | • Node.js is free
140 | • Node.js runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.)
141 | • Node.js uses JavaScript on the server
142 | 
143 | ##### What Can Node.js Do?
144 | 
145 | • Node.js can generate dynamic page content
146 | • Node.js can create, open, read, write, delete, and close files on the server
147 | • Node.js can collect form data
148 | • Node.js can add, delete, modify data in your database
149 | 
150 | 
151 | 
152 | 
153 | For more details on JavaScript, please visit - [Mozila Developer](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
154 | 
155 | #### References
156 | 
157 | * [DevDocs](https://devdocs.io/javascript/)
158 | * [W3 Schools](https://www.w3schools.com/js/default.asp)
159 | 
160 | 
161 | #### Contributors 
162 | 
163 | * [Rishabh Upadhyay](https://www.linkedin.com/in/rishabh-upadhyay-2340971a6/)
164 | * [Shubham Varshney](https://www.linkedin.com/in/shubham-varshney-08628218b/)
165 | * [Domendra Sahu](https://www.linkedin.com/in/domendra-sahu-24a249183/)
166 | * [Himanshu Gupta](https://www.linkedin.com/in/himanshu-gupta-0624/)
167 | * [Akash Krishna](https://www.linkedin.com/in/grep-akash/) <a href="https://github.com/akrishna0"><img src = "https://img.shields.io/badge/Follow-4183C4?logo=github&style=social"></a>
168 | 


--------------------------------------------------------------------------------
/Hackathon Images/BILASPUR LOGO.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Hackathon Images/BILASPUR LOGO.png


--------------------------------------------------------------------------------
/Hackathon Images/GS Cup Logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Hackathon Images/GS Cup Logo.png


--------------------------------------------------------------------------------
/Hackathon Images/HACKATHON_banner2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Hackathon Images/HACKATHON_banner2.png


--------------------------------------------------------------------------------
/Hackathon Images/yay logo1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Hackathon Images/yay logo1.png


--------------------------------------------------------------------------------
/Hackathon Mechanism/README.md:
--------------------------------------------------------------------------------
 1 | # The Hackathon Mechanism
 2 | 
 3 | * **Start Timing** - 18th July 2020, 12.00 AM IST
 4 | * **End Timing** - 19th July 2020, 11.59 PM IST
 5 | * **Report Submission Deadline Times** - 
 6 | 
 7 |     * First Report Submission - 18th JULY 2020, 12.00 PM IST
 8 |     * Second Report Submission - 19th JULY 2020, 12.00 AM IST
 9 |     * Third Report Submission - 19th JULY 2020, 12.00 PM IST
10 |     * Final Report Submission - 19th JULY 2020, 11.59 PM IST
11 |     
12 | # Some Quick Questions
13 | 
14 | #### What should be my first step ?
15 | 
16 | *Ans* - Your first step is to choose one theme out of the three given themes. We will be rolling out a Google Form asking you for the same. Only participants those who fill up this 
17 | form will be provided with certificate.
18 |   
19 | #### What are the problem statement and how to choose one ?
20 | 
21 | *Ans* - The entire problem statement will be provided at once either by email or on Slack. You need to follow the checkpoints and provide us with the progress report in every 12 hours.
22 | 
23 | #### What is a report ?
24 | 
25 | *Ans* - A report can be a text document or a small video presentation of your work. As far as your progress can clearly determined, it doesn't matter if you give a text documentation or 
26 | a video documentation.
27 | 
28 | #### Can I get any help regarding technical and other issues related to hackathon ?
29 | 
30 | *Ans* - You need to make your website yourself, you should write your own code and upload the same on GITHUB platform. Other than that for the technical issues we have mentors who
31 | are going to help you out with your queries.
32 | 
33 | #### How to upload the project in GITHUB ?
34 | 
35 | *Ans* - You need to maintain two repositiories,
36 | 
37 |   * Forked repository of GIRLSCRIPT Bilaspur, where you need to upload the code and related documentations only. No need of any hosting in this repo.
38 |   * Own repository of the name in the format ```Frontend_<theme name>_<codename>```, this will be used for hosting your site.
39 |   
40 | #### How to get the problem statements ?
41 | 
42 | **Ans** - You will get them via your registered email in the form where you have choosen the theme. Don't worry so much about that, they are basic problem statements.
43 |   
44 | #### What are the evaluation criteria ?
45 | 
46 | **Ans** - Please visit [here](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/blob/master/README.md).
47 |   
48 | 
49 |   
50 |   
51 |   
52 |   
53 |   
54 |   
55 |   
56 |   
57 |   
58 |   
59 |   
60 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/blob/master/Hackathon%20Images/HACKATHON_banner2.png)
  2 | <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
  3 | [![All Contributors](https://img.shields.io/badge/all_contributors-6-orange.svg?style=flat-square)](#contributors-)
  4 | <!-- ALL-CONTRIBUTORS-BADGE:END -->
  5 | 
  6 | Heya Explorer 🕵️‍♀️ ! We strongly appreciate your **learning attitude** and your interest in making something awesome. 
  7 | 
  8 | Welcome to **GirlScript Bilaspur** 🙏🙏
  9 | 
 10 | # Content
 11 | * [About The Event](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources#about-the-event)
 12 | * [Code Of Conduct](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources#code-of-conduct)
 13 | * [Rules For Hackathon](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources#rules-for-hackathon)
 14 | * [Reach Out To Us](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources#reach-out-to-us)
 15 | * [Our Sponsors](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources#our-sponsors)
 16 | 
 17 | # About The Event
 18 | We, at Girlscript Bilaspur, have planned a **Hackathon(Frontend Technologies, for beginners)** which is our first event. 
 19 | We are conducting this Hackathon for those who have the potential to usher their imagination to reality. 
 20 | This Hackathon is going to be out of the ordinary, even beginners can join to engage themselves in something productive. 
 21 | We will be using GITHUB repository as a hackathon conducting platform, where a participant has to maintain a private directory and make a 
 22 | Pull Request(PR) to the master repository. The PR will have a basic template which will be provided on the fifth day of the Hackathon in the second session.
 23 | 
 24 | 
 25 | Have a visit to our website here to know about the schdule of the sessions. Schedule is given in IST(Indian Standard Time), All the international participants are hereby notified.
 26 | 
 27 | 🔴 Here you go - <a href = "https://girlscript-chapter-bilaspur.github.io/Forntend-Hackathon/">Girlscript Bilaspur Hackathon Website</a>
 28 | 
 29 | ## Code Of Conduct
 30 | 
 31 | * Be **inclusive**. We welcome and support people of all backgrounds and identities. This includes, but is not limited to members of 
 32 | any sexual orientation, gender identity and expression, race, ethnicity, culture, national origin, social and economic class, 
 33 | educational level, color, immigration status, sex, age, size, family status, political belief, religion, and mental and physical ability.
 34 | 
 35 | * Be **considerate**. We all depend on each other to produce the best work we can as a company. 
 36 | Your decisions will affect us and your colleagues, and you should take those consequences into account when making decisions.
 37 | 
 38 | * The **integrity and authenticity** of participant work is something that we take seriously and check using a variety of technologies.
 39 | Copying the work of others, allowing others to knowingly copy a participant’s work, and/or misusing content from the Internet could result in removal from the hackathon. 
 40 | 
 41 | * **Girlscript Bilaspur** reserves all the rights to remove any participant from the hackathon at any point without any prior notice if found guilty. Guilty includes induldging in 
 42 | negative activity or breaking the hackathon rules.
 43 | 
 44 | * While asking queries and questions to the **mentors** and **speakers**, please **BNBR**(Be Nice and Be Respectful). Most of them are part-time as well as full-time working professionals.
 45 | 
 46 | ## Rules For Hackathon
 47 | 
 48 | #### Mechanism
 49 | 
 50 | * **Single Participation** is allowed. You can't participate in team.
 51 | 
 52 | * Our hackathon has the following themes,
 53 | 
 54 |     * Made In India Product Landing Page
 55 |     
 56 |     * Memes Page
 57 |     
 58 |     * Bakery or Restaurant Page
 59 |     
 60 | * Each participant need to choose only **one** theme when asked.
 61 | * After you select your theme we will be providing **4 problem statements** for your theme, each having a **12 hour duration** as deadline. In these 12 hours, 
 62 | you will be given **evaluation twice**, each checkpoints of **six hours** each.
 63 | * After making the first pull request as per the problem statement, you will be eligible for **Hackathon Participation Certificates**.
 64 | * After the end of 48 hours, we will be adding up all the marks and choosing the winners.
 65 | 
 66 | #### Evaluation Scheme
 67 | 
 68 | (Total - 100 points(20+20+20+20 - Four sessions each 12 hours))  
 69 | 
 70 | * **Error, Validation** (20 points - 5+5+5+5)
 71 | * **Responsive Web Design** (20 points - 5+5+5+5)
 72 | * **Creativity** (20 points - 5+5+5+5)
 73 | * **Design & Content** (20 points - 5+5+5+5)
 74 | * **Software Techniques** (Tie Breaker) (20 points - 5+5+5+5)
 75 | 
 76 | ## Reach Out To Us
 77 | 
 78 |  * <a href="mailto:girlscriptbilaspur@gmail.com">Official Email</a>
 79 |  * <a href="https://www.linkedin.com/in/girlscript-bilaspur-5957431ab/">Official LinkedIn Handle</a>
 80 |  
 81 | ### Reach Out To The Officials
 82 | 
 83 | * <a href="https://github.com/Abhijit2505">Abhijit Tripathy</a>
 84 | * <a href="https://github.com/abhishekapk">Abhishek Gupta</a>
 85 | * <a href="https://github.com/Unknownone-af">Ajay Kumar Shukla</a>
 86 | * <a href="https://github.com/deepeshgarg09">Deepesh Garg</a>
 87 | * <a href="https://github.com/ruhiawasthi">Ruhi Awasthi</a>
 88 | 
 89 | ## Our Sponsors
 90 | 
 91 | <img src="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/blob/master/Hackathon%20Images/GS%20Cup%20Logo.png" height="100px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/blob/master/Hackathon%20Images/yay%20logo1.png" height="100px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/blob/master/Hackathon%20Images/BILASPUR%20LOGO.png" height="100px">
 92 | 
 93 | 
 94 | ## Contributors ✨
 95 | 
 96 | Thanks goes to these wonderful people:
 97 | 
 98 | <table>
 99 |   <tr>
100 |     <td align="center"><a href="https://www.linkedin.com/in/abhishekapk/"><img src="https://avatars0.githubusercontent.com/u/64025312?v=4" width="100px;" alt=""/><br /><sub><b>Abhishek Kumar Gupta</b></sub></a><br /><a href="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/commits?author=abhishekapk" title="Documentation">📖💻</a></td>
101 |     <td align="center"><a href="https://abhijit2505.github.io/portfolio/"><img src="https://avatars3.githubusercontent.com/u/52751963?v=4" width="100px;" alt=""/><br /><sub><b>Abhijit Tripathy</b></sub></a><br /><a href="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/commits?author=Abhijit2505" title="Documentation">📖🤓👑</a></td>
102 |     <td align="center"><a href="https://github.com/akrishna0"><img src="https://avatars0.githubusercontent.com/u/46137464?v=4" width="100px;" alt=""/><br /><sub><b>Akash Krishna</b></sub></a><br /><a href="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/commits?author=akrishna0" title="Documentation">📖🥇🖥</a></td>
103 |     <td align="center"><a href="https://www.linkedin.com/in/ajayshukla19/"><img src="https://avatars0.githubusercontent.com/u/61351885?v=4" width="100px;" alt=""/><br /><sub><b>Ajay Kumar Shukla</b></sub></a><br /><a href="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/commits?author=Unknownone-af" title="Documentation">📖💻</a></td>
104 |      <td align="center"><a href="https://www.linkedin.com/in/ruhi-awasthi-5101b81a5"><img src="https://avatars3.githubusercontent.com/u/59197808?v=4" width="100px;" alt=""/><br /><sub><b>Ruhi Awasthi</b></sub></a><br /><a href="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/commits?author=ruhiawasthi" title="Documentation">📖💻👑</a></td>
105 |      <td align="center"><a href="https://www.linkedin.com/in/deepeshgarg09"><img src="https://avatars1.githubusercontent.com/u/63818498?v=4" width="100px;" alt=""/><br /><sub><b>Deepesh Garg</b></sub></a><br /><a href="https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/commits?author=deepeshgarg09" title="Documentation">📖💻</a></td>
106 |   </tr>
107 | </table>
108 | 


--------------------------------------------------------------------------------
/Second Session/CSS Documentation.pdf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Second Session/CSS Documentation.pdf


--------------------------------------------------------------------------------
/Second Session/README.md:
--------------------------------------------------------------------------------
1 | # Second Session
2 | 
3 | * Slides For the Session can be found here  - [Slides](https://www.canva.com/design/DAEBxJ_pgdI/KYpdGdQ3cXPXYG2MKDgUrQ/view?utm_content=DAEBxJ_pgdI&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink)
4 | * Documentation can be found at - [Documentation](https://github.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/blob/master/Second%20Session/CSS%20Documentation.pdf)
5 | 


--------------------------------------------------------------------------------
/Third Session/Assests/buttons.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Third Session/Assests/buttons.JPG


--------------------------------------------------------------------------------
/Third Session/Assests/column.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Third Session/Assests/column.JPG


--------------------------------------------------------------------------------
/Third Session/Assests/column1.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Third Session/Assests/column1.JPG


--------------------------------------------------------------------------------
/Third Session/Assests/grid.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Third Session/Assests/grid.JPG


--------------------------------------------------------------------------------
/Third Session/Assests/jumpo.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Third Session/Assests/jumpo.JPG


--------------------------------------------------------------------------------
/Third Session/Assests/navbar.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Girlscript-Chapter-Bilaspur/Front-End-Hackathon-Resources/4da53b308218f37e774ce427ee22376fb8485588/Third Session/Assests/navbar.JPG


--------------------------------------------------------------------------------
/Third Session/README.md:
--------------------------------------------------------------------------------
  1 | # About The Session - "Bootstrap Framework"
  2 | <img src="https://img.shields.io/badge/Bootstrap-Code-orange"> <img src="https://img.shields.io/badge/Bootstrap-Documentation-brightgreen"> <img src="https://img.shields.io/badge/License-MIT-red">
  3 | 
  4 | This session revolves around the basics of framework, tools and layout, bootstrap - (Intro, History, Why we use Bootstrap, Advantages & Disadvantages, Components, Grid System, Navbar, Portfolio page).
  5 | We will be giving a brief overview of how structuring of webpage is done using Bootstrap.
  6 | 
  7 | For Official Documentation, Visit - https://getbootstrap.com/docs/4.5/getting-started/introduction/
  8 | 
  9 | ## About the Documentation
 10 | 
 11 | This is the **Cheat Sheet** opened for everyone to use during the hackathon. There are resources and tools embeded inside which you can use as a participant.
 12 | 
 13 | ## Softwares And Installations
 14 | 
 15 | You can install any of these Editors,
 16 | * [Sublime Text](https://www.sublimetext.com/) <img src="https://img.shields.io/badge/Editor-Sublime-yellow">
 17 | * [Atom](https://atom.io/) [Preferable, will be using in the session] <img src = https://img.shields.io/badge/Editor-Atom-green>
 18 | * NotePad - May Be present in your system already
 19 | * One [GitHub](https://github.com/) account
 20 | * Any of the browsers - Like Chrome, Safari,Opera etc.
 21 | 
 22 | ## Content
 23 | 
 24 | You can find the slides here - <a href = "https://www.canva.com/design/DAEB5rW7RFg/IKKunaSpzpFh_4liAbIh8w/view?utm_content=DAEB5rW7RFg&utm_campaign=designshare&utm_medium=link&utm_source=publishsharelink">Slides (Click Here For Presentation Slides !</a>
 25 | 
 26 | ### Presentation Slides Contain these topics - 
 27 | 
 28 | * Front - End Framework
 29 | * Tools and layout
 30 | * Bootstrap Intro & History
 31 | * Boostrap Package
 32 | * Responsive Design
 33 | * Advantages and Disadvatages
 34 | * Bootstrap Loading
 35 | * Common Bootstap Components
 36 | * Grid System
 37 | 
 38 | 
 39 | ### Bootstrap - 
 40 | 
 41 | * Bootstrap is a free front-end framework for faster and easier web development.
 42 | * Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
 43 | * Bootstrap also gives you the ability to easily create responsive designs.
 44 | 
 45 | ### How to include boostrap file in HTML ?
 46 | 
 47 | #### 1. Using Bootstrap CDN
 48 | 
 49 | If you don't want to download and host Bootstrap 4 yourself, you can include it from a CDN (Content Delivery Network).
 50 | You can find it here, visit - https://getbootstrap.com/docs/4.5/getting-started/introduction/
 51 | 
 52 | **OR**
 53 | 
 54 | ```html
 55 | <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 56 | ```
 57 | 
 58 | You have Copy-paste the stylesheet ```<link>``` into your ```<head>``` before all other stylesheets to load our CSS.
 59 | 
 60 | 
 61 | Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins.
 62 | 
 63 | ```html
 64 | <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 65 | <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
 66 | <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
 67 | ```
 68 | 
 69 | Copy and paste the following ```<script>```s near the end of your pages, right before the closing ```</body>``` tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.
 70 | 
 71 | 
 72 | #### 2. Downloading the files locally
 73 | 
 74 | Instead of using cdn, you can download the files locally to your project folder from https://github.com/twbs/bootstrap/releases/download/v4.5.0/bootstrap-4.5.0-dist.zip
 75 | 
 76 | Once you download the file, you can include bootstrap.min.css file in the ```<head>``` and bootstrap.min.js in ```<body>```. Even if you are using the downloaded bootstrap file, you have to include jquery.min.js and popper.min.js before loading bootstrap.min.js
 77 | 
 78 | ### Bootstrap Starter Template
 79 | 
 80 | ```html
 81 | <!doctype html>
 82 | <html lang="en">
 83 |   <head>
 84 |     <!-- Required meta tags -->
 85 |     <meta charset="utf-8">
 86 |     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 87 | 
 88 |     <!-- Bootstrap CSS -->
 89 |     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
 90 | 
 91 |     <title>Hello, world!</title>
 92 |   </head>
 93 |   <body>
 94 |     <h1>Hello, world!</h1>
 95 | 
 96 |     <!-- Optional JavaScript -->
 97 |     <!-- jQuery first, then Popper.js, then Bootstrap JS -->
 98 |     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
 99 |     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
100 |     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
101 |   </body>
102 | </html>
103 | ```
104 | 
105 | ### How to add buttons in HTML file with the help of Bootstrap?
106 | 
107 | For Button Documentation, Visit - https://getbootstrap.com/docs/4.5/components/buttons/
108 | 
109 | Example - 
110 | ```html
111 | <button type="button" class="btn btn-primary">Primary</button>
112 | <button type="button" class="btn btn-secondary">Secondary</button>
113 | <button type="button" class="btn btn-success">Success</button>
114 | <button type="button" class="btn btn-danger">Danger</button>
115 | <button type="button" class="btn btn-warning">Warning</button>
116 | <button type="button" class="btn btn-info">Info</button>
117 | <button type="button" class="btn btn-light">Light</button>
118 | <button type="button" class="btn btn-dark">Dark</button>
119 | 
120 | <button type="button" class="btn btn-link">Link</button>
121 | ```
122 | ![](https://github.com/abhishekapk/Front-End-Hackathon-Resources/blob/master/Third%20Session/Assests/buttons.JPG)
123 | 
124 | 
125 | ### How to add Jumpotrons in HTML file with the help of Bootstrap?
126 | 
127 | A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
128 | 
129 | For Button Documentation, Visit - https://getbootstrap.com/docs/4.5/components/jumbotron/
130 | 
131 | ![](https://github.com/abhishekapk/Front-End-Hackathon-Resources/blob/master/Third%20Session/Assests/jumpo.JPG)
132 | ```html
133 | <div class="jumbotron">
134 |   <h1 class="display-4">Hello, world!</h1>
135 |   <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
136 |   <hr class="my-4">
137 |   <p>It uses utility classes for typography and spacing to space content out within the larger container.</p>
138 |   <a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
139 | </div>
140 | ```
141 | 
142 | ### Boostrap Navbar !
143 | 
144 | Documentation and examples for Bootstrap’s powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin.
145 | 
146 | #### How it works?
147 | Here’s what you need to know before getting started with the navbar:
148 | * Navbars require a wrapping ```.navbar``` with ```.navbar-expand{-sm|-md|-lg|-xl}``` for responsive collapsing and color scheme classes.
149 | * Navbars and their contents are fluid by default. Use optional containers to limit their horizontal width.
150 | * Use our spacing and flex utility classes for controlling spacing and alignment within navbars.
151 | * Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin.
152 | * Navbars are hidden by default when printing. Force them to be printed by adding .d-print to the .navbar. See the display utility class.
153 | * Ensure accessibility by using a ```<nav>``` element or, if using a more generic element such as a ```<div>```, add a ```role="navigation"``` to every navbar to explicitly identify it as a landmark region for users of assistive technologies.
154 | 
155 | ![](https://github.com/abhishekapk/Front-End-Hackathon-Resources/blob/master/Third%20Session/Assests/navbar.JPG)
156 | 
157 | ```html
158 | <nav class="navbar navbar-expand-lg navbar-light bg-light">
159 |   <a class="navbar-brand" href="#">Navbar</a>
160 |   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
161 |     <span class="navbar-toggler-icon"></span>
162 |   </button>
163 | 
164 |   <div class="collapse navbar-collapse" id="navbarSupportedContent">
165 |     <ul class="navbar-nav mr-auto">
166 |       <li class="nav-item active">
167 |         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
168 |       </li>
169 |       <li class="nav-item">
170 |         <a class="nav-link" href="#">Link</a>
171 |       </li>
172 |       <li class="nav-item dropdown">
173 |         <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
174 |           Dropdown
175 |         </a>
176 |         <div class="dropdown-menu" aria-labelledby="navbarDropdown">
177 |           <a class="dropdown-item" href="#">Action</a>
178 |           <a class="dropdown-item" href="#">Another action</a>
179 |           <div class="dropdown-divider"></div>
180 |           <a class="dropdown-item" href="#">Something else here</a>
181 |         </div>
182 |       </li>
183 |       <li class="nav-item">
184 |         <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
185 |       </li>
186 |     </ul>
187 |     <form class="form-inline my-2 my-lg-0">
188 |       <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
189 |       <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
190 |     </form>
191 |   </div>
192 | </nav>
193 | ```
194 | 
195 | For documentation of Navbar, Visit - https://getbootstrap.com/docs/4.5/components/navbar/
196 | 
197 | ### Bootstrap Grid System - 
198 | * The Bootstrap grid is a table containing rows and columns sustaining the capability to utilize a 12-column grid that is responsive.
199 | * Grid column elements are placed inside row elements, which create horizontal groups of columns. You can have as many rows as you want on the page, but columns must be immediate children of rows. In a full row, the column widths will be any combination that adds up to 12, but it is not mandatory to use all 12 available columns.
200 | * The columns will re-arrange automatically depending on the screen size.
201 | * It uses a series of containers, rows, and columns to layout and align content.
202 | 
203 | 
204 | *Boostrap Grid System Documentation, Visit -* https://getbootstrap.com/docs/4.5/layout/grid/
205 | 
206 | See how aspects of the Bootstrap grid system work across multiple devices with a handy table.<br>
207 | ![](https://github.com/abhishekapk/Front-End-Hackathon-Resources/blob/master/Third%20Session/Assests/grid.JPG)
208 | 
209 | Example - 
210 | 
211 | ```html
212 | <div class="container">
213 |   <div class="row">
214 |     <div class="col">
215 |       1 of 2
216 |     </div>
217 |     <div class="col">
218 |       2 of 2
219 |     </div>
220 |   </div>
221 |   <div class="row">
222 |     <div class="col">
223 |       1 of 3
224 |     </div>
225 |     <div class="col">
226 |       2 of 3
227 |     </div>
228 |     <div class="col">
229 |       3 of 3
230 |     </div>
231 |   </div>
232 | </div>
233 | ```
234 | ![](https://github.com/abhishekapk/Front-End-Hackathon-Resources/blob/master/Third%20Session/Assests/column.JPG)
235 | 
236 | ```html
237 | <div class="container">
238 |   <div class="row">
239 |     <div class="col">col</div>
240 |     <div class="col">col</div>
241 |     <div class="col">col</div>
242 |     <div class="col">col</div>
243 |   </div>
244 |   <div class="row">
245 |     <div class="col-8">col-8</div>
246 |     <div class="col-4">col-4</div>
247 |   </div>
248 | </div>
249 | ```
250 | ![](https://github.com/abhishekapk/Front-End-Hackathon-Resources/blob/master/Third%20Session/Assests/column1.JPG)
251 | 
252 | 
253 | For more details on Bootsrap, please visit - [Bootstrap Documentation](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
254 | 
255 | #### References
256 | 
257 | * [Bootstrap](https://getbootstrap.com/docs/4.5/getting-started/introduction/)
258 | * [W3 Schools](https://www.w3schools.com/bootstrap4/bootstrap_get_started.asp)
259 | 
260 | #### Contributors 
261 | 
262 | * [Manyata](https://www.linkedin.com/in/manyata-hy-1jin/)
263 | * [Srishti Gauraha](https://www.linkedin.com/in/srishti-gauraha-a2a8851a1/)
264 | * [Smriti Halder](https://www.linkedin.com/in/srishti-gauraha-a2a8851a1/)
265 | * [Abhishek Kumar Gupta](https://www.linkedin.com/in/abhishekapk) <a href="https://github.com/abhishekapk"><img src = "https://img.shields.io/badge/Follow-4183C4?logo=github&style=social"></a>


--------------------------------------------------------------------------------