cd /news/developer-tools/zero-to-hero-html-css-js · home topics developer-tools article
[ARTICLE · art-11270] src=gist.github.com ↗ pub= topic=developer-tools verified=true sentiment=· neutral

Zero to Hero -- HTML, CSS & JS

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.

read2 min views21 publishedJun 19, 2018

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).

- Atom, Sublime 3 or some other better-than-plain-text editor. I recommed Atom: https://atom.io/
- iTerm 2 - A vastly superior terminal for MacOS: https://www.iterm2.com/
  • A non-Safari browser: Chrome or Firefox will do. (Safari is the modern-day equivalent of IE back in the day. Horrorshow.)
  • Basic HTML.
  • Basic CSS.
  • CSS Framework(s) - Bootstrap
  • Flexbox. (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.)
  • Basic JS - learning the basics of the language, syntax.
  • jQuery - Uses CSS selectors to manipulate the DOM. Also, teaches chaining, DOM nodes.
  • Bootstrap 2: Electric Boogaloo - Using the JS components from Bootstrap.
- https://css-tricks.com/javascript-learning-landscape-2018/ - An overview of learning modern JS development.
- http://jsforcats.com/

Up 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.

- https://www.telerik.com/blogs/how-to-javascript-in-2018 - Basic overview.
- https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results - Another overview.

I 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.

- https://vuejs.org/ - Vue.js
- https://reactjs.org/ - React
- https://angular.io/ - Angular
── more in #developer-tools 4 stories · sorted by recency
── more on @atom 3 stories trending now
sponsored brought to you by zahid.host 4,200+ EU-deployed projects
reading about agents? ship yours in a single git push.

Run your AI side-project on zahid.host

EU-based hosting, git-push deploys, automatic HTTPS, no cold starts. Free tier with a custom domain — perfect for shipping the agent you just read about.

$git push zahid main
Live at https://your-agent.zahid.host
Get free account → Pricing
from €0/mo · no card required
LIVE [news/zero-to-hero-html-cs…] indexed:0 read:2min 2018-06-19 ·