Based on the article modern frontend developer in 2019 by brother @kamranahmedse.
Follow me on Twitter👉
Just study each topic and check them as done ✅. As for the tasks, complete them and put the links at the right side of the task instructions. So like this -
- Create a webpage that uses GitHub Repositories API to fetch and show the top 10 repositories of the current week in a nice responsive format. --> solution // link of your solution or project
- Learn the basics
- Writing Semantic Html
- Basic SEO
- Accessibility
- Learn the basics
- making layouts -> Floats, Positioning, Display, Box Model, CSS Grid, Flex Box
- Media Queries
- Learn CSS 3
- Syntax and Basics Constructs
- ES6+ and moduler Javascript
- Learn DOM manipulation
- Learn Fetch Api / ajax
- Understand hoisting, Event bubbling, Scope Prototype, Strict Mode
- How browsers work
- What is HTTP, how does it work?
- What is JSON and XML
- What is DNS, how does it work
- Pick and complete the frontendmentor challenges --- for UI & UX
- Create a Pomodoro Application. You may clone and make the web version of this application
- Create a webpage that uses GitHub Repositories API to fetch and show the top 10 repositories of the current week in a nice responsive format.
- Create a simple to-do list application that allows you to add tasks, mark them complete, edit them and delete them.
- Create a simple stopwatch where the user can start, stop, pause and reset.
- Package managers -> npm/yarn
- CSS architecture -> BEM
- CSS Frameworks -> Bootstrap/TailwindCSS
- CSS Pre-processors -> SASS/PostCSS
- Create some phase 1 projects using Bootstrap and TailwindCSS
- Try to use npm/yarn as much as possible to practice it
- Convert some phase 1 projects to use BEM
- Write any CSS in SASS/PostCSS
This phase is going to be taking some time and is your step into modern frontend web development. Go ahead and learn more about the JavaScript ecosystem. Learn what is Webpack, understand the different concepts and why was it ever needed. Understand what is babel, why do we use it, and learn how to integrate it with webpack and finally, learn how to lint your code using ESLint. All of the items listed in this phase revolve around webpack.
- Babel
- webpack
- eslint
- prettier
- Create an npm package that takes a username and gives back the list of links found on the social networks (if they exist). It should be usable in the browser, bundle it with webpack, use babel to transpile it and use ESLint for linting.
- Create a simple to-do list application. Use SASS/PostCSS for the CSS, add Bootstrap/TailwindCSS for the styles, use BEM where needed, transpile JavaScript using babel, bundle it with webpack, create optimized production build and deploy it on Github Pages/Netlify/Vercel.
- Understand React Fundamentals
- Redux
- Redux Toolkit
- rematch
- reselect
- mobx
- proptypes
- React-router
- fetch(native)
- Axios
- redux-form
- formik
- lodash
- Moment/Luxon
- classnames
- React Intl
Once you have learned ReactJS, go ahead and read about Progressive web apps. Now that you know frontend frameworks, it shouldn’t be that difficult for you. Have a look at the PWA checklist, read about service workers, measuring performance, using lighthouse and look at the different browser APIs that you can use to your advantage e.g. Storage, Location, Notifications, Device Orientation, and Payments. Also read about RAIL model and PRPL pattern.
- About Progressive web apps
- Have a look at the PWA checklist
- About service workers
- Using lighthouse
- Look at the different browser APIs that you can use to your advantage e.g. Storage, Location, Notifications, Device Orientation, and Payments
- About RAIL model and PRPL pattern
- Create a simple application that lets you pick a few hashtags and uses Twitter's search API to fetch and show you the most recent tweets for those hashtags in a trello like a layout grid. Try to pin the hashtags so that when the user refreshes the page, it remembers the hashtags that you picked. Use react router and add about pages.
- Create a Pomodoro application similar to this one that lets the users configure the duration for work and breaks, shows notifications and plays a sound whenever work or break has ended/started.
- Re-create the GitHub trending page using React and allow filtering using language and dates just like GitHub. You may add any libraries for dates.
Learning to write automated tests for your applications is going to save you a lot of headache in the future and is going to put you in a better position when looking for a job.
- Learn what are the different types of testing, different concepts such as mocking, stubs etc.
- Go ahead and learn Jest, Enzyme, and Cypress in a respective manner
- Learn to calculate the test coverage
- For the tasks, go ahead and write unit, integration and functional tests for the application(s) that you created in Phase 4 above.
Type checkers allow you to make your code more maintainable as it grows, increases your agility when doing refactoring, provide better support in the IDEs and are the best form of documentation that you can have. There are mainly Flow and TypeScript in this domain. However, there is more push towards TypeScript and I would recommend you to go with that.
- Typescript
- Go ahead and convert any of your existing JavaScript applications to use TypeScript
Server rendered applications allow achieving better performance and improved SEO as compared to the client rendered applications. Although not a requirement it would definitely help you in crafting better frontend applications. There are different options available, based on the frontend framework of your choice; but if you picked React.js then you should go with Next.js which makes SSR a breeze.
- Next.js
- GatsbyJS
- Convert any applications that you made above to be rendered on the server side using Next.js
- Create your personal blog and import all your posts
Everything shown in this phase is optional and is not really required for you but if you would like to try them out, go ahead and have a look.
- Learn about Node & Express a little
- Create a simple crud application using MERN stack
Create a portfolio website and put all these project in there or just put your fork of this repo in there
Where to get the design? Because you are a frontend developer not a designer and people say you must have a great looking portfolio site to attract and showcase what you know to potential clients and employers. I have no idea on this one🤷.
