├── Day-1 └── README.md ├── Day-2 └── README.md ├── Day-3 └── README.md ├── Day-4 └── README.md ├── Day-5 └── README.md ├── Day-6 └── README.md ├── Day-7 └── README.md ├── README.md ├── img └── hero.png └── projectformat.md /Day-1/README.md: -------------------------------------------------------------------------------- 1 | # Day 01 2 | Welcome to the first day of 7 days of Web-Dev. Today we'll be starting with HTML which is the skeleton of any Web page. 3 | 4 | Before we plunge into the vast and unending world of Web-Dev, let's first see how a web page loads when we search for it and have a roadmap of becoming a successful Web developer. 5 | 6 | > - [Page Load Timing Process](https://docs.newrelic.com/docs/browser/new-relic-browser/page-load-timing-resources/page-load-timing-process/) 7 | > - [Web Development Roadmap](https://www.w3schools.com/whatis/) 8 | 9 | We will be starting up with the basics of HTML. We will go through the formatting in HTML, working of a link , various tags, and many more. We will be working with tables and lists in HTML. Tables are an essential part of HTML as you can make many different patterns out of it 10 | 11 | > 1. [Basics of HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started) and [Fundamentals](https://www.w3schools.com/html/html_basic.asp) 12 | > 2. [Text formatting](https://www.w3schools.com/html/html_formatting.asp) 13 | > 3. [Elements](https://www.w3schools.com/html/html_elements.asp) 14 | > 4. [Links](https://www.w3schools.com/html/html_links.asp) 15 | > 5. [All tags in alphabetical order](https://www.w3schools.com/tags/default.asp) 16 | > 6. [HTML Block elements](https://www.tutorialspoint.com/html/html_blocks.htm) 17 | > 7. [Semantic elements](https://www.w3schools.com/html/html5_semantic_elements.asp) 18 | > 8. [Header](https://www.w3schools.com/tags/tag_header.asp) 19 | > 9. [Footer](https://www.w3schools.com/TAGs/tag_footer.asp) 20 | > 10. [Lists in HTML](https://www.w3schools.com/html/html_lists.asp) 21 | > 11. [Tables in HTML](https://www.w3schools.com/html/html_tables.asp) 22 | > 12. [Table tag in HTML](https://www.w3schools.com/tags/tag_table.asp) 23 | 24 | This concludes Day 01 of our 7 Days of Web Dev. We have covered quite a few topics of HTML today. Rest of the topics we'll cover tomorrow. -------------------------------------------------------------------------------- /Day-2/README.md: -------------------------------------------------------------------------------- 1 | # Day 02 2 | So yesterday we covered some parts of HTML and today we'll be going through the rest of them. 3 | 4 | We'll focus on debugging our HTML code effectively and work on creating forms. We will be working with Media in HTML. Media is helpful when you want to make your website or webpage look attractive by providing some interactivity to the user on the go. 5 | 6 | > 1. [Debugging in HTML](https://drive.google.com/drive/u/2/folders/1TeliSdwFfNdTzdXhac6qPvXOijT7ChRm) 7 | > 2. [HTML forms](https://www.w3schools.com/html/html_forms.asp) 8 | > 3. [Form attributes](https://www.w3schools.com/html/html_forms_attributes.asp) 9 | > 4. [Form elements](https://www.w3schools.com/html/html_form_elements.asp) 10 | > 5. [Input types](https://www.w3schools.com/html/html_form_input_types.asp) 11 | > 6. [Input attributes](https://www.w3schools.com/html/html_form_attributes.asp) 12 | > 7. [Input form attributes](https://www.w3schools.com/html/html_form_attributes_form.asp) 13 | > 8. [Media in HTML](https://www.w3schools.com/html/html_media.asp) 14 | > 9. [Videos in HTML](https://www.w3schools.com/html/html5_video.asp) 15 | > 10. [Audio in HTML](https://www.w3schools.com/html/html5_audio.asp) 16 | 17 | ### Optional for HTML 18 | This sections is an optional section. This section contains some extra concepts for those who want to dig deeper into HTML. 19 | 20 | We will be working with APIs in HTML. API is one of those things which you will be using many times in your project to make your code lighter and faster. 21 | 22 | > 1. [Plug-Ins in HTML](https://www.w3schools.com/html/html_object.asp) 23 | > 2. [Playing with youtube videos in HTML](https://www.w3schools.com/html/html_youtube.asp) 24 | > 3. HTML APIs 25 | > > - [Geolocation](https://www.w3schools.com/html/html5_geolocation.asp) 26 | > > - [Drag and Drop](https://www.w3schools.com/html/html5_draganddrop.asp) 27 | > > - [Web Storage](https://www.w3schools.com/html/html5_webstorage.asp) 28 | > > - [Web Workers](https://www.w3schools.com/html/html5_webworkers.asp) 29 | > > - [SSE API](https://www.w3schools.com/html/html5_serversentevents.asp) 30 | > > - [More Such APIs](https://developer.mozilla.org/en-US/docs/Web/API) 31 | 32 | This concludes the Day 02 of our 7 Days of Web Dev. So with this we have completed HTML. And from tomorrow we are going to start with CSS. 33 | -------------------------------------------------------------------------------- /Day-3/README.md: -------------------------------------------------------------------------------- 1 | # Day 03 2 | So yesterday we completed HTML which is the skeleton of any Web Page. But a Web Page rendered only with HTML code looks like the websites from the 1990s. Only having contents, no styling, nothing. It doesn't at all look good in comaprison to todays websites, which are very attractive and well styled. So today we'll learn about CSS which makes our website look stylish and attractive 3 | 4 | So before plunging into CSS lets first of all have a brief introduction regarding CSS. 5 | 6 | > - [Introduction to CSS](https://www.w3schools.com/css/css_intro.asp) 7 | 8 | We will be starting with the basics of CSS and we will be seeing how colors, backgrounds, borders & margins work. You will learn about padding, height, widths of an element. 9 | 10 | > 1. Values and Units 11 | > > - [Beginner](https://www.w3schools.com/cssref/css_units.asp) 12 | > > - [Intermediate](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units) 13 | > > - [Video](https://drive.google.com/drive/u/2/folders/1EWiJVptSFBZFPbNXJXhll5KoNJHIyFaM) 14 | > 2. How to add colors 15 | > > - [CSS Color Basics](https://www.w3schools.com/css/css_colors.asp) 16 | > > - [Keep a list of colors](https://colours.neilorangepeel.com/) 17 | > 3. Backgrounds 18 | > > - [Background Colors](https://www.w3schools.com/css/css_colors_hsl.asp) 19 | > > - [Background Images](https://www.w3schools.com/css/css_background_image.asp) 20 | > > - [Background repeat](https://www.w3schools.com/css/css_background_repeat.asp) 21 | > > - [Background attachment](https://www.w3schools.com/css/css_background_attachment.asp) 22 | > > - [shortening background](https://www.w3schools.com/css/css_background_shorthand.asp) 23 | > 4. Border and its Attributes 24 | > > - [Basics](https://www.w3schools.com/css/css_border.asp) 25 | > > - [Border width](https://www.w3schools.com/css/css_border_width.asp) 26 | > > - [Colorful borders](https://www.w3schools.com/css/css_border_color.asp) 27 | > > - [Sides styling](https://www.w3schools.com/css/css_border_sides.asp) 28 | > > - [Rounding borders](https://www.w3schools.com/css/css_border_sides.asp) 29 | > 5. Margins 30 | > > - [Basics](https://www.w3schools.com/css/css_margin.asp) 31 | > > - [Collapsing margins](https://www.w3schools.com/css/css_margin_collapse.asp) 32 | > 6. [Padding](https://www.w3schools.com/css/css_padding.asp) 33 | > 7. [Height and Width in CSS](https://www.w3schools.com/css/css_dimension.asp) 34 | > 8. [Selectors](https://www.w3schools.com/css/css_selectors.asp) 35 | > 9. [Types of selectors](https://www.javatpoint.com/css-selector) 36 | > 10. [Types of selectors - Intermediate](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors) 37 | > 11. Box Model 38 | > > - [Video - 1](https://drive.google.com/drive/u/2/folders/1X4xK8Q5jTIIsdfsoDS39p3za6KRP1StJ) 39 | > > - [Video - 2](https://drive.google.com/drive/u/2/folders/1X4xK8Q5jTIIsdfsoDS39p3za6KRP1StJ) 40 | > > - [Video - 3](https://drive.google.com/drive/u/2/folders/1X4xK8Q5jTIIsdfsoDS39p3za6KRP1StJ) 41 | > > - [Video - 4](https://drive.google.com/drive/u/2/folders/1X4xK8Q5jTIIsdfsoDS39p3za6KRP1StJ) 42 | > > - [Video - 5](https://drive.google.com/drive/u/2/folders/1X4xK8Q5jTIIsdfsoDS39p3za6KRP1StJ) 43 | > > - [Video - 6](https://drive.google.com/drive/u/2/folders/1X4xK8Q5jTIIsdfsoDS39p3za6KRP1StJ) 44 | > 12. Text 45 | > > - [Coloring](https://www.w3schools.com/css/css_text.asp) 46 | > > - [Alignment](https://www.w3schools.com/css/css_text_align.asp) 47 | > > - [Decoration](https://www.w3schools.com/css/css_text_decoration.asp) 48 | > > - [Spacing](https://www.w3schools.com/css/css_text_spacing.asp) 49 | > > - [Shadows](https://www.w3schools.com/css/css_text_shadow.asp) 50 | 51 | This concludes Day 03 of our 7 Days of Web Dev. We have covered quite a few topics of CSS today. Rest of the topics we'll cover tomorrow. 52 | -------------------------------------------------------------------------------- /Day-4/README.md: -------------------------------------------------------------------------------- 1 | # Day 04 2 | 3 | So yesterday we completed covered some parts of CSS and today we'll be going through the rest of them. 4 | 5 | Today we will be seeing how we can work with things like texts, icons, typography, forms, grids, and many more. Also we will be starting with some important concepts in CSS. We will be seeing how we can round the corners of elements, add borders, do transformations, and many more. 6 | 7 | > 1. [Styling links](https://www.w3schools.com/css/css_link.asp) 8 | > 2. [Playing with lists](https://www.w3schools.com/css/css_list.asp) 9 | > 3. [Displaying elements](https://www.w3schools.com/css/css_display_visibility.asp) 10 | > 4. [Fitting elements](https://www.w3schools.com/css/css_max-width.asp) 11 | > 5. [Position](https://www.w3schools.com/css/css_positioning.asp) 12 | > 6. [Overflow](https://www.w3schools.com/css/css_overflow.asp) 13 | > 7. [Float](https://www.w3schools.com/css/css_float.asp) 14 | > 8. Typography 15 | > > - [Video - 1](https://drive.google.com/drive/u/2/folders/1q61kVJaNTJAura0iuUfogkkY9-NtYT-T) 16 | > > - [Video - 2](https://drive.google.com/drive/u/2/folders/1q61kVJaNTJAura0iuUfogkkY9-NtYT-T) 17 | > > - [Video - 3](https://drive.google.com/drive/u/2/folders/1q61kVJaNTJAura0iuUfogkkY9-NtYT-T) 18 | > > - [Video - 4](https://drive.google.com/drive/u/2/folders/1q61kVJaNTJAura0iuUfogkkY9-NtYT-T) 19 | > 9. [Styling forms](https://www.w3schools.com/css/css_form.asp) 20 | > 10. [Styling Drop-Downs](https://www.w3schools.com/css/css_dropdowns.asp) 21 | > 11. [Styling Navbars](https://www.w3schools.com/css/css_navbar.asp) 22 | > > - [Styling Image Galleries](https://www.w3schools.com/css/css_image_gallery.asp) 23 | > 12. Flexbox 24 | > > - [Video - 1](https://drive.google.com/drive/u/2/folders/12i-SeIteF0KYihDBPsbbMBWdPYvHR0Ma) 25 | > > - [Video - 2](https://drive.google.com/drive/u/2/folders/12i-SeIteF0KYihDBPsbbMBWdPYvHR0Ma) 26 | > > - [Video - 3](https://drive.google.com/drive/u/2/folders/12i-SeIteF0KYihDBPsbbMBWdPYvHR0Ma) 27 | > > - [Video - 4](https://drive.google.com/drive/u/2/folders/12i-SeIteF0KYihDBPsbbMBWdPYvHR0Ma) 28 | > 13. Grid 29 | > > - [Video - 1](https://drive.google.com/drive/u/2/folders/12zxlA3IYJv9KJ_Z85WtQkh6yRciTUGqB) 30 | > > - [Video - 2](https://drive.google.com/drive/u/2/folders/12zxlA3IYJv9KJ_Z85WtQkh6yRciTUGqB) 31 | > > - [Video - 3](https://drive.google.com/drive/u/2/folders/12zxlA3IYJv9KJ_Z85WtQkh6yRciTUGqB) 32 | > > - [Video - 4](https://drive.google.com/drive/u/2/folders/12zxlA3IYJv9KJ_Z85WtQkh6yRciTUGqB) 33 | > 14. [Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) **(Important)** 34 | 35 | ### Optional for CSS 36 | This sections is an optional section. This section contains some extra concepts for those who want to dig deeper into CSS. 37 | 38 | Here we will be seeing some more advanced things in CSS like transformation, media queries, responsive grids, and so on. 39 | 40 | > 1. [RGB](https://www.w3schools.com/css/css_colors_rgb.asp) 41 | > 2. [HEX](https://www.w3schools.com/css/css_colors_hex.asp) 42 | > 3. [HSL](https://www.w3schools.com/css/css_colors_hsl.asp) 43 | > 4. [Transformations in 3D](https://www.w3schools.com/css/css3_3dtransforms.asp) 44 | > 5. [Transitions](https://www.w3schools.com/css/css3_transitions.asp) 45 | > 6. [Animations](https://www.w3schools.com/css/css3_animations.asp) 46 | > 7. [Pagination](https://www.w3schools.com/css/css3_pagination.asp) 47 | > 8. [Multiple columns](https://www.w3schools.com/css/css3_multiple_columns.asp) 48 | > 9. [Responsive images](https://www.w3schools.com/css/css_rwd_images.asp) 49 | > 10. [Responsive templates](https://www.w3schools.com/css/css_rwd_templates.asp) 50 | > 11. [Rounding corners](https://www.w3schools.com/css/css3_borders.asp) 51 | > 12. [Images as borders](https://www.w3schools.com/css/css3_border_images.asp) 52 | > 13. [Multiple backgrounds](https://www.w3schools.com/css/css3_backgrounds.asp) 53 | > 14. [Gradients](https://www.w3schools.com/css/css3_gradients.asp) 54 | > 15. [Shadows](https://www.w3schools.com/css/css3_shadows_box.asp) 55 | > 16. [Transformations in 2D](https://www.w3schools.com/css/css3_2dtransforms.asp) 56 | > 17. [CSS Sprites](https://www.udacity.com/blog/2021/07/an-easy-guide-to-css-sprites.html) 57 | 58 | This concludes the Day 04 of our 7 Days of Web Dev. So with this we have completed CSS. And from tomorrow we are going to start with JavaScript. 59 | -------------------------------------------------------------------------------- /Day-5/README.md: -------------------------------------------------------------------------------- 1 | # Day 05 2 | In the last 4 days we learnt HTML and CSS. 3 | 4 | HTML is the skeleton of our Web Page. All the contents of our Web Page is written using HTML. 5 | 6 | CSS is used to style our Web Page. Using CSS we can style our Web Page howsoever we want. We can make out bare body HTML containing Web Page into stylish and attractive Web Page using CSS. 7 | 8 | Now we have created the look and feel of our Website. But what is a website if it is not functional. We can make our Wesite functional using JavaScript. Now lets dive right into it!!! 9 | 10 | Today we will be starting with our journey in JavaScript. We will be starting with what browser-side scripting is, what JS is, how we can work with js, and a hello world program in JS. We will see how we can initialize things in Js, data types, some basic arithmetic operations, and a brief about functions. And also we will be working with Arrays, classes, and objects in JavaScript. We will also be seeing how inheritance works in JS. 11 | 12 | > 1. [Introduction to Browser Side Scripting](https://docs.oracle.com/cd/B31104_02/books/ConfigApps/ConfigApps_Overview39.html) 13 | > 2. [Introduction to Javascript](https://drive.google.com/drive/u/2/folders/1gSmSFfAg_8vvmA7ALxIL9JWJnzbQuhbd) 14 | > 3. [How Javascript Works?](https://www.youtube.com/watch?v=ZvbzSrg0afE&t=64s) 15 | > 4. [Tools for javascript Development](https://drive.google.com/drive/u/2/folders/1gSmSFfAg_8vvmA7ALxIL9JWJnzbQuhbd) 16 | > 5. [Hello World in Javascript](https://javascript.info/hello-world) 17 | > 6. [Comments in Javascript](https://www.w3schools.com/js/js_comments.asp) 18 | > 7. [let, var and const in JS-Basic](https://www.youtube.com/watch?v=XgSjoHgy3Rk) 19 | > 8. [let, var and const in JS-Intermediate](https://www.youtube.com/watch?v=BNC6slYCj50) 20 | > 9. [Data Types in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures) 21 | > 10. [Basic Arithmetic in JS](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Math) 22 | > 11. [How functions work in JS?](https://www.youtube.com/watch?v=gSDncyuGw0s) 23 | > 12. [Functions in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) 24 | > 13. [Arrays in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) 25 | > > - [Video](https://drive.google.com/drive/u/2/folders/1gSmSFfAg_8vvmA7ALxIL9JWJnzbQuhbd) *(Arrays)* 26 | > 14. [Classes in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) 27 | > > - [Video](https://youtu.be/T-HGdc8L-7w) *(Classes)* 28 | > 15. [Objects in JS](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects) 29 | > > - [Video](https://youtu.be/HPddGlSIV3M) *(Objects)* 30 | > 16. [Scopes in JS](https://youtu.be/uH-tVP8MUs8) 31 | > 17. [Inheritance in JS](https://youtu.be/MfxBfRD0FVU) 32 | 33 | You can also use Node.js to run your JavaScript code in your terminal 34 | > - [Node JS Installation](https://nodejs.org/en/download/) 35 | > - [Running JS code in Terminal](https://www.youtube.com/watch?v=BPBdgd1BgEA) 36 | 37 | This concludes Day 05 of our 7 Days of Web Dev. We have covered quite a few topics of JS today. Rest of the topics we'll cover tomorrow. -------------------------------------------------------------------------------- /Day-6/README.md: -------------------------------------------------------------------------------- 1 | # Day 06 2 | So yesterday we completed covered some parts of JS and today we'll be going through the rest of them. 3 | 4 | Arrow functions are one of those things which have helped to make code in javascript compact. Today we will be learning how we can implement them in our code. Apart from this we will also be working with Spread and Rest Operators and will be having a quick look at the Document Object Model(DOM). We will also start with how we can destructure objects and then we will start with Document object manipulations in JS. Also we will be working on the Document object model and will be interacting with the web pages a bit more. 5 | 6 | > 1. [Arrow Functions (ES6)](https://youtu.be/mrYMzpbFz18) 7 | > 2. [Exports and Imports](https://youtu.be/Jqn_wjkSZwo) 8 | > > - [Exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) 9 | > > - [Imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) 10 | > 3. [Spread and Rest Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax) 11 | > 4. [Destructuring Assignment](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) 12 | > 5. [Introduce the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction) 13 | > 6. [DOM Structure](https://javascript.info/dom-nodes) 14 | > 7. [Why is DOM necessary?](https://docs.google.com/document/d/19OjidM_d0X1oLVuYtaaNPoTHBBbcFa58Q2Tejz23BI4/edit) 15 | > 8. [Element ID](https://youtu.be/t90K6HExEJo) 16 | > 9. [Element Class or Tag](https://youtu.be/oUpEKosnC8E) 17 | > 10. [Query Selector](https://youtu.be/JlgLDfINXvY) 18 | > 11. [Changing HTML and Text](https://youtu.be/hDN5IGUv3Yw) 19 | > 12. [Traversing DOM - 1](https://youtu.be/VMRo6Uv856E) 20 | > 13. [Traversing DOM - 2](https://youtu.be/3J3AV3763hE) 21 | > 14. [DOM events](https://youtu.be/ndz6iH6o1ms) 22 | > 15. [Styles and Classes in DOM](https://youtu.be/wJHj4uRlQWQ) 23 | 24 | This concludes the Day 06 of our 7 Days of Web Dev. So with this we have completed JS. So with this we have reached the end of our learning phase. Now its time tto implement what we have learned. 25 | 26 | Let's get our game face on ... !!!! -------------------------------------------------------------------------------- /Day-7/README.md: -------------------------------------------------------------------------------- 1 | # Day 07 2 | For the last 6 days it has been a rigorous learning phase. We almost covered the whole of HTML, CSS nad JS in jst 6 days. We compiled and provided you with top notch resources. Now its time to reap what we have sowed. 3 | 4 | As mentioned earlier we have no learning resources for you on this last day. Rather this day will be completely devoted to making a project. We have not handicapped with you any project idea of our own. Rather you have to make a project of your own choice which will reflect your talent, creativity and innovations. Yes but one condition is that you have to build the projects using only HTML, CSS and JavaScript. 5 | 6 | Here are some of the project ideas which you can start working on:- 7 | 8 | - [Top 10 Projects For Beginners To Practice HTML and CSS Skills](https://www.geeksforgeeks.org/top-10-projects-for-beginners-to-practice-html-and-css-skills/) 9 | - [10 Best Web Development Project Ideas For Beginners in 2021](https://www.geeksforgeeks.org/10-best-web-development-project-ideas-for-beginners-in-2021/) 10 | 11 | After building a particular website it is important to deploy the website properly. We have already made a video demoying how to deploy a website successfully. You can refer to it if you want. Below you can find the link attached to that. 12 | 13 | - [Deploying your website to the web](https://youtu.be/7WdiLt1gvu8) 14 | 15 | All the details regarding how to submit your project has been mentioned in the Project Format file the link to which is given below:- 16 | 17 | - [How to submit your project](https://github.com/hackclubiter/Codathon-WebDev/blob/main/projectformat.md) 18 | 19 | The best project will be sent to the Hack Club HQ and if they find it interesting then they'll help you develop it further under the guidance mentors and also launch the project. 20 | 21 | But even if your project is not adjudged to be the best, if it is unique, then it will get featured in the Hack Club ITER's project section 👍 22 | 23 | Now it has been a great journey with you guys for the last 7 days. Hope we will continue this further ... 💛👋 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 7 days of Web Development is a part of the part of Code Marathon organized by hack Club ITER. It is a marathon which will focus on self-learning and producing a project at the final day. 6 | 7 | ## Quick Links: 8 | 1. [HTML by w3schools](https://www.w3schools.com/html/) 9 | 2. [CSS by css-tricks](https://css-tricks.com/) 10 | 3. [JavaScript by freecodecamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) 11 | 12 | ## About 13 | Welcome to this 7 days of Web - Development👋 14 | 15 | It is an initiative for people to learn how to build web applications, irrespective of their current level of expertise. ✌ 16 | 17 | The main objective behind this program is to provide you with access to top-notch content at zero cost. ✨ 18 | 19 | It'll be a week long intensive and hardcore learning marathon. 20 | 21 | We have designed beginner-friendly lessons covering up HTML, CSS and JavaScript. The topics have been distributed over the course of 6 days. 22 | 23 | And then for the last and final day of this event, all the participants will have to submit a project which they must make within that week only. No previously prepared project will be accepted. 24 | 25 | Furthermore, there are quizzes to be conducted at the end of each day to help you sharpen your basics in a fun and riveting way. 💛 26 | 27 | So see you at the end of this week. 👍 28 | 29 | ## Days-wise plan 30 | - Day-1 : HTML Part - 1 31 | - Day-2 : HTML Part - 2 32 | - Day-3 : CSS Part - 1 33 | - Day-4 : CSS Part - 2 34 | - Day-5 : JS Part - 1 35 | - Day-6 : JS Part - 2 36 | - Day 7 : Final Project 37 | 38 | ## Day-wise Plan Links 39 | - [Day-1](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-1/README.md) 40 | - [Day-2](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-2/README.md) 41 | - [Day-3](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-3/README.md) 42 | - [Day-4](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-4/README.md) 43 | - [Day-5](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-5/README.md) 44 | - [Day-6](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-6/README.md) 45 | - [Day-7](https://github.com/hackclubiter/Codathon-WebDev/blob/main/Day-7/README.md) 46 | 47 | ## Coordinators 48 | 1. Saswat Mohanty 49 | 2. Sanket Sanjeeb Pattanaik 50 | 51 | 52 | ## FAQs 53 | - **Are there any prerequisite for this event?** 54 | 55 | There are no prerequisities for the event. Just your inquisitiveness and eagerness to learn. 56 | - **Is it free to attend** 57 | 58 | Yes, it is completely free to attend. 59 | - **Is there any exam?** 60 | 61 | Yes, to test your knowledge, we will conduct quiz everyday. 62 | 63 | ## Perks: 64 | - Certificate of Appreciation to top 3 performers 65 | - Certificate of Participation to all participants who will successfully submit their assignment and project. 66 | - Bagful of knowledge 67 | 68 | ## Contact 69 | - [Mail](mailto:hackclubiter@gmail.com) 70 | - [Telegram Group](https://t.me/joinchat/TBY1nvuLJKJVeY5y) 71 | - [Instagram DM](https://www.instagram.com/hackclubiter/) 72 | -------------------------------------------------------------------------------- /img/hero.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/hackclubiter/Codathon-WebDev/78dd134b0b318c5fdade309a191ee1c450fb9eaa/img/hero.png -------------------------------------------------------------------------------- /projectformat.md: -------------------------------------------------------------------------------- 1 | # Project Format for 7 Days of Web Development 2 | *Dear Participant, congratulations of coming to the last of this coding marathon. We hope that you have learned many things from this marathon. In the last day of this marathon, you have to make a project which will show your learnings from these seven days.* 3 | 4 | ## On what topic I will be making my project? 5 | > There is no certain topic. You are open to make any kind of website but you have to keep in mind that you have to use the resources of these 7 Days. 6 | 7 | ## Tech Stacks 8 | > HTML 9 | > 10 | > CSS 11 | > 12 | > JavaScript 13 | 14 | Your project **MUST** contain these three tech stacks ONLY. You are not allowed to use any other framework/library. 15 | 16 | ## Timeline 17 | > The development of your projects starts from 10 July, 2021 at 12:00 AM to 11:59 PM of the same day. 18 | > 19 | > Your development should start from the mentioned time only. Anyone starting the project before the mentioned time will be disqualified. 20 | 21 | ## Where to submit the project? 22 | > You have to create a GitHub repository for your project and you must host it. (You can check the Day 7 resource where we have mentioned regarding how to host your website). 23 | > 24 | > Our coordinators will give one Google Form link where you have to submit the details. It will be shared with you at 10 PM on 10th July, 2021. 25 | 26 | ## What will be the format of the README? 27 | > Make sure to add a `README.md` in your respository so that we can understand about the project. 28 | > 29 | > Content for the `README.md` file: 30 | 31 | ``` 32 | - Name of the Project 33 | - About the Project (In less than 100 words) 34 | - Tech Stack Used 35 | - Motivation for the project 36 | - How our 7 Days of Web Development helped you in making this project? 37 | - Hosted link 38 | - Your name, registration number. 39 | ``` 40 | 41 | > If you don't know how to write a README.md then refer to this -> [REFER](https://github.com/saswatsamal/markdownbasics) 42 | 43 | 44 | ### Note that, no coordinator will help you during making the project. You can take the help of internet but don't copy paste other's work. If we find the same, you will be disqualified. 45 | --------------------------------------------------------------------------------