Update HTML CSS

README.md

@@ -1,24 +1,122 @@
-
-![Banner](/Img/Banner.jpg "Banner")
-
+![Banner](/Img/Banner.jpg 'Banner')
 
 # Summary
+
 Developer Resources is a collection of all the resources for developers.
-We cover all the resources in the following areas of development:
-* Frontend Development
-* Backend Development
-* Mobile Development
-* Game Development
-* Algorithms and Data Structures
-* Interview Prep.  
-* DevOps
+In this section we're going to cover all the resources for Frontend development from Beginner to Advanced. These will be indicated respectively.
 
-Each of these sections will include a table of contents in order for you to navigate to the sections that matter the most to you.
+This section will include a table of contents in order for you to navigate to the sections that matter the most to you.
 
-Each Section will also begin with a Credit section to all the Github repositories from which we could have gotten some of resources listed in here  
+It will also include a Credit section to all the Github repositories from which we could have gotten some of resources listed in here.
 
 We have made an effort to include as many free resources as possible. However we also understand that there are quality resources out there that might cost you a penny but totally worth it.
 We will be sure to indicate the resources that are paid.
 
 We Invite as many contributions as possible.
-Be sure to read [How To Contribute](CONTRIBUTING.MD)
+Be sure to read [How To Contribute](CONTRIBUTING.MD)
+
+# Table of Contents
+
+- [Credits](#credits)
+- [Roadmap](#roadmap)
+  - [How The Internet Works](#how-the-internet-works)
+  - [HTML](#html)
+  - [CSS](#css)
+  - [CSS Frameworks]()
+  - [JavaScript]()
+  - [GIT]()
+  - [React Js]()
+  - [Vue Js]()
+  - [Angular]()
+  - [NPM]()
+  - [TypeScript]()
+  - [Server Side Rendering]()
+  - [Static Site Generators]()
+- [Fonts]()
+- [Icons]()
+- [Color Inspirations]()
+- [Images and Videos]()
+- [Hosting]()
+- [Design Inspiration]()
+- [Podcasts]()
+- [Youtube Channels]()
+- [Portfolio]()
+- [Job Search]()
+- [Playgrounds]()
+- [Newsletters]()
+- [Blog Sites]()
+- [Inteteresting Articles]()
+- [Community]()
+
+# Credits
+
+Some of the resources listed in here were first listed in these amazing repositories:
+
+- [Frontend Roadmap](https://github.com/kamranahmedse/developer-roadmap)
+- [Frontend Checklist]()
+- [Beginner Frontend Resources]()
+- [Frontend Development Bookmarks]()
+- [Zero to Mastery]()
+- [That Twitter Guy]()
+- [Dveloper Portfolios]()
+
+# Roadmap
+
+This is complete roadmap of technologies you need to learn to go from beginner to a competent frontend developer.
+
+![Roadmap](/Img/frontend.png 'Roadmap')
+
+# How the Internet Works
+
+- Documentation and Articles
+    - MDN - [How does the Internet work?](https://developer.mozilla.org/en-US/docs/Learn/Common_questions/How_does_the_Internet_work)
+
+    - Stanford - [How Does the Internet Work?](https://web.stanford.edu/class/msande91si/www-spr04/readings/week1/InternetWhitepaper.htm)
+
+    - Medium - [How the Internet Works](https://medium.com/@User3141592/how-does-the-internet-work-edc2e22e7eb8#:~:text=It%20is%20a%20network%20that,their%20source%20to%20their%20destination.)
+
+    - HowStuffWorks - [How does the Internet Work?](https://computer.howstuffworks.com/internet/basics/internet.htm)
+- Videos
+    - KhanAcademy - [What is the Internet](https://www.khanacademy.org/computing/computers-and-internet/xcae6f4a7ff015e7d:the-internet/xcae6f4a7ff015e7d:introducing-the-internet/v/what-is-the-internet)
+
+    - Youtube - [The Internet: Crash Course Computer Science](https://www.youtube.com/watch?v=AEaKrq3SpW8&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=30&ab_channel=CrashCourse)
+
+    - Youtube - [Computer Networks: Crash Course Computer Science](https://www.youtube.com/watch?v=3QhU9jd03a0&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=29&ab_channel=CrashCourse)
+
+    - Youtube - [The World Wide Web: Crash Course Computer Science](https://www.youtube.com/watch?v=guvsH5OFizE&list=PL8dPuuaLjXtNlUrzyH5r6jN9ulIgZBpdo&index=31&ab_channel=CrashCourse)
+
+# HTML
+- Documentation
+    - Reference - [HTML Reference](https://htmlreference.io/)
+    - W3Schools - [Introduction to HTML](https://www.w3schools.com/html/html_intro.asp)
+
+    - MDN - [HTML5 Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+
+    - CSS-Tricks - [HTML Entity Refernce](https://css-tricks.com/snippets/html/glyphs/)
+
+    - Cheat Sheet - [HTML Cheat Sheet](https://websitesetup.org/html5-cheat-sheet/) 
+
+- Courses
+    - Udacity - [Intro to HTML and CSS](https://www.udacity.com/course/intro-to-html-and-css--ud001)
+    - W3Schools - [HTML Tutorial](https://www.w3schools.com/html/)
+    - CodeCademy - [Learn HTML](https://www.codecademy.com/learn/learn-html)
+    - FreeCodeCamp - [Introduction to Basic HTML & HTML5](https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/)
+
+    - Youtube - [HTML Full Course](https://www.youtube.com/watch?v=pQN-pnXPaVg&ab_channel=freeCodeCamp.org)
+    - Udemy (PAID) - [HTML and CSS3 Course](https://www.udemy.com/course/design-and-develop-a-killer-website-with-html5-and-css3/)
+- Books
+  - [HTML Notes for Pros](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf)
+  - [Head First HTML with CSS (PAID)](https://www.amazon.com/Head-First-HTML-CSS-XHTML/dp/059610197X)
+  - [HTML5 Pocket Reference (PAID)](https://www.amazon.com/HTML5-Pocket-Reference-Comprehensive-Indispensable/dp/1449363350)
+  
+# CSS
+- Documentation 
+  - Reference - [CSS Reference](https://cssreference.io/)
+  - MDN - [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS)
+  - [Extensive CSS Reference](https://tympanus.net/codrops/css_reference/) 
+  - [Getting to Know CSS](https://learn.shayhowe.com/html-css/getting-to-know-css/)
+- Courses
+    - CodeCademy - [Learn CSS](https://www.codecademy.com/learn/learn-css)
+    - W3School - [CSS Tutorial](https://www.w3schools.com/css/)
+    - Team Treehouse - [CSS Basics](https://teamtreehouse.com/library/css-basics)
+    - FreeCodeCamp - [Introduction to Basic CSS](https://www.freecodecamp.org/learn/responsive-web-design/basic-css/)