So you want to start developing web sites, what should you know?
- You Don’t Know JS
- JS: The Right Way
- Learn ES6 by Egghead.io
HTML & CSS
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.
- 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.
- Specifics on CSS Specifity by CSS Tricks
- Learn CSS Layout
- 9 basic principles of responsive web design by Front
- Responsive Web Design Fundamentals by Google on Udacity (Take if you didn’t use CodeSchool or Treehouse learning path)
- Managing Mobile Performance Optimization by Smashing Magazine OR Browser Rendering Optimization and Website Performance Optimizationby Google on Udacity
- 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.
- Design Decisions in AngularJS by Google Developers (Intro to AngularJS)
- AngularJS fundamentals by Egghead.io
- John Papa’s Angular Styleguide
- Creating a Single Page Todo App with Node and Angular (MEAN) by Scotch.io
- AngularJS application structure by Egghead.io (Paid) OR Scotch.io’s Angular Courses
ReactJS (FrontEnd Framework)
- Learning React.js: Getting Started and Concepts by Scotch.io
- Intro to webpack by Egghead.io
- React Fundamentals by Egghead.io
- Leveling Up with React: Redux by CSS Tricks
You should have some backend knowledge to fully understand how web apps are developed.
- NodeJS tutorials by NodeSchool.io
- How I explained REST to my Wife
- Creating a Single Page Todo App with Node and Angular by Scotch.io (Node, ExpressJS, MongoDB, Angular, REST)
Developer Tools ( Your working environment)
- Explore and Master DevTools by CodeSchool
- Learn Git by Codecademy and Try Github by Codeschool
- Introduction to Linux Commands by Smashing Magazine
- Automate Your Tasks Easily with Gulp.js by Scotch.io
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.
- Atom.io: 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.)
- caniuse.com: 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
- YouMightNotNeedjQuery: You probably don’t. See for yourself.
- PublicAPIs: Ever wondered what public APIs exist? Look no further!
- Gravit.io: 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 futury.io and evaluate how these opportunities will impact your future career.