Web development can seem daunting for beginners, with its own unique terminology and concepts. However, once you have a basic understanding of the key components involved, you’ll be on your way to building your own websites and applications. In this guide, we’ll cover some of the foundational concepts you need to know when starting out in web development.
A website is a collection of web pages that are publicly accessible on the internet. A web page is a document that contains text, images, videos, and other elements that are displayed in a web browser. A web browser is a software application that allows you to view and interact with websites, such as Google Chrome, Firefox, or Safari.
Some websites are simple, consisting of only a few pages, while others are more complex, with hundreds of pages. The size of a website is not a measure of its quality, and it’s possible to build a website with a small number of pages that is more useful than a website with hundreds of pages.
To access a website, you need to know its address, which is also called a URL (Uniform Resource Locator). A URL is a string of characters that uniquely identifies a resource on the internet. For example, the URL for this page is https://cs.fyi/web-development-101-beginners-guide. To learn more about URLs, check out our What’s in a URL? guide.
A website works by following a client-server model. The client is your browser, which sends requests to the server and receives responses from it. The server is a computer that hosts the website and handles the requests from the clients.
When you type a URL in your browser and hit enter, your browser sends an HTTP request to the server that hosts the website. The server then processes the request and sends back an HTTP response that contains the web page or an error message. The browser then renders the web page and displays it to you.
The web page that you see in your browser is usually written in HTML (HyperText Markup Language), which is the standard markup language for creating web pages. HTML consists of elements that define the structure and content of the web page. HTML elements are enclosed by tags, which indicate how they should be displayed or behave.
For example, <p>My cat is very grumpy</p> is an HTML element that represents a paragraph of text. The opening tag (<p>) indicates where the paragraph begins, and the closing tag (</p>) indicates where it ends.
HTML alone can create static websites, where the content does not change based on user input or interaction. However, if you want to make your website dynamic (manage files and databases, add contact forms, control user-access, etc.), you need to use a programming language that can run on the server-side.
Some of the most popular server-side programming languages are PHP, Python, Ruby, Java, and JavaScript (Node.js). These languages can communicate with databases, such as MySQL or MongoDB, to store and retrieve data for your website.
On the other hand, if you want to make your website more interactive and responsive on the client-side, you need to use JavaScript, which is a scripting language that can run in your browser. JavaScript can manipulate HTML elements, add animations and effects, validate user input, fetch data from external sources, and more.
JavaScript can also use frameworks and libraries, such as jQuery, React, Angular, or Vue.js, to simplify and enhance its functionality.
When you create a website, you need a place to store your files, such as HTML, CSS, JavaScript, and images. This is where hosting comes in. Web hosting is a service that allows you to store your website files on a server that is accessible on the internet.
There are many different types of hosting services, such as shared hosting, dedicated hosting, VPS hosting, and cloud hosting. Shared hosting is the most common type of hosting for beginners, as it’s affordable and easy to set up. With shared hosting, you share a server with other websites, which can affect the speed and performance of your website.
Dedicated hosting, on the other hand, gives you complete control over a server, but it’s more expensive and requires more technical knowledge. VPS hosting is a middle ground between shared and dedicated hosting, where you have a virtual private server that is dedicated to your website, but you still share physical resources with other websites.
Cloud hosting is a newer type of hosting that uses a network of servers to store and distribute your website files, which can improve reliability and scalability. With cloud hosting, you pay for what you use, which can make it more cost-effective for websites with varying traffic.
As you dive deeper into web development, you’ll encounter many new terminologies and acronyms. Here are some of the most common ones in no particular order:
Web development can be a rewarding career, but it can also be challenging. However, if you’re willing to put in the time and effort, you’ll be able to build your own websites and applications in no time. roadmap.sh is a great resource to get an overview of the different technologies and skills you need to learn to become a web developer.