Are you a starting front end developer's journey? Then this roadmap is for you. You'll get to know all the essential aspects and steps required for frontend web developer.🤩 What Is a Front-End Developer? Generally, a front end web developer executes web designs through coding languages like HTML, CSS, and JavaScript, which run on the Open Web Platform or act as compilation input for non-web platform environments (i.e., React Native). In a way, a front-end web developer is responsible for implementing visual elements that users see and interact within a web application. But that's not the scene anymore. Nowadays front-end developers are not limited to specific. You can see their work everywhere—in the navigation, layouts, even the way that a site looks different from your phone (thanks to mobile-first or responsive design). Now, let's head to the roadmap first. Below is the chart demonstrating the paths that you can take to become a pro frontend developer. This chart is made by . Kamran’s work is excellent so be sure to star the repo and subscribe to his newsletter to support his efforts. Kamran Ahmed Note: This roadmap will give you an idea about the landscape and guide you if you are confused about where to begin or what to learn next. In the end, it depends on your experience as you will grow some understanding of why one tool is better suited for some cases than the other one. It is not necessary that handy and trendy one is always perfect. So, go through the map and start developing. Roadmap to kickestart your journy as a front end developer: Image Credit: https://roadmap.sh/frontend Now, here we go in detail. Internet and how it works? Basic: HTML,CSS & JS General Development Skills Styling: CSS Preprocessor & Architecture Get familiar with the tools CSS Frameworks Front-end Framework Testing your app Server-Side Rendering Static Site Generator Mobile Application Desktop Application Web Assembly Keep Learning Resources 1. Internet and how it works? As we all know, the Internet is ruling the world. So, it is important to know the basics of the internet and how it works as it is the key knowledge that every developer should have. Internet is a global network of computers connected to each other which communicates through a standardized set of protocols. i. HTTP: Standard protocol using which the webpages are transferred over the internet. You can check some detailed blogs here. HTTP in depth HTTP/3: the past, the present, and the future What Is HTTP/3 – Lowdown on the Fast New UDP-Based Protocol ii. Browsers: A software application for accessing the information on the World Wide Web. Browsers are a very important part of the current era. And why not? It literally brings the whole world to your fingertips. So, it'll be great to know a bit about them as you are using them on a daily basis..!! Right? Here is an amazingly detailed article By and . You'll surely find this article excellent and helpful How Browsers Work: Behind the scenes of modern web browsers Tali Garsiel Paul Irish . iii. Domain name A domain name is an identification string that defines a realm of administrative autonomy, authority, or control within the Internet. They are used to identify one or more IP addresses For further details check this article on . How to register a domain name for your website iv. Web Hosting Web hosting is a service provided by companies (the web host) that sell or lease space on a server where you store the files that make your website accessible on the internet. For detailed information on web hosting you can check this article on What is Web Hosting v. DNS (Domain Name System): One of the fundamental blocks of the internet Here is a useful guide for DNS: DNS in one picture 2. Basics: HTML, CSS & JS Front end web developers use three primary coding languages to code the website and web app designs created by web designers: HTML CSS JavaScript i. HTML: First pillar & the most important skill for web developers as it provides the structure for a web page. Learn the basics of HTML Make a few pages as an exercise You can check Tutorial For . HTML ii. CSS: Second pillar of web development and used to style web pages so that they look good. Learn the basics of CSS Style pages from the previous step Build a page with grid and flexbox You can check Tutorial For . CSS iii. JS Basics: Third pillar of web development and used to make your web pages interactive. Get familiar with the syntax Learn basic operations on DOM Learn mechanisms typical for JS (Hoisting, Event Bubbling, Prototyping) Make some AJAX (XHR) calls Learn new features (ECMA Script 6+) Additionally, get familiar with the jQuery library You can check tutorials for JavaScript 3. General Development Skills Following are some skills you will require as by learning these skills you'll be able to start your journey as a front-end developer with ease. Learn GIT, create a few repositories on GitHub, share your code with other people. Know HTTP(S) protocol, request methods (GET, POST, PUT, PATCH, DELETE, OPTIONS). Don't be afraid of using Google, Power Searching with Google Get familiar with the terminal, configure your shell (bash, zsh, fish) Read a few books about algorithms and data structures Read a few books about design patterns. Git and Version Control Git is the tool used to save code and create different versions, allowing you to collaborate with other developers. The top place to store code and collaborate on open source software is GitHub. Learn Git from GitHub Ranked Git tutorials Git Complete: The definitive, step-by-step guide to Git Here is an awesome article for . Skiils to become a Front End Developer 4. Styling: CSS Preprocessor & Architecture i. CSS Preprocessor A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax. preprocessors can make CSS code more organized. Sass/CSS PostCSS Less Stylus ii. CSS Architecture BEM CSS Modules Atomic OOCSS SMACSS SUITCSS The following are some good articles on CSS Architecture, that you might find helpful. CSS Architecture CSS Modular Architecture Styling Modern Web Apps iii. CSS in JS CSS-in-JS is a collection of ideas to solve complex problems with CSS. It is NOT a particular library, but different libs might solve a different subset of problems and use different approaches, depending on their implementation details. Styled Components Radium Emotion JSS Aphrodite You should go through the article . It'll help you to understand it in a better way. What actually is CSS in JS 5. Get familiar with the tools that you will be using. To become a front-end developer, you should spend some time on learning tools that you will use as a web developer like built tools, unit testing tools, debugging tools, etc. Well, users are going to interact with your websites through a web browser. The way your site is rendered by these browsers is going to be a big part of whether your work is successful or not. So, it'll be great to know about the tools that can help you to develop a satisfying app/website/product. All modern web browsers come equipped with developer tools. These tools allow you to test and fine-tune your pages in the browser itself, in ways specific to how the browser is interpreting your code. Here are some of the useful tools: i. Package Managers npm yarn pnpm ii. Task Runners npm scripts gulp Webpack Rollup Parcel iii. Modular Builder Webpack Parcel Rollup v. Linter & Formatter Prettier JSlint ESlint JSHint JSCS For more amazing Formatter and Linter check out 🤩 🛠 24 Coolest VSCode Extensions That Will Rock Your World 6. CSS Frameworks The CSS framework is a code library that abstracts common web designs and makes the designs easier for a developer to implement in their web apps. In simple terms, a CSS framework is a collection of CSS style-sheets that are prepped and ready to use. Bootstrap , Materialize Material Design Lite Bulma Semantic UI 7. Frameworks These are packages containing pre-written, standardized code in files and folders. They give you a base to build on while still allowing flexibility with the final design. Typically, front-end frameworks contain the following components: A grid that makes it simple to organize the design elements of your website Defined font styles and sizing that varies based on its function (different typography for headings versus paragraphs, etc.) Pre-built website components like side panels, buttons, and navigation bars Following are some of the most used front-end frameworks i. : The Progressive JavaScript Framework Vue.js Vue.js is an open-source model–view–ViewModel front end JavaScript framework for building user interfaces and single-page applications. You can check the guide on the official site of . VueJS Also, there is a detailed article on that you'll find useful. Trending VueJS UI Components Library and frameworks ii. : A JavaScript library for building user interfaces. React React is an open-source, front end, JavaScript library for building user interfaces or UI components. It is maintained by Facebook and a community of individual developers and companies. You can check the tutorial on the official site of . React.js iii. Angular Angular is a TypeScript-based open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. You can check the tutorial on the official site of Angular 8. Testing Your App Front End Testing is a testing technique in which Graphical User Interface (GUI), functionality, and usability of web applications or software are tested. The goal of Front end testing is testing overall functionalities to ensure the presentation layer of web applications or software is defect-free with successive updates. It is a vital skill for any Developer. i. Unit Testing Unit testing generally refers to the process of performing, either manually or in an automated way, a set of tests on a single “unit” of code. It mainly consists of testing isolated parts of the code, as units. These units usually take the form of methods, properties, UI element actions, etc. It is the fastest and cheapest to apply. Jest Enzyme Sinon Mocha Chai AVA Tape ii. End to End Testing In E2E testing, the developer tests the whole application together and test it as a user would do. Basically, here developer tests the application’s workflow from beginning to end. The aim is to replicate real user scenarios so that the system can be validated for integration and data integrity. The following are some helpful tools: Selenium Webdriver Cypress Puppeteer Cucumber.js Nightwatch.js You can check this detailed guide on . End to End Testing iii. Integration Testing Integration tests make sure that various parts of the app work together. It is one of the crucial and most important tests. Karma Cypress Nightwatch WebDriver.io For detailed info check the article on . Frontend Testing 9. Server-Side Rendering Server-side rendering (SSR), is the ability of an application to contribute by displaying the web-page on the server instead of rendering it in the browser. The Server-side sends a fully rendered page to the client; the client’s JavaScript bundle takes over and allows the SPA framework to operate. Next.js After.js Rogue 10. Static Site Generator A static site generator is a publishing tool, which is essentially a set of tools for building static websites based on a set of input files. They apply data and content to templates and generate a view of a page that can be served to the visitors of a site. The following are some best static site generators: Gatsby Jamstack staticsitegenerators Nuxt.JS HUGO Here is a detailed article on . What is a static site generator and 3 ways to find the best one 11. Mobile Application Front-end development for mobile application Well, here the front end interacts directly with the user including design elements such as wireframes, mockups, caching, and database synchronization. It gives a smooth user experience across various screen sizes and orientations. Below are some helpful frameworks for mobile app development. Flutter React Native Nativescript Ionic Technical Aspects of Front-End Development i. Native App Development ii. Cross-Platform Mobile Application Development Both Native and Cross-platform mobile apps come with their own pros and cons. Where native leads in terms of interface, performance, reliability, and speed. Whereas Cross-platform holds an edge in terms of the marketplace, cost, and reusability. However, it's your choice and your business concern to choose the platform. For more detail check this amazing article on . Ultimate guide to mobile app development 12. Desktop Application Even though mobile and tablets have the perks of being handy, you simply can't ignore PC and desktop apps. Because there are still many users who prefer PC a better option to explore the apps and websites. It's just desktop apps that have their own perks..!! Isn't it..!? So, the following are the Useful frameworks for desktop app development that you can use. Electron NW.js Proton Neutralino.js DeskGap You can check this helpful article on . Desktop apps for front end development 13. Web Assembly is an open standard that defines a portable binary-code format for executable programs, and a corresponding textual assembly language, as well as interfaces for facilitating interactions between such programs and their host environment. WebAssembly It has huge implications for the web platform. It provides a way to run code written in multiple languages on the web at near-native speed, with client apps running on the web that previously couldn’t have done so. You can visit the following articles for further details. Webassembly What is webassebly- The next generation web platform 14. Keep Learning So, after going through this guide, you can kickstart your journey as a front-end web developer for sure. Although, learning is the only key to success. For that, you have to practice and learn consistently. We have mentioned some relevant articles above which you can refer to for details and some basics. We highly recommend you to go through them. Here is a complete guide that you can go through Front-end Developer Handbook 2019 - Learn the entire JavaScript, CSS and HTML development practice! The following are some excellent courses for front end developers: Become a Front-End Web Developer Beginners Javasript Modern JavaScript From The Beginning Advanced Javascript HTML, CSS, JAVASCRIPT for Web Developers React — The Complete Guide (incl. Hooks, React Router, Redux) React For Beginners Angular The Complete Guide Conclusion: So, that's the . It's very detailed for sure, but there is a good chance that many of you may already know most of the stuff. Even if you don't know, no need to be confused or overwhelmed by this roadmap; you can start small and then follow along. Roadmap🗺 to kickstart your journey as a front-end web developer👨💻 There are many ways to becoming a Front-end Developer and by the experience, you can achieve excellence. So, begin with this roadmap and see how you become a pro front-end developer. Happy Developing..!! 😎 Also published here. About Themeselection: , provide selected high quality, modern design, professional and easy-to-use premium and , and UI Kits. ThemeSelection free bootstrap admin template You can check which is one of the best free bootstrap admin templates. Chameleon Free Bootstrap Admin Template
