├── web ├── README.md ├── frontend │ ├── README.md │ ├── React.md │ ├── HTML.md │ ├── css-preprocessors.md │ ├── UX_UI.md │ ├── javascript.md │ └── CSS.md └── backend │ └── server_languages.md ├── volunteering.md ├── git.md ├── human_interaction.md ├── backend ├── languages │ ├── commandline.md │ ├── lua.md │ └── python.md └── hardware_cybersec.md ├── linux.md ├── art ├── theory_and_practice.md └── pixelart.md └── README.md /web/README.md: -------------------------------------------------------------------------------- 1 | anything web related 2 | -------------------------------------------------------------------------------- /web/frontend/README.md: -------------------------------------------------------------------------------- 1 | html/css/js and their preprocessors 2 | UX/UI as well 3 | -------------------------------------------------------------------------------- /volunteering.md: -------------------------------------------------------------------------------- 1 | >:warning: **Warning:** under construction 2 | # Volunteer 3 | * [ragtag.com](https://ragtag.org/) - Join the Ragtag team 4 | * [developforgood.org](https://developforgood.org/for-volunteers) - For university students and recent graduates 5 | 6 | --- 7 | 8 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 9 | -------------------------------------------------------------------------------- /web/backend/server_languages.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add more resources 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # Server Languages 7 | 8 | ## NodeJS 9 | _An open-source, cross-platform JavaScript runtime environment. [Javascript](../frontend/javascript.md) fundamental knowledge is required._ 10 | 11 | Read: 12 | * [NodeJS Docs](https://nodejs.org/en/docs/) 13 | -------------------------------------------------------------------------------- /git.md: -------------------------------------------------------------------------------- 1 | >:warning: **Warning:** under construction 2 | 3 | # git 4 | 5 | ## watch 6 | * [git in 100 seconds](https://www.youtube.com/watch?v=hwP7WQkmECE) 7 | * https://learngitbranching.js.org/ 8 | * https://ohmygit.org/ 9 | 10 | ## Resources 11 | * https://ohshitgit.com - for when you forget a command or make a mistake 12 | --- 13 | 14 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 15 | -------------------------------------------------------------------------------- /human_interaction.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add more resources to learn from 3 | [ ] convert doc into markdown and host at /learn 4 | --- 5 | 6 | >:warning: **Warning:** under construction 7 | # Networking 8 | https://docs.google.com/document/u/0/d/1d4CELrvcakxcQTGoR1h4-yCbLeHHjoIZLzl5GG6qr6Q/mobilebasic?usp=gmail 9 | 10 | # preparing for interview 11 | https://docs.google.com/document/d/1p7DhCsLOMMybYfePWLlD1-_8KU20zkBoArH4pnW1o3c/edit 12 | 13 | --- 14 | 15 | [30 Seconds of Interviews](https://30secondsofinterviews.org/) 16 | 17 | --- 18 | 19 | 20 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 21 | -------------------------------------------------------------------------------- /backend/languages/commandline.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] rename links with proper names 3 | [ ] add more resources 4 | --- 5 | 6 | >:warning: **Warning:** under construction 7 | # commandline 8 | Read: 9 | * https://www.learnenough.com/command-line-tutorial 10 | * https://linuxjourney.com/lesson/the-shell 11 | 12 | Watch: 13 | * https://www.youtube.com/watch?v=yz7nYlnXLfE 14 | 15 | Do: 16 | * https://learntocodewith.me/learn/command-line/ 17 | * https://www.codecademy.com/learn/learn-the-command-line 18 | * https://github.com/rwxrob/boost/blob/2022/outline.md 19 | 20 | --- 21 | 22 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ -------------------------------------------------------------------------------- /linux.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add more resources to learn from 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # Linux 7 | 8 | Read: 9 | * [howtogeek.com](https://www.howtogeek.com/117435/htg-explains-the-linux-directory-structure-explained/) - The Linux Directory Structure, Explained 10 | 11 | Watch: 12 | * [youtube.com](https://www.youtube.com/watch?v=42iQKuQodW4) - Linux Directories Explained in 100 Seconds 13 | * [youtube.com](https://www.youtube.com/playlist?list=PLT98CRl2KxKHaKA9-4_I38sLzK134p4GJ) - Linux Commands for Beginners 14 | * [youtube.com](https://www.youtube.com/watch?v=QZJ1drMQz1A) - Scheduling commands with crontab 15 | 16 | --- 17 | 18 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ -------------------------------------------------------------------------------- /art/theory_and_practice.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add description 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # Art Theory and practice 7 | 8 | Watch: 9 | * [Color theory for noobs](https://www.youtube.com/watch?v=AvgCkHrcj90) 10 | * [Ctrl-paint's theory playlist](https://www.youtube.com/playlist?list=PLI68ClDpxTYRrtNyfr6TiPUz2-NChHZhx) 11 | * [Ctrl-paint's playlists](https://www.youtube.com/user/ctrlpainter/playlists) 12 | * [Light Ponderings' color theory](https://youtube.com/playlist?list=PLM6vM9eVKe8GCYm1Fn1uRfoFQ2TM0N-qc) 13 | 14 | --- 15 | 16 | ### Resources 17 | * [Ultimate how-to for drawing](https://drive.google.com/file/d/11V_B09PD32bWgbFlZ8KtIkU4J-n-xXw_/view) 18 | * @todo tell octo to convert this into a table in a `learn/drawing.md` file 19 | 20 | --- 21 | 22 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ -------------------------------------------------------------------------------- /web/frontend/React.md: -------------------------------------------------------------------------------- 1 | --- 2 | * [ ] rename links with proper names 3 | * [ ] add more resources 4 | --- 5 | 6 | >:warning: **Warning:** under construction 7 | >:React tutorials, readings etc. can become outdated FAST - check the comments when learning from a youtube video and consult Google when something doesn't work. 8 | 9 | Read: 10 | * [ReactJS.org](https://reactjs.org/tutorial/tutorial.html) - you can also build this, but it's a good resource while building projects of your own. 11 | 12 | Watch: 13 | * [Traversy Media React Crash Course](https://www.youtube.com/watch?v=w7ejDZ8SWv8) 14 | * 15 | 16 | Do: 17 | * [Codecademy](https://www.codecademy.com/learn/react-101) 18 | * [Scrimba Course](https://scrimba.com/learn/learnreact) 19 | * [Build a React Website](https://www.youtube.com/watch?v=I2UBjN5ER4s&t=3371s) - helps you get started by dipping your toes in ;) 20 | * [Build a Calculator](https://www.youtube.com/watch?v=DgRrrOt0Vr8&ab_channel=WebDevSimplified) 21 | --- 22 | 23 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] convert to links 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # learn 7 | _List of resources to watch, read and learn on any topic_ 8 | 9 | * [art](art/) 10 | * [pixelart](art/pixelart.md) 11 | * [theory and practice](art/theory_and_practice.md) 12 | * [backend](backend/) 13 | * [languages](backend/languages) 14 | * [lua](backend/languages/lua.md) 15 | * [python](backend/languages/python.md) 16 | * [commandline](backend/languages/commandline.md) 17 | * [hardware & cybersec](backend/hardware_cybersec.md) 18 | * [web](web/) 19 | * [frontend](web/frontend) 20 | * [HTML](web/frontend/HTML.md) 21 | * [CSS](web/frontend/CSS.md) 22 | * [javascript](web/frontend/javascript.md) 23 | * [UX/UI](web/frontend/UX_UI.md) 24 | * [React](web/frontend/React.md) 25 | * [git](git.md) 26 | * [linux](linux.md) 27 | * [networking with humans](human_interaction.md) 28 | * [volunteering](volunteering.md) 29 | 30 | --- 31 | 32 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 33 | -------------------------------------------------------------------------------- /backend/languages/lua.md: -------------------------------------------------------------------------------- 1 | >:warning: **Warning:** under construction 2 | # Lua 3 | _A lightweight programming language, often used for modding_ 4 | 5 | Read: 6 | * [official lua docs](https://www.lua.org/pil/1.html) 7 | * [learn lua in 15 mins](https://learnxinyminutes.com/docs/lua/) 8 | * [lua for programmers](https://web.archive.org/web/20170702174059/http://nova-fusion.com/2012/08/27/lua-for-programmers-part-1) 9 | * [beginner's guide to lua](https://github.com/pohka/Lua-Beginners-Guide) 10 | 11 | Watch: 12 | * [lua in 100 seconds](https://www.youtube.com/watch?v=jUuqBZwwkQw) 13 | * [lua in 15 mins for programmers](https://www.youtube.com/watch?v=kgiEF1frHQ8) 14 | * [complete lua tutorial - 57 mins](https://www.youtube.com/watch?v=iMacxZQMPXs) 15 | 16 | Do: 17 | * [codecombat](https://codecombat.com) `game` - sign up as Individual (top right menu), and choose Lua as your language 18 | * [make a "guess the number" game](https://opensource.com/article/20/12/lua-guess-number-game) 19 | * [intro to lua class](https://learn.coregames.com/courses/intro-to-lua/) 20 | 21 | --- 22 | 23 | ### Extras 24 | 25 | Do: 26 | * [love2D game engine](https://love2d.org) 27 | * [love2D tutorials - 21 vids](https://www.youtube.com/playlist?list=PLS9MbmO_ssyBAc9wBC85_WG9aT88KGxH8) 28 | 29 | 30 | --- 31 | 32 | ### resources 33 | 34 | * [lua cheatsheet](https://web.archive.org/web/20201103084106/http://lua-users.org/files/wiki_insecure/users/thomasl/luarefv51.pdf) 35 | 36 | --- 37 | 38 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ -------------------------------------------------------------------------------- /backend/languages/python.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add more resources to learn from 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # Python 7 | _whitespace-based language, used from web to robotics_ 8 | 9 | Read: 10 | * [automate the boring stuff](https://automatetheboringstuff.com) 11 | 12 | Watch: 13 | * [youtube.com](https://www.youtube.com/playlist?list=PL-osiE80TeTskrapNbzXhwoFUiLCjGgY7) - until **Python Tutorials for Beginners 9** 14 | * [youtube.com](https://www.youtube.com/playlist?list=PL-osiE80TeTsqhIuOqKhwlXsIBIdSeYtc) - Python OOP 15 | 16 | Do: 17 | * [kaggle.com](https://www.kaggle.com/learn/intro-to-programming) - Introduction to Programming 18 | * [kaggle.com](https://www.kaggle.com/learn/python) - Python 19 | * [codewars](https://codewars.com) - start at 8kyu (easiest) 20 | 21 | --- 22 | 23 | ### Web (Django) 24 | 25 | Watch: 26 | * [youtube.com](https://www.youtube.com/playlist?list=PL-osiE80TeTtoQCKZ03TU5fNfx2UY6U4p) - Django Tutorials by Corey Schafer 27 | 28 | Do: 29 | * [Django Official Documentation](https://docs.djangoproject.com/en/4.0/intro/tutorial01/) 30 | 31 | --- 32 | 33 | ### Web Scraping (BeautifulSoup) 34 | 35 | Watch: 36 | * [youtube.com](https://www.youtube.com/watch?v=ng2o98k983k) - Web Scraping with BeautifulSoup and Requests 37 | 38 | --- 39 | 40 | ### Machine Learning & Artificial Intelligence 41 | 42 | Do: 43 | * [elementsofai.com](https://course.elementsofai.com/) - Introduction to AI 44 | * [elementsofai.com](https://buildingai.elementsofai.com/) - Building AI 45 | 46 | --- 47 | 48 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ -------------------------------------------------------------------------------- /web/frontend/HTML.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add more resources 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # HTML 7 | _HyperText Markdown Language, the bones of a website._ 8 | 9 | ### I'm Very ~~Lost~~ New 10 | 11 | Read: 12 | * [Start Here!](#start-here) at the bottom of this page 13 | 14 | - [ ] https://www.youtube.com/watch?v=salY_Sm6mv4 15 | - [ ] https://htmldog.com/guides/html/beginner/ 16 | Watch: 17 | 18 | Do: 19 | 20 | --- 21 | 22 | ### Apprentice 23 | 24 | Read: 25 | 26 | Watch: 27 | 28 | Do: 29 | 30 | --- 31 | 32 | ### Maker 33 | 34 | Read: 35 | 36 | Watch: 37 | 38 | Do: 39 | 40 | --- 41 | 42 | ### Master 43 | Read: 44 | 45 | Watch: 46 | 47 | Do: 48 | 49 | --- 50 | 51 | ## Extra todo 52 | 53 | ## Extra watch 54 | 55 | ## Extra read 56 | 57 | --- 58 | 59 | 60 | 61 | ## Start Here! 62 | Welcome to HTML! Above are plenty of links to help you get started. 63 | Everything in this repository is free, and you should not have to pay for anything. 64 | 65 | Go ahead and read through these links: 66 | _※ - my personal preference_ 67 | 68 | * online playgrounds: _try code online in the browser_ 69 | * [codepen.io](https://codepen.io) ※ 70 | * [JS Fiddle](https://jsfiddle.net/) 71 | * [JS Bin](https://jsbin.com/?html,js,output) 72 | * [CodeSandbox](https://codesandbox.io/) 73 | * editors: _do code locally on your machine_ 74 | * [VS Code](https://code.visualstudio.com/) ※ 75 | * [Atom](https://atom.io) 76 | * resources when lost: 77 | * do not trust w3schools.com, as I have found their information to be wrong on a few occasions 78 | * [stackOverflow](https://stackoverflow.com/questions/tagged/html) is a trusted source, but pay attention to answer dates 79 | * [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference) - Mozilla Developer Network 80 | * [JSinfo](https://javascript.info/) 81 | * [massive JS cheatsheet](https://htmlcheatsheet.com/) 82 | 83 | 84 | _[back up to top](#html)_ 85 | 86 | --- 87 | 88 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 89 | -------------------------------------------------------------------------------- /backend/hardware_cybersec.md: -------------------------------------------------------------------------------- 1 | > :warning: **Warning!** _under construction_ 2 | 3 | - [ ] separate this into backend/hardware.md and backend/cybersec.md _**you** could make a PR!_ 4 | 5 | --- 6 | 7 | # Hardware 8 | 9 | ## beginner 10 | 11 | * [what's inside a computer](https://www.youtube.com/watch?v=HB4I2CgkcCo) 12 | * [how to pick PC parts](https://www.youtube.com/watch?v=j_DcWgxMZ3k) 13 | * [build a server from an old PC](https://www.youtube.com/watch?v=zPmqbtKwtgw) 14 | * [how watercooling works](https://www.youtube.com/watch?v=5ZnDESqJdyU) 15 | 16 | 17 | ## intermediate 18 | 19 | * [how air pressure works inside a pc case](https://www.youtube.com/watch?v=a12aDCxrcts) 20 | * [what is a server - LTT as fast as possible](https://www.youtube.com/watch?v=ByI1PHMcPJQ) 21 | * [server software - wolfgang's tour](https://www.youtube.com/watch?v=f5jNJDaztqk) 22 | * [wolfgang building a great server (new parts)](https://www.youtube.com/watch?v=qACTvCW_yDc) 23 | * [tour of inside a commercial server - data centre 101](https://youtu.be/AcCiDR5cuIk) 24 | * [data centre 101 playlists (all good)](https://www.youtube.com/c/Custodiandc-DataCentres/playlists) 25 | * [Eli the computer guy playlists (some good)](https://www.youtube.com/c/Elithecomputerguypage/playlists) 26 | 27 | --- 28 | 29 | ## general compsci + intro to cybersec 30 | * https://github.com/ossu/computer-science 31 | * https://teamciso.com/2020/04/free-training.html 32 | * https://www.simplycyber.io/free-cyber-resources 33 | * https://www.cybrary.it/ 34 | 35 | 36 | ## real world knowledge 37 | * https://www.youtube.com/c/NetworkChuck/playlists 38 | * https://null-byte.wonderhowto.com/ 39 | * https://github.com/carlospolop/PEASS-ng 40 | 41 | 42 | ## actual playgrounds 43 | * https://tryhackme.com/ 44 | * https://www.vulnhub.com/ 45 | * https://overthewire.org/wargames/ 46 | * https://www.hackthebox.com/ 47 | * https://www.hackthissite.org/ 48 | * https://ctftime.org/ 49 | 50 | 51 | ## Certifications 52 | * [COMPTIA course - playlist](https://www.youtube.com/playlist?list=PLG49S3nxzAnlGHY8ObL8DiyP3AIu9vd3K) 53 | * [get certified in 30 days](https://www.youtube.com/watch?v=EcRPZY_NOEI) 54 | 55 | -------------------------------------------------------------------------------- /web/frontend/css-preprocessors.md: -------------------------------------------------------------------------------- 1 | --- 2 | 3 | [ ] add more resources 4 | --- 5 | >:warning: **Warning:** under construction 6 | 7 | # CSS Preprocessors 8 | _Cascading Style Sheets Preprocessors. For standard CSS, see [CSS](https://github.com/octoshrimpy/learn/blob/main/web/frontend/CSS.md)_ 9 | 10 | ### I'm Very ~~Lost~~ New 11 | 12 | Read: 13 | * [Start Here!](#start-here) at the bottom of this page 14 | * [SCSS Cheatsheet](https://dev.to/finallynero/scss-cheatsheet-7g6) 15 | * [Sass Functions Cheatsheet](https://cheatography.com/hamidyfine/cheat-sheets/sass-functions/) 16 | 17 | Watch: 18 | 19 | Do: 20 | 21 | --- 22 | 23 | ### Apprentice 24 | 25 | Read: 26 | 27 | Watch: 28 | 29 | Do: 30 | 31 | --- 32 | 33 | ### Maker 34 | 35 | Read: 36 | 37 | Watch: 38 | 39 | Do: 40 | 41 | --- 42 | 43 | ### Master 44 | 45 | Read: 46 | 47 | Watch: 48 | 49 | Do: 50 | 51 | --- 52 | 53 | ## Extra read 54 | 55 | ## Extra watch 56 | 57 | ## Extra todo 58 | 59 | --- 60 | 61 | ## Start Here! 62 | Welcome to CSS-Preprocessors! Above are plenty of links to help you get started. 63 | Everything in this repository is free, and you should not have to pay for anything. 64 | 65 | * Getting Started: 66 | 67 | * Name (or rename) your css file to .scss_ 68 | * [Install Live Sass Compiler for VSCode](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) ※ 69 | *You need the one by Glenn Marks; anything by Ritwick Dey is obsolete.* 70 | * Toggle 'Watch Sass' on the bottom toolbar of VSCode. 71 | 72 | #### TLDR: 73 | 74 | * sass is the preprocessor 75 | 76 | * scss stands for sassy css and uses the native css syntax, so your css files can be converted to scss with just a rename of file extension 77 | 78 | * everything you can do in css, you can do in sass/scss 79 | 80 | * the reason to use scss instead of sass is because sass uses a different syntax. no squiggly brackets, and the like 81 | 82 | * everything you can do in sass, you can do in scss 83 | 84 | _[back up to top](#css-preprocessors)_ 85 | 86 | --- 87 | 88 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 89 | -------------------------------------------------------------------------------- /web/frontend/UX_UI.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] add more resources to learn from 3 | [ ] cleanup links with proper names 4 | --- 5 | 6 | >:warning: **Warning:** under construction 7 | # UX/UI 8 | 9 | Read: 10 | * [github's Primer guidelines](https://primer.style/design/) 11 | * [ux checklist](http://uxchecklist.github.io) 12 | * [UX simplified](https://github.com/SteveBarnett/Checklists) - read the articles within each `.md` file for more info 13 | * [color and contrast](https://colorandcontrast.com/#/) - explanation of how the eye works, and how we perceive color (thanks [Mal](https://twitter.com/mdeandesign))! 14 | 15 | 16 | Watch: 17 | * [figma - A beginner's guide](https://www.youtube.com/watch?v=eZJOSK4gXl4) 18 | * [figma - creating robust components](https://www.youtube.com/watch?v=hnx5UWaP_jo) 19 | * [figma - Prototyping animations](https://www.youtube.com/watch?v=ps6p9e6QmgY) 20 | * [from idea to layout: How I approach designing a site](https://www.youtube.com/watch?v=KYFwcIRx16g) 21 | * [into to UI](https://youtu.be/o3VHJ7g7M08) 22 | * [user accessibility](https://youtu.be/cOmehxAU_4s) 23 | * [accessibility fundamentals](https://www.youtube.com/watch?v=z8xUCzToff8) 24 | 25 | 26 | Do: 27 | * https://userinyerface.com/ 28 | * https://www.freecodecamp.org/news/how-to-use-figma-to-design-websites/ 29 | * https://cantunsee.space/ 30 | --- 31 | 32 | Resources: 33 | * [webaim resources](https://webaim.org/resources/) 34 | * [scan sites for accessibility](https://accessibleweb.com/website-accessibility-checker/) 35 | 36 | --- 37 | 38 | ## design inspiration 39 | * https://www.awwwards.com/ 40 | * https://thegallery.io/ 41 | * https://www.typewolf.com/ 42 | * https://hoverstat.es/ 43 | * https://onepagelove.com/ 44 | * https://httpster.net/ 45 | * https://mindsparklemag.com/ 46 | * https://thefwa.com/ 47 | * https://siiimple.com/ 48 | * https://uijar.com/ 49 | * https://www.cssdesignawards.com/ 50 | * https://www.cssawards.net/ 51 | * https://www.cssdsgn.com/ 52 | * https://www.pages.xyz/ 53 | * https://land-book.com/ 54 | * https://flatui.com/ 55 | * https://www.siteinspire.com/ 56 | * https://www.landingfolio.com/ 57 | * https://www.lapa.ninja/ 58 | * https://www.calltoidea.com/ 59 | * https://onepagelove.com/ 60 | * https://collectui.com/ 61 | -------------------------------------------------------------------------------- /art/pixelart.md: -------------------------------------------------------------------------------- 1 | --- 2 | [ ] separate between easy and difficult 3 | --- 4 | 5 | >:warning: **Warning:** under construction 6 | # Pixel Art 7 | _Drawing in lower resolutions purposefully, also known as pixel pushing or spriting_ 8 | 9 | Read: 10 | * [Saint11's gif tutorials](https://saint11.org/blog/pixel-art-tutorials/) 11 | * [slynyrd's tutorials](https://www.slynyrd.com/pixelblog-catalogue) 12 | * [LPC styleguide](https://lpc.opengameart.org/static/LPC-Style-Guide/build/styleguide.html) 13 | * [Thoughts on very low resolution](https://blog.kano.me/my-thoughts-on-very-low-resolution/amp/) 14 | * [Color for the Color Challenged](https://ferdychristant.com/color-for-the-color-challenged-884c7aa04a56) 15 | * [how Celeste's tilesets work - article](https://aran.ink/posts/celeste-tilesets) 16 | * [Lux - Color for pixel artist: it's all relative](https://pixelparmesan.com/color-theory-for-pixel-artists-its-all-relative/) 17 | 18 | Watch: 19 | * [Mortmort's pixel art tutorials](https://www.youtube.com/playlist?list=PLR3Ra9cf8aV06i2jKmgKvcYVHI86-4K_b) 20 | * [BJPixel's tutorials](https://www.youtube.com/playlist?list=PLxfQIomHccxvoTON6hXhfZyAUdFXd-z1P) 21 | * [HeartBeast's pixelart series](https://www.youtube.com/watch?v=W9bpaSrytBM&list=PL9FzW-m48fn132PTRubDgTX9m4fwhFXSk) 22 | * [Top-down style analysis and tutorial](https://youtu.be/2JCG4fCmeHk) 23 | * [Pixel Art 101](https://www.youtube.com/playlist?list=PLmac3HPrav-9UWt-ahViIZxpyQxJ2wPSH) 24 | * [Pixel Art Critiques](https://www.youtube.com/playlist?list=PLmac3HPrav-9bIEd67mbF7ovn0XnD5_0V) 25 | * [How to choose good Colour Palettes](https://youtu.be/uUdMb8Bb2II) 26 | * [how Celeste's tilesets work - video](https://www.youtube.com/watch?v=S6NpEP5daVU) 27 | 28 | Do: 29 | * [Start here](https://lospec.com/articles/pixel-art-where-to-start/) 30 | 31 | 32 | --- 33 | 34 | ### Resources 35 | 36 | * [List of tools](https://lospec.com/pixel-art-software-list/) 37 | * [Secondary list of tools](https://github.com/collections/pixel-art-tools) 38 | * [Ready-to-use palettes](https://lospec.com/palette-list) 39 | * [Dawnbringer's palette analyzer](https://lospec.com/palettes/dawnbringer-palette-analyser) 40 | * [Sprite randomizer generator](https://lospec.com/procedural-pixel-art-generator/) 41 | * [Open source art for inspiration and use](https://opengameart.org) 42 | * [Extra resources](https://lospec.com/resources/) 43 | 44 | --- 45 | 46 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 47 | -------------------------------------------------------------------------------- /web/frontend/javascript.md: -------------------------------------------------------------------------------- 1 | --- 2 | completed 3 | --- 4 | 5 | # Javascript 6 | _the muscles of a website. for running it within a server environment, see [nodeJS](../backend/server_languages.md#nodejs)_ 7 | 8 | ### I'm Very ~~Lost~~ New 9 | 10 | Read: 11 | * [Start Here!](#start-here) at the bottom of this page 12 | 13 | Watch: 14 | * [ilovecoding.com](https://ilovecoding.org/courses/js2) - to lesson 5 15 | * [youtube.com](https://www.youtube.com/watch?v=xwKbtUP87Dk) - JS basics in 10 minutes 16 | * [youtube.com](https://www.youtube.com/watch?v=upDLs1sn7g4) - what is JS with Mosh 17 | 18 | Do: 19 | * [codecombat.com](https://codecombat.com) `game` 20 | * [JS Robot](https://lab.reaal.me/jsrobot/) `game` 21 | 22 | --- 23 | 24 | ### Apprentice 25 | 26 | Read: 27 | * [MDN quickstart](https://developer.mozilla.org/en-US/docs/Learn) 28 | 29 | Watch: 30 | * [ilovecoding.com](https://ilovecoding.org/courses/js2) - to lesson 5 31 | * [youtube.com](https://www.youtube.com/watch?v=hdI2bqOjy3c) - Traversy Crash Course 32 | 33 | Do: 34 | * [codecademy](https://www.codecademy.com/learn/introduction-to-javascript) - intro to JS 35 | * [codewars](https://codewars.com) - start at 8kyu (easiest) 36 | * [warriorJS.com](https://warriorjs.com) `game` 37 | 38 | --- 39 | 40 | ### Maker 41 | 42 | Read: 43 | * [EloquentJS](https://eloquentjavascript.net) - very in-depth 44 | 45 | Watch: 46 | * [youtube.com](https://www.youtube.com/watch?v=vDJpGenyHaA) - JS OOP with Mosh 47 | * [youtube.com](https://www.youtube.com/watch?v=tiRhFGnCltw) - Make sense of tricky JS 48 | 49 | Do: 50 | * [javascript.info](https://javascript.info) 51 | * [30in30](https://javascript30.com) - make 30 projects in 30 days 52 | * [JS challenger](https://www.jschallenger.com) 53 | * [codecademy](https://www.codecademy.com/learn/learn-intermediate-javascript) - intermediate JS 54 | * [FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) - first bits only 55 | * [Elevator Saga](https://play.elevatorsaga.com) `game` 56 | * [codewars](https://codewars.com) from Apprentice Level - 7kyu & 6kyu 57 | 58 | --- 59 | 60 | ### Master 61 | Read: 62 | * [advanced functions](https://johnresig.com/apps/learn/#1) - click next/previous/run on top right 63 | 64 | Watch: 65 | * [youtube.com](https://www.youtube.com/watch?v=1S8SBDhA7HA&list=PL0Zuz27SZ-6N3bG4YZhkrCL3ZmDcLTuGd) - Advanced JS concepts 66 | * [youtube.com](https://www.youtube.com/watch?v=M2bJBuaOeOQ&list=PLillGF-Rfqbb4ZOnsNCIB-DnLuUrQjS_G) - JS cardio sessions 67 | 68 | Do: 69 | * [screeps](https://screeps.com/a) `game` 70 | * [cyber-dojo](http://www.cyber-dojo.org/) `game` 71 | * [codingame](https://codingame.com/start) `game` 72 | * [codewars](https://codewars.com) from Apprentice Level - 5kyu & 4kyu 73 | * [FreeCodeCamp](https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/) - finish from Maker Level 74 | * [solve these leetcode problems](https://leetcode.com/discuss/general-discussion/460599/blind-75-leetcode-questions) 75 | 76 | --- 77 | 78 | ## Extra todo 79 | 80 | ## Extra watch 81 | 82 | ## Extra read 83 | 84 | --- 85 | 86 | 87 | 88 | ## Start Here! 89 | Welcome to javascript! Above are plenty of links to help you get started. 90 | Everything in this repository is free, and you should not have to pay for anything. 91 | 92 | Go ahead and read through these links: 93 | _※ - my personal preference_ 94 | 95 | * online playgrounds: _try code online in the browser_ 96 | * [codepen.io](https://codepen.io) ※ 97 | * [JS Fiddle](https://jsfiddle.net/) 98 | * [JS Bin](https://jsbin.com/?html,js,output) 99 | * [CodeSandbox](https://codesandbox.io/) 100 | * editors: _do code locally on your machine_ 101 | * [VS Code](https://code.visualstudio.com/) ※ 102 | * [Atom](https://atom.io) 103 | * resources when lost: 104 | * do not trust w3schools.com, as I have found their information to be wrong on a few occasions 105 | * [stackOverflow](https://stackoverflow.com/questions/tagged/javascript) is a trusted source, but pay attention to answer dates 106 | * [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference) - Mozilla Developer Network 107 | * [JSinfo](https://javascript.info/) 108 | * [massive JS cheatsheet](https://htmlcheatsheet.com/js/) 109 | * [linter](https://www.jslint.com) for checking your code for errors 110 | 111 | 112 | _[back up to top](#javascript)_ 113 | 114 | --- 115 | 116 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ -------------------------------------------------------------------------------- /web/frontend/CSS.md: -------------------------------------------------------------------------------- 1 | --- 2 | completed 3 | --- 4 | 5 | # CSS 6 | _Cascading Style Sheets. for preprocessors, see [CSS - preprocessors](https://github.com/octoshrimpy/learn/blob/main/web/frontend/css-preprocessors.md)_ 7 | 8 | ### I'm Very ~~Lost~~ New 9 | 10 | Read: 11 | * [Start Here!](#start-here) at the bottom of this page 12 | * [badcss](https://badhtml.com/bad-css-practices-to-avoid/) 13 | * [CSS zen garden](http://www.csszengarden.com) 14 | * [htmldog](https://htmldog.com/guides/css/beginner/) - use _next_ at bottom of page to navigate 15 | * [tutorialspoint](https://www.tutorialspoint.com/css/index.htm) - CSS Tutorial section on the sidebar 16 | 17 | Watch: 18 | * [youtube.com](https://www.youtube.com/watch?v=Z4pCqK-V_Wo) - CSS in 5 minutes - no notes, just watch 19 | * [youtube.com](https://www.youtube.com/watch?v=1PnVor36_40) - CSS in 20 minutes 20 | * [youtube.com](https://www.youtube.com/watch?v=C1rQQ_YpgcI) - how to not suck at colors 21 | 22 | Do: 23 | * [CSS Diner](https://flukeout.github.io/) `game` 24 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#basic-css) - Basic CSS 25 | * [codecademy](https://www.codecademy.com/learn/learn-css) - learn basic CSS 26 | 27 | --- 28 | 29 | ### Apprentice 30 | 31 | Read: 32 | * [MDN CSS basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) - Mozilla Developer Network 33 | * [shayhowe basics](https://learn.shayhowe.com/html-css/) - don't worry about the html too much 34 | * [tutorialspoint](https://www.tutorialspoint.com/css/index.htm) - CSS Advanced section on the sidebar 35 | * [htmldog](https://htmldog.com/guides/css/intermediate/) - use _next_ at bottom of page to navigate 36 | 37 | Watch: 38 | * [youtube.com](https://www.youtube.com/watch?v=yfoY53QXEnI) CSS crash course 39 | * [youtube.com](https://www.youtube.com/watch?v=Z4pCqK-V_Wo) - CSS in 5 minutes - pause and take notes from what you've learned so far 40 | * [youtube.com](https://www.youtube.com/watch?v=VQraviuwbzU) - tips on responsive layouts 41 | * [youtube.com](https://www.youtube.com/watch?v=z-xkbNLIB5w) - tips on designing websites 42 | 43 | Do: 44 | * [flexbox froggy](https://flexboxfroggy.com/) `game` 45 | * [flexbox defense](http://www.flexboxdefense.com/) `game` 46 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#applied-visual-design) Applied Visual Design 47 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#applied-accessibility) Applied Accessibility 48 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#css-flexbox) - CSS flexbox 49 | * [codecademy](https://www.codecademy.com/learn/learn-intermediate-css) - learn intermediate CSS 50 | 51 | --- 52 | 53 | ### Maker 54 | 55 | Read: 56 | * [shayhowe - advanced](https://learn.shayhowe.com/advanced-html-css/) - don't worry about html or jquery 57 | * [/learn - preprocessors](./css-preprocessors.md) - start working on this one 58 | * [tutorialspoint](https://www.tutorialspoint.com/css/index.htm) - CSS_3_ Tutorial section on the sidebar 59 | 60 | Watch: 61 | * [unfold](https://rupl.github.io/unfold/) - CSS transforms presentation, use arrow keys to navigate 62 | * [youtube.com](https://www.youtube.com/watch?v=jV8B24rSN5o) traversy crash course in CSS grid 63 | * [youtube.com](https://www.youtube.com/watch?v=jx5jmI0UlXU) CSS positioning 64 | * [youtube.com](https://www.youtube.com/watch?v=RhUuMl3R1PE) CSS grid complete guide - play in background and listen 65 | * [youtube.com](https://youtu.be/FK4YusHIIj0) - design a website using Figma 66 | 67 | Do: 68 | * [CSS Surgeon](https://codepip.com/games/css-surgeon/) `game` 69 | * [grid garden](https://cssgridgarden.com/) `game` 70 | * [flexbox zombies](https://mastery.games/flexboxzombies/) `game` 71 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#css-grid) - CSS grid 72 | 73 | --- 74 | 75 | ### Master 76 | 77 | Read: 78 | * [htmldog](https://htmldog.com/guides/css/advanced/) - use _next_ at bottom of page to navigate 79 | 80 | Watch: 81 | * [youtube.com](https://www.youtube.com/watch?v=Z4pCqK-V_Wo) - CSS in 5 minutes - if you don't recognize something, go search for it 82 | * [youtube.com](https://youtu.be/TgqeRTwZvIo) what is UX/UI 83 | * [youtube.com](https://youtu.be/I0-vBdh4sZ8) intro to UX/UI 84 | 85 | Do: 86 | * [CSS speedrun](https://css-speedrun.netlify.app/) `game` 87 | * [guess CSS](https://www.guess-css.app/) `game` 88 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-principles) responsive design principles 89 | * [freecodecamp](https://www.freecodecamp.org/learn/responsive-web-design/#responsive-web-design-projects) responsive design projects 90 | 91 | --- 92 | 93 | ## Extra read 94 | 95 | ## Extra watch 96 | 97 | ## Extra todo 98 | 99 | --- 100 | 101 | ## Start Here! 102 | Welcome to CSS! Above are plenty of links to help you get started. 103 | Everything in this repository is free, and you should not have to pay for anything. 104 | 105 | Go ahead and read through these links: 106 | _※ - my personal preference_ 107 | 108 | * online playgrounds: _try code online in the browser_ 109 | * [codepen.io](https://codepen.io) ※ 110 | * [JS Fiddle](https://jsfiddle.net/) 111 | * [JS Bin](https://jsbin.com/?html,js,output) 112 | * [CodeSandbox](https://codesandbox.io/) 113 | * editors: _do code locally on your machine_ 114 | * [VS Code](https://code.visualstudio.com/) ※ 115 | * [Atom](https://atom.io) 116 | * resources when lost: 117 | * do not trust w3schools.com, as I have found their information to be wrong on a few occasions 118 | * [stackOverflow](https://stackoverflow.com/questions/tagged/css) is a trusted source, but pay attention to answer dates 119 | * [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference) - Mozilla Developer Network 120 | * [css-irl](https://css-irl.info/tags/) 121 | * [massive CSS cheatsheet](https://htmlcheatsheet.com/css/) 122 | * [CSS-tricks](https://css-tricks.com) 123 | * [linter](http://csslint.net) for checking your styles for errors 124 | * [caniuse](https://caniuse.com) - not all browsers support everything 125 | * resources to make things with: 126 | * [30 selectors to know](https://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048) - great cheatsheet 127 | * icons 128 | * [lineawesome](https://icons8.com/line-awesome) ※ 129 | * [fontawesome](https://fontawesome.com) - hard to get started without an account 130 | * fonts 131 | * [matcherator](https://www.fontsquirrel.com/matcherator) - upload an image of a font, it will find matches 132 | * [google fonts](fonts.google.com) _my favorite is [Montserrat](fonts.google.com/specimen/Montserrat)_ :) 133 | * [figma](https://figma.com) - visually design layouts without worrying about code 134 | 135 | _[back up to top](#css)_ 136 | 137 | --- 138 | 139 | _Is there an error or something cool missing? Send an [issue](https://github.com/octoshrimpy/learn/issues/new)!_ 140 | --------------------------------------------------------------------------------