--- layout: post title: "An Absolute Beginners' Complete Web Development Resource List" alt_title: "An ABC Web Dev't Resource List" date: 2018-07-2 9:56:34 +0800 author: foo-dogsquared categories: general tags: [programming-notes, computer-science, real-notes] updatedOn: Jul 3, 2018 --- Another resource list? What is the difference of this and [that one]({% post_url 2018-05-1-free-resource-list %})? This resource list, as you might have read from the title, is aimed towards beginners who wants to begin some web design, web development, or programming, in general. This curated list contains tutorials and stuff that makes a beginner follow the reference smoothly. As said in the previous resource list, don't be overwhelmed, at least by a whole lot. Yes, you still feel overwhelmed and that's inevitable but hopefully, not because of the number of the resources listed here. You don't need to pick all of them, just pick a few. The resources in the same category says the same pretty much, anyway. 😁 ## Absolute beginner? Start here! ### Don't know why you want to do this? - [This roadmap might be able to help you decide](https://github.com/kamranahmedse/developer-roadmap) The first thing that you'll learn about is HTML and CSS. They are often bundled together since you can about HTML in a day (seriously). You will not be a master in a day but it's enough to move on to CSS. Majority of the links included below often features them together for that reason. But still even if you don't have any decision on that and have to do it for other reasons (such as school grades, work requirements, and just for the gist for it). You can still continue down in this list that is categorized according to how they present their information. ### Text-based References - [CSS for the Web](https://sabe.io/classes/css) - [How to make a super simple website by *Coder Coder*](https://coder-coder.com/how-to-make-simple-website-html/) - [HTML for the Web](https://sabe.io/classes/html) - [This structured hubpage on *MDN*](https://developer.mozilla.org/en-US/docs/Learn) --- though if you want to follow some tutorials in an opinionated order, here you go: - [Learning the Web](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web) --- this is an important stage if you to progress forward as a web developer - [Introduction to HTML](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML) - [Introduction to CSS](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS) - [Sabe.io](http://sabe.io/) --- a site with a bunch of tutorials on HTML, CSS, JavaScript, and hey, PHP - [W3Schools](https://www.w3schools.com) --- it's enough to introduce you to show you the ropes but don't rely on it too much ### Video Tutorials - [CSS Fundamentals Tutorials Playlist by *LevelUpTuts*](https://www.youtube.com/watch?v=x9HmYfSN4Gk&list=PLLnpHn493BHH6DkHPhduhco5XavNA9JaD) - [CSS3 Basics Playlist by *DevTips*](https://www.youtube.com/watch?v=s7ONvIgOWdM&list=PLqGj3iMvMa4IOmy04kDxh_hqODMqoeeCy) - [CSS3 Tutorials Playlist by *LevelUpTuts*](https://www.youtube.com/watch?v=x9HmYfSN4Gk&list=PLLnpHn493BHH6DkHPhduhco5XavNA9JaD) - [How to Make Your First Website by *LevelUpTuts*](https://www.youtube.com/watch?v=0aUtQPZcqxE&list=PLLnpHn493BHGlqEn4EE7dRUnPn4o_tKM0) - [HTML5 Basics Playlist by *DevTips*](https://www.youtube.com/watch?v=NzzGt7EmXVw&list=PLqGj3iMvMa4KlJn1pMYPVV3eYzxJlWcON) - [HTML5 Tutorials Playlist by *LevelUpTuts*](https://www.youtube.com/watch?v=0aUtQPZcqxE&list=PLLnpHn493BHGlqEn4EE7dRUnPn4o_tKM0) - [Intro to CSS on *Scrimba* (a screencast website with interactive code)](https://scrimba.com/g/gintrotocss) - [Intro to HTML on *Scrimba*](https://scrimba.com/g/ghtml) ### E-Books (More or less text-based but offline) - [CSS Notes For Professionals](https://goalkicker.com/CSSBook/CSSNotesForProfessionals.pdf) --- same with this one - [HTML5 Notes For Professionals](https://goalkicker.com/HTML5Book/HTML5NotesForProfessionals.pdf) --- hey, despite it says it's for the professionals, you can still use it as a reference material - [The Front-End Developer Handbook](https://www.gitbook.com/book/frontendmasters/front-end-developer-handbook-2018/details) ### Phone Apps - [Grasshopper](https://grasshopper.codes/) - [Coding Planets by *Min Thura Zaw*](https://play.google.com/store/apps/details?id=com.material.design.codingplanet&hl=en_US) --- Android only ## Pick Your Tools! Basically this image:

This is what you are here for, yeah?

But seriously speaking, here are some of the tools that can help you in your budding growth as a web developer. Just take note that these tools do not entirely define your path as a developer so don't rely on it a bit too much. That said do note to get comfortable using them to level up further your productivity, it'll take a while but it'll be worth it 😁: - [Visual Studio Code](https://code.visualstudio.com/) --- really recommended; stable performance, cross-platform (can be found on Windows, Mac, and Linux), powerful features, and customizable - [Atom](https://atom.io/) --- another text editor rivalling VS Code, being free and customizable - [Notepad++](https://notepad-plus-plus.org/) --- another free code editor with syntax highlighting and plugins Some of you might ask for a plugin list but try to learn without the plugins first. Oh fine, here's some of them: - [This list of stuff for Visual Studio Code](https://github.com/viatsko/awesome-vscode) - [This list of stuff for Atom](https://github.com/mehcode/awesome-atom) - [This plugins hub for Notepad++](http://docs.notepad-plus-plus.org/index.php?title=Plugin_Central) ## Want to level up a bit? Then try to **learn JavaScript**, even if you are decided to go on design instead of say building and creating algorithms, you are still going to encounter JavaScript code and program things with JavaScript. It is considered as one of the front-end development toolkit, after all. Plus, selling yourself in the real industry only knowing HTML and CSS is like suicide so don't do it... Anyways, don't know where to start? Here are some of them based on your learning preferences, of course I recommend to check them all out: ### Text-based References - [Introduction to JavaScript by *MDN*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps) --- your beginner steps - [JavaScript Building Blocks by *MDN*](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks) --- recommended after reading the first one - [JavaScript for the Web](https://sabe.io/classes/javascript) - [JavaScript Introduction in *W3Schools*](https://www.w3schools.com/js/js_intro.asp) - [JS For Cats](http://jsforcats.com/) --- if you are cat, then this is for you ### Video tutorials - [Beginner's Guide to JavaScript video from *Treehouse*](https://www.youtube.com/watch?v=UOeofWla8mE) - [JavaScript 30 by *Wes Bos*](https://javascript30.com/) --- it is more of a course but still, video tutorials 😁 - [JavaScript for Beginners Playlist from *Learncode.Academy*](https://www.youtube.com/watch?v=fGdd9qNwQdQ&list=PLoYCgNOIyGACnrXwo5HMCfOH9VT05znGv) - [JavaScript Fundamentals for Beginners video from *Traversy Media*](https://www.youtube.com/watch?v=vEROU2XtPR8) ### E-books (still more like text-based but you know) - [Eloquent JavaScript](http://eloquentjavascript.net/) --- yes, it's a free book; hallelujah for the author - [JavaScript Notes For Professionals](https://goalkicker.com/JavaScriptBook/JavaScriptNotesForProfessionals.pdf) - [You Don't Know JS](https://github.com/getify/You-Dont-Know-JS) --- IDK where to put this but this is originally a book series only hosted on GitHub for free ## Want to go up to eleven? Then you can try some more interactive form of learning, some of those examples are: - [Codecademy](http://www.codecademy.com/) - [freeCodeCamp](https://www.freecodecamp.org/) Or you can start with a bit of a project haul challenge, if you're feeling brave: - [Mozilla Learning Activities](https://learning.mozilla.org/en-US/activities) - [This article that lists a bunch of unique ideas](https://medium.freecodecamp.org/want-to-build-something-fun-heres-a-list-of-sample-web-app-ideas-b991bce0ed9a) - [This GitHub repo **Projects** by *karan*](https://github.com/karan/Projects) - [This reddit post](https://www.reddit.com/r/learnprogramming/comments/2a9ygh/1000_beginner_programming_projects_xpost/) ## Final words This is all of the resources I can recommend for now. I'm sure it will be expanded at some point. And if you think the contents of this post if this is too much or too little for the newcomers, feel free to contact me from one of the sites listed at the footer to voice out what do you think is something wrong here. I don't know if this will help fellow new developers but at least I tried. 😣 Oh well, if you're reading this, then good luck to your journey of whatever you want to be. 😁