Roadmap for Web Development

Technology plays a huge role in our daily lives and all sectors of the economy, from the simplest of apps to the most groundbreaking inventions. Every website or piece of software that exists has been built by a developer—but what exactly is web development, and how do I become a web developer? You need to realize that web development is a smart career move considering on the impact of the Covid-19 pandemic.

Web development is the work involved in developing a website for the Internet (World Wide Web) or an intranet (a private network). It can range from developing a simple single static page of plain text to complex web applications, electronic businesses, and social network services. Web development can be broken down into two layers: client-side coding (frontend), and server-side coding (backend).

Frontend development refers to the graphical user interface. Client-side code executes in a web browser and directly relates to what people see when they visit a website. Things like layout/structure, fonts, colors, navigation menus, images, and forms are all driven by the frontend.

Backend development refers to what goes on behind the scenes. It is essentially the part of a website that the user doesn’t see. It is responsible for storing and organizing data, and ensuring that everything on the client-side runs smoothly. Backend developers also create database which contains all the files and content that are necessary for a website to function, storing it in such a way that makes it easy to retrieve, organize, edit, and save and also runs on a server. In summary, the frontend and backend works together to build and run a fully functional website or application.

Below is a list of technologies and languages a developer has to be familiar with:

1. HTML {Hypertext Markup Language}: HTML is a markup language that defines the structure of your content. HTML consists of a series of elements, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. This is the first coding language a developer has to learn.

2. CSS : according to MDN documentation, CSS is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS describes how elements should be rendered on screen. Just as the name implies, it is used for styling your web page.

3. CSS Frameworks: CSS framework comprises several CSS stylesheets ready for use by web developers and designers. The stylesheets are prepped for use for standard web design functions: setting colors, layout, fonts, navbars, etc. Generally, stylesheets are supported and expanded by other scripting technologies like SASS and JavaScript. With a CSS framework, the user has a completed CSS stylesheet, and they only have to code the HTML with accurate classes, structure, and IDs to set up a web page. The framework already has classes built-in for common website elements – footer, slider, navigation bar, hamburger menu, column-based layouts, etc. The five top CSS frameworks are: Bootstrap, Tailwind CSS, Foundation, Bulma and Skeleton.

4. JavaScript: this is the world's mot popular programming language. JavaScript is a scripting or programming language that allows you to implement complex features on web pages like timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. It is the third layer of the layer cake of standard web technologies.

5. DOM: The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. It is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects; that way, programming languages can interact with the page.

6. Git and GitHub: Git is a tool that allows developers to track versions of their code over time. It does this by creating "snapshots" of the current state of the code base whenever you tell it to. Put simply, Git is essential when collaborating with other developers to ensure that previous "snapshots" of the code can be revisited if necessary.

GitHub is a web-based Git repository hosting service. It is a tool that enables collaboration by hosting shared Git repositories that teams of developers can all contribute to. While GitHub uses Git, the functionality it provides is VERY different from Git.

7. React/Angular/Vue: these are JavaScript libraries that help to improve the functionality of our web pages and apps.

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.

Angular is a platform and framework for building single-page client applications using HTML and TypeScript. Angular is written in TypeScript. It implements core and optional functionality as a set of TypeScript libraries that you import into your applications.

Vue (pronounced /vjuː/, like view) is a JavaScript framework for building user interfaces. It builds on top of standard HTML, CSS and JavaScript, and provides a declarative and component-based programming model that helps you efficiently develop user interfaces, be it simple or complex.

In my next article, I would throw more light on which of these libraries would be more beneficial and advantageous to a developer.

8. Node.js: Node. js is primarily used for non-blocking, event-driven servers, due to its single-threaded nature. It's used for traditional web sites and back-end API services, but was designed with real-time, push-based architectures in mind. Node.js is an open source server environment. It is is free and runs on various platforms (Windows, Linux, Unix, Mac OS X, etc.).

9. API: API is the acronym for Application Programming Interface, which is a software intermediary that allows two applications to talk to each other. Each time you use an app like Facebook, send an instant message, or check the weather on your phone, you’re using an API.

10. Database: A database is an organized collection of structured information, or data, typically stored electronically in a computer system. A database is usually controlled by a database management system (DBMS). MySQL, SQL Server, MongoDB, Oracle Database, PostgreSQL, Informix, Sybase, etc. are all examples of different databases.

11. Web3.js: web3.js is a collection of libraries that allow you to interact with a local or remote Ethereum node using HTTP, IPC or WebSocket. It is a collection of modules that contain functionality for the Ethereum ecosystem.

12. Solidity: Solidity is an object-oriented, high-level language for implementing smart contracts. Smart contracts are programs which govern the behavior of accounts within the Ethereum state.

Pheeeeeew! That's a lot!! However, a front end developer usually ends their skill set at learning JavaScript libraries like, react, angular or vue. While a full stack developer exhausts the entire skill set and sometimes takes a dive into web3.

Hope you've gained knowledge from this article??? Don't hesitate to like and share... 😊 😊 You can reach out to me on twitter @princessmaggy7. 😊