{"slug": "zero-to-hero-html-css-js", "title": "Zero to Hero -- HTML, CSS & JS", "summary": "This article outlines a learning path for web development, starting with basic HTML and CSS before progressing to JavaScript, jQuery, and Bootstrap. It emphasizes that the learning curve steepens significantly with modern JavaScript tooling and libraries like React, Vue, and Angular, which require command-line proficiency. The author recommends using a proper text editor like Atom, a non-Safari browser, and notes FreeCodeCamp as a valuable starting resource.", "body_md": "The start of the runway is pretty shallow, but it gets deep fast as soon as we hit the Javascript parts. You should be sure to have the following on your computer (I'm assuming a Mac, but if it's Windows, we can work with it).\n- Atom, Sublime 3 or some other better-than-plain-text editor. I recommed Atom: https://atom.io/\n- iTerm 2 - A vastly superior terminal for MacOS: https://www.iterm2.com/\n- A non-Safari browser: Chrome or Firefox will do. (Safari is the modern-day equivalent of IE back in the day. Horrorshow.)\n- Basic HTML.\n- Basic CSS.\n- CSS Framework(s) - Bootstrap\n- Flexbox.\n(Note: I'm not going to lie - FreeCodeCamp has almost everything you need to get started on the ground floor. If you go there and decide not to follow the rest of this outline, you're not doing yourself any harm at all.)\n- Basic JS - learning the basics of the language, syntax.\n- jQuery - Uses CSS selectors to manipulate the DOM. Also, teaches chaining, DOM nodes.\n- Bootstrap 2: Electric Boogaloo - Using the JS components from Bootstrap.\n- https://css-tricks.com/javascript-learning-landscape-2018/ - An overview of learning modern JS development.\n- http://jsforcats.com/\nUp until this point, all you've needed is a text editor of choice and a web browser. To get into the real hardcore modern JS development, we need to talk about tooling. Unfortunately.\n- https://www.telerik.com/blogs/how-to-javascript-in-2018 - Basic overview.\n- https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results - Another overview.\nI provide these mainly to give you an idea of the complexities involved in working with the most popular JS libraries (React, etc) - these all require using command-line tools to work effectively and efficiently. It's a broad landscape with lots of opinions that I won't push on anyone. Just know that the hockey-stick of learning gets steep for a bit, but once you have the concepts down (pre-compiler v. packager v. task-runner v. test-runner), you're more than halfway there.\n- https://vuejs.org/ - Vue.js\n- https://reactjs.org/ - React\n- https://angular.io/ - Angular", "url": "https://wpnews.pro/news/zero-to-hero-html-css-js", "canonical_source": "https://gist.github.com/elsewares/acc41e73717e1c9bc9dda5956e8fe282", "published_at": "2018-06-19 18:14:07+00:00", "updated_at": "2026-05-23 11:37:54.033835+00:00", "lang": "en", "topics": ["developer-tools", "open-source"], "entities": ["Atom", "Sublime 3", "iTerm 2", "Chrome", "Firefox", "FreeCodeCamp", "jQuery", "Bootstrap"], "alternates": {"html": "https://wpnews.pro/news/zero-to-hero-html-css-js", "markdown": "https://wpnews.pro/news/zero-to-hero-html-css-js.md", "text": "https://wpnews.pro/news/zero-to-hero-html-css-js.txt", "jsonld": "https://wpnews.pro/news/zero-to-hero-html-css-js.jsonld"}}