DEV Community

Cover image for Front End Developer Roadmap
Tilak Jain
Tilak Jain

Posted on

Front End Developer Roadmap

Frontend Web Development Roadmap👇

đź”— Good to know

  1. WWW: WWW can be defined as the collection of different websites around the world, containing different information shared via local servers(or computers).
    Learn here

  2. HTTP: HTTP stands for HyperText Transfer Protocol.
    It is a protocol used to access the data on the World Wide Web (www).
    The HTTP protocol can be used to transfer the data in the form of plain text, hypertext, audio, video, and so on.
    Learn here

  3. Browser: A browser is an application program that provides a way to look at and interact with all the information on the World Wide Web. This includes Web pages, videos and images.
    Learn here

đź”— Basics

  1. HTML: HTML is used to form the “skeleton”, or the base, of any website.
    Learn HTML

  2. CSS: It is used to add styles to your web pages like colors, fonts, layouts, and animations.
    Learn CSS

  3. JavaScript: Javascript improves the interactivity of your website. It adds functionality to the website.
    Learn JavaScript

đź”— Pro CSS

  1. Preprocessors: With the help of CSS preprocessors, we can use logic in our styling files like variables, functions, mixins, inheritance, etc. SASS/SCSS, Stylus, and Less are a few popular preprocessors.
    Learn more

  2. Frameworks: CSS Frameworks like Bootstrap, Materialize, Tailwind, Semantic UI, Bulma, etc.
    Learn more

đź”— Pro Javascript

  1. Frameworks: Frameworks offer enhanced functionality without writing the code from scratch. Angular, React, Vue.js, Meteor, etc are some popular Javascript Frameworks.
    Read more

  2. DOM: The Document Object Model (DOM) is an application programming interface (API) for HTML and XML documents.
    Read more

  3. Fetch API: The Fetch API provides an interface for fetching resources.
    Learn more

  4. Modern Javascript: Learn new features and syntaxes introduced in JavaScript in ES6, ES7, ES8, etc.
    Read more

đź”— Intermediate

  1. Github

  2. Browser Compatibility

  3. Responsive Design.

đź”— Advanced

  1. Package Manager: A Package Manager is a tool that allows you to install, configure, update and manage software packages. NPM and Yarn are two popular Package Managers.
    Learn more

  2. Version Control: It allows you to manage and track changes to the source code and also revert to a previous version of the code, instead of manually reverting the changes. Git is the popular Version Control System.
    Know more

  3. Testing & Performance: Testing the website from a user's point of view.
    Read more

  4. Deployment: Pushing changes or updates from one deployment environment to another.
    What & how?

  5. SEO: Making your content search-friendly.
    Read more

đź”— Optional

  • Designing: Basic understanding of image manipulation, designing graphical components, etc is a huge bonus. Some of the popular tools are Adobe Photoshop, Figma, etc.

This is it in roadmap to become a Front End Web Developer. Some amazing resources are mentioned below:

Thanks for Reading!

Let's connect 👇

Instagram: https://instagram.com/coding_dev_
Support: https://www.buymeacoffee.com/codingdev

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more