Self thought Front End Development learning curriculum & resources in 2018

Complicated railway path. images source: pexels.com

What is Front End Development:

Before talking the Front End Technologies we need to understand what is Front End Development, which thing done by a Front End Developer. why need a Front End Developer? according to wikipedia :

Front-end web development, also known as client-side development is the practice of producing HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly. The challenge associated with front end development is that the tools and techniques used to create the front end of a website change constantly and so the developer needs to constantly be aware of how the field is developing.
The objective of designing a site is to ensure that when the users open up the site they see the information in a format that is easy to read and relevant. This is further complicated by the fact that users now use a large variety of devices with varying screen sizes and resolutions thus forcing the designer to take into consideration these aspects when designing the site. They need to ensure that their site comes up correctly in different browsers (cross-browser), different operating systems (cross-platform) and different devices (cross-device), which requires careful planning on the side of the developer.
— — — Wikipedia

How the web works:

After learning how to web works you should know what is web browser? how they work and how you work with them very easily? look at those blog post below:

Learn Command Line:

Learn Chrome Dev Tools:

Now we know a front end developer mostly work with HTML, CSS and JavaScript. So we must know basic HTML, CSS and JavaScript. here I show you three free tutorials or resources for every FE tech topic. we know is a great resource for web development. but here I not include Mozilla Developer Network resources. if you interested about MDN documentation than please visit official MDN web development guide click below:

Learn the basics of HTML:

HTML is structure to your pages and we should learn tags, attribute and so more. most preferably you must know:

  • how to write semantic HTML
  • Understand how to divide page into sections and how to structure the DOM properly

Resources:

  1. W3schools HTML5 tutorials
  2. Codecademy: Learn HTML
  3. Coursera: Introduction to HTML5

Practice:

After completely learning from any of those resources you must test your skill using some practice techniques. you can create at least 5 web pages and complete basic HTML5 challenges from freeCodeCamp beta.

Learn the basics of CSS:

Now that we have learnt how to style our html pages and looks beautiful. CSS — Cascading stylesheets are used to add beauty to your HTML pages.

  • First thing that you will have to do is learn about the syntax and familiarize yourself with the common CSS properties.
  • Learn about the box model and how to prepare layouts using Grid and Flexbox
  • Once you are done with that, learn how to make your websites responsive with media queries.

Resources for basic CSS:

  1. W3schools CSS3 tutorials
  2. Codecademy: Learn CSS3
  3. Coursera: Introduction to CSS3

Resources for Grid & Flexbox:

  1. A Complete Guide to Flexbox from CSS-TRICS
  2. A Complete Guide to Grid from CSS-TRICS
  3. Wesbos: What is Flexbox
  4. Wesbos: CSS Grid

Practice:

Now we already know HTML5 (Tags, Attributes, Semantic Structure etc) and CSS3 (Selector, Class, Id, Flexbox, Grid and more beautiful things). So lets create at least 5 web pages using your smart head and practice basic CSS3 challenges from freeCodeCamp beta.

And last but not least practice some flexbox and grid online game like:

  1. Flexbox Froggy
  2. Flexbox Defense
  3. Grid Garden
  4. Grid by Example

Practice and Building Projects

  1. Cloning a nice looking web page
  2. Build a Tribute Page (FCC Project)
  3. Build your Personal Portfolio (FCC Project)

Learn Basic JavaScript:

Resources:

  1. W3schools: Learn JavaScript
  2. Codecademy: Introduction to JavaScript
  3. Coursera: Interactivity with JavaScript

Books:

  1. YKDJS Series
  2. Eloquent JavaScript: 3rd Edition(ES6 +)

Bonus Courses:

  1. Wesbos: JavaScript30
  2. Watch and Code: Practical JavaScript

Practice:

  1. freeCodeCamp basic JavaScript Challenges
  2. Hackerrank: 10 DAYS OF JAVASCRIPT

Responsive Web Design:

Resources:

  1. Udacity: Responsive Web Design Fundamentals
  2. Coursera: Advanced Styling with Responsive Design
  3. Bootstrap
  4. Material Design For Bootstrap 4
  5. RRFonline: PSD to HTML

CSS Pre-Processor:

  1. Codecademy: Learn SaSS
  2. Official SaSS Documentation
  3. Sass Online Playground: SassMeister

CSS Organizer:

  1. BEM: Block Element Modifier
  2. CSS Code Guide

CSS Bonuses:

  1. Name of my Color
  2. Color Theory

Basics of jQuery

  1. Official jQuery Learning Center
  2. W3schools jQuery tutorials
  3. Codecademy: Intro to jQuery

Intermediate JavaScript:

  1. Learn ES6
  2. Practical Modern JavaScript
  3. Wes Bos: ES6 for Everyone

JavaScript Testing:

  1. Udacity: JavaScript Testing
  2. ESLint Official documentation
  3. My Own Collections of JS testing

Learn JSON API and Ajax

Days of static web pages are long gone! We need to build modern apps and sites that update with clicks, not with reloading. We need to fetch data from multiple sources at once. And we’ll learn all that via API and Ajax.

Resources:

  1. JSON: Official Docs & Traversy Media + W3schools
  2. AJAX: Traversy Media + W3schools

Learn Git and GitHub

We’ve learned a lot so far and now we do a lot of coding everyday. We need a way to keep our code organized for different projects. And to do that, we’ll learn git and put all our code on GitHub. It’ll also help us a build a good looking profile on GitHub. It’s important because recruiter will look at your GitHub page to see how your code is and how often do you code. So, The early we start, the better.

Resources:

  1. CodeSchool: Try Git from
  2. Codecademy: Learn Git
  3. Git Official Docs & Pro Git book
  4. A developer’s introduction to GitHub

Practice and Project Building

We’ve learned powerful tools since the last time we’ve built anything. Now it’s a good time to put everything into test again. Let’s build some cool stuff using everything we’ve learned.

  1. Build a random quote Machine (FCC Project)
  2. Build a weather app (FCC Projects)
  3. Wikipedia Viewer (FCC Project)
  4. Use twitch.tv JSON API

These are real world useful applications that makes it appropriate to call yourself a web ninja!

JavaScript Tooling:

  1. Webpack
  2. Grunt
  3. Gulp And This Scotch.io tutorials

Learn UI/Interaction Principle:

Remember the last time you built a project and your friend was amazed to see what you’ve done? But did s/he made any compliment on how cool your project looks? Maybe not, right? That’s fine because you are not a designer. But look is important. In fact, that’s what Front-End is all about, isn’t it? That is exactly why we are going to learn a little bit about UI and UX. Most company would have their personal graphics designer to design their site, but we will still need to create interface on our own sometime. Be it in our workplace, or for our next personal project.

And even if don’t have to, having these knowledge will help you collaborate with the designer in teamwork, which will set you apart from other typical developers in the room. Having a good idea about UI and UX will also push you one step forward to the Full-Stack track. Here is some great article to start with:

This section will contain more article worth reading, tutorials, Book recommendations, Free courses and other types of resources.

JavaScript Library: React.JS

Resources:

Start with this blog post or learn from below list of courses.

  1. Codecamedy: Learn Learn ReactJS: Part I & Part: 2
  2. React.js: Official Tutorial
  3. Scotch.io: Learning React.js
  4. Egghead.io: Start Learning React.js
  5. Egghead.io: Beginner's guide to React.js
  6. CSS-TRICS: React Guides
  7. Wesbos: REACT FOR BEGINNERS [Regular Price: $89, more than 70% discount available]

State Managment Tools:

  1. Redux: Getting Started with Redux
  2. Wes Bos: Learn Redux
  3. Mobx: Manage Application State with Mobx-state-tree

REST APIs:

  1. How I Explained REST to My Wife

Progressive Web Apps Training:

  1. https://developers.google.com/web/ilt/pwa/

Now time to Practice, Practice and Practice

  1. Build a JavaScript Calculator
  2. Build a Pomodoro Clock
  3. Build a Tic Tac Toe Game
  4. Build a Simon Game

JavaScript Testing Tools:

  1. Jest
  2. Enzyme

Bonus React.js Projects:

  1. Build a Markdown Previewer
  2. Build a Camper Leaderboard
  3. Build a Recipe Box
  4. Build Game of Life
  5. Build a Roguelike Dungeon Crawler Game

Interview Preparation:

  1. JavaScript Interview Guide
  2. My Own Collection

Related Articles:

  1. The 2018 Web Developer Roadmap
  2. Modern Frontend Developer in 2018
  3. Mastering Full Stack Engineering in 12 to 20 weeks for beginners and experienced alike.
  4. Front End Developer Handbook 2018

Remote Job Tips:

  1. https://medium.freecodecamp.org/the-most-powerful-tips-to-help-you-get-a-remote-job-9e7161296c81
  2. https://dev.to/colinmtech/how-i-find-six-figure-remote-software-developer-jobs-23jd