Four FREE practical courses about modern web development that will put you on the track of the web modern development. AngularJS, Progressive Web Applications (a.k.a. PWA), Javascript with ES6 new features, Firebase and React.js. All of these cover from basic to advanced aspects of the web development, but necessary if you want to be on top.
Shaping up with AngularJS
This is a free course from Code School a PluralSight company. I know Angular is about its 4 version but there is a lot of projects using the firsts versions of this framework. Also AngularJs is quite different than the Angular.io so it's good to learn about it. It's not necessary to learn AngularJs to learn Angular.io but it gives you an idea about from where is coming all of this and can give you an idea about how this kind of frameworks works.
Shaping Up with Angular.js is a practical base course to learn about the basics concepts and patterns used with this framework. Modules, expressions, services, directives and controllers and bindings are the terms you'll see during this practical course. As the course progresses, a demo application is being built applying everything learned.
Link https://www.codeschool.com/courses/shaping-up-with-angularjs
Progressive Web Applications training
Google Devs site provides you this full extended practical free course about what are Progressive WebApps (PWA). In this course you will learn what an application needs to do to be a PWA and a set of tools andtips to work with. Of course, with examples linked to its products. PWA are not any concrete API but a compound of native browsers features that used in web applications allows you to build reliable, fast and consequently engaging apps.
The course consists of a series of slides, videos and practical lab exercises you can download from this GitHub repository.
In these labs you will practice things like service workers, the fetch API, promises, indexedDB or the native payments request API. It really worth it to learn about all of these browser features, some of them really unknown for web developers. Also it gives an overview to the use of resources to build responsive web designs as well as the use of tools like the PWA Analysis Tool or Gulp.
This course is not for beginers as you should have a good knowledge about how HTML, Javascript and CSS works.
Link https://developers.google.com/web/ilt/pwa/
30 days of Javascript
Getting skilled with Javascript will give you an extra power to be able to learn about most of the frontend frameworks as are based in this language. Also, most of the concepts applying to the language working on the browsers, work also in the Node.js engine, so you will learn potential use of the language in the frontend and in the backend.
30 lessons, one per day, will show you almost everything about Javascript and its Ecmascript 6 new features. Each lesson is a practical video tutorial where you will get fun while you are bringing your browser powers to do awesome things and learning tips and tricks of this language.
The author of this course is Wes Bos.
Wes Bos, working next a sunnyand cool window.
This guy is really good at this. He has many courses and tutorials and he also runs a podcast, together with Scott Tolinski, called Syntax ( iTunes link, and RSS link )
Link https://javascript30.com/
MiniCurso: React.js + Firebase
Carlos Azaustre offers a short, but really interesting free email course about React.js and Firebase. It's really short, but it gives you a really good point to start with the React.js library and discover how it works. Also it shows the main features provided with the Firebase platform, a really useful resource, to provide a nice and easy to use backend for your experiments, prototypes or startups projects.
This guy is really awesome too. One reference in Spain about the web development with Firebase, React.js library and Javascript. He's the cofounder, together with his partner Paola, of the Chefly app.
Chefly, catering and home made food providers in an App
Link http://cursos.carlosazaustre.es/p/react-firebase1
Bonus track
3 funny interactive online courses/trainings to learn the use of the Source Control Manager Git, and two powerful resources provided with the CSS features, the flexbox property and the newest CSS grid.
Git course
Another practical course from Code School a PluralSight company. In this case, you will learn in an interactive console on the same web how to use Git. You will use the basics and usage commands trying to help the GitHub mascot, Octocat, to live a funny adventure.
Flexbox Froggy
The guys from CodePip built the two following resources. In this case, also in an interactive CSS editor, you will lead a green frog(s) to jump from a water lily to another at the same time you are learning how to use the Flexbox CSS properties.
CSS Grid Garden
Now it's the turn to water the carrots in your garden. CodePip brings you in this case a funny training to learn the newest features present in the CSS specification to build responsive grids natively without the support of external CSS frameworks. Water your carrots and avoid the weeds!