How Does a Website Work?
A website is a collection of individual documents and files made up of text, graphics, colours, links, and formatting that come together to create a complete user experience. Websites are accessible through web browsers. A web browser is a computer application capable of downloading and displaying the files and components that make up a website. Websites and their associated HTML documents and files are stored on computers called web servers. Combining everything When you type a domain name into your web browser, your browser sends a request to a web server where the website’s files are located. Your browser downloads these files, usually HTML documents and accompanying images or videos, and renders them on your screen. HTML and other languages used to display the data by your web browser are typically referred to as front-end technologies in the web-development space because of their user-facing tendencies. As you enter things like credit card information or submit a form on a site, the data you send back and forth to the web server is managed by server-side languages, sometimes referred to as back-end technologies. These languages make the organizing of databases easier, as well as manage user requests for new web pages as they navigate a site.
Writing your first web page
Once you’ve got an idea for the kind of web page you want to build, you’ll need to start writing some HTML and CSS.
HTML is a mark-up language that was created solely for making web pages. The idea is that, at their core, web pages are just a bunch of text and images arranged on the screen in different ways, and mark-up is just a way to attach instructions for how to make those text and images appear. Which Browser Should you Use? – The web browser knows how to take all those tags and the content inside them and display them as a web page. But if all browsers have the ability to display web pages, then why isn’t there just one instead of multiple? Well, each browser implements the rendering of HTML and CSS a little differently. This is actually a source of much stress for web developers — they have no way to control which web browser a user will experience their site with, so they spend a lot of time tweaking CSS to ensure it displays equally as close as possible across all different browsers. Styling the Page can be done While HTML is a mark-up language used for arranging content on a page, CSS is a separate language for changing the style of how those tags are displayed. We started this article by removing all the CSS, so let’s look at how we can add CSS back in.
Websites require two key components to function: a client and a web server. Clients, as we’ve learned, are any web browser or device that’s used to view and interact with a website. All of the files and data associated with displaying a website on a client are stored on a web server. If you’ve ever purchased something online, many of the processes necessary to complete a transaction happen on the shop’s web server. Shopping sites need things like user accounts, up-to-date inventories, product descriptions, the ability to receive shipping and credit card information, and a place for shoppers to review products they’ve purchased. This information is stored in large databases on web servers, away from users’ web browsers. In order to display products on the screen, you would need a programming language that runs on a server. Such a programming language would take care of creating, reading, updating, and deleting products from a database, which is where the products are stored. Languages that do this are referred to as server-side languages. Below are a few popular server-side languages you may have heard of (presented in alphabetical order), as well as the most popular frameworks used to simplify workflows and establish development standards across teams.
C# (pronounced C-Sharp)
C# was developed by Microsoft and is typically used by businesses to manage large databases. Because of the prevalence of existing Microsoft software in businesses, C# was adopted quickly.
Creating a Button
Deploying your first website
Once you’ve put in all the hard work of creating a website, you need to get it on the web so people can navigate to it and access its content. This process is called deployment. Deployment is a fancy word for “getting your website on the web,” and there are a few different parts of that process we’ll discuss below:
- Finding a domain name
- Finding a hosting service
- Uploading files with SFTP
- Deploying server-side applications
HTML is a mark-up language, which means it’s made up of two things: content and mark-up to describe that content. In HTML, mark-up exists in the form of different tags, and you can use those tags to describe the individual pieces of content throughout a website. When a site’s mark-up is “semantic,” it means the tags appropriately describe the content.
Why Is Semantic HTML Important?
Before a browser can show anything on screen, it has to read a website’s HTML and then figure out what to do with it. Every HTML tag has its own default styles and behaviour, so if the wrong tag gets used on some content, that element won’t work in the browser as expected. Semantic mark-up is important because it keeps websites working in a consistent and usable way.
CSS Pre-processors and Frameworks
CSS pre-processors and frameworks are both tools to help developers save time building websites. A CSS pre-processor is its own language built on top of CSS that adds scripting functionality. A CSS framework is a prewritten style sheet that includes its own layout and theme for user interface elements.
CSS is designed to be a simple language. It’s intuitive to learn CSS and write it on small websites, but on larger, more complex websites, writing CSS can become very tedious. That’s where pre-processors come in. Developers wanted more options when writing their style sheets, so they created CSS pre-processors to add programming functionality.
CSS frameworks contain prewritten styles for common design elements across the web. Websites today often need a lot of the same things: buttons, tables, forms, and grids, for example. CSS frameworks offer a quick and well-documented way to style all of these and more.
Building Responsive Websites
Web designers and developers used to just make different versions of websites for different devices, but now that sites are viewable on desktop, laptop, Smartphone, and tablet screens, there needs to be a way to build a single website that can display appropriately on each device. Enter responsive websites.
A single, responsive website offers people a consistent experience across all their devices.
Build Once, Not Twice
Responsive web design doesn’t just make things easy to use and understand for users — it’s also better for web designers and developers. Creating a responsive website means coordinating design and development all at once, rather than separately for different desktop and mobile sites. It’s much simpler to design and develop one website than two.
The term “single-page application” (or SPA) is usually used to describe applications that were built for the web. These applications are accessed via a web browser like other websites, but offer more dynamic interactions resembling native mobile and desktop apps.
The most notable difference between a regular website and an SPA is the reduced amount of page refreshes. SPAs have a heavier usage of AJAX — a way to communicate with back-end servers without doing a full page refresh — to get data loaded into our application. As a result, the process of rendering pages happens mostly on the client-side.
Learning Git and Version Control
If we could only pick one tool for any modern web developer to learn, it would be Git. Git is a version control system (VCS) that helps you manage changes to all the files in your project as you write and change code. Git also has the added benefit of being a distributed VCS, which means teams with many developers can use Git to avoid issues while working on the same part of an app at the same time.
Before we dig deeper into what Git is actually doing, let’s talk about how making changes to files works without a version control system.
Open Source Contributions
Open source software generally means code that is open to the public, and anyone is welcome to propose changes or enhancements to it. (Keep in mind, though, that just because open source software is open to the public does not mean it is not subject to proper licensing and copyright laws.)
Most of the world’s open source code today lives under a service called GitHub, which not only hosts code but also allows people to manage and moderate the code repositories. Having an active GitHub account with relevant open source contributions in your field of work has become increasingly more attractive to prospective employers and is slowly becoming a standard measurement for the quality of an engineer.
Choosing an IDE or Text Editor