Getting started in the web development scene may seem tricky. As a beginner, the terms used are almost new to you and the concepts you need to learn are a lot and overwhelmingly difficult, it’s madness.
However, there is a method to this madness, a way of complicating it less, and figuring out where to start and learn.
This guide is a basic roadmap, covering some basic terminology, and the tools and skills you’ll need to develop and manage websites. In other words, it’ll walk you through what it takes to become a professional web developer.
Let's start! Here is what we'll cover:
- What is web development?
- How does the internet (Websites) work?
- What is a ‘stack’ and how do you choose one.
- What languages are there and which one should you start with?
- Building projects and a portfolio.
What is web development?
Web development is a blanket term meaning the process of creating websites and applications for the internet.
It is concerned with designing, programming and managing all that powers the internet. Basically, it includes, designs, layouts, coding, scripting and programming, functionality, network configuration, cms development, etc.
How does the internet work?
What is an IP address and DNS?
An Internet Protocol (IP) Address is a unique string of numbers used to identify a device on the Internet. Ideally, IP addresses represent an endpoint (in this case, your device) on a network. Websites are endpoints and thus have IP addresses, however, it is humanly impossible to master all IP addresses of all the websites you’re to visit. A simpler method has been crafted for this and we call it the Domain name system.
In a domain name system, we have DNS (Domain name server) and Domain Names, our interest here is the latter, for more information read this article by freecodecamp. or Tech Target. Domain names are simple-to-remember names that point to the website you wish to visit. DNS maps(locates and translates) the domain name into the IP address used to locate the website. An example of a domain name is google.com or our very own gizmunch23.blogspot.com
Trick time: You can get your IP address by typing ipconfig/all on the command prompt on Windows, and using Network Utility>Traceroute on MacBooks
What is HTTPS and (why not) HTTP?
HTTPS is HTTP with security, So what is HTTP? HyperText Transfer Protocol (HTTP) is a set of rules (protocols) that define how messages should be sent via the internet.
HTTP also provides a framework for clients and servers to speak the same language when making requests and responding to them. HTTP connects you to servers that host the website data you need.
HTTP is not secure as it is not encrypted, thus providing a danger that your data may be stolen. That's why we have a new big brother HTTPS, HTTP with security.
FreecodeCamp and Geeks for Geeks explain this perfectly, more than perfectly.
How does the internet(Websites) work?
Websites are just a bunch of files stored on servers. These servers and our computers are connected to a network we call the Internet. Our computers have browsers, and programs used to load websites and give access to them. Do you get that?
In any network, there is a client and a server, a client requests for services while a server provides that service. this is what we call the "client-server model".
Basically, our computers and phones (clients) send a request (services) to the server housing the website, which in turn sends the web pages -website files mentioned earlier- and we the clients, via our browsers load the website and can access it.
Now get your hands dirty!
Choosing a development specialisation(Stack)
Web devs (and maybe software and mobile devs) have this fancy question they ask each other whenever they meet for the first time, " What is your stack?", begging the question, what is a stack? A stack is basically an area in development someone has specialised in.
They are three and I'll explain them:
Front-end development (Client-side scripting)
Front-end developers work on what you see when interacting with a website and web apps once loaded. Front end developing is responsible for designing and creating client-side elements like, user interfaces with user experience in mind and Cross-platform
optimisation for different devices. These normally include (and not limited to) menus, buttons, animations and their functionalities.
Back-end development (Server side scripting)
Back-end developers deal with what the user can't see, ie, work with the web server side. They are responsible for designing web structures, creating and managing web servers, interacting with databases and using data analysis.
Full stack Development
These are developers who have mastered Front and back-end development. They are experts in all web-related technologies. Their work also includes writing technical documentation and implementing security protocols.
Programming languages (plus frameworks and libraries).
Programming languages are a set of instructions used as building blocks for creating websites and program applications. Programming languages are used to write code from scratch.
Libraries and frameworks are sets of pre-written code. Libraries, for example, jQuery, are smaller and mostly have specific use cases. Frameworks, for example, React, contain ready-made components and tools that enable faster code writing. Frameworks may also contain libraries.
Various languages, frameworks and libraries are used almost explicitly for specific stacks. However, to get started in web development you're better off mastering the basics of these three languages:
Hyper Text Markup Language (HTML)
HTML has been in use since the 1990s. It's used to structure websites, making it the bare minimum of what a website is. It describes to the browser how and where content should be placed in the document that is the webpage.
Various versions have been used but HTML5 is the most recent and currently used.
Cascading Style Sheets (CSS)
CSS was designed to style websites, that is to add design and aesthetics. They improve on how websites 'feel and look'. CSS3 is the current most used version.
CSS frameworks and libraries that exist to make developer's work easier include: Bootstrap, Tailwind and SCSS (Sass)?
Java Script
Before Javascript, websites lacked functionality, eg. buttons didn't work, and games could be played on a website. Basically, Javascript is used to add interactive features, enhancing user experience.
Various Javascript frameworks have been developed to extend its usage and make programming easier. Just to mention the most popular ones, they include Angular, Vue, and React.
While these three languages are mostly used in front-end web development, Javascript is rapidly growing and evolving, eg, it can now be used in the backend, through Node.js.
Here is a list and explanation in detail, of the various languages and frameworks used.
Front-end programming languages
HTML, CSS, and JavaScript are the foundation of front-end development. However, on their own, they may not be useful in creating dynamic web pages or solving specific problems.
That is why certain front-end frameworks and libraries exist. CSS and Javascript have frameworks and Libraries that extend their usage. They include:
- Bootstrap
- Tailwind
- React
- Vue
- Angular
Back-end programming languages
Python
Python is an object-oriented programming language and one of the most popular programming languages in the world (second to JavaScript, come slay me!). It is frequently used in backend development, data analysis and data science. Python is also used in machine learning. It is a great language for beginners, after all, it is intuitive, flexible and versatile.
Node.js
Node.js is a javascript runtime that allows javascript to be used outside of the browser, ie it is a platform that allows javascript to be run on a server to create dynamic web pages. Understanding Node.js will play in your favour as a developer, as it is used by major tech players.
PHP
PHP is a scripting language that runs on a server. Its usage mainly is requesting content from a server and making it visible to a user. eg, a PHP script can be used to display the three most recent blog posts on a site's homepage, the posts themselves are however stored on the server and fetched whenever a user opens the homepage.
PHP is essential to WordPress development as it's the force behind its plugins and themes.
SQL
SQL is another popular language among backend developers. Structured Query Language(SQL) is a query language used to create, manage, and manipulate databases.
MySQL and Microsoft SQL Server are widely used, however, other options do exist.
Understanding NoSQL databases would also benefit you as a backend developer. NoSQL databases don’t structure their data in tables, rather they are flexible, agile and straightforward?
These are but some of the programming languages used in front and back-end development, many more exist. Picking a language and understanding its basics is more important than trying to cram all languages as each language has its pros and cons, understanding the bare basics allows one to be more conversant with a language or switch if need be, making you more flexible and valuable.
Building Projects and Portfolios.
Have you started learning? Congratulations you're now a developer, a beginner on your way to being a senior developer! Pat yourself on the back!
Now as with any other skill, you get better at programming by practising. Building projects is a huge way of practising your craft, and how do you do that?
Various courses, programs and tutorials exist that offer project-based learning, a great way to practise and learn.
If that's too much for our feeble minds, maybe you can start with simple projects based on what you have learned and a final big project that encompasses everything you have learned up to a certain point. Would you look at that, as still project-based learning but in simpler terms!
When you build enough projects, you can collect them into a portfolio that can speak for you as a developer. Most developers have LinkedIn and Github profiles to show off their projects as well as find potential employers, and you can join them. Create these profiles, build projects and showcase them.
That's done? Good, now learn tools that can help you with your projects, for example:
Git - a version control system where developers can store and manage their code. Changes are often made to program codes and git allows you to track these changes and reverse them too if necessary. Git also allows teams to manage multiple projects at once.
Git is not Github! However they work similarly, but GitHub has more functionalities. It is important to understand them, especially if you're working in a team. This will explain more about git and Github(freecodecamp and w3shools explain the two here.)
Content Management Systems (CMS) - These are applications that allow developers and website admins to build and manage website content. They allow users to create, edit, organise and publish content.
Conclusion.
This is just a guide on how to become a web developer, the rest lies on your hands. You'll need the programming skills to develop good reliable products, as well as other skills. Web development is a great field for anyone who wishes to grow professionally and also willing to learn.
You'll also grow financially so to speak.
As a web developer or any other sort of developer, you have to be prepared to be a constant learner. Trends change as well as needs, you have to be flexible to change or learn more to update your knowledge base.
As we end this, I’ll give you a kickstart with this list of learning venues friendly to beginners:
Among them all YouTube is a great place to start, some of the best YouTube channels to start learning with are:
- Traversy Media
- Web Dev Simplified
- FreeCode camp
- Net Ninja
- coder coder
- developed by ed
Now a joke:
Why did the programmer move to Mexico? so that he could be called a Señor programmer!
Adios!