Introduction
Hey, DEV.to community!
I was thinking of how I started my web dev career and suddenly I remembered how furious I was when I was looking for the right thing to do or even where to start!
As a tech beginner, knowing what to learn and in what order to learn them is often an issue. There are tons of programming language in the web development community, as well as a plenty of tools to be conversant with. It’s easy to get lost.
This is why I have come up with a web development roadmap for newcomer and aspiring web developers, along with their respective resources.
What is Web Development ?
Web development refers to the building, creating, and maintaining of websites. It includes aspects such as web design, web publishing, web programming, and database management. It is the creation of an application that works over the internet i.e. websites.
The word Web Development is made up of two words, that is:
- Web: It refers to websites, web pages or anything that works over the internet.
- Development: Building the application from scratch.
Front-End Web Development
The front end of a website is the part that users interact directly with. It is also known as the 'client side' of the application. It includes everything that Users experience directly: text colors and styles, images, graphs and tables, buttons, colors, and navigation menu. Front-end development is done using HTML, CSS, and JavaScript. Whenever a website, web application, or mobile app is opened, front end developers implement the structure, design, behavior, and content on the browser screen. Among the main goals of the Front End are responsiveness and performance. There should be no part of the website that behaves abnormally irrespective of the screen size, the developer must ensure that the site is responsive, i.e. that it appears correctly on devices of all sizes.
Back-End Web Development
The backend of a website is server-side. The server stores and organizes data, and ensures there is no problem on the client end of the web page. It is the part of the website that can not be seen or interacted with. It is the part of the software that does not have direct contact with users. Backend designers develop software components and characteristics that end users can access indirectly through a front-end application. Besides creating APIs, establishing libraries, and working with systems without user interfaces, the backend also includes scientific programming systems.
Text Editor and IDE
What you need to start is an IDE. IDE stands for Integrated Development Environment. They will help you write your codes faster and debug them easier. But the most popular ones are the ones below:
Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and macOS. Features include support for debugging, syntax highlighting, intelligent code completion, snippets, code refactoring, and embedded Git. Users can change the theme, keyboard shortcuts, preferences, and install extensions that add additional functionality.
Sublime Text is a commercial 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.
Atom is a free and open-source text and source code editor for macOS, Linux, and Microsoft Windows with support for plug-ins written in JavaScript, and embedded Git Control. Developed by GitHub,
First things first, I will suggest you try your hands on the most demanded or popular programming languages in the industry (this is quite relative) and go with the one you feel most comfortable with and in respect to how great you are at learning it.
HTML
HTML stands for HyperText Markup Language. It is used to design web pages using a markup language. It is the combination of Hypertext and Markup language. Hypertext defines the link between the web pages. A markup language is used to define the text document within tag which defines the structure of web pages. It is a markup language that is used by the browser to manipulate text, images, and other content to display in the required format.
Resources
CSS
CSS (Cascading Style Sheets) is a stylesheet language used to design the webpage to make it attractive. It is used to describe the look and formatting of a document written in a markup language. It provides an additional feature to HTML. It is generally used with HTML to change the style of web pages and user interfaces. It can also be used with any kind of XML documents including plain XML, SVG, and XUL.
Resources
CSS Frameworks
A 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.
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.
SASS
Sass is the short form of Syntactically Awesome Style Sheet. It is an upgrade to Cascading Style Sheets (CSS). Sass is a CSS pre-processor. It is fully compatible with every version of CSS. Sass reduces the repetition of CSS and therefore saves time. Due to its advanced features it is often termed as Sassy CSS. SCSS have file extension of .scss
Resources
JavaScript
JavaScript is the world most popular lightweight, interpreted compiled programming language. It is also known as scripting language for web pages. It is well-known for the development of web pages, many non-browser environments also use it. JavaScript can be used for Client-side developments as well as Server-side developments.
Resources
ReactJS
React is a declarative, efficient, and flexible JavaScript library for building user interfaces. ReactJS is an open-source, component-based front-end library responsible only for the view layer of the application.
React uses a declarative paradigm that makes it easier to reason about your application and aims to be both efficient and flexible. It designs simple views for each state in your application, and React will efficiently update and render just the right component when your data changes. The declarative view makes your code more predictable and easier to debug.
Resources
- https://www.w3schools.com/REACT/DEFAULT.ASP
- https://www.geeksforgeeks.org/react-js-introduction-working/
Nodejs
Node.js is a run time platform to run server-side apps in JavaScript. It adopted the V8 browser engine to interpret JavaScript code on the server. It comes with its own set of built-in modules in its standard library for running server-side apps and allows for interaction with hardware directly.
It can let us manipulate files and do many things on a computer. It’s different from JavaScript in the browser since it does completely different things. One of the things Node.js can do is run a webserver to serve static and dynamic content.
Resources
MongoDB
MongoDB, the most popular NoSQL database, is an open-source document-oriented database. The term ‘NoSQL’ means ‘non-relational’. It means that MongoDB isn’t based on the table-like relational database structure but provides an altogether different mechanism for storage and retrieval of data. This format of storage is called BSON ( similar to JSON format).
Resources
- https://www.w3schools.com/nodejs/nodejs_mongodb.asp
- https://www.geeksforgeeks.org/mongodb-an-introduction/
Git
A super cool tool you need to learn is Git. Git is a version controlling software which will help you store different versions of your code and never lose your back-up. There are free git hosts like GitHub and BitBucket which you can use to store your codes online.
Wrapping Up
Thanks for reading this article so far. You might be thinking that there is so much stuff to learn, so many courses to join, but you don't need to worry.
There is a good chance that you may already know most of the stuff, and there are also a lot of useful free resources which you can use, I have also linked them here and there along with best resources, which are certainly not free, but worth of money.
At the end of the day, you should have enough knowledge and experience about the things mentioned here.
Good luck with your Web Development journey! It's certainly not going to be easy, but by following this roadmap and guide, you are one step closer to becoming the Web Developer, you always wanted to be.
Also, you can leave you suggestions in the comment section and give a reaction if you enjoyed reading it 💖
Top comments (2)
NextJS is a good fullstack framework to recommend. Also I think you should always learn at least some SQL, it's still very much used today.
Yes i am looking forward for it.