7 Days Front-end Roadmap

roadmap.md

Front-end 7 Days Roadmap

• Day 1:
  • Recap HTML5 and CSS3 specifications: along with new elements added in html5, and flex box, css variables and css grid
  • Read about a CSS Preprocessor such as sass or less
  • Resources :
    • Sass crash course by DesignCourse
    • Sass course
    • MOZILLA new HTML5 api's
    • Grafikart: css grid
• Day 2:
  • Recap javascript basics and inheritance model
  • New api's introduced in ES6 and ES7
  • Resources:
    • Grafikart javascript tutorial
    • WesBos javscript series
    • Free Code Camp es6,7 tutorial
• Day 3:
  • Read about React's basics (components, event handling, data-binding, rendering, jsx ...)
  • Resources:
    • React Documentation
    • Programming with Mosh's React crash course
• Day 4, 5:
  • Put all of what you learned into a single small application
  • The application is a todo app, you can create a todo item, mark a todo item as done and remove the item from the list, the application should display the count of the item's listed as not yet done and should persist the data in localStorage
  • style your app using css or sass so it does not look terrible 🤣
  • make sure the code is clean and the components are seperated well .
• Day 6:
  • Read about more advanced React Stuff: (routing, state management, talking to api's, HOC ...)
  • Resources:
    • Gentle introduction to react router v4
    • Understanding Redux
    • Fetching data in React
    • Axios a promise-based Http Client
• Day 7:
  • Explore what you learned into making the data in the todo items stored/fetched from a remote service .
  • add a master detail view when clicking the todo-item the description and title should appear to the left of it and the url should change to /todos/:id id is the id of the todo item .