├── Week_2 - CSS ├── 2.5 ├── 2.4 ├── 2.1 ├── 2.2 ├── 2.3 └── Assignment 2 ├── Week_4 - JS └── 4.1 ├── Week_1:HTML ├── 1.3 ├── 1.4 ├── 1.2 ├── 1.1 └── Assignment 1 ├── Assignment └── Final_Project ├── Week_3 - Advanced CSS ├── 3.1 ├── 3.2 ├── 3.3 └── Assignment-3 └── README.md /Week_2 - CSS/2.5: -------------------------------------------------------------------------------- 1 | #Pseudo classes 2 | https://www.tutorialspoint.com/css/css_pseudo_classes.htm 3 | https://www.youtube.com/watch?v=XT2PFpOyDzY&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=20 4 | 5 | #Pseudo elements 6 | https://www.tutorialspoint.com/css/css_pseudo_elements.htm 7 | -------------------------------------------------------------------------------- /Week_4 - JS/4.1: -------------------------------------------------------------------------------- 1 | #Week 4 - Intro to Javascript 2 | 3 | Hopefully by now, most of you are comfortable with how to use HTML and CSS to create basic webpages. 4 | We now introduce to Javascript, one of the most well-known programming languages used in fields such as web development. 5 | 6 | ##Material 7 | https://www.youtube.com/playlist?list=PL4cUxeGkcC9haFPT7J25Q9GRB_ZkFrQAc 8 | -------------------------------------------------------------------------------- /Week_1:HTML/1.3: -------------------------------------------------------------------------------- 1 | #Part 1.3 2 | #Links and lists 3 | 4 | ##LINKS: 5 | https://www.tutorialspoint.com/html/html_text_links.htm 6 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks?fbclid=IwAR0CrNJuzV0Qnm3uN5N65aGB8fEtkTkE2eCECqUbsigiVvsLexqNjjvDhls 7 | https://www.youtube.com/watch?v=f8pAb3IuECk 8 | 9 | ##LISTS: 10 | https://www.javatpoint.com/html-lists 11 | https://www.tutorialspoint.com/html/index.htm 12 | -------------------------------------------------------------------------------- /Assignment/Final_Project: -------------------------------------------------------------------------------- 1 | #Final Project 2 | 3 | With the material provided and more, do your best to recreate the following website using HTML, CSS and JS 4 | https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRyd1HsZ3FRa3wBmWxTN4S9g4zZESXSHTESqA&usqp=CAU 5 | 6 | Extra Features: 7 | - Add a search bar at the top of the site, to search by cities 8 | 9 | You will be marked based on your ability to recreate the website to the best of your abilities. 10 | Extra points will be awarded for any extra features added. 11 | 12 | Hope you had fun learning Web Dev with us. All the best! 13 | -------------------------------------------------------------------------------- /Week_1:HTML/1.4: -------------------------------------------------------------------------------- 1 | #Part 1.4 2 | This part marks the end of section 1 of our course, the html section. Take your time to revise all of the topics taught in this section. There will be an assignment put up tomorrow morning, consisting of all you have learnt so far. 3 | 4 | ##TABLES: 5 | https://www.tutorialspoint.com/html/html_tables.htm 6 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics?fbclid=IwAR226enXYYJWjmqA8f88RIjoVKm1ysLEFF17IIrMgRpGKs_Zgj30MsR8b3c 7 | 8 | ##EXTRA CONTENT - ID'S AND CLASSES 9 | https://www.youtube.com/watch?v=9UNmumTYuq8&list=PL4cUxeGkcC9ibZ2TSBaGGNrgh4ZgYE6Cc&index=14&fbclid=IwAR0VBjBmjT9y-99uDneWCGJkzEt6G_TkCPMFs1hylzZiU1m-aDYeOaqOb5c 10 | -------------------------------------------------------------------------------- /Week_3 - Advanced CSS/3.1: -------------------------------------------------------------------------------- 1 | ##Transition 2 | https://www.youtube.com/watch?v=oYlJR4Le228&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5&index=3 3 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions 4 | 5 | ##Animations 6 | https://www.youtube.com/watch?v=PjR97QzOrJM&list=PL4cUxeGkcC9iGYgmEd2dm3zAKzyCGDtM5&index=4 7 | https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations 8 | https://www.tutorialspoint.com/css/css3_animation.htm 9 | 10 | ##Standard document flow 11 | https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow 12 | https://www.youtube.com/watch?v=l8NH6YppJFA&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=3 13 | -------------------------------------------------------------------------------- /Week_2 - CSS/2.4: -------------------------------------------------------------------------------- 1 | Part 3.3 - links and lists, gradients 2 | 3 | ##Links: 4 | https://www.tutorialspoint.com/css/css_links.htmhttps://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_links 5 | https://www.youtube.com/watch?v=w_1pQGfrHT8&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=33 6 | 7 | ##Lists: 8 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Styling_lists 9 | https://www.tutorialspoint.com/css/css_lists.htm 10 | 11 | ##Gradients: 12 | https://www.tutorialspoint.com/css/css3_gradients.htm 13 | https://www.youtube.com/watch?v=wTk4Wuckd0U&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=49 14 | 15 | ##Webfonts: 16 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts 17 | 18 | ##Transformation: 19 | https://www.tutorialspoint.com/css/css3_2d_transform.htm 20 | -------------------------------------------------------------------------------- /Week_3 - Advanced CSS/3.2: -------------------------------------------------------------------------------- 1 | ##Floats 2 | https://www.youtube.com/watch?v=VwxGKpvW8Zk&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=4 3 | https://www.youtube.com/watch?v=nE9lIRbIfI0&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=5 4 | https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats 5 | 6 | ##Positioning 7 | https://www.youtube.com/watch?v=YBJqKWXL2vg&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=8 8 | https://www.youtube.com/watch?v=2JMGG_8T-vY&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=9 9 | https://www.youtube.com/watch?v=8fQWx-d5qc8&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=10 10 | https://www.youtube.com/watch?v=k4taTzkhzHc&list=PL4cUxeGkcC9hudKGi5o5UiWuTAGbxiLTh&index=11 11 | 12 | ##Multi Column 13 | https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout 14 | -------------------------------------------------------------------------------- /Week_2 - CSS/2.1: -------------------------------------------------------------------------------- 1 | #Part 2 2 | Welcome to the 2nd week of the course - CSS 3 | 4 | #Intro to CSS 5 | https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/What_is_CSS 6 | https://www.tutorialspoint.com/css/what_is_css.htm 7 | https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started 8 | 9 | #CSS Structure 10 | https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured 11 | https://www.tutorialspoint.com/css/css_inclusion.htm 12 | 13 | #Selectors 14 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors 15 | https://www.tutorialspoint.com/css/css_syntax.htm 16 | https://www.youtube.com/watch?v=f7c7bTrqXic&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=8 17 | https://www.youtube.com/watch?v=hrqo_GOwHHs&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=9 18 | -------------------------------------------------------------------------------- /Week_3 - Advanced CSS/3.3: -------------------------------------------------------------------------------- 1 | #Flex-Intro 2 | https://www.youtube.com/watch?v=Y8zMYaD1bz0&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=1 3 | https://www.youtube.com/watch?v=ux4h6pejCSM&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=2 4 | 5 | #Flex-Properties 6 | https://www.youtube.com/watch?v=yPK8cwBEOmg&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=3 7 | https://www.youtube.com/watch?v=tSdq8amjMso&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=4 8 | https://www.youtube.com/watch?v=rlZ-fC5eWWk&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=5 9 | https://www.youtube.com/watch?v=j5RxNRFWMwo&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=6 10 | 11 | #Flex-Layouts 12 | https://www.youtube.com/watch?v=8vcSr1yVvXQ&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=9 13 | https://www.youtube.com/watch?v=WY2itpeUK7Q&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=10 14 | https://www.youtube.com/watch?v=FPl-7mTW20U&list=PL4cUxeGkcC9i3FXJSUfmsNOx8E7u6UuhG&index=12 15 | -------------------------------------------------------------------------------- /Week_2 - CSS/2.2: -------------------------------------------------------------------------------- 1 | ##CSS Units: 2 | https://www.tutorialspoint.com/css/css_measurement_units.htm 3 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units 4 | 5 | ##Extra Content - Cascading and inheritance: 6 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance 7 | https://www.youtube.com/watch?v=4oPvurjpcNw&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=10 8 | https://www.youtube.com/watch?v=ZMpaebQ3n6A&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=11 9 | https://www.youtube.com/watch?v=lZ6R_eYYxoE&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=12 10 | 11 | #Styling text 12 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text 13 | 14 | #STYLING TABLES 15 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Styling_tables?fbclid=IwAR06SIQEWaejSFbsHR4zrBHbPwT3a3ubJGe2Z9nawXTsX8QeZxmIGGGbc-k 16 | 17 | #STYLING IMAGES 18 | https://www.tutorialspoint.com/css/css_images.htm 19 | -------------------------------------------------------------------------------- /Week_1:HTML/1.2: -------------------------------------------------------------------------------- 1 | #Images, formatting and document structuring 2 | 3 | ##IMAGES: 4 | https://www.tutorialspoint.com/html/html_images.htm 5 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML?fbclid=IwAR3mgAQYnbHo41xj3uwrWd39Kg5CKTpCnWe2O0u3dUcEBMVX6-D2aGlYI1c 6 | https://www.youtube.com/watch?v=g6xsNHnAmlE... 7 | 8 | ##FORMATTING: 9 | https://www.tutorialspoint.com/html/html_formatting.htm 10 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Advanced_text_formatting?fbclid=IwAR0pA8XsTl0QL87el5EuBJsOWLWD-JlAro6QcC1HUyXnQ001rZsJiw_pl0s 11 | 12 | ##EXTRA CONTENT - SITE STRUCTURING: 13 | While tags such as the ones mentioned in the link below may seem unnecessary now, they prove to be very useful in the long run. But feel free to skip this section as we will visit it again in the css part of the course. 14 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Document_and_website_structure?fbclid=IwAR2K0m1V60Wbj_dG03ra_-Bzub45fLMd7oMF-mrigWlfKwTngAiQfZN9EOo 15 | -------------------------------------------------------------------------------- /Week_2 - CSS/2.3: -------------------------------------------------------------------------------- 1 | ##Advanced selectors 2 | https://www.youtube.com/watch?v=TVj1avJj8a8&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=23 3 | https://www.youtube.com/watch?v=E45xQZTgaUI&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=24 4 | https://www.youtube.com/watch?v=UxHFB5_CSXc&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=21 5 | https://www.youtube.com/watch?v=K92X4yyyfNY&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=17 6 | 7 | ##Box model 8 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model 9 | https://www.tutorialspoint.com/css/index.htm 10 | https://www.youtube.com/watch?v=Qx-yzUBqatQ&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=36 11 | https://www.youtube.com/watch?v=ggo0di5L6sA&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=37 12 | https://www.youtube.com/watch?v=4YF-eaX4P0k&list=PL4cUxeGkcC9gQeDH6xYhmO-db2mhoTSrT&index=38 13 | 14 | ##Overflowing 15 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content 16 | 17 | ##Extra:Text-direction 18 | https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions 19 | -------------------------------------------------------------------------------- /Week_3 - Advanced CSS/Assignment-3: -------------------------------------------------------------------------------- 1 | #Assignment 3 2 | 3 | ##Use the page you made from the previous assignment and make the following changes to it 4 | 5 | 1. Change the layout to make it look like the one in the photo 6 | #Page: https://scontent.fmaa3-2.fna.fbcdn.net/v/t1.6435-9/105701327_291267588907171_119679950221461511_n.jpg?_nc_cat=106&ccb=1-3&_nc_sid=dbeb18&_nc_ohc=aMSOYheJ-88AX8JLOx8&_nc_ht=scontent.fmaa3-2.fna&oh=ed4e4f22a4ff02875ba36506afc85fd6&oe=612EB7D3 7 | 8 | 2. Add the animations shown in the second gif to the links present in the page on hover. 9 | https://www.elegantthemes.com/blog/wp-content/uploads/2017/02/hover-effect-one.gif?fbclid=IwAR3TFszTn9Q_N4gSEY7-tmeej2rq9RLD6DSHv0swHIMv5-m0GHpzW7R49e0 10 | 11 | 3. Make the button column in the left using flexbox, add hover effects with transitions to all the buttons 12 | 13 | 4. Make the page title fade in and slide in from the left when the page loads 14 | 15 | 5. Add icons to the right of the header as shown using flexbox 16 | 17 | 6. Modify the footer to use flexbox 18 | 19 | ##Note: There should be no use of positioning/floats to position any of the elements on the page 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Web-Development-Summer-Group-2021 2 | 3 | Hey Everyone, 4 | Welcome! 5 | 6 | We're going to start our course by July 8th. The first part of our course will be focused on the basics of HTML. A detailed plan for the upcoming week will be put up tomorrow. But in general, here's how the course is going to go: We'll be having broad topics that we will cover over the course of one week. For each of those topics, you will be provided with resources daily, so you can work through them easily, without feeling overwhelmed. Add the end of each week, you will be given a task or small project to work on, based on what you have learnt the previous week. And at the end of the course, you will be given a big project, that combines all of what you have learnt through this course. 7 | 8 | Before we begin: 9 | Install any editor of you choice (VS Code preferably [https://code.visualstudio.com/download]) 10 | If you are using VS Code then install this super helpful extension [https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer&fbclid=IwAR3rBMbr7SZx-Qzu5DfrFjMqLWNTknyhuVBDsyutBHLKAg8ce5kpn1k5WvY] 11 | 12 | That's it for now! 13 | Throughout this course you will face difficulties. Never forget, Google is your best friend here. Always try solving any problem that arises yourself(with Google) first. If that doesn't work never hesitate to reach out to any of the Web Dev instructors 14 | -------------------------------------------------------------------------------- /Week_1:HTML/1.1: -------------------------------------------------------------------------------- 1 | #Part 1 2 | 3 | We will be starting our course with html. Over the course of the following week, you will learn the fundamentals of html and progress enough to be able to structure your website. 4 | 5 | #Part 1.1 6 | Intro to HTML and semantics. 7 | 8 | In all of the links provided below, there are numerous examples highlighting every small topic mentioned. Go through those ,try recreating those examples on your own, and play around with them, changing stuff, to understand how your changes affect the website. Feel free to contact me with any doubts or queries. 9 | 10 | ##Introduction: 11 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started?fbclid=IwAR3hiCjT4f19ZeBQHNgBVsGwU-CexHSKDsLf5uKGglF71tg11RuSfMRcVF4 12 | https://www.tutorialspoint.com/html/html_overview.htm 13 | 14 | ##Semantic Tags: 15 | https://www.tutorialspoint.com/html/html_basic_tags.htm 16 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals?fbclid=IwAR16arpSeAB7US7uNbujXgJDVDH9juTX85t28ciu06SIUdwu9F7v4a3_2SE 17 | 18 | ##Extra Content - Metadata: 19 | If you are confident with the above topics, here is a link that sheds light about the metadata of a site. A lot of the information in this is not really necessary for beginners, so don't worry if you can't get it, but makes for an interesting read, and provides a deep insight into the html that you can't see on screen. 20 | https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/The_head_metadata_in_HTML?fbclid=IwAR3khZLZ5mf6xJX31prVHEFL4AVnGtqTcVJyCcHmNKBnGJjakUv9yJmS7bc 21 | -------------------------------------------------------------------------------- /Week_1:HTML/Assignment 1: -------------------------------------------------------------------------------- 1 | #Assignment 1 2 | 3 | The assignment will be of 30 points. You can also get a score above 30, if you attempt the bonus points section correctly. 4 | The solution will be posted once the submission of the assignment has closed. It covers almost everything you have learnt in the past week, so brush on your concepts before you attempt it. 5 | You will also need a lot of help from Google. Upload your assignment either on codepen (https://www.codepen.io) or jsFiddle (https://jsfiddle.net) and submit the link of your assignment in the form. 6 | Some of these tasks may seem hard, but you have all the required information. Please attempt an submission at this assignment as further submissions will be considered only if you have submitted this one. 7 | 8 | #YOUR ASSIGNMENT: 9 | 1. Create and properly markup a letter as shown in the image. You will be judged on how close the your page is to the one that is shown, and the proper use of both structural and inline semantic tags. (The address should be marked up using the address element). 10 | 2. Supply proper meta data for the page. You should provide using the proper tags and attributes, the character set, your name as the author and a short description. 11 | 12 | #BONUS POINTS: 13 | 1. Create an image hyperlink at the end of the page, that when clicked, takes you back to the top of the page. 14 | 15 | Submission link: https://forms.gle/p88c4ZPPeQ3hv1QM7 16 | 17 | #IMAGE: 18 | https://scontent.fmaa3-2.fna.fbcdn.net/v/t1.6435-9/96023318_257757472258183_1325117906123489280_n.jpg?_nc_cat=111&ccb=1-3&_nc_sid=825194&_nc_ohc=l8oNxf028lgAX_owtd2&_nc_ht=scontent.fmaa3-2.fna&oh=4682ccff0f982396bcb7b63d811cb01a&oe=60F199F9 19 | -------------------------------------------------------------------------------- /Week_2 - CSS/Assignment 2: -------------------------------------------------------------------------------- 1 | #Assignment 2 2 | 3 | The assignment will be of 30 points. You can also get a score above 30, if you attempt the bonus points section correctly. 4 | The solution will be posted once the submission of the assignment has closed. It covers almost everything you have learnt in the past week, so brush on your concepts before you attempt it. 5 | You will also need a lot of help from Google. Upload your assignment either on codepen (https://www.codepen.io) or jsFiddle (https://jsfiddle.net) and submit the link of your assignment in the form. 6 | 7 | 8 | #YOUR ASSIGNMENT: 9 | 1. Create a page that looks like the one shown in the image. You will be awarded points for proper use of selectors and styles. 10 | 2. Style the table as shown without using classes and ids. Minimum use of selectors gets highest points. 11 | 3. Change the background image to a gradient (The color of the title background here is a placeholder, use a gradient instead) 12 | 4. Import Lato from Google fonts and use it throughout the page 13 | 5. Change the text color when it is selected 14 | 6. Style the first letter of each line separately 15 | 16 | #BONUS POINTS: 17 | 1. Bonus points will be awarded for html semantic accuracy. Think of what each section in the page represents and use the correct tag. (Hint: None of them use div's or span's) 18 | 2. Include links to social media as icons on the right side of the footer, and style them for hover (Hint: Use an icon pack like fontawesome) 19 | 20 | Submission link: https://forms.gle/YmGErWcpNs11BiJb8 21 | 22 | #IMAGE: 23 | https://scontent.fmaa3-2.fna.fbcdn.net/v/t1.6435-9/100634111_270872760946654_8995219774908661760_n.jpg?_nc_cat=102&ccb=1-3&_nc_sid=825194&_nc_ohc=ywAEzX5BGVQAX-B6zzm&_nc_ht=scontent.fmaa3-2.fna&oh=47afe2e8c2eb62cff840e3329909090e&oe=61221E33 24 | --------------------------------------------------------------------------------