How to become a Web Developer from scratch

So you want to start developing web sites, what should you know?


JavaScript is a programming language that can be used for both forntend and backend development, it’s the first thing you should learn.

  1. CodeSchool or Treehouse’s Javascript learning path (paid) OR Codecademy’s Javascript course
  2. Eloquent JavaScript
  3. You Don’t Know JS
  4. JS: The Right Way
  5. Learn ES6 by


HTML & CSS are the building blocks of the web pages we see when we browse the internet, you should have knowledge in both to develop websites.

  1. CodeSchool or Treehouse’s HTML & CSS learning path(Paid) OR HTML and CSS: Design and Build Websites by John Ducket OR Codecademy’s HTML & CSS course.
  2. Specifics on CSS Specifity by CSS Tricks
  3. Learn CSS Layout
  5. 9 basic principles of responsive web design by Front
  6. Responsive Web Design Fundamentals by Google on Udacity (Take if you didn’t use CodeSchool or Treehouse learning path)
  7. Managing Mobile Performance Optimization by Smashing Magazine OR Browser Rendering Optimization and Website Performance Optimizationby Google on Udacity
  8. Web fundamentals by Google

AngularJS (FrontEnd Framework)

AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. AngularJS’s data binding and dependency injection eliminate much of the code you would otherwise have to write.

  1. Design Decisions in AngularJS by Google Developers (Intro to AngularJS)
  2. AngularJS fundamentals by
  3. John Papa’s Angular Styleguide
  4. Creating a Single Page Todo App with Node and Angular (MEAN) by
  5. AngularJS application structure by (Paid) OR’s Angular Courses

ReactJS (FrontEnd Framework)

React is a declarative, efficient, and flexible JavaScript library for building user interfaces.

  1. Learning React.js: Getting Started and Concepts by
  2. Intro to webpack by
  3. React Fundamentals by
  4. Leveling Up with React: Redux by CSS Tricks

Back End

You should have some backend knowledge to fully understand how web apps are developed.

  1. NodeJS tutorials by
  2. How I explained REST to my Wife
  3. Creating a Single Page Todo App with Node and Angular by (Node, ExpressJS, MongoDB, Angular, REST)

Developer Tools ( Your working environment)

  1. Explore and Master DevTools by CodeSchool
  2. Learn Git by Codecademy and Try Github by Codeschool
  3. Introduction to Linux Commands by Smashing Magazine
  4. Automate Your Tasks Easily with Gulp.js by

And some more useful things:

  • Web Design in 4 minutes. A very creative and original interactive tutorial that teaches you the fundamentals of web design.
  • Awwards. Looking for web design inspiration? Look no further.
  • Why Hiring is so hard in tech by Eric Elliott. Here Eric is does an amazing job at summarizing how it’s surprisingly hard to find great developers, and how to become one.
  • NoSQL database systems mega comparison by Kristof Kovacs. This is a superb comparison between the most popular NoSQL database systems out there. MongoDB, Redis, CouchDB, Cassandra, ElasticSearch, they and more are all here.
  • XSS Game. Cross-site scripting (XSS) bugs are one of the most common and dangerous types of vulnerabilities in Web applications. Using this awesome resource you can learn how to find and exploit XSS bugs, and how to prevent them from happening to your web application.
  • How To Write Unmaintainable Code. Hilarious article on how not towrite maintainable, clean code.

  • Jetbrains Webstorm: Full featured Web Development IDE. (My editor of choice) Paid, but offers a 1 year free license for students.
  • Highly extensible text editor with IDE like features rivaling Webstorm. Free.
  • Sublime Text: Lightning fast text editor with plugins support and an aesthetically pleasing look. (I normally keep Webstorm/Atom installed as IDE for serious work, and Sublime Text installed for quick edits to files.)
  • Browser support is critical for websites, and this is the #1 resource at figuring out what features are supported by which browser version and which are.
  • Cloud 9: Cloud based development environment and IDE with Git support that runs on Linux. Great for programming remotely and testing out NodeJS or other server side things without needing to install anything on your machine
  • CodePen, Plunker and JSFiddle: Great cloud based front end playgrounds that let you do quick HTML/CSS/JS demos you can share, or work on later on if you create a free account. CodePen is often best for CSS related things because of it’s minimalistic interface and plethora of CSS related features, Plunker for JavaScript demos because of it’s powerful JS features, and JSFiddle for demos that you wish to collaborate with others in real time thanks to it’s live editor sharing collaboration feature.
  • Vanilla List: A repository of JavaScript plugins and libraries using only vanilla JavaScript (meaning they require no libraries to work, like jQuery)
  • YouMightNotNeedjQuery: You probably don’t. See for yourself.
  • PublicAPIs: Ever wondered what public APIs exist? Look no further!
  • Cloud based design application rivaling adobe illustrator. (Free!) Useful for quick mockups and web design.
  • Adobe Kuler: Webapp to help you create harmonious color combinations for any website. Also has an “Explore” showcase of color palettes built by other designers as well as a ranking system to help inspire you.
  • Name that color: Stop spending lots of time figuring out how to name your color variables in less/sass and just use their rightful name.
This list was gathered by Sergei Garcia.


If you are looking for anew adventure you are welcomed to signup to and evaluate how these opportunities will impact your future career.

Leave a Reply