There are no required prerequisites to getting started in web development as you can dive right in.
However, it’s important to have prior knowledge of how the internet works, what a website is, how to use a web browser, and a clear learning roadmap of web development.
In this article, we’ll talk about the things one is expected to learn before web development that will contribute positively to the learning process.
We’ll also provide learning tips for each point stated to help kick-start your coding journey.
Towards the end of this article, you’ll get to see our preferred learning resource for web development that covers both the needed prerequisites and actual learning.
Without further ado, let’s get started.
How the Internet Works
To become a web developer, it’s important you understand how the internet works.
Image: Source
What actually happens when we open up a web browser and enter a URL?
We’ll go through these processes in 6 discrete steps:
- Firstly, an internet connection needs to be established. This can be via a router or modem to your PC or system. It will serve as the base of the connection.
- When you open the browser and type in a URL like “www.google.com”, your system will push a query command to your ISP (Internet Service Provider) that is connected with other servers that store and process data.
- At this point, the web browser starts indexing the entered URL and will fetch the details in IP format.
- With the obtained IP address of the URL, the browser sends HTTP requests to the server, and this pulls out the information you seek which in this case will be the website copy.
- This obtained website copy is sent from the server to the user’s system in form of small packets of data.
- At the user end, the browser arranges these small packets of data to form a collective file which becomes visible to you as the contents of the website.
Watch this short 4 mins browser basics video for more clarity.
Understanding Website and Webpages
In simple terms, a website is a collection of interlinked pages on the internet grouped under a unique name or online address that can be viewed by using the internet and web service on a computer or smartphone.
A webpage is defined as a single document or a solitary page of any website.
For example, Websitehurdles.com is a website and you’re currently viewing a web page titled
‘What should I learn before web development?” with the help of the internet.
The information provided on the webpage may be in different formats like text, images, videos, audio, or animation and the services may be like buying or selling products, downloading digital products, etc.
How to Use Web Browsers
At first glance, you might be like: “Heck, these are modern times and everyone should know how to use web browsers”.
Unfortunately, that’s not the case.
There are thousands of people who don’t know how to access the web browser, let alone use it to conduct searches.
I once worked as a web development instructor in a Bootcamp and I’ve encountered multiple students trying to venture into web development but don’t understand how to operate and navigate through tabs on a browser.
And of course, you’ll agree this is a red flag as the lack of basic computing knowledge like this one will deter your web development learning process.
If you fall under this category, don’t panic; using a web browser is relatively simple and you can get acquainted with it in a couple of mins.
Here are 10 steps that will guide you on how to use a web browser.
- Get acquainted with the web browser you are using. Most developers, including me, prefer Google Chrome.
- Open the web browser by double-clicking on the icon on your desktop or right-clicking the icon and choosing “Open.”
- At the top of the window is the address bar. This is where you’ll type the web address of the page that you want to visit.
- Navigate through pages by directly clicking on the displayed links.
- To go back to the page you were just on, you can click the back button, to return to the first page, click the forward button and the reload button to refresh the page. All are visible on the left side of the address bar.
- If you wish to click a new link but still want to maintain your current page, you can open the link in a new tab by right-clicking on the link and selecting “open in a new tab”.
- You can also create a new tab for new searches by clicking the “+” button and close current tabs by clicking their individual “x” button.
- The “star” symbol in the address bar is a bookmark button used to store pages you visit frequently.
- Click the 3 vertical dots at the extreme end of the search bar to see your browsing history, bookmarks and browser settings.
- You can minimize, expand and close your browser using the 3 buttons located at the top right of the browser application for Windows users or at the top left of the application for Mac users.
The locations of these different buttons discussed above and other options may vary a little depending on which browser you’re using, but you should be able to perform all of the same actions, no matter which browser you decide to use.
Watch this short 3 mins browser basics video for more clarity.
Web Development Learning Roadmap (The Bigger Picture)
Before diving into tutorials and watching multiple courses, it’s important you have a learning roadmap of web development and also understand the different categories of web development.
The knowledge of the right learning pathway is meant to serve as a guide and gives you a clearer perspective of the right language, tools or framework to learn progressively.
Before talking about the right learning steps, let’s break down the 3 categories of web development which are Frontend development, Backend development and Fullstack development.
“Front end” means that you’re dealing mainly with the client side. It’s called the “front end” because it’s what you can see in the browser.
Frontend developers use several web technologies to transform coded data into user-friendly interfaces.
“Back end” is the server-side of the website that you can’t really see, but it handles a lot of the logic and functionality that is necessary for everything to work.
Back-end developers ensure the website performs correctly, focusing on databases, back-end logic, application programming interface (APIs), architecture, and servers.
They use code that helps browsers communicate with databases, to understand, and delete data.
Full stack developers are skilled in both frontend and backend languages and frameworks, as well as in server, network and hosting environments.
Detailed Web Development Roadmap:
- Learn the basics of how websites work, front-end vs back-end, and using a code editor
- Learn HTML5, CSS and Advanced CSS3 (Grid and Layout)
- Learn Bootstrap, flexbox and Tailwind.
- Learn Javascript, DOM Manipulation, Advanced Javascript
- Learn Command Line, Git and Github
- Learn Package Managers: NPM and NPM Scripts
- Learn a Javascript framework (Angular, React or Vue)
- Learn HTTP/JSON/AJAX + Asynchronous Javascript
- Learn back-end basics: API’s
- Learn Node.js + Express.js
- Learn Databases: PostgreSQL, SQL
- Finally, Learn Production + Deployment
Don’t get overwhelmed even before getting started by the magnitude of learning involved.
There are a lot of learning resources out there on the internet.
Some are outdated, others contain half-baked information and a couple of others do proper justice to web development.
We’ve revealed multiple web development courses and platforms and we’ll share our recommendations with you in the next section.
Recommended Web Development Learning Course
Andrei Neagoie: The Complete Web Developer in 2022: Zero to Mastery course by Andrei Neagoie on Udemy offers the best value for time and money.
With roughly 200,000 enrolled students and 55,000+ positive reviews, Andrei happens to be one of the highest-rated coding instructors on Udemy, excellent at explaining complex topics, taking you from beginner to advanced level in web development.
Personally, I like the student learning community of the course as it’s one of the most helpful community in the coding industry.
Fun fact, the Zero to Mastery course starts with the prerequisites mentioned like how the internet works and other must-know basics before diving into the nitty-gritty of web development.
As a result, it’s well structured and follows the learning steps listed above in the right order so you don’t have to worry about which language, framework or library to learn first as it does the heavy lifting for you and sets you on the right track.
Here’s a direct link: The right web development learning pathway.
Conclusion
Before embarking on learning web development, be it front-end or back-end, it’s expected you have a sound knowledge of how the internet works, what exactly is a website, how to use web browsers and a clear learning roadmap.
Andrei’s Zero to Mastery Web Development Course offers the best value for video course learners.
And it’s a wrap!
Support Website Hurdles
Website Hurdles is readers supported.
If you find this content helpful, you can support me by buying me a cup of coffee.
Till we meet again on another article,
Happy Coding!
0 Comments