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.
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.
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.
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.
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 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.
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.
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 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
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.
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).
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.
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 💖