└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Web Development ResourcesπŸ’» 2 | 3 | ## Hello πŸ‘‹ 4 | This repository was made initially as a resource guide for students participating in the Kode with Klossy Web Development Camps for Summer 2020, however, it is also now a crowdsource place full of useful sources to learn about web development along other with other useful tools - such as navigating Git and using Github - as you navigate your time as a developer. 5 | 6 | I will be continually updating this repository throughout time, however, feel free to fork the repo or make contributions here! 7 | 8 | ### Best Sites for Learning ANYTHING Web Development Related 9 | * [W3Schools](https://www.w3schools.com/) 10 | * [FreeCodeCamp](https://www.freecodecamp.org/) 11 | * [Codecademy](https://www.codecademy.com/catalog/subject/web-development) 12 | * [Django Tutorial](https://tutorial.djangogirls.org/en/) 13 | * [ReactJS](https://reactjs.org/tutorial/tutorial.html) 14 | * [Setting Up React](https://www.codecademy.com/articles/how-to-create-a-react-app) 15 | * [More React](https://reactjs.org/docs/create-a-new-react-app.html) 16 | * [Practicing React.js alongside s'more resources](https://github.com/hack4impact-uiuc/react-exercise) 17 | * [Mini Web Dev Bootcamp](https://www.notion.so/Curriculum-ca431096426b4fd1968ac49121ff2fdb) 18 | * [Mozilla](https://developer.mozilla.org/en-US/docs/Learn) 19 | * [LearnJS](https://github.com/CodeNerve/LearnJavaScript) 20 | * [Technotica Curriculum](https://github.com/Techtonica/curriculum) 21 | * [Harvard CS50 Web Programmin](https://cs50.harvard.edu/web/2020/) 22 | 23 | ### Designs 24 | * [Google Fonts](https://fonts.google.com/) 25 | * [HTML ColorCode](https://htmlcolorcodes.com/) 26 | * [Font Awesome](https://fontawesome.com/v4.7.0/icons/) 27 | * [unDraw](https://undraw.co/) 28 | * [emojipedia](https://emojipedia.org/) 29 | * [Dribble](https://dribbble.com/?fbclid=IwAR3c_YUBr-wLjHWvIQcARBeM7UG2ZYd02_I8U4zy2oUSUWkTtFIivoxqHxA) 30 | * [CSS Animated & Gradient Background](https://uigradients.com/#SandtoBlue) 31 | * [Bootstrap](https://getbootstrap.com/) 32 | 33 | ### Templates 34 | * [HTML5UP](https://html5up.net/) 35 | * [JSON Resume](https://jsonresume.org/getting-started/) 36 | * [urspace](https://urspace.io/) customized templates 37 | * [Terminal-like Portfolio](https://github.com/CodeNerve/CodeNerve.github.io) 38 | * [Some more templates](https://html.com/resources/free-html-templates/) 39 | * [w3 Schools Bootstrap Theme](https://www.w3schools.com/bootstrap4/bootstrap_templates.asp) Bootstrap is a front-end framework that allows your site to be more responsive across all devices! 40 | 41 | ### πŸ› οΈ Tools to use for prototyping apps or websites 42 | * [Proto.io](https://proto.io/) - keep in mind you only have a 14 day free trial 43 | * [Figma](https://www.figma.com/blog/) 44 | * [Bubble.io](https://bubble.io/) Easy and free tool to create mockups 45 | * [Check this Medium blog out](https://medium.com/@denisz.design/the-9-best-go-to-prototyping-tools-for-designers-in-2019-296b341a51a2) 46 | 47 | ### Github 48 | * [Github Guides](https://guides.github.com/activities/hello-world/) 49 | * [Introduction to Github](https://lab.github.com/githubtraining/introduction-to-github) 50 | * [More GitHub Courses](https://lab.github.com/) 51 | * [Practicing How to Use Git](https://github.com/benthayer/git-gud) 52 | * [Gitbook](https://www.gitbook.com/) 53 | * [Importance of Having a good READ.ME](https://github.com/noffle/art-of-readme?fbclid=IwAR3sFPA8KV71i2YCESls4fCqIxvTzbB0eiJGEAiDMUgs1rfZ0Rv1YN0KsOY) - very useful to include for your final project! 54 | * [Why you need a clear README if you want a "coding" job](https://www.reddit.com/r/cscareerquestions/comments/h17blk/always_write_a_clear_readme_if_you_want_to_find_a/) 55 | * [Github Student Developer Pack](https://education.github.com/pack) 56 | * [Showcase Portfolio through Github Pages](https://github.dev/) 57 | * [FORK this repo](https://github.com/dipakkr/A-to-Z-Resources-for-Students) 58 | 59 | ### πŸ‘©β€πŸ’» πŸ‘¨β€πŸ’» Free Online IDEs to help you get started 60 | * [Repl.it](https://repl.it/) 61 | * [Code Pen](https://codepen.io/) 62 | * [Glitch](https://glitch.com/) 63 | 64 | ### EXTENSION: Building Your Own KWK Portfolio! 65 | Throughout the duration of the web development camp, you will be building a lot of very cool projects so why not show them off? A porfolio would be a great way to showcase all the projects you've done to show off to your friends, family, recruiters, etc. 66 | 67 | See this [tutorial](https://medium.com/techtogether/how-to-make-your-first-portfolio-hosted-on-github-1e5940853fcc) I wrote on how to host your website through Github pages 68 | 69 | Here is another [resource](https://github.dev/) to help you build a portfolio to showcase your projects! If you are a student and have a school email, you can register for [Github Pro](https://education.github.com/pack) that gives you free tools to use like a .me domain and other resources 70 | 71 | ### ADDITIONAL RESOURCES 72 | * [Ways to get involved with Women in Tech!](https://github.com/nishapant/Women-in-Tech-Resources) 73 | * [Impactful](https://weareimpactful.org/?fbclid=IwAR1w5zp9XhK1jcCj0DVCttMCtOMOZt7AAQaf6x3nZJvBU76MuwN2OROM7a4#home) 74 | * [Adding Google Analytics to Website](https://www.pair.com/support/kb/how-to-google-analytics-to-an-html-website/) 75 | * [How to make a Chrome Extension](https://developer.chrome.com/extensions/getstarted) 76 | * [Contributing to Open Source](https://opensource.guide/how-to-contribute/) 77 | * [Missing Semester of your CS Education](https://missing.csail.mit.edu/) 78 | * [Developer Roadmaps](https://roadmap.sh/guides) 79 | * [Coding from Home Resources from BBG Spreadsheet](https://docs.google.com/spreadsheets/d/1UZ4cSyopw7PkWuHm6Y5kL8MGpYULBavTdAEwz0ibHEU/edit?pli=1#gid=991593200) 80 | 81 | ### πŸ“° BLOGS TO CHECK OUT 82 | * [freeCodeCamp](https://www.freecodecamp.org/news/) 83 | * [CodePath](https://blog.codepath.org/) 84 | * [Tech Together](https://medium.com/techtogether) 85 | * [Better Programming](https://medium.com/better-programming) 86 | 87 | ### βœ… CHALLENGES 88 | * [7 Days, 7 Websites](https://www.freecodecamp.org/news/the-7days7websites-coding-challenge/) 89 | * [#100DaysOfCode](https://www.100daysofcode.com/) 90 | * [Contributing to Open Source Projects](https://github.com/freeCodeCamp/how-to-contribute-to-open-source) 91 | * [List of Hackathons](https://mlh.io/seasons/na-2020/events) 92 | * [List of High School Hackathons](https://hackathons.hackclub.com/) 93 | 94 | 95 | --------------------------------------------------------------------------------