Modern Frontend Developer Roadmap For Newbies

Modern Frontend Developer Roadmap For Newbies

Learning Objectives

  • Introduction to Front-end Development Roadmap
  • Pick an Editor
  • Internet
  • HTML and CSS
  • Javascript
  • Frameworks
  • Version Control
  • Conclusion

A front-end developer, also known as a front-end web developer, is someone who is responsible for the design and implementation of the interface, i.e., what users interact with and what they see on the screen.

In this article I am going to be writing about "How to Become a Front-End Developer." Development in general has become so popular and in-demand that a lot of people have been asking how to become a developer, specifically a front-end developer. So in this article, I am going to cover the steps you need to take to become a front-end developer.

1. Pick an Editor

Code editors, often known as source code editors, are pieces of software meant to assist programmers with their coding. These are text editors with extra features for managing and editing code. It can be used independently or as part of an IDE. Below is a lists of best code editors in no particular order.

  • Visual Studio Code (VScode)

Screenshot from 2022-04-12 01-40-05.png

Microsoft's Visual Studio Code, usually known as VS Code, is a source-code editor available for Windows, Linux, and macOS. Support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git are just a few of the features and there are so much more.

Visual Studio Code (or VS Code) has quickly become the standard for software development since its release in 2015. Like most Microsoft products these days, VS Code is available on all major platforms. That means that developers on Mac, Windows, and Linux can use this incredibly powerful tool. (Extract from elegantthemes.com/blog/resources/best-code-..)

  • Atom

Screenshot from 2022-04-12 01-47-13.png

Atom is a free and open-source text and source code editor for macOS, Linux, and Windows with support for plugins written in JavaScript and inbuilt Git Control. Atom is a desktop program created with web technologies by GitHub.

Atom is as powerful as you need it to be; if the editor doesn't have a feature you require, you can add it yourself.

  • Sublime Text

Screenshot from 2022-04-12 01-56-07.png

According to wikipedia, Sublime Text is a shareware cross-platform source code editor. It natively supports many programming languages and markup languages. Users can expand its functionality with plugins, typically community-built and maintained under free-software licenses.

Sublime Text is a powerful text editor that can handle code, markup, and prose. The smooth user interface and incredible functionality will impress you.

There are so many other code editors out there, some as desktop applications and some as web applications, such as codepen.io, codesandbox.io, etc. Feel free to explore and find the one you find most comfortable with. To find out more, visit this link YouTube Video

2. Understand how the internet works

The internet is simply a wide range of computer networks providing information and communication services. Understanding how the internet works is a big and crucial part of becoming a front-end developer. We can also say the Internet is a vast network of servers and computers that are connected to one another via phone lines, microwaves, satellites, etc. Servers are simply computers that store large amounts of information whose purpose is to “serve” the information they contain to other computers. Understanding how the internet works is a big bonus for front-end development.

3. Learn HyperText Markup Language (HTML) and Cascading Style Sheet (CSS)

HTML-CSS.jpg

HTML is the code that is used to structure a web page and its content. While, CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.

There are a lot of times when people want to start learning JavaScript or some other programming language. Well, that might work, but it is not the best road map. Before you do anything, it is important you go back to the basics and start with HTML and CSS. When you finally have a strong foundation, you can move on to the next.

Here are free different resources online, you can learn html and css: w3schools.com, freecodecamp.org, Frontend Master's bootcamp

3. Learn a Programming Language (JavaScript)

javascript-illustration.webp Image credit: (By Stoyan Stefanov)

Although, there are many different languages you can learn that would be great for front-end development, for this article I am going to talk about JavaScript. JavaScript is a language that is heavily used on the front-end, and there are so many different libraries and frameworks that are used with it. It is definitely an in-demand language, and you should pick it up. There are a ton of different free resources online as well to learn JavaScript: javascript.info, freecodecamp.org, Frontend Master's bootcamp

4. Learn a Framework (React/Vue/Angular)

React, Vue, and Angular are the top three Javascript frameworks but there are more. Don't let that overwhelm you.

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies. Ekran-Resmi-2019-11-18-18.08.13.png Image credit: (Ekran-Resmi)

Vue.js is an open-source model–view–viewmodel front end JavaScript framework for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members. vue_js.png Image credit: (Andrew Starlike)

Angular is a TypeScript-based free and open-source web application framework led by the Angular Team at Google and by a community of individuals and corporations. Angular is a complete rewrite from the same team that built AngularJS. Angular is a platform for building mobile and desktop web applications. angular.webp

5. Version Control

Version control is the process of tracking and managing changes to software code or a set of files over time. A version control system keeps track of every modification to a codebase. If a mistake is made, you as a developer can restore and compare earlier versions of the code to help fix the mistake, also minimizing disruption to other contributions. Version control is an important aspect of today's software engineering practices.

Types of Version Control Software

  • GIT: Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. I like to say it like this. It is a form of version control system (VCS) that simplifies the tracking of file changes. When you modify a file, for example, git can assist you in figuring out what changed, who modified it, and why.

Screenshot from 2022-04-12 10-54-02.png

  • Mercurial: Mercurial is a distributed source control management program that is free to use. It is capable of handling projects of any scale and has a user-friendly interface.

Screenshot from 2022-04-12 11-03-16.png

  • SVN: Apache Subversion is a software versioning and revision control system released under the Apache License as open source software. Subversion is a version control system used by software engineers to keep track of current and previous versions of items such as source code, web pages, and documentation. It have a "Client-server" architecture.

Screenshot from 2022-04-12 11-06-42.png

  • CVS: CVS (Concurrent Versions System) is a version control system that tracks all changes to project source code files. CVS is widely used in open source and private software development projects, and it is largely regarded as the best free, full-featured version control technology available.

CVS is a version control system, an important component of Source Configuration Management (SCM). Using it, you can record the history of sources, files, and documents.

Screenshot from 2022-04-12 11-16-05.png

Conclusion

In this article, we have learnt about the tools and technologies necessary for becoming a modern frontend developer, tools and technologies such as picking the right code editor, understanding how the internet works, solidifying HTML and CSS foundations, mastering Javascript it libraries and frameworks and finally understanding Version Control System.