how websites work

How do websites work?

Before you begin creating your own website and launch it to the Internet, it’s important to know how websites work.

Here are some basic terms:

• A website is simply a collection of web pages of codes – codes that describes the layout, format and content on a page.
• The web server is a internet-connected computer that receives the request for a web page sent by your browser.
• The browser connects your computer to the server through an IP address. The IP address is obtained by translating the domain name. ( Don’t worry, this part is all done automatically by your browser so you don’t have to look up the IP addresses yourself. )

In other words, in order to display your website on the Internet, you will need:

A domain name

A website is typically a collection of web pages, images and other elements that are linked together to form a larger, structured document. Think of a website as a book and each individual page is a web page.

A website can be made up of a single page or it could have thousands of pages. Each page will have its own text, images and other elements. All web pages and elements are then placed in a folder and stored on your web host server.

Each web page is written in codes and these codes describe the layout, format and content on the page. The most common coding language used to create web pages is HTML.

Creating a website

But just because a web page is written in codes doesn’t mean you need to be an IT geek to create one yourself. In fact, you don’t even need to know code or possess any technical skills or knowledge to create a website nowadays. Technology has advanced tremendously and there are a lot of website creators that allows you build functional and professional-looking websites without much or any technical knowledge.

If you have little to no technical knowledge and experience , the best is to use a website builder to create your website. The majority of website builders on the market are designed for the non-tech person in mind:

• Everything is online-based. There is nothing to download, nothing to install. Just open your web browser, type in the URL of the website builder, sign in and start building your website.
• No technical knowledge required. The website builders are created and managed by professionals so you don’t have to mess around with the technical aspects. You can create your entire website with all the bells and whistles without ever touching one line of code.
• It’s visual. Website builders typically use a WYSIWYG (What You See Is What You Get) editor that lets you create your website by dragging and dropping website elements into the desired location.
• Professionally-designed templates. You don’t have to worry about mismatched color schemes or disjointed layout as most website builders come with an extensive library of professional design templates.

Examples of easy-to-use website builders include Website.com, Wix, Weebly and Squarespace. All of the Doteasy web hosting plans include Website.com Website Builder service for FREE. Click here to read more details about Website.com Website Builder service .

For those have some technical knowledge and experience and are looking to build a powerful, flexible, highly customized website, there is always the option to choose a content management system, such as WordPress or Joomla. But do keep in mind that these site building applications often has a steep learning curve.

A domain name is the address that you type into your web browser address bar to get to a website. An example of a domain name is www.doteasy.com . A domain name is unique to a website. In other words, no two websites can have the same domain name.

While it is true that you don’t necessarily need a custom domain name for your website. Many website builders offer free plans that comes with a free website address. But these free website addresses come in the form of a sub-domain. . For example, if your website builder is “example.com” your free web address may be http://yourname.example.com.

This type of web address poses many problems:

• Your website becomes a “hostage” – because you don’t own example.com, you also don’t own any sub-domain or sub-folder variations of that domain name. The website builder has the right to create and delete any sub-domains and/or sub-folders they wish, with or without warning.
• Many customers do not want to do business with a company that doesn’t have its own domain name. A custom domain name (and a custom domain email address) gives you the professionalism, credibility and trust that you and your business needs.
• Search engines such as Google and Bing give preferences to domain names rather than sub-domains.

Custom domain names are not free, but nowadays you can easily get one for free from many service providers when you signup for an annual service plan.

A web server

A web server is the computer that receives the request for a web page sent by your browser.

Consider this: your company is hiring for a position that has just opened up and you are in charge of writing the job ad. You may have crafted the most compelling ad but unless you post the ad on a job board, no one will see it.

This is the same with websites. You could create the most stunning website but unless it’s uploaded to a web server, it is not accessible or viewable on the Internet.

You can certainly set up your own server at home, but it would require a huge amount of knowledge, time and resources (ie. power and Internet connection). Paying a web hosting service provider would be the more logical, economical and practical thing to do. Think if it like renting a space on a web host’s server. For a monthly fee, web hosting providers lets you use space on their servers to host your website, and because it’s their server, they as take care of all the technical aspects of setting up and maintain the server, as well as all the resources needed to run the server, so you don’t have to worry about anything.

How it all comes together

Say you open your web browser and type in a domain name, your browser will display the web pages of the domain name you’ve entered.

But have you wondered how your web browser knows what information to display?

Each website will have a website address, or a domain name, and each domain name is tied to the IP address of the web server it resides on. IP addresses are managed and tracked via the Domain Name Server (or DNS for short).

DNS works very similarly to the Contacts app on your mobile phone – you open up the Contacts app, type in a person’s name and your mobile phone returns with the person’s phone number and other contact information you might have entered. You can then decide if you want to call, email or text that person.

When you type in a domain name in your web browser, your web browser is actually conducting a series of inquiries that include looking up the IP address of the domain name, locating the web server that hosts the web pages of the domain name, submitting a request to that server for a copy of the web page(s), receiving the web page(s) from the server and finally translating the codes on the web page to present the information on your screen.

Fascinating, isn’t it? And that’s the basics of how websites work.

Limited Time Offer:   Host your website and get a FREE domain name for only $0.77/mo

You may also like

Web hosting is like renting retail space - a server storing your website. Visitors access your site through browser requests, similar to customers entering a store. Different hosting types offer various levels of control, speed, and cost, catering to diverse user needs.

ICANN, a non-profit organization, oversees IP address allocation and DNS management. While it accredits domain registrars for various extensions, it does not register domain names or police the internet. Domain registrar ensures exclusive ownership of registered domain names through authorized registration processes.

A domain name serves as a website's address, while an IP address uniquely identifies each machine on the Internet. Despite their differences, a domain name links to an IP address for web server location, making it essential for online visibility.

We use cookies

Our website uses cookies for essential functions, analytics, and advertising. By clicking 'Accept', you consent to our cookie policy and data use.

• Random article
• Teaching guide
• Privacy & cookies

How the World Wide Web (WWW) works

by Chris Woodford . Last updated: April 23, 2023.

T wenty or thirty years ago, there was something you could take for granted: you could walk into a public library, open up a reference book, and find information on almost any subject you wanted. What we take for granted nowadays is that we can sit down at practically any computer, almost anywhere on the planet, and access an online information library far more powerful than any public library on Earth: the World Wide Web . Twenty-first century life is so dependent on the Web that it seems remarkable we ever lived without it. Yet the Web was invented less than 30 years ago and has been a huge popular success for only about 20 of them. One of the greatest inventions of all time... is also one of the newest!

Artwork: Our gateway to the world: the World Wide Web (WWW) is made from information that travels across the Internet. When you look at a website, a program running on your computer (a web browser such as Google Chrome or Mozilla Firefox) pulls the information you need off a powerful, centralized computer (a web server). Each server may be firing pages out to hundreds, thousands, or millions of browsers at more or less the same time. A single web page might be downloaded from just one server or it could be built from separate parts downloaded from dozens of different servers all over the world.

What's the difference between the Web and the Internet?

Illustration: The Internet is like a superhighway (gray) connecting the world's computers together. The World Wide Web is a kind of traffic that can travel on that highway. In this example, two web pages (cars) are traveling from the server (the computer where they're stored) at the bottom to web browsers running on the laptops at the top. Other kinds of traffic that can travel on the Internet include email, VoIP phone calls, torrents , and files shared peer-to-peer.

How computers can talk the same language

The really clever thing about the Internet is that it allows practically every computer on the planet to exchange information. That's a much bigger deal than it sounds. Back in the earlier days of computers , in the 1960s, 1970s, and 1980s, it was rare for computers to be able to exchange information at all. The machines made by one manufacturer were often totally incompatible with those made by everyone else. In the 1970s, early personal computers (which were called microcomputers) could not even run the same programs. Instead, each type of computer had to have programs written specially for it. Hooking computers up together was possible, but tricky. So most computers were used as standalone machines, like gigantic pocket calculators . Things like email and chat were all but impossible, except for a handful of scientists who knew what they were doing.

All this began to change in the 1980s. The first thing that happened was that IBM—the world's biggest computer company, famous for its "big blue" mainframes—introduced a personal computer for small businesses. Other people started to "clone" (copy) it and, pretty soon, all personal computers started to look and work the same way. Microsoft came up with a piece of software called Windows that allowed all these "IBM-compatible" computers to run the same programs. But there was a still a problem getting machines like home computers talking to giant machines in science laboratories or big mainframes in large companies. How could computers be made to talk the same language?

The person who solved that problem was English computer scientist Tim Berners-Lee (1955–). In the 1980s, he was working at CERN, the European particle physics laboratory, which is staffed mostly by people from universities around the world who come and go all the time, and where people were using all kinds of different, incompatible computers. Berners-Lee realized CERN had no "memory": every time people left, they took useful information with them. A related problem was that people who used different computers had no easy way of exchanging their research. Berners-Lee started to wonder how he could get all of CERN's computers—and people—talking together.

What's the difference between HTTP and HTML?

Although early computers were pretty incompatible, almost all of them could store or process information using ASCII (American Standard Code for Information Interchange), sometimes known as "plain text." In ASCII, the numbers 0–255 are used to represent letters, numbers, and keyboard characters like A, B, C, 1, 2, 3, %, &, and @. Berners-Lee used ASCII to come up with two basic systems of rules (known in computer terminology as protocols ). If all the computers at CERN followed those two rules, he realized they could exchange any information very simply.

He called the first rule HTTP (HyperText Transfer Protocol). It is essentially a way for two computers to exchange information through a simple "conversation," whether they're sitting next to one another in the same room or on opposite sides of the world. One computer (which is called a client and runs a program called a web browser ) asks the other computer (which is called a server or web server ) for the information it needs with a series of simple messages. The web browser and the web server then chat away for a few seconds, with the browser sending requests for the things it wants and the server sending them if it can find them. The HTTP conversation between a web browser and and a web server is a bit like being at a dinner table when someone says: "Pass the salt, please", someone else says "Here it is", and the first person says "Thank you." HTTP is a sort of simple, polite language that all computers have learned to speak so they can swap files back and forth over the Internet.

A computer also needs to be able to understand any files it receives that have been sent by HTTP. So Berners-Lee introduced another stroke of genius. His second rule was to make all the CERN computers exchange files written in a common language called HTML (HyperText Markup Language). It was based on ASCII, so any computer could understand it. Unlike ASCII, HTML has special codes called tags to structure the text. A Web browser can read these tags and use them to display things like bold font, italics, headings, tables, or images. Incidentally, for the curious among you: you can see what the "secret" HTML behind any web page looks like by right clicking your mouse on a web page and then selecting the View source or View page source option. Try it now!

Artwork: An example of HTML code. This is the HTML that produces this web page. The little codes you can see inserted between angled brackets (< and >) are bits of HTML, which identify parts of the text as headings, paragraphs, graphics and so on. For example, new paragraphs are marked out with <p> and medium-sized headings with <h2> (header level 2).

HTTP and HTML are "how the Web works": HTTP is the simple way in which one computer asks another one for Web pages; HTML is the way those pages are written so any computer can understand them and display them correctly. If you find that confusing, try thinking about libraries. HTTP is like the way we arrange and access books in libraries according to more or less the same set of rules: the fact that they have books arranged on shelves, librarians you can ask for help, catalogs where you can look up book titles, and so on. Since all libraries work roughly the same way, if you've been to one library, you know roughly what all the others are like and how to use them. HTML is like the way a book is made: with a contents at the front, an index at the back, text on pages running left to right, and so on. HTML is how we structure information so anyone can read it. Once you've seen one book, you know how they all work.

What is JavaScript?

Web pages built in HTML are essentially "static" (unchanging) things. When you load them in a web browser, they look exactly the same as they did when the web designer loaded them in his or her own browser. Often, though, we want web pages to be more dynamic and responsive than this; we want them to respond to things that users do and change, rebuild, or refresh themselves accordingly. One way that web designers do this is by inserting little bits of computer code into web pages called scripts, usually written in a fairly simple programming language called JavaScript. This runs inside a web browser once a web page (and the JavaScript code it contains) has fully loaded, so the technique is called client-side programming (because a browser is also known as a client.) Just about the simplest thing you can do with JavaScript is display the date and time at the top of a web page. If you're writing an ordinary HTML web page, you obviously can't encode the current date and time because it will be wrong when someone else loads the page. But you can use JavaScript to do it instead, by reading the date and time from the computer's clock and displaying it in a familiar form. You can do very much more complex things with JavaScript, right up to running complete applications (what are called single-page applications or SPAs) inside a browser.

When Browser met Server

What the browser asks for, what the server replies, http status codes, what is a url.

There was one more clever thing Berners-Lee thought of—and that was a way for any computer to locate information stored on any other computer. He suggested each web page should have something like a zip code, which he called a URL (a Universal or Uniform Resource Locator). The URL is the page address you see in the long bar at the top of your Web browser.

The address or URL of this page is: https:// www.explainthatstuff.com/ howthewebworks.html

What does all that gobbledygook mean? Let's take it one chunk at a time:

• The http:// bit means your computer can pull this page off my computer using the standard process called HTTP. If the URL begins with https , as it does for this page, communication is encrypted as it travels between your browser and the Web server (so things like credit-card numbers, user names, passwords, and so on are kept secure from interference in transit). https pages are inherently more secure than http pages, but https alone does not make a website completely secure: it simply secures the connection between your computer and the server (or servers) you're talking to.
• www.explainthatstuff.com is the address or domain name of my computer. Some websites use domain names that begin with things other than www (for example maps.google.com and mail.yahoo.com ), which are called subdomains. maps.google.com , drive.google.com , and indeed www.google.com are all subdomains of the main google.com domain.
• howthewebworks.html is the name of the file you're currently reading off my computer.
• The .html part of the filename tells your computer it's an HTML file. Other filenames you might see include .php and .asp , which mean the pages you're looking at are "dynamic"; unlike "static" HTML pages, dynamic pages are built specifically for you, at the moment you request them, by the web server. (In contrast to JavaScript, which is a client-technology, PHP and ASP are server-side technologies: they run in the server, not the browser.)

And that's how the Web works!

How to set up your own website

The famous American inventor and publisher Benjamin Franklin once said that two things in life are certain: death and taxes. These days, he might add something else to that list: websites—because just about everybody seems to have one! Businesses promote themselves with websites, television soaps have spinoff sites devoted to their characters, newlyweds set up sites for their wedding photographs, and most kids have profiles (statements about themselves and what they like) on "social-networking sites" such as Facebook. If you feel like you're getting left behind, maybe it's time to set up a site yourself? How do you go about it?

What is a website?

The basic idea of the Web is that you can read information that anyone else has stored on a publicly accessible space called their website . If you're familiar with using computers for wordprocessing, you'll know that when you create a document (such as a letter or a CV/resumé), it exists on your computer as a file , which you store in a place called a folder (or directory). A website is simply a collection of interlinked documents, usually stored in the same directory on a publicly accessible computer known as a server . Apart from the main documents (text pages), a website generally also contains images or graphic files (photographs, typically stored as JPG files, and artworks, usually stored as GIF or PNG files). So the basic idea of creating a website involves writing all these text pages and assembling the various graphic files you need, then putting them all together in a folder where other people can access them.

What do you need to host a website?

Theoretically, you could turn your own computer into a server and allow anyone else on the planet to access it to browse your website. All you have to do is configure your computer in a certain way so that it accepts incoming traffic from the Internet and also register your computer with all the other servers on the Internet so they know where to find it. There are three main reasons why this is not generally a good idea. First, you won't be able to use your computer for anything else because it will be spending all its time serving requests for information from other people. (But if you have more than one computer, that's not such a problem.) Second, you'd have to make sure that your computer was switched on and available 24 hours a day—and you might not want to do that. Third, making your computer available to the Internet in this way is something of a security risk. A determined hacker might be able to access all the other folders on your machine and either steal your information or do other kinds of malicious damage.

So, in practice, people rent web space on a large computer operated by an Internet service provider (ISP). This is known as getting someone to host your website for you. Generally, if you want to set up a website, you will need a hosting package (a basic contract with an ISP to give you so much disk space and bandwidth (the maximum amount of information that your website can transfer out to other people each month). The web space you get is simply a folder (directory) on the ISPs server and it will have a fairly obscure and unmemorable name such as: www.example.com/ABC54321/   That's not exactly the sort of thing you want to paint on the side of your truck, if you're in business. So you'll need a more memorable name for your website—also called a domain name . The domain name is simply a friendly address that you give to your website so that other people can find it more easily. The domain address is set up to point to the real address of your site at your ISPs server ( www.example.com/ ABC54321/ ), so when people type your domain name into their Web browser, they are automatically redirected to the correct address without actually having to worry about what it is.

Some ISPs offer a user-friendly system where you simply purchase a domain name and hosting package for a single annual payment (generally, it will be less than about $60 or £30 per annum). With other ISPs, you have to buy the domain name and the hosting package separately and that works out better if you are hosting several different domains with the same ISP. Buying a domain name makes you its legal owner and you'll find that you are immediately registered on a central database known as WHOIS , so that other people can't use the same name as well.

How do you create web pages?

Setting up a domain name and Web hosting package takes all of five minutes; creating a website can take an awful lot longer because it means writing all the information you need, coming up with a nice page layout, finding your photographs, and all the rest of it. Generally, there are three ways to create web pages.

The most basic way of creating web pages is to use a text editor such as notepad or WordPad on Windows and build up your pages from raw HTML web page coding as you go. Generally, this gives you a much better understanding of how web pages work, but it's a bit harder for novices to get the hang of it—and unless you're a geek you may not want to bother. Instead of creating pages from scratch, you can use ready-made ones called templates . They're bare-bones, pre-designed HTML files into which you simply insert your own content. Just change the bits you need and you have an instant website! The main drawback of templates is that you can end up with a me-too site that looks the same as everyone else's.

WYSIWYG editors

Another approach is to use an editing program that does all the hidden Web-page coding (known as HTML ) for you. This is called a WYSIWYG (what you see is what you get) editor because you lay out your pages on the screen broadly as you want them to appear to everyone who browses your site. Popular programs such as Dreamweaver work in this way. Most word processors, including Microsoft Word and OpenOffice, let you convert existing documents into web pages ("export HTML files") with a couple of mouse clicks.

Content management systems

How do you upload web pages.

Once you've created your web pages and you have your domain name and web space, you simply need to upload the pages onto your web space using a method called FTP (file transfer protocol). It's very easy: just like copying files from one folder of your computer to another. When you've uploaded your files, your website should be publicly accessible within seconds (assuming that your domain name has already been registered for at least a couple of days first). Updating your web pages is then simply a matter of updating them on your local computer, as often as you wish, and copying the changes onto your web space as necessary. Generally it's best to do all your updating on copies of your pages on your own computer rather than editing live pages on the server itself. You avoid embarrassing mistakes that way, but you also have a useful backup copy of the entire site on your computer in case the server crashes and loses all your files.

How can you promote a website?

You want lots of other people to find your website, so you'll need to encourage other websites to make links to yours. You'll also need to register your site with search engines such as Google, Bing, and all the dozens of others. Sooner or later, search engines like Google will pick up your site if it's linked by other sites that they're already indexing, because they're constantly "crawling" the web looking for new content.

And that's pretty much all there is to it. The best way to learn about websites is to build one for yourself. So, off you go and do it! You can learn all about building basic web pages by playing with HTML files on your computer. Once you're confident about what you're doing, it's easy to take the next step and make a world-wide website for the whole wide world!

Do you really need a website?

If you liked this article..., find out more, on this site.

• Cloud computing
• History of communication

Other websites

• Google SEO Starter Guide : You've figured out how to build a site and you've got it working okay, but how do you successfully promote it through a search engine? Google's excellent introduction explains the best practices for getting search engines to work for you.
• Tim Berners-Lee's home page : Read all about the man who invented the Web.

Building websites

History of the internet and web, internet politics, for younger readers.

Text copyright © Chris Woodford 2006, 2021. All rights reserved. Full copyright notice and terms of use .

Rate this page

Tell your friends, cite this page, more to explore on our website....

• Get the book
• Send feedback

What is a Website & How Does it Work? (Easy Beginner’s Guide)

• By SiteSaga Editorial
• Updated on February 22, 2024 February 22, 2024

Do you want to know what is a website and how it does work ? If yes, then stay right here!

If you’re curious about the current online business trend , then you may have probably heard about websites. Or if you asked people how to build a cool online presence , then they might have suggested you create a website .

So, what’s a website actually?

In simple terms, a website is a collection of web pages. The ‘ web pages ‘ are online pages that you can view by using the internet and web service on a computer or smartphone.

For example, SiteSaga.com is a website and you’re currently viewing a web page on it (this article) with the help of the internet.

We’ll define a website, how it works, types, examples, etc. in the sections below. Keep reading to know everything about websites!

Table of Contents

A. video tutorial – what is a website.

Do you prefer watching a video tutorial instead? Then, here we go!

Otherwise, keep reading this article to the bottom if you still love to learn more from this beginner’s guide on what a website is and how it works.

B. What is a Website? – Definition

As the name implies, a website refers to a ‘site’ on the ‘web’ where you can put certain information. It can be about yourself, your business, or any other topic and users can access it by using the internet. 

To understand this better, here’s an analogy! Just like a physical ‘ site ’ on land where you make a house and live, you make a website on the web and your information lives on it.

And, just like the address of your house , your website also will have a unique address called ‘ web address ’. With the web address, internet users can easily find your site and access its information.

Technically, a website is a collection of interlinked pages on the internet grouped under a unique name or online address.

These pages, known as web pages , contain information or services by a business or organization. The information may be in formats like text, images, videos, audio , and animation . And the services may be like buying or selling products, downloading digital products , etc. 

For example , the page you’re viewing right now is a web page. It’s one of the several pages on our website ‘ SiteSaga.com ‘. All these pages are arranged under the name ‘ SiteSaga.com ‘ which you can access by entering ‘ www.sitesaga.com ‘ in a web browser. 

As a user, you just need a computer, a smartphone, or any device having a web browser , and an internet connection to access a website.

You need to enter a web address on the address bar of the web browser of your device. After that, it takes you to the front page called the home page of that site. We’ll know about these pages later.

C. What is a Website Used For? + Types of Websites

Every website on the internet is built with a specific purpose or goal. The organizations and businesses through their websites, aim to provide information and services to their members and customers. 

Websites also have become a medium of entertainment like playing online games, watching movies, listening to music, and so on. 

Similarly, eCommerce websites let us sell and buy things online . For example, www.amazon.com is one of the top eCommerce companies that runs a billion-dollar business via its website.

Types of Websites with Examples

Here are some of the popular website types with what they’re used for:

• Blog website – Provide information on various topics. Example: www.sitesaga.com (our website is a technology blog about building websites). Learn the best blog examples .
• eCommerce website – This lets you sell your product items of various types from your business. Example: www.amazon.com (clothing, beauty products, utensils, etc.)
• Personal site – For individuals to share personal thoughts, skills, portfolios, etc. Find the best personal sites . Example: www.ma.tt (Matt Mullenweg, the owner of Automattic)
• Entertainment website – Allows watching movies and videos, listening to songs, playing games, etc. Example: www.youtube.com (free music videos, movies, etc.)
• News portal – Makes readers updated with the latest news on the world scenario. For example, www.bcc.com (a news site featuring health, world politics, sports, etc.)
• Membership site – A membership site offers premium content to registered or paid members. Example: www.netflix.com (a paid movie streaming site). More examples .
• Social media site – Let users engage and interact with other users. Example: www.facebook.com (a social networking site where people can connect, communicate and share ideas).
• Education website – Websites of schools, universities, or independent academic organizations that provide info about various offline or online courses. Example: www.yale.edu (Yale University with undergraduate, graduate, and online programs).
• Government website – Sites for government bodies of countries, states, etc. with respective info. Example:  www.USA.gov (the official website of the United States government mentioning its programs like health, education, etc.).
• Search engine site – Help users search for things on the web and get useful results. Example: www.google.com (the most popular search engine website).

Learn more types of websites with their examples. Also, get inspiration from the best website examples .

D. How Many Websites Are There Online?

The number of websites released per day is massive. It’s hard to say how many websites exist there in total. So, it’s impossible to make a list of all websites. 

But we can always count! Here are some striking statistics about websites. They are according to Siteefy (retrieved on February 2024):

• An unbelievable number of over 1.88 billion websites are there on the World Wide Web.
• Among them, around 203 million websites are actively online .
• There are 4.99 billion web pages indexed , but the estimated actual number can be over 50 billion .
• According to the same source, there are more than 5.35 billion internet users in the world as of January 2024.
• And roughly, around 367.3 million domain registrations have been recorded until 2023.
• Using WordPress alone, users publish 17 posts every second .

Now, let’s find out which are the top websites on the internet!

Which are the Top Websites on the Internet?

According to Statista , the most popular websites before 2024 include Google.com, YouTube.com, Facebook.com, etc. The statistics are based on a survey conducted between September to November 2023 (a report published in February 2024).

Here, we’ve presented the list of the top websites according to the total monthly visits as per the report.

• www.Google.com – 175 billion visitors per month
• www.YouTube.com – 113 billion visitors per month
• www.Facebook.com – 18.1 billion visitors per month
• www.Pornhub.com – 12.8 billion visitors per month
• www.Xvideos.com – 8.96 billion visitors per month
• www.Wikipedia.org – 8.46 billion visitors per month
• www.Twitter.com – 8.39 billion visitors per month
• www.Reddit.com – 7.05 billion visitors per month
• www.Instagram.com – 7.36 billion visitors per month

You can learn more about these stats and their source from Statista . Alternatively, you can also check the top websites ranking table by Similarweb .

With that, you know which are the giants of the web engaging billions of internet users every day. But did you know when all of this started?

When was the First Website Created?

The first website was built by Tim Berners-Lee , a British Computer Scientist. It was launched on August 6, 1991, at CERN , a physics lab in Switzerland.

Further, he also introduced the first server, browser, and editor. And that’s along with HTTP (HyperText Transfer Protocol) and HTML (HyperText Markup Language).

You can visit and browse the first site from this link . This website is all about this first site creation project named, ‘ World Wide Web project ‘. So, you’ll find some general information, instructions on hypertext, and guidelines on building a web page.

Now, let’s go ahead and learn about the technology of how a website works in brief.

E. How Does a Website Work? (Explained)

In simple terms, a website is built with some software or set of code. But it works only on top of powerful inventions. Those are technologies that make the content created on some remote computers accessible to people worldwide.

First of all, let’s briefly talk about the internet and the web that provide a ground for websites. Normally, people these terms interchangeably but they’re different technologies.

• Internet – It’s the technology or infrastructure that connects computers worldwide and lets sharing information.
• World Wide Web (or Web) – It’s the system that enables the sharing of information using the internet.

In other words, the web is the vast collection of digital documents, websites, webpages, media, etc. And you can access them using the web browsers like Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox, Safari, etc.

More precisely, the web is one of many ways you can share information via the internet. Others include email, instant messaging, File Transfer Protocol (FTP), etc.

So, in a nutshell, the internet and the web are the fundamental technologies on which websites are based.

Website Software, Domain, and Hosting for Websites

The next set of technologies that you need to understand is the 3 things mentioned below: 

Website Software/ Code

• Domain Name 

Web Hosting

First of all , a website is made of a set of code or programming languages. The most common programming languages are HTML, CSS (Cascading Style Sheets), PHP (Hypertext Preprocessor), etc.

However, most websites nowadays are built with CMS (Content Management System) software or website builder . Some popular CMS platforms are WordPress , Joomla, etc. While some fully hosted website builders like Wix , Jimdo , and HubSpot .

These platforms also use coding but you won’t necessarily need to know coding to use them. They provide a user-friendly interface for non-coders and enable website-building for everyone.

Next are domain name and web hosting . They’re the 2 most essential things you need to create a website. A website works when these two things work together. 

Domain Name

In simple terms, the domain name is the name of your website. You need to register your website name with a domain registration company or domain registrar to get a unique web address.

Learn how to choose a domain name and after that, select a domain registrar. Some of the popular domain provider companies are Namecheap , Domain.com , etc.

So, every website on the internet has a web address that locates the position of the site. When you enter the web address of a site on your web browser, the browser navigates through the web. Then, it finds the location of the requested page and brings out the information for you. 

This is where web hosting comes in. The storage location where your website files and content are stored is called web hosting . 

Hosting services are also called web hosts and servers. Precisely, they are special computers situated in remote locations. They consist of huge memory and very powerful processors. Know more about them from the web hosting FAQs guide.

Learn how to choose a web host and then go for a reliable one. Some of the popular web hosting companies are Hostinger , Bluehost , DreamHost , Kinsta , Cloudways , etc.

How do Websites Process Information and Serve Users?

Behind the scenes, when you type in a web address on the web browser, it starts to search for the particular website on the server where it is located.

And then, the web browser fetches website files and HTML code from that server and formats them to a pleasing web page, and displays it on the browser window.

Website vs Web Pages – What’s the Difference?

As stated above, a website is a set of interconnected web pages grouped under a domain name. Whereas a web page is any single page on the website.

Websites normally include multiple pages. Some of the common web pages are as follows:

• Home page – It’s the first page that’ll appear when you type a site’s domain name. It contains basic information regarding what the website is about and the services it offers. Some links direct you to internal pages with more detailed info.
• Contact page – Most websites have a contact page. It offers a way for users to connect with the site owner via a contact form. Or it may include contact information.
• About Us page – It contains general info about the individual, organization, or business that manages the site. It may also include info about the history or timeline of the organization’s journey. Check the best About pages and learn how to make it from here .
• Blog – This page features the list of the most recent articles or news published by the site. Whereas some sites are full-fledged blog websites . We’ll differentiate blog vs website in the next section below.

Other pages may be services, portfolios, galleries, testimonials, etc.

One important thing to note is that some websites may have just one web page. Such websites are called one-page websites or single-page websites.

What are the Website Components?

Until now, we already know some vital website components. That includes the host, web address, home page, other pages, etc. Other than that, more site components are present to be aware of. Some of them are:

• Header or Navigation Menu: A navigation menu is at the top of a website depicting its navigation structure or map. It generally includes the site logo, links to the web pages, etc.
• Website Content: Every web page contains content of various types. It can be paragraphs, buttons, media, and whatnot.
• Footer: Every site has a footer at the bottom. There, you can add page links, contact info, physical business addresses, a search bar, social media buttons, etc.
• Design: The overall look and feel that displays the front end of the site is website design. For that, you can choose from graphics, layouts, colors, etc.

F. What is a Blog? How Does it Differ From a Website?

A blog is a type of website that is focused on providing information on different topics. The content of the blog is called a “ blog post “. The content of the blog appears in reverse chronological order (newer posts appear on top).

Blogs may provide general information, experience, reviews, critics, suggestions, or reactions through their posts. A reader can get an insight into what the post is trying to convey.

In the early days, people started blogging as a personal diary where they shared their daily life activities. Over time, blogging has become popular for sharing ideas on various topics like education, health care, business, fitness, tech, motivation, etc.

Some people seem to find it a little uneasy to distinguish between blogs and websites. Here are some of the things that differentiate blogs and websites.

• Blogs are only a type of website. A blog is aimed at providing information on various topics. So, a blog is a subset of websites. And there can also be various types of blogs .
• Blogs are dynamic. It means they are frequently updated with new content. And users can interact by adding comments, etc. Whereas, websites may be both static or dynamic (explained in the next section).
• Blogs can be a small part of a big website. On many websites, blogs appear as a section of large sites. For example, business websites create a blog page to educate users about their products and services. 

Here are some helpful guides for starting a blog site . That includes the benefits of personal blogging and the benefits of blogging for business .

G. Static vs. Dynamic Websites

There are mainly 2 types of websites according to their ability of user interaction.

• Static Websites 
• Dynamic Websites.

Static websites are ones with fixed information and the same content to display. Whereas  dynamic websites are those with the ability to change web page content as per user interaction.

For example, let’s take the example of our blog www.sitesaga.com . It’s a dynamic website because it includes a comment form after every article where users can add a comment. Once approved, the comment will appear on the page.

Similarly, the eCommerce website www.amazon.com is also a dynamic site. From this site, you can view products, add to cart, checkout, and purchase things. As you proceed, you’ll see the different designs on each page.

Dynamic websites can update web pages as per users’ behaviors. It’s capable of engaging users with the use of the database. The database allows the addition and removal of web page components.

Static websites contain a few fixed pages holding only information and no interactive components. Brochure websites, portfolio websites, informational websites , etc. are examples of static websites.

They’re mainly built with basic coding languages HTML and CSS. Whereas, dynamic websites require more complex programming languages like PHP.

However, you can make either static or dynamic websites easily using website builders , without having to write any code.

H. Do You Need a Site for Your Business?

No matter what scale your business is, having a website is super important nowadays. That goes without saying, most do online research before buying anything.

According to purchase statistics by Think with Google , 53% of shoppers say that they research before purchasing. Now, suppose you don’t have a website. Then how will people know about your products?

To make it more clear, here we’ve enlisted the main reasons why you need a website for your business:

• Increase in Reach : Your website helps your product to get in reach of more people who can be your possible customer.
• Online Presence : It lets your customers find you anytime and from anywhere. And, by being online every time, you’ll stop losing customers to your competitors.
• Increases Credibility : Online presence of your business makes your business more professional. It enhances the trust factor of your customers.
• Market Expansion : Your website can be viewed from all around the globe. So, you may meet your potential customers from different parts of the world.
• Cost-Effective : Having an eCommerce site can be cost-effective as compared to an actual store. It cuts the cost of operating, wages, utilities, etc. Cutting such overhead costs will lower your product prices and hence, increase your sales.
• Customer Interaction : It’s easier for your customers to reach you online, ask questions and give feedback. Communicating with users helps you to improve your products. And it’ll eventually grow your sales.

I. How to Start a New Website?

Now that you are familiar with the importance of a website, you might want one for your business. Chances are that you have no idea about making websites. 

Normally, making a website involves learning codes that take months of practice and experience. We suppose you don’t want to learn it.

Another way to get a site is by hiring a web developer or web development company to create it for you. It keeps you from learning the codes yourself, but you’ll need to pay a big chunk of money. 

3 Best Website Builder Platforms 2024

Thankfully, there are many beginner-friendly website platforms for the easiest site creation. Know them!

1. WordPress

The most popular and one of the easiest website builders today is WordPress . It allows you to create websites easily with a drag-and-drop functionality. So, no more the hassle of learning coding.

WordPress has 2 versions. WordPress.com and WordPress.org. Both of which are affordable.

For example , to create a site on the WordPress.com platform, all you have to do is to sign up. Then, choose one of the beautiful WordPress themes and add content. WordPress.com is a fully hosted platform where you can make a free site.

If you want to create a site with self-hosted WordPress.org , then you’ll need to install WordPress on a WordPress hosting platform and set up your site. Other than themes, WordPress also provides several WordPress plugins for various needs.

Know more about WordPress . Learn the differences between WordPress.com vs WordPress.org .

Do you want to build an eCommerce website? Then, you can go with Shopify . It lets you start, grow, and manage an online selling business. Further, you’ll get ready-made online shops that you can tweak and customize to set up your digital business and sell goods and services. 

Moreover, it provides many free and paid themes from the  Shopify Theme Store  for your online store’s design. Also, you can expand the store functionality with free and paid apps from the  Shopify App Store .

However, it’s a premium platform that starts at $19 per month .

Learn about Shopify in detail in our complete guide!

Webflow is an all-rounder platform that lets you create stunning websites without writing code. It offers intuitive visual editors, customizable templates, and a drag-and-drop interface ideal for everyone.

Further, Webflow focuses on clean and optimized code, resulting in  faster loading times  and improved SEO ( Search Engine Optimization ). Ultimately, your website performs at its best and provides a seamless experience for visitors.

Know what? It has free and paid pricing plans, with the paid plan starting at $14 per month .

Learn what Webflow is and how to create a website with Webflow .

Overall, you can learn the entire process of site building by following the guide below!

J. Future Trends in Website Development

Staying ahead of emerging trends is crucial for creating engaging and efficient website experiences. As technology continues to evolve, some notable trends are shaping the future of web development. Let’s delve into these innovations that are revolutionizing websites.

1. Artificial Intelligence Integration

The integration of Artificial Intelligence (AI) in website development is poised to be a significant trend. AI technologies, such as machine learning and natural language processing, enhance user experiences by personalizing content, automating tasks, and providing intelligent insights.

Some areas where there’s use of AI in websites are:

• AI-powered chatbots on websites enhance the user experience by providing instant responses to queries and guiding users through the website.
• AI algorithms analyze user behavior and preferences to offer personalized content and recommendations, improving user engagement and conversion rates.
• Websites are adapting to include voice search capabilities and AI helps in understanding natural language, making voice interactions more intuitive for users.

Overall, this trend aims to make websites more adaptive, interactive, and user-friendly.

2. Progressive Web Apps (PWAs)

PWAs offer a seamless user experience by combining the best features of web and mobile applications. As the demand for mobile-friendly and responsive web experiences grows, PWAs are set to become a standard in website development.

Here are its advantages in brief:

• PWAs offer a seamless and fast user experience for websites. They load quickly, work offline, and provide smooth navigation, contributing to a positive user experience.
• They work seamlessly across various devices and platforms.
• Also, they leverage technologies like cache content, ensuring faster loading times and responsiveness, and improving performance.

3. Data Analytics

Another significant aspect is the role of data analytics in website optimization. Here are some key trends:

• User Behavior Analysis: Understanding user behavior is vital. Predictive analytics based on historical data can anticipate user actions for forecasting.
• Real-time Analytics: Faster, more efficient real-time analytics for instant responses, user interactions, and dynamic performance optimization.
• Conversion Rate Optimization (CRO): Not just data-driven strategies but using advanced analytics and AI recommendations for dynamic optimization of conversions .

There you go, the trends and future of websites that are continuously evolving as technology advances and user expectations change.

K. Challenges in Website Development

But is creating a website that easy? Here are some challenges you might face with websites:

• Constant monitoring is required to protect user data and prevent cyber threats.
• Ensuring websites are user-friendly for individuals with disabilities is a key challenge.
• Keeping up with the rapid evolution of tools and frameworks poses ongoing challenges.
• Adapting websites to handle growth in traffic and data volume is a persistent concern.
• Ensuring consistent user experiences across various browsers is a continual challenge.

Don’t be concerned!

Every problem has many solutions. Find them in our blog about what makes a good website to ensure your website overcomes these challenges.

Frequently Asked Questions (FAQs) on Sites

1. what does a website include.

A website is a collection of one or multiple HTML files. Depending on the type of website, it can have different web pages with various components. Some include content, header, footer, etc.

2. What are the benefits of a website?

The major benefit of a website is that it holds several web pages linked with one another. So, your site can be related to one or more topics, companies, products, or services. Overall, you’ll get to boost the online presence, reach, and market at a minimum cost.

3. What is the opening page of a website called?

The opening page of a website is called the homepage. It usually works like a table of contents of the site which links other sections of the site. Overall, it describes the site’s content.

4. What is a website title?

A  website title  is the fundamental identity of the site. If a user searches your site on the internet, then your website title is what they see first and the most. For example, our site has a title of ‘ SiteSaga – The Best Resource to Help You Make a Site ‘.

5. What is a website URL?

The full form of the URL is Uniform Resource Locator. A website URL is the address of a site that specifies where it’s located on the web. For example,  https://www.sitesaga.com/ .

6. What is the landing page of a website?

Landing pages  are standalone pages of a site. They are mostly used for social media, email, or  marketing  campaigns. So, you can use it to promote your products/services and turn the visitors into customers/subscribers.

7. Is the website one word or two words?

You may find the terms ‘site’, ‘web site’, and ‘website’. All of them mean the same thing. More than ‘web site’, you can use ‘ website ‘ or simply ‘ site ‘. So, don’t waste time on this confusion.

That’s all. We hope this article helped you to get a clear picture of what a website is .

Hopefully, you also learned how a site works, its types and uses, and how to get one for your business or company. If you already have a site, then please feel free to share your experience with us. 

You may find these guides helpful. They are on how long it takes to build a website and how much money a website costs .

For the step-by-step process, follow our website-building guide ! Want to create a blog instead? If yes, then follow our complete blog creation guide !

Also, follow us on Facebook and Twitter for more useful blogs and articles.

You might also like...

25 Most Popular Types of Websites in 2024 (With Examples)

What Is a Blog and How Does It Work? (Full Guide + Examples)

How to Promote Your Blog? (14 Proven Techniques)

Sign up to get fresh content.

Subscribe to our blog and get exclusive content every week! We don't like spam, so we won't spam you with junk email.

WEBSITE ESSENTIALS

What is a website? Definition + examples

• Rachel Bistricer
• 13 min read

Get started by:  Creating a website →  |  Getting a domain →

Before the internet age fundamentally changed global communication, businesses relied on things like newspaper ads, flyers and word-of-mouth to reach customers. But in today's digital world, an online presence is essential, including creating a website . With 73% of small businesses  owning websites, a strong online presence is a prerequisite for brand recognition, lead generation and operating a successful venture, both on and offline. 

With drag and drop tools and AI website builders , website creation has evolved and changed the way in which people carve out their digital presence. Before diving in, it’s necessary to understand the basics—like what is a website and why do you need one? This article will cover website definitions, the characteristics of the various types of sites and why it's important to build a website.

What is a website?

A website is a place on the internet where you can easily post information about yourself, your business or topics you're passionate about. It's like having your own corner of the web to showcase your ideas and connect with others. Whether you're looking to share knowledge, sell online, communicate with others, learn something new or simply have fun—websites serve a variety of purposes. To access a website, users simply need a device with a web browser—like laptops, smartphones or tablets—along with an Internet connection.

What are websites used for?

From personal blogs to e-commerce stores, websites have become a crucial part of our routines, offering convenience and accessibility. Whether it's for entertainment, education, or business, websites are digital platforms that enable communication, information sharing, and online transactions. 

Learn more: What is an ecommerce website?

Websites can be used for personal purposes, such as blogging or sharing information about hobbies and interests. For businesses, a website serves as an online storefront where customers can view products or services, make purchases and reach out for customer support.

They are also commonly used for education purposes, with many schools and universities having their own websites to share information and resources with students. Additionally, organizations and nonprofits use websites to raise awareness about their causes and connect with potential donors.

Learn more: What is a wedding website?

How does a website work?

The first thing to understand is the internet and the web that provide a ground for websites. The internet is the technology or infrastructure connecting computers and facilitating information sharing. The web is the system that enables information sharing using the internet. It encompasses digital documents, websites, webpages, media and more. To view web content, we use web browsers like Google Chrome, Internet Explorer, Microsoft Edge, Mozilla Firefox or Safari.

When you enter a web address or domain name into your browser, your computer sends a request to the hosting server. This request passes through the Domain Name System (DNS)  to look up the server's internet protocol (IP) address . The web service uses protocols like Hypertext Transfer Protocol (HTTP), Hypertext Transfer Protocol Secure (HTTPS)  and File Transfer Protocol (FTP) to transmit information and files over the web.

Once the server receives the request, it sends back the requested webpage , along with images and other files, to your computer. The browser then displays the webpage using technologies like HyperText Markup Language (HTML)  and Cascading Style Sheets (CSS) . These technologies structure and present the information on the screen. Website loading time depends on a range of factors like server speed, internet connection quality and website size and complexity.

Difference between website, webpage and web server 

Understanding the distinctions between a website, webpage and web server is key for effective navigation in the digital landscape. Let's use a simple analogy—imagine a bustling marketplace. The website is like the marketplace itself, and each webpage is a unique stall or shop within it. Similar to a marketplace, each webpage offers different products—information, images and services —just like the goods in a shop. Now, picture the internet as the city where the marketplace is located, a vast network connecting countless marketplaces (websites). It's like exploring a city full of interconnected markets, each with its own offerings.

A webpage is a single document or page within a website. Websites can have multiple webpages, all linked together by hyperlinks, to display a cohesive website. The page you're currently on is a webpage. When you go to the home page, you're on a separate webpage, but still within the same website. 

Web server 

A web server  is a computer that stores and delivers webpages to users when they request them. It is the physical location where all the files and data for a website are stored. When someone types in your website's URL, the server gets the necessary files and displays them to create the webpage.

A website is a collection of webpages that are accessed with a single domain name or URL. It includes all the individual pages, multimedia details and files stored on a web server. Websites are built using languages like HTML, CSS and JavaScript  to make visually appealing layouts and functionality. 

Don't confuse websites and web servers. If someone says, "My website is not responding," it means the web server isn't responding, making the website unavailable. Remember, a web server can host multiple websites, but the term "web server" doesn’t refer to a specific website. In the previous example, if someone says, "My web server is not responding," it means multiple websites on that web server are unavailable.

Website definitions

A website is a collection of webpages hosted on a web server. In order to create a website , you need several components. Here’s what you need to get started:

Domain name

To reach your site, individuals type in a unique web address that typically reflects your business or brand name and ends with a domain extension like .com, .org, or .net. Registering your website name with a domain registration company, also known as a domain registrar, is necessary to secure this distinctive internet address.

Tip:   When you make a website with Wix, you can opt for  domain privacy  for no extra fee, when you register your domain. 

Domain extension

Also known as top-level domains (TLD), d omain extensions  can quickly identify specific elements of a website like its main purpose, owner or geographic location. You can check out  ICANN’s complete list of domain extensions here , or check out these guides:

. directory

Webpages, also known as individual documents within a website, present information to users. Each webpage should serve a specific purpose and contribute to the overall user experience by providing valuable material, images and interactive elements. Some websites may be concise and focused, with only a few pages, while others offer an array of information and services to cater to diverse user needs.

This is the service that stores your website's files and makes them accessible to users on the internet. By choosing the appropriate plan for hosting a website , you can optimize performance, enhance security and provide an exceptional usability to your visitors. 

URL address

The address of a website is also known as the Universal Resource Locator (URL) . When a user wants to open a website then they need to put the URL of the website into a web browser and the requested website is delivered by the web server. The URL of the Wix Blog for example, https://www.wix.com/blog is composed of three parts: 

Protocol identifier: Defines the protocol used to access the webpage (usually HTTP or HTTPS)

Server name: Refers to the domain name and extension where the web server is located ( wix.com )

File name: Indicates the specific page or resource on that web server (blog)

The homepage  is a very common and important part of the website. It serves as the initial point of contact for viewers, setting the tone and guiding them to explore the rest of the website. Thinking through and making a homepage  not only showcases the brand's identity but also directs users to other relevant pages.

Navigation structure

Website navigation  is the order of pages and the collection of links that connect them. When done correctly, it creates a smooth and intuitive browsing. Typically, this structure is supported by one or more menus, strategically placed to make it easy for users to find what they need and move around the sections of the website. 

A website template is a pre-made design that includes the layout, color scheme, font choice and all visual elements. It's like a ready-to-use blueprint for your brand's online presence. With Wix, you'll find a wide range of templates, from striking photography website  templates to stylish blog templates . These templates can be customized to fit your brand and content needs. 

Multimedia elements

These include a wide range of multimedia details such as images, videos, audio files and interactive website features  like animations and adaptive content. When used correctly, these elements can make a website engaging, informative and visually appealing.

Content is the information you put on your website to inform, guide, or influence visitors. This information can be presented with text, images, videos or audio recordings. Similar to website design , the primary responsibility of content is to keep people engaged, resulting in longer stays and repeat visits to your site. Additionally, well-optimized articles can improve your position on search engine result pages (SERPs), playing a crucial role in on-page search engine optimization (SEO).

“ There are over 2 billion websites out there and we all visit many of them daily. With visual and textual content you have the opportunity to make a statement and have your site stand out. This is the place to add your brand personality. If you are more traditional, no need to go wild. Often, unique copy or a cool visual is all you need for your site to be memorable. ”

Adi Huri, Product Manager at Wow for   Wix

Static vs dynamic websites

When it comes to creating your website, you'll face an important decision: choosing between a static vs dynamic website . This choice will affect how your webpages are stored and delivered to users in their browsers. Let's take a closer look at these website structures.

Static websites

A static website is a collection of pre-written webpages that are displayed as published. These sites aren't interactive, meaning the material on each page remains the same until manually updated. The information and appearance of static websites remain consistent for all viewers, regardless of their browsers, locations or devices. Often, businesses opt for static websites to establish a simple online presence, as they are cost-effective without requiring server-side processing in multiple languages.

While static webpages can't take input from users, they can still contain animations and clickable elements like hyperlinks or navigation buttons. This makes them a popular choice for portfolio and catalog sites.

V-labs  is an example of a static website. It displays text, images and navigation links that direct visitors to other pages.

Dynamic websites

Dynamic websites are more flexible and user-friendly. They can change information and appearance based on several factors, including the time of the day, visitor’s location, language preferences, past interactions with the site or device type. With these sites, the web server processes data in real-time to generate customized pages for each visitor. Dynamic websites can interact with users through forms, surveys, quizzes and other interactive factors that require server-side processing.

This makes dynamic websites most suited for eCommerce business, social media, ticket booking and forums. These sites also allow individuals to set up accounts, login and access personalized information or services.

Amazon.com is a popular example of a dynamic site. Its front page shows product recommendations to visitors based on their locations, purchases and search history.

Types of websites

Websites can also be broken down into categories based on their objectives, features or target audiences. Whether you’re starting a business  or simply want to start a blog , understanding the difference between these types of websites  will help you get started.

These sites are used to publish articles or posts in a chronological order, covering a wide range of topics from personal stories to news, as well as thoughtful essays, tutorials or practical advice lists. Keeping blog content up to date—as well as the feedback from users—must be constant. Many businesses start a blog to share news and information with their customers, using it as an SEO tool, attracting more organic visitors. Nowadays, professional blogging has emerged as a popular way to earn money online.

As an interior stylist and digital content creator, Brit Arnesen uses her blog, britdotdesign , as a platform to provide design inspiration and expertise to her readers.

An eCommerce website  is an online store  that helps you sell products, services and digital goods online by enabling you to accept payments , process orders, manage logistics and shipping and offer customer help. These websites are made up of several webpages where businesses show their products and users can place orders online, complete the transaction and apply various payment methods.

Adama Studio  creates modern, practical ceramic items for everyday use. Their website has an online store where customers can easily purchase and have products shipped.

An online portfolio  showcases a person's or business' work, skills and experience. It's used to attract prospective clients, employers or partners by sharing your previous projects. A portfolio website  can house images, videos, descriptions of the services provided as well as client testimonials.

Sharon Radisch  is a multi-talented creative who works as a photographer, art director and artist. Her online portfolio highlights the various projects she has undertaken in each of these roles.

Websites for professional services

Professional websites aim to encourage users to purchase products or services, but without strictly serving as an eCommerce site. The main individuals who create a professional website  are users from various fields, including suppliers and service companies. Their sales process works best through a quote or an in-person appointment.

Mango Marketing ’s website outlines their studio service packages for businesses looking to expand their business and enhance their online visibility.

Landing page or single page sites

One-page websites' popularity has grown because they are simple and easy to navigate. These websites concentrate all information on a single landing page , making them effective and cost-efficient for launching special products or services. Typically used by small businesses, they act as a digital business card, displaying contact information and advertising services.

Animal Music Studios  utilizes engaging videos and a navigation menu at the top to guide users to the different sections of the one-page site.

News websites present news articles, current events and other relevant information. They often include details like videos and images to support their stories. News sites update regularly and can be categorized into different sections such as world news, politics, sports or entertainment. As more individuals consume news online, newspapers have adapted by transitioning to digital. Many magazines and newspapers now offer subscription-based news sites as they no longer rely on print editions. 

New Wave Magazine  is a digital publication that also offers print editions. Readers can access articles on their website and purchase print copies through their online store.

Portal websites are primarily used within educational institutions like schools and institutes, as well as businesses. They make things easier by providing various functions, including a secure login process for students to view their information like grades and schedules. Employees also benefit from these websites, as they offer a convenient way to access emails, alerts and other relevant information needed for day-to-day tasks and responsibilities.

Jule Dancewear , is a small business that sells dance apparel. They have a website where customers can create an account to save their profile information, view order history, save blog posts they are interested in and create wish lists of products they may want to purchase in the future.

Forum websites bring people with similar interests together to connect and engage with each other. You can use timelines, chats or specialized forums to interact. Social networking sites like Facebook, Instagram, Twitter, Snapchat and Reddit are great examples of forums where you can connect with others who share your interests.

Brown Skin Brunchin  is a community for professional minority women. The website features a forum where members can connect by posting introductions, having discussions and sharing stories, ideas and photos.

Why you need a website

Whether you are a small start-up or an existing company, establishing an online presence can greatly benefit your business in many ways.

Increase competitiveness

A website can enhance your brand identity and make you stand out among competitors.  With many businesses relying on online sales, having an engaging and well planned website can give you a competitive advantage. A business website  allows you to showcase your products or services in an attractive and informative manner, encouraging potential customers to choose your business over others.

Reach a wider audience

Reaching a larger audience beyond your local community is made possible by creating a website. With the internet, your business can be accessible to anyone, anywhere, at any time. This increases your customer base and opens up opportunities for growth and expansion.

Cost-effective marketing

79% of online buyers  shop at least once per month. If you want to attract more people, one of the best ways is by making yourself visible on Google. You can employ search engine optimization (SEO) methods to help your website rank organically.

Sell products and services online

With an eCommerce website, you can sell your products and services online, reaching a wider customer base. This allows for 24/7 sales potential and removes geographical limitations. Online shopping is also becoming increasingly popular, making it essential for businesses to build an eCommerce site .

How to create a website

Now that you've learned about how websites work and the different types of websites, you might be considering one for your business. Let's explore what you'll need to start your own website. With this knowledge, you'll be empowered to build a website that suits your business needs.

Ready to set up your website? Watch the 10 most essential Wix tutorials  to get started.

Outline your website idea

The first step is to have a clear idea of what you want your website to achieve. This will help you determine the type of website that best suits your needs and goals. Consider what products or services you offer, who your target audience is and how you would like to present your brand online. Learn how to plan a website  to help you in the following steps.

Choose a domain name and web hosting

Your domain name acts as the digital address of your site so users can easily find you online. When selecting a domain name, it's important to pick one that reflects your brand and is memorable. Avoid using hyphens and numbers and aim for a short domain name. If you're struggling to come up with ideas, try using our domain name generator  to find a suitable name. 

Tip:  Use Wix’s domain name search  to check if your desired domain name is available.

Pick a website building platform

Fortunately, creating a website has become very accessible even for people without a technical background. In fact, you can turn your website idea into a fully functional site using a drag and drop website builder and all of the functionalities that come with it. 

Select a web hosting provider

Once you've chosen a platform to build your website, you'll need a web host. Web hosting is the service that stores your website files and makes them available to your customers when they visit your site. Your host handles all the HTTP requests and delivers the necessary files to fulfill those requests whenever someone accesses your website. Web hosts also support you with backups, uptime and security maintenance. When selecting a hosting website , consider cost, features, security and support. Wix's free web hosting  allows you to easily scale your hosting as your online business grows.

Design your website

Creating a successful website involves more than just visual appeal. It's about establishing a cohesive brand identity, ensuring a user-friendly experience and utilizing effective web design  elements. Consider factors such as your logo, color schemes and typography to reflect your brand's personality. When designing a website of your own, you can use website templates  that aligns with your brand and guides and prioritizes user interface (UI)  to provide seamless browsing. Check out these examples of web design inspiration .

Add page content and optimize for SEO

Your content is the heart of your website. Use engaging and informative material to attract and retain visitors. Your website should be easy to navigate, with a clear call-to-action on each page to encourage users to take specific actions, such as completing a purchase or signing up for a newsletter.

When creating your website, keep search engine optimization (SEO) in mind. This involves optimizing your website to improve its ranking on search engines like Google. This will help increase your visibility and drive more traffic to your site. Some tips for optimizing your website include using relevant keywords, creating high-quality information and ensuring fast page loading speeds.

Launch and maintain your website

Once you've completed all the necessary steps, use a website checklist  when launching a new website . However, building a successful online presence does not end here. Regular maintenance is crucial for keeping your site up-to-date. This means updating pages, monitoring for any technical issues and keeping up with SEO techniques to maintain or improve your search engine ranking. Additionally, regularly checking in with your audience and collecting feedback can help you continually improve and enhance your website's performance.

What is a website FAQ

What is the most common website type.

The most common website type is a business or eCommerce website, followed by personal websites  and blogs. However, this can vary depending on the purpose and industry of the website.  With so many website types available, there is certainly one that will suit your needs and goals.

What is the role of the DNS in a website?

What are website cookies, why do some websites look different on my phone, how much does it cost to build a website, what is a website title, how does a website cms function, related posts.

How to make a personal website: a step-by-step guide

Best website builders for small businesses in 2024

What is an eCommerce website and why do you need one

Was this article helpful?

How Do Websites Work: A Technical Introduction

What happens when you open a web page in your browser? How is content loaded from the internet and displayed to the user?

This article takes a look at how resources are loaded using the HTTP protocol and how they come together to form a web page. We’ll also take a look at what this means for how long it takes to load a website .

Understanding clients and servers ​

Computers on the internet can act as clients and servers. Clients can request resources from a server on the internet using HTTP requests. The contents of the website are then transmitted to the user. We’ll learn more about the HTTP protocol later on.

Clients are often browsers like Chrome or Safari running on an end user device like a phone or laptop. Mobile apps also use HTTP to load server resources, as do software development tools like curl .

HTTP servers host websites. They receive requests from clients and then return the requested resources. Examples of web servers are NGINX and the Apache HTTP Server.

Resources and Uniform Resource Locators (URLs) ​

In this context, resources are text files, images, and other media that are loaded over the internet. A web page consists of many different resources. On average about 70 different files are loaded by a page.

When a client requests a resource it needs to specify the name of the resource and what server to request it from. The client also needs to pick a protocol that should be used to make the request.

These bits of information are combined into a web address called a Uniform Resource Locator (URL) like this one: http://example.com/images/photo.jpg?version=2 .

We can break this URL down into 5 components:

• http:// – the protocol that will be used to load the file
• example.com – the domain name . The Domain Name System (DNS) can be used to identify a specific server based on the domain name of the website.
• /images/photo.jpg – the path of the resource. This tells the server what resource you’re requesting
• ?version=2 – the query string . Usually used to provide additional details about the resource the client is looking for, for example a version number of the resolution of an image

HTTP requests and responses ​

The Hypertext Transfer Protocol (HTTP) provides a way for computers to communicate with each other. It specifies what information clients should provide when making a request and what the server response should look like.

HTTP requests ​

When making a request, clients need to provide a resource path to specify what resource they are requesting.

Clients can also provide additional information in using request headers . For example, a browser could tell the client what image formats it supports so that the server can respond with the best option.

Cookies are also included in the HTTP headers, for example to identify a logged-in user. When two different people go to the Twitter homepage the server can respond with a different timeline for each one.

The client also provides a method , saying what the browser wants to do with the resource. When loading a website the method is usually “GET” which means that the browser wants to download the resource. When submitting data to a website the “POST” method might be used instead.

HTTP requests can also contain a body . A body is not provided when downloading a resource, but for example when uploading a file it would contain the contents of the file.

Simplified example ​

A basic HTTP request could look like this:

The Host header tells the server what website we want to load the resource from. A single web server can be used to host multiple websites, so the Host header is needed to distinguish them.

The User-Agent header tells the server about the application that's making the request on behalf of the user. In this example that's Chrome on Mac OS.

By providing the Accept the server knows what kind of response the user agent can handle, for example whether the WebP image format is supported.

HTTP responses ​

An HTTP response consists of three parts: a status code, response headers, and the response body.

The status code indicates whether the request was successful. For example, a 200 OK status indicates that everything went fine. A 400 Not Found status shows that the requested resource doesn’t exist on the server. If the server ran into an error while trying to process the request it will return a 500 Internal Server Error status.

Response headers provide additional information about the response. For example, is the file type PNG or JPG? If the browser needs to load the same resource tomorrow, should it make a new request or just use the old response again?

Finally, the response body contains the actual content of the resource.

Example of an HTTP request and response ​

Let’s use the curl command line tool to make an HTTP request. Alternatively you can take a look at requests in Chrome DevTools .

We pass in the resource we want to load and the -i flag tells curl that we want to view the full response data, including the status code, headers, and response body. The -X flag lets us specify the request method.

Here are the first 18 lines of the server response:

That’s a lot of information! We can see that our request was successful ( 200 OK status code) and that version 1.1 of the HTTP protocol was used.

There are 12 response headers in total, mostly to control caching behavior or to provide additional information about the response.

The value of the Content-Type header is text/html . That indicates that the response is an HTML document, the language that browsers use to display websites.

You can recognize HTML code based on the text in angle brackets. These are called tags and we can see html , head , and title tags in the first few lines of the document above.

The HTML document provides the page content and overall structure of the page. Based on this information the browser then renders the website.

For example, we can see this snippet <title>Example Domain</title> in the HTML response. Chrome uses this information as the title of the browser tab.

Combining resources into web pages ​

Websites rarely require just one request to load. The HTML language provides options to reference additional resources, for example images:

A request waterfall can show all the resources that are loaded by a website. Many websites consist of over a hundred different resources.

We can see four types of resources in the request waterfall below:

• An HTML document containing the content and structure of the website
• A CSS stylesheet that says how the page content should be displayed, for example text sizes or where on the page content should be shown
• A JavaScript file that contains code that’s run on the page, for example to modify page content after the initial load
• Images that are displayed on the page

Some resources, such as JavaScript application code, can themselves request other resources. Here’s an example of an HTML file that loads a JavaScript file, which in turn loads another JavaScript file, which then loads an image.

Rendering the page ​

Once the page has loaded the most important resources it can start rendering it. That means taking the HTML and CSS code and turning it into the website that the user can see on the screen.

At a high level page the browser needs do this to render a page:

• Read the HTML code to identify UI elements
• Find the CSS styling rules that are applicable to each UI element
• Calculate the layout of the page, meaning where on the page each UI element should go and how large it will be
• Paint the page elements, turning the abstract structure of the web page into pixels on the screen

You can read more about how rendering works here .

Server connections ​

So far we’ve talked about the simple request/response model of HTTP. But how does the client find the server it needs to talk to? How can client and server exchange data without revealing it to other computers on the internet? What happens when the client data gets lost on the way?

Computers use secure server connections to achieve this. We've written another article that goes into depth on what server connections do and what's involved in connecting to an HTTP server .

When looking at a request waterfall you can see that before making an HTTP request the browser first needs to establish a connection to the server. The connection can be reused when loading more resources from the same server later on.

However, when a resource from a different server is needed then a new connection needs to be created. In this example the Discord website loads a CSS stylesheet file from fonts.googleapis.com . So the browser needs to create a new server connection.

What does this mean for website speed? ​

Since websites are made up of many different resources their content often shows up gradually over the course of a few seconds as requests for those resources are made.

For example, here the page remains blank for the first 0.7 seconds. Then the content at the top of the page shows up. Then after over 4 seconds the bottom of the page renders.

This visualization is called a filmstrip view. The markers below the filmstrip highlight page rendering milestones. For example, the Largest Contentful Paint metric measures how soon after opening the page the biggest text or image element shows up.

All resources on a page also aren’t equally important for page speed. Without the HTML document no content can be shown. But an image way down in the website footer can load after the page has rendered and the user can see the page contents.

CSS stylesheet resources are also often render-blocking . Viewing only the raw HTML content without styling would not be helpful to the user.

The waterfall above shows two render-blocking CSS stylesheets. But we can also see that, after the page has rendered, the browser loads a Woff2 font file and a JavaScript application. These last two files don’t block rendering and are less important for page performance.

A website will be faster if it loads fewer resources, the most important resources are loaded first, and the resources are as small as possible. You can run a website speed test to see what resources a website loads and how long it takes to load a page.

Websites that load quickly not only benefit visitors but also rank higher in Google and have other business benefits .

Learn more ​

To learn more about how websites work you can learn the basics of web development .

Looking at websites in Chrome DevTools is also a great way to find out more about how a website is structured and what resources it consists of.

Get a monthly email with page speed tips

• Understanding clients and servers
• Resources and Uniform Resource Locators (URLs)
• HTTP requests
• HTTP responses
• Example of an HTTP request and response
• Combining resources into web pages
• Rendering the page
• Server connections
• What does this mean for website speed?

How Websites Work

This tutorial provides a high-level overview of how websites work. If you're about to create your first website, this article will help you understand how everything fits together. The tutorial contains the following lessons:

• (current page)
• Web Page Content
• Web Protocols
• Web Addresses
• How DNS Works

What is a Website?

A website is a collection of web pages. These web pages are usually located on a web server that is connected to the Internet. The web server is a computer that has been built specifically to host websites, and contains web server software.

The web server is usually located with a web hosting provider (a company that provides web hosting to its customers).

What Happens When I view a Website?

The following diagram demonstrates what happens each time you view a website:

This diagram is only a simplistic version of what happens, but the key point is that, each time you view a web page in your browser, you initiate a request across the Internet to a web server. This is true even if you view multiple pages from the same website - each new page is a new request.

Actually, in most cases, each web page results in multiple requests. This is because most web pages consist of more than one file (or "resource"). Therefore, if a page contains 3 images, there will be at least 4 requests; 1 for the web page, and 1 for each image.

So, for example, if you type "www.natural-environment.com/index.cfm" into your browser, the following files might be requested:

• http://www.natural-environment.com/index.cfm
• http://www.natural-environment.com/images/image_1.gif
• http://www.natural-environment.com/images/image_2.gif
• http://www.natural-environment.com/images/image_3.gif

In this case there are 3 images (called "image_1.gif", "image_2.gif", and "image_3.gif") located in a directory called "images".

It's important to note that each file - including the web page file (index.cfm) - needs to be downloaded to your computer before you can view it. That's why you may sometimes see a web page appear without the images first, then one by one, the images appear. Larger images will take longer to appear because they take longer to download. This is why the speed of your Internet connection is important - a slower connection will make many websites appear slower (especially those with lots of images).

• React Native
• CSS Frameworks
• JS Frameworks
• Web Development
• How Web Works - Web Application Architecture for Beginners
• Node.js Web Application Architecture
• Model-View-Controller(MVC) architecture for Node applications
• How to Design a Web Application - A Guideline on Software Architecture
• Difference Between Web application and Website
• Is your Web Application Secure Enough? Think Again
• What are AJAX applications in web development ?
• REST API Architectural Constraints
• What is a web server - Working and Architecture
• Google Web Designer | Concept, Working and Applications
• Web Services - Definition, Working, Types, Applications
• Creating first web application using Bottle Framework - Python
• Difference between Windows application and Web application
• Difference Between Two-Tier And Three-Tier database architecture
• What is a Web Application Firewall?
• LetsGrowMore Work Experience as Web Developer Intern
• Build a To-do List Web Application Powered by Blockchain
• Applications of Web Services
• Browser Architecture
• Amazon Web Services - Introduction to Simple Workflow Service

How Web Works – Web Application Architecture for Beginners

For many decades we are browsing our favorite websites on the internet and getting a quick response whatever we want… but do you ever try to know how each part of the application works together and how is the request being processed behind the scene? If you’re a little bit familiar with tech then you may have a general and a common answer that your request goes to the web server, then the webserver processes the request and perform all the backend logic. After that, it sends the response back to the web browser and then you see the result in front of your screen. 

Well, that’s exactly true but if you go on a deeper level, you’ll find that your web application has a complex architecture of different components and layers. Your request passes through these different layers and components and then you get the response back from the server’s end. It’s a quite long process but understanding the fundamental of web application architecture is really important if your goal is to become a good web application developer. Firstly let’s understand a few things about web applications.

When you’re building an application, you need to remember three principles in your mind…

• From the customer’s point of view, the application shouldn’t be complicated, it should be pleasing and it should address most of their problems.
• From a business aspect, your web application should stay aligned with its product/market fit .
• From an engineer’s perspective, the application should be scalable, functional, and it should be able to bear high traffic loads.

We will discuss the above points in web application architecture and we will understand the core concept, how the architecture works, its components, and types in detail.

What is Web Application Architecture?

Do you know that there is a difference between websites and web applications? ( you might have thought that both are the same). The web application is a program that runs on a browser and it has mainly three formal characteristics. 

• Addresses a particular problem, even if it’s simply finding some information
• As interactive as a desktop application
• Works with Content Management System.

If we talk about the website then traditionally it’s just a combination of static pages. A website becomes a web application when it consists of both static and dynamic pages ( yes!! it’s true that all modern websites are the example of web applications. ) 

Web application architecture is a mechanism that gives us a clarification that how the connection is established between the client and the server. It determines how the components in an application communicate with each other. It doesn’t matter what is the size and the complexity level of the application is, they all follow the same principle only the details may differ. 

In technical terms, when a user makes a request on a website, various components of the applications, user interfaces, middleware systems, databases, servers, and the browser interact with each other. Web Application Architecture is a framework that ties up this relation together and maintains the interaction between these components. 

When a user interacts with a website and gets the response back from the server’s end, the whole process executes within a few seconds.  The most important thing we need to notice here is the code which has been passed to the browser. This code may or may not have particular instructions telling the browser how to respond with respect to the different types of user inputs. That’s why a web application architecture includes all the sub-components and external applications interchanges for an entire software application. A web application architecture has to deal with the reliability, scalability, security, and robustness due to a large amount of global network traffic. 

How Does The Web Request Work?

Let’s take an example that you want to visit Flipkart.com .

• You enter flipkart.com in your browser: When you type the URL in your web browser and hit enter the web browser needs to know the address of the server where the page is located. So it sends the request to the DNS (Domain Name Server, which is a storehouse of domain names and their IP addresses ). After that browser sends the request to the found IP address using the HTTPS protocol. If you already have visited Flipkart.com earlier from the same browser, then it will pull the address from the cache.
• The web server processes the request: In the next step, the webserver sends the request to the storage area to locate the page and all data that follows with it. Here the Business logic (also called Domain Logic and Application Logic) comes in the picture. BL takes the responsibility of routing which means how each piece of data is accessed. It regulates this workflow specifically for each application. As BL processes the request, it sends it to storage to locate the looked-for data.
• You get the response back: When the response travels back, it displays in front of your screen. The web page (graphical interface) for any website which is displayed on your screen is called the front end of an application. Here you see all the UI and UX components to access the information.

How Does Web Application Architecture Work?

All the web applications run on the client-side and the server-side. When a user makes a request there are mainly two programs run on both sides.

• Code that runs in the browser and works as per the inputs of the user.
• Code in the server which responds to the HTTP requests 

While working on the web application, a web developer decides the functions of the code on the server and the functions of the code on the browser. They also define how these two will function in relation to each other. Server-side code can be written using the languages Python, JavaScript, C#, PHP, Ruby on Rails, etc. Any code can have the capability to run on the server if it can respond to HTTP requests. The server-side code is mainly responsible for creating the page which the user has requested. It also stores different types of data such as user profiles, tweets, pages, etc. Server-side code can not be seen by the end-user (except within a rare malfunction)

Client-side languages include the combination of HTML, CSS, and JavaScript. This code is parsed by the browser, and it can be seen as well as edited by the user. Only through HTTP requests,  client-side code can communicate with the server. Also, it cannot read files off a server directly.

Web Application Architecture Components

Web application architecture works on various components. These components can be divided into two areas.

1. User Interface App Components: As the name suggests this category is much more related to the user interface/experience. In this category, the role of the web page is related to the display, dashboards, logs, notifications, statistics, configuration settings, etc and it has nothing to do with the functionality or working of the web application. 

2. Structural Components: This category is mainly concerned with the functionality of the web application with which a user interacts, the control, and the database storage. As the name suggests it is much more about the structural part of the web application. This structural part comprises…

• The web browser or client 
• The web application server
• The database server 

Web Application Three Tier Architecture Layers

Web application architectural patterns are separated into many different layers or tiers which is called Multi- or Three-Tier Architecture. You can easily replace and upgrade each layer independently. 

Presentation Layer: This layer is accessible to the client via a browser and it includes user interface components and UI process components. As we have already discussed that these UI components are built with HTML, CSS, and JavaScript (and its frameworks or library) where each of them plays a different role in building the user interface.

Business Layer: It is also referred to as a Business Logic or Domain Logic or Application Layer. It accepts the user’s request from the browser, processes it, and regulates the routes through which the data will be accessed. The whole workflow is encoded in this layer. You can take the example of booking a hotel on a website. A traveler will go through a sequence of events to book the hotel room and the whole workflow will be taken care of by the business logic. 

Persistence Layer: It is also referred to as a storage or data access layer. This layer collects all the data calls and provides access to the persistent storage of an application. The business layer is closely attached to the persistence layer, so the logic knows which database to talk to and the process of retrieving data becomes more optimized. A server and a database management system software exist in data storage infrastructure which is used to communicate with the database itself, applications, and user interfaces to retrieve data and parse it. You can store the data in hardware servers or in the cloud.

Some other parts of the web application which is separated from the main layers that exist in the architecture are…

• Cross-cutting code: This part handles communications, operational management, and security. It affects all parts of the system but should never mix with them.
• Third-party integrations: Using third-party APIs we can integrate payment gateways, social logins, GDSs in travel websites, etc.

Types of Web Application Architecture

1. Single Page Applications: Today a lot of modern web applications are designed as single-page web applications that only include the most required elements and information to generate an intuitive and interactive user experience. In a single page application, the content or information is updated on the current page rather than loading a new page from the server for each action performed by the user. 

• The application requests only necessary content details and it prevents interruptions in the user experience. 
• AJAX, Asynchronous JavaScript, and XML are mainly used for page communication.
• Users can continue the interaction with the page while the contents are updated on the page (faster interaction).

2. Microservices: These are small and lightweight services that execute specific, single functionality. The components in the applications are not dependent on each other, so there is no need to develop each component using the same programming language. This gives the flexibility to the developers to choose the language or technology stack of their own choice. It enhances the productivity of the developers and speeds up the development process. 

3. Serverless Architectures: In this approach, developers outsource the server and infrastructure management from a third-party cloud infrastructure services provider. The advantage of this approach is that it allows the application to execute the required or custom logic without worrying about the infrastructure-related tasks. This approach is mainly preferred by the companies who don’t want to manage or support the servers and the hardware they have developed the web application for.

Hope this was helpful in understanding the complete architecture of web applications. The web apps are continuously evolving and a lot of modern web development app has replaced the previous legacy structure and basic components. A lot of features of web applications such as robustness, security, scalability, reliability, responsiveness depends on the web application architecture one chooses to work with. The right web application architecture paves the way for future plans of expansion and scalability. So it’s always good to explore the requirements and goals before someone gets started with the development process of an application. 

Please Login to comment...

Similar reads.

• Web Technologies

Improve your Coding Skills with Practice

What kind of Experience do you want to share?

TryHackMe – How Websites Work – Complete Walkthrough

This page contains a walkthrough of the ‘How Websites Work’ room at TryHackMe. The room covers html and javascript basics, and also introduces sensitive data exposure and html injection.

This room can be found at: https://tryhackme.com/room/howwebsiteswork

Walkthrough

Task 1 – how websites work.

The website experience typically starts with a browser, which is probably what you’re using to read this right now.

When you visit a website, your browser initiates a complex sequence of actions that requests the website data from a server that could be on the other side of the planet. A web server is just a computer that is using software to provide data to clients.

Websites have two ‘ends’: a front end and a back end .

The front end, also called the client side , is the part of the website that is experienced by clients. When you view a website in your browser, you are seeing the front end of that site.

The back end, or the server side , is everything else connected to the website that you can’t see.

What term best describes the side your browser renders a website?

Walkthrough :

The client side (front end) of the site is the site that you experience as a client, and the server side (back end) is all the stuff that you can’t see.

(Highlight below to find the answer):

Client side

Task 2 – HTML

There are three elements to modern websites: html, css, and javascript.

HTML: H yper T ext M arkup L anguage is the primary language that websites are written in. Web developers use HTML to create the structure of a page as well as its’ content.

CSS: C ascading S tyle S heets are used to style and customize the HTML elements on a website, adding colors, changing typography or layout, etc.

Javascript: Javascript (JS) is a programming language (unlike HTML, which is a markup language) that is used to add interactive features to a website. An example is a hover feature that changes the color or size of a button when your mouse hovers over it.

HTML in Detail

The first step in creating a webpage is using HTML to make a basic structure for the page.

HTML uses elements, or tags, to add things like page title, headings, text, or images.

Here is a basic structure for a webpage. Note the comments on each line that allow us to add text that won’t interfere with the code:

<!DOCTYPE html> <!– This tells our browser to expect html –>

<html> <!– The root element of the page. All other elements are contained within –>

<head> <!– The head element contains information about the page –>

<title>My Webpage Title</title> <!–The title of the webpage –>

</head> <!– End of the head element –>

<body> <!– The body element contains most of what’s displayed on the page –>

<h1>I am an H1 heading <h1> <!– An H1 heading is used only for the most important text –>

<p></p> <!–Most of the text uses the paragraph ‘p’ element –>

<img src=’img/mycatphoto.jpg’> <!– Adds mycatphoto.jpg image –>

</body> <!– End of the body element –>

</html> <!–End of the root html element –>

Let’s play with some HTML! On the right-hand side, you should see a box that renders HTML – If you enter some HTML into the box and click the green “Render HTML Code” button, it will render your HTML on the page; you should see an image of some cats.

Click the green ‘View Site’ button at the top of the task. This will open an html editor/browser simulation.

This question is freebie; you can fiddle around with the html, add some tags, etc.

No answer needed

One of the images on the cat website is broken – fix it, and the image will reveal the hidden text answer!

Compare the code for the two cat images. One is:

<img src=’img/cat-1.jpg’>

The other is:

<img src=’img/cat-2′>

What is different about these two? When you find the issue, click the green button in the simulation to render the html code.

The flag can be seen on the second cat image.

Add a dog image to the page by adding another img tag (<img>) on line 11. The dog image location is img/dog-1.png

Right below the second cat image, start adding a new element for an image of a dog. The code should include the <img> tag and have a source of ‘src=’img/dog-1.png’.

Again, the flag can be seen on the image itself.

Task 3 – Javascript

Javascript is one of the most popular programming languages, and is used to add interactivity to websites.

There are two ways to add Javascript to a webpage using the <script> tag:

(1) You can add a <script> tag and put all of the code within the opening (<script>) and closing (</script>) tags.

(2) You can add <script> tag with a source attribute, thereby loading the actual Javascript code from a remote location.

Javascript can be used to target elements with an ‘id’ attribute. This allows you to apply javascript code to any element with that id attribute, without having to rewrite the javascript code for each element.

Click the “View Site” button on this task. On the right-hand side, add JavaScript that changes the demo element’s content to “Hack the Planet”

In this example, we are going to target the <div> element with an id of ‘demo’. The <div> element defines a section, or ‘division’ of the page. These can be added at will.

While we could change the text manually, in this example we will instead use JS to target elements with an id of ‘demo’, which includes the <div> element that we want to change.

The solution is actually given in the write-up for this Task. All we need to do is paste the following code into the correct place:

document.getElementById(“demo”).innerHTML = “Hack the Planet”;

When we render the code, we will see that the text has changed and we are given the flag in a popup dialog.

Add the button HTML from this task that changes the element’s text to “Button Clicked” on the editor on the right, update the code by clicking the “Render HTML+JS Code” button and then click the button.

We’ve mentioned that Javascript can be used to add interactivity to HTML elements.

In this example, we have an html <button> tag. We will use Javascript to tell the button what to do when it is clicked. Note that we are differentiating between the two; <button> is HTML but we are using Javascript to give it functionality.

The code for this example is given in THM’s Task writeup:

<button onclick=’document.getElementById(“demo”).innerHTML = “Button Clicked”;’>Click Me!</button>

We can actually read this code. On the left we have the <button> tag, followed by an ‘onclick’ even attribute; we want it to do something when it is clicked.

Next we have a ‘document.getElementById’ section that tells us that when the button is clicked, we want something to happen to elements with an id of ‘demo’. This includes our <div> element that we changed earlier using JS.

We have the text “Button Clicked”, which means that when we click the button, we want elements with an id of ‘demo’ to change their text to ‘Button Clicked’.

The opening tag of the <button> element is closed, and we use HTML to specify the text on the button itself as ‘Click Me!’. This is followed by the closing </button> tag.

Play around with this to see if you can follow the code and the actual performance on the page.

Task 4 – Sensitive Data Exposure

Sometimes when a web developer is coding a website, they include vulnerable code that they intend to be temporary and later forget that its there.

One example is temporary login credentials that could provide an easy way to secure user access to a web application.

This is why one of the first things to do when assessing a web app for vulnerability, is to view the page source. This can easily be done by right clicking on the page and selecting ‘View Page Source’.

View the website on this task. What is the password hidden in the source code?

Click the green ‘View Site’ button at the top of the Task. You should see a simulated web page pop up on the right side of the screen.

In this case, we want to see the source code for the frame that contains our simulated web page.

Right click on the webpage and select ‘ View Frame Source ‘. Depending on the browser, your instructions to view the frame source might be slightly different. Check out this short guide from IU: https://kb.iu.edu/d/agao

Once you have the source code opened, you should see a multi-line comment near the end of the <body> element with the login information. You can confirm that you have the answer by entering the credentials into the website login.

Task 5 – HTML Injection

HTML injection is a technique that takes advantage of unsanitized input .

Basically, whenever input from a client uses JS to produce an output, that input must be sanitized. If it isn’t sanitized, then we can input our own code and the webpage will execute our code as though it is part of the original code.

This Task contains a webpage simulation that looks like the image below.

This page contains an input text field asking for our name. Depending on how this is coded, we might be able to exploit it.

If we view the source code of the simulation, we find the following JS for an input field:

We can see that this code creates a function ‘sayHi’ that takes our name and outputs the text ‘Welcome’, followed by our name.

The input is not sanitized, so we know that we can take advantage of this situation.

View the website on this task and inject HTML so that a malicious link to http://hacker.com is shown.

Our instructions are to have the website display a link to http://hacker.com.

To do this, we can use the text input field to inject the html code for the link we want to create.

This hasn’t been covered yet, but html links use the <a> tag with the following syntax:

<a href=” url “> link text </a>

In this case, we don’t require any link text so this field will be left blank.

Input the html code into the text box and click the ‘Say Hi’ button to obtain the flag for this question. See the image below (Spoiler warning!).

HTML_INJ3CTI0N

This is one of my favorite rooms in the ‘Pre Security’ path. I found it be enjoyable and informative, although my experience with html may have played a role.

In general, this room does a great job of introducing the concepts of html, css, and javascript. My only suggestion for improvement is that it doesn’t cover css at all, so a newbie would probably still be confused about what css even is.

I really enjoyed the last three tasks and thought that they were a great way to get a bit more comfortable with JS and introduce the topics of sensitive data exposure as well as html injection.

Overall, I really enjoyed this room. A huge thanks to tryhackme for putting this room together!

Learn Web Development Basics – HTML, CSS, and JavaScript Explained for Beginners

If you are learning web development, you will come across terms like HTML, CSS, and JavaScript. These are often called the building blocks of the Web.

These three tools dominate web development. Every library or tool seems to be centered around HTML, CSS, and JS. So if you want to become a web developer, you need to learn them well.

You'll also discover that websites are mostly built from these three languages.

But you're probably wondering what each one is and what it's really used for. What makes these languages so special and important? And what makes them so ubiquitous that you can’t help but see them in every tutorial and topic based on web development?

Well, now you need wonder no more.

In this article, I will explain the basics of what HTML, CSS, and JavaScript are, how they make the Web work, and what they do on their own.

What is the Internet?

The internet is simply a network of computers that communicate with each other to send and receive data (information).

Each of these computers on the internet can be distinguished and located by a unique number called an IP Address. An IP Address looks something like this: 168.212.226.204

What is the Web?

The Web is a subset of the internet.

Like every other computer network out there, the Web is made up of two main components: the web browser client and the web server.

The client requests the data and the server shares or serves its data. To achieve this, the two parties have to establish an agreement. That agreement is called the Application Programming Interface or in short, the API.

But this data has to be arranged and formatted into a form that's understandable by end-users who have a wide range of technical experiences and abilities.

This is where HTML, CSS, JavaScript and the whole concept of web development come into play.

What is HTML?

HTML stands for Hyper Text Markup Language.

Dictionary.com defines a Markup as:

a set of detailed instructions, usually written on a manuscript to be typeset, concerning style of type, makeup of pages, and the like.

So you can think of HTML as the language used for creating detailed instructions concerning style, type, format, structure and the makeup of a web page before it gets printed (shown to you).

But in the context of web development, we can replace the term ‘printed’ with ‘rendered’ as a more accurate term.

HTML helps you structure your page into elements such as paragraphs, sections, headings, navigation bars, and so on.  

To illustrate what a page looks like, let's create a basic HTML document:

This is how you can format and structure a document with just HTML. As you can see, this markup contains some web elements such as:

• Level 1 heading h1
• Level 2 heading h2
• Level 3 heading h3
• A paragraph   p
• An unordered list with bullet points   ul li
• A button input input
• And the whole body of the page body

This is what that markup above renders on a web browser:

You can also add attributes to these elements which you can use to identify the elements and access them from other places in the site.

In our example, we set the id attributes to all of the three span elements. This will help us access them from our JavaScript as you will see later.

Think of this attribute the same way as your social media username. With this name, others can find you on social media. And someone can also refer to you or mention you with this name (you can get tagged in a post, and so on).

This page is very basic and unattractive, though. If you are building anything other than a demo, you will need to add some basic styling to make it more presentable. And we can do exactly that with CSS.

Want to learn more about HTML? You can start with freeCodeCamp's Responsive Web Design certification and this brand new full HTML course from Beau Carnes .

What is CSS?

While HTML is a markup language used to format/structure a web page, CSS is a design language that you use to make your web page look nice and presentable.

CSS stands for Cascading Style Sheets , and you use it to improve the appearance of a web page. By adding thoughtful CSS styles, you make your page more attractive and pleasant for the end user to view and use.

Imagine if human beings were just made to have skeletons and bare bones – how would that look? Not nice if you ask me. So CSS is like our skin, hair, and general physical appearance.

You can also use CSS to layout elements by positioning them in specified areas of your page.

To access these elements, you have to “select” them. You can select a single or multiple web elements and specify how you want them to look or be positioned.

The rules that govern this process are called CSS selectors .

With CSS you can set the colour and background of your elements, as well as the typeface, margins, spacing, padding and so much more.

If you remember our example HTML page, we had elements which were pretty self-explanatory. For example, I stated that I would change the color of the level one heading h1 to red.

To illustrate how CSS works, I will be sharing the code which sets the background-color of the three levels of headers to red, blue, and green respectively:

The above style, when applied, will change the appearance of our web page to this:

Cool, right?

We access each of the elements we want to work on by "selecting" them. The h1 selects all level 1 headings in the page, the h2 selects the level 2 elements, and so on. You can select any single HTML element you want and specify how you want it to look or be positioned.

Want to learn more about CSS? You can check out the second part of freeCodeCamp's Responsive Web Design certification to get started.

What is JavaScript?

Now, if HTML is the markup language and CSS is the design language , then JavaScript is the programming language.

If you don’t know what programming is, think of certain actions you take in your daily life:

When you sense danger, you run. When you are hungry, you eat. When you are tired, you sleep. When you are cold, you look for warmth. When crossing a busy road, you calculate the distance of vehicles away from you.

Your brain has been programmed to react in a certain way or do certain things whenever something happens. In this same way, you can program your web page or individual elements to react a certain way and to do something when something else (an event) happens.

You can program actions, conditions, calculations, network requests, concurrent tasks and many other kinds of instructions.

You can access any elements through the Document Object Model API (DOM) and make them change however you want them to.

The DOM is a tree-like representation of the web page that gets loaded into the browser.

Thanks to the DOM, we can use methods like getElementById() to access elements from our web page.

JavaScript allows you to make your webpage “think and act” , which is what programming is all about.

If you remember from our example HTML page, I mentioned that I was going to sum up the two numbers displayed on the page and then display the result in the place of the placeholder text. The calculation runs once the button gets clicked.

This code illustrates how you can do calculations with JavaScript:

Remember what I told you about HTML attributes and their uses? This code displays just that.

The displaySum is a function which gets both items from the web page, converts them to numbers (with the Number method), sums them up, and passes them in as inner values to another element.

The reason we were able to access these elements in our JavaScript was because we had set unique attributes on them, to help us identify them.

So thanks to this:

We were able to do this:

Finally, upon clicking the button, you will see the sum of the two numbers on the newly updated page:

If you want to get started with JavaScript, you can check out freeCodeCamp's JavaScript Algorithms and Data Structures certification. And you can use this great Intro to JS course to supplement your learning.

How to Put HTML, CSS, and JavaScript Together

Together, we use these three languages to format, design, and program web pages.

And when you link together some web pages with hyperlinks, along with all their assets like images, videos, and so on that are on the server computer, it gets rendered into a website .

This rendering typically happens on the front end, where the users can see what's being displayed and interact with it.

On the other hand, data, especially sensitive information like passwords, are stored and supplied from the back end part of the website. This is the part of a website which exists only on the server computer, and isn't displayed on the front-end browser. There, the user cannot see or readily access that information.

Wrapping Up

As a web developer, the three main languages we use to build websites are HTML, CSS, and JavaScript.

JavaScript is the programming language, we use HTML to structure the site, and we use CSS to design and layout the web page.

These days, CSS has become more than just a design language, though. You can actually implement animations and smooth transitions with just CSS.

In fact, you can do some basic programming with CSS too. An example of this is when you use media queries, where you define different style rules for different kinds of screens (resolutions).

JavaScript has also grown beyond being used just in the browser as well. We now use it on the server thanks to Node.js .

But the basic fact remains: HTML, CSS, and JavaScript are the main languages of the Web.

So that's it. The languages of the Web explained in basic terms. I really hope you got something useful from this article.

To round off this article, I have something to share. I recently started a weekly coding challenge series aimed at teaching beginners how to program in JavaScript. Check it out on my blog .  

Thank you for reading and see you soon.

P/S : If you are learning JavaScript, I created an eBook which teaches 50 topics in JavaScript with hand-drawn digital notes. Check it out here .

Helping you learn how to code one tutorial at a time. Online creator and entrepreneur.

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

• Berkeley Boot Camps

Learn Web Development: 7 Basic Steps for Beginners

Launching a career in web development can seem almost overwhelmingly tricky. There are countless languages and tools to learn — for a beginner, even figuring out where to start learning can seem difficult. 

But in practice, the process probably won’t be as complicated as you think. Once you have an idea of what skills you need to have as an entry-level web developer, you’ll be able to build your academic foundation in short order.

Want to know how to learn web development? We’re here to help. This article is for anyone interested in entering the web development field or looking to grow their existing skill set. It will cover some basic terminology, web development specializations and the tools and skills you’ll need to develop and manage websites. In other words, it’ll walk you through everything you need to know to kickstart your career.

Let’s get started!

Why Learn Web Development?

In short, job potential. 

Web development is a quickly growing profession. The U.S. Bureau of Labor Statistics forecasts 8 percent growth for web developer jobs b etween 2019 and 2029. Web developers can freelance or work as internal employees within a company, and many work remotely. In short, it’s a great field for anyone who values professional growth and learning opportunities. 

Skills covered in these tutorials :

• SQL Databases

Click here to jump to tutorials.

7 Steps to Learn Web Development

We’re going to go through everything you need to learn about the fundamentals of web development, from the nitty-gritty details of how websites work to high-level design concepts. 

1. Web Development 101: How Do Websites Work?

At the most basic level, websites are collections of files and code stored on a server , which is connected to the internet. You access a website by loading it through a browser (e.g., Chrome, Firefox, Safari), also known as the client. This pair constitutes the “server-client model.”

Let’s consider how this works in action: let’s say your friend sends you a link to a funny video. When you click on the link, your web browser (the client) sends a request to the video website (the server) asking for the video file. The website’s server receives the request and sends the file to your computer. 

The client-side and server-side are referred to as the “front end” and the “back end,” respectively. Front end web developers focus on a website’s client-side functions, while back end web developers focus on a website’s server-side development. Full stack developers work with just that — the “full stack” of development technologies — and have mastery of both front and back end technologies. 

Understanding the differences between each can help you decide which of the three you would like to specialize in during your career. Now, let’s cover the differences between front end, back end and full stack web development. 

What Is Front End Development?

Front end developers create the content you see when interacting with a website. This includes visual elements such as menus, buttons and animations that can execute on a client’s machine. Front end developers use three primary languages: HTML to create a website’s structure, CSS to change how a website looks and JavaScript to create interactive elements. 

What Is Back End Development?

Back end developers work with the server side of a website. This involves managing web servers, interacting with databases and using data analysis — all of which are functions the user doesn’t see when interacting with the site. Back end developers may also use data-focused technologies like SQL and Python to manage a website’s functionality. 

What Is a Full Stack Web Developer?

Full stack developers are experts in the “full stack” of website-related technologies. 

If you’re wondering how long it takes to become a full stack developer , don’t worry; stepping into this versatile role is easier than you might think. With a full-time bootcamp, dedicated tech enthusiasts can accumulate job-ready skills in as little as three to six months. That said, those who prefer the comprehensiveness a formal degree provides should be prepared to set aside four or more years for their education. 

Duties and Responsibilities of a Full Stack Developer

Full stack web developers are tasked with several website-related tasks. These commonly include, but are not limited to: 

• Developing front end website design
• Understanding user interface and user experience design
• Writing technical documentation
• Designing website architecture
• Implementing data security protocols
• Creating servers and databases
• Ensuring cross-platform optimization for mobile devices

Learn full stack web development at Berkeley Coding Boot Camp .

2. Get the Tools You Need to Start

Basic computer specifications .

You can get started with web development using any machine capable of running Windows, macOS or Linux. The minimum requirements for programming include: 

• Intel i5/i7 processor, or Apple Silicon processor on newer Macs
• Full HD monitor or built-in laptop screen, ideally 1920×1080

Basic Text Editor

You’ll need a text editor to manage all the code you write. Thankfully, there are a lot of free options on the market to get you started. 

Notepad ++ is a good text editor for beginners, but it’s only available on Windows. Atom is another excellent option for Mac, Windows and Linux. 

Web Browsers

You’ll need a web browser to code. Given that you’re reading this article, you probably already have one! That said, downloading multiple browsers lets you make sure your site renders correctly across the web, so you should have more than one at your disposal. Popular options include Chrome , Safari , Microsoft Edge , Firefox , Brave or Opera .  

Local Web Server

Setting up a local web server lets you test your code on your machine without publishing anything to the internet. You can test layouts, scripts and new features during the development process. 

XAMPP , for example, is a utility that can run a server on your Mac, Windows or Linux Machine. MAMP i s another option for Mac and Windows only. 

Graphics Editor

Graphics editors can help developers create and edit graphical website elements. The Adobe Creative Suite is the industry standard, but its monthly fee might be steep if you’r e new to design. For alternatives, check out GIMP ( a free version of Adobe Photoshop) a nd Inkscape (a free version of Adobe Illustrator used for creating vector graphics). 

3. Learn the Foundations of Front End Development

Front end developers determine how a website looks when loaded on the client side. They’re responsible for creating and designing all user-facing website elements. Below, we’ve listed the languages all aspiring front end developers will need to know before landing their first job. 

HyperText Markup Language (HTML) allows coders to define a website’s basic structure and design. An HTML file tells a browser what to display on a device’s screen and how elements like paragraphs, lists and images are arranged. 

HTML is very accessible and can provide an excellent introduction for people who are new to coding. It’s a critical part of a web developer’s toolkit and acts as a jumping-off point for all websites. Modern websites utilize powerful scripting languages like JavaScript to create dynamic web content. However, even though it’s a much older technology, HTML is still at the core of these websites. 

Want more information on this “building block” coding language? Here’s a guide to learning HTML .

Cascading Style Sheets (CSS) changes how HTML elements are displayed on a screen. Understanding CSS allows you to create great looking web pages across all major browsers. You can change a page’s layout, colors and fonts, as well as add effects to page elements. 

CSS is used in combination with HTML to create and style web pages. It’s easy to learn and understand, but it also has a lot of depth. CSS gives you a lot of control over how an HTML document is presented to the user — as such, learning CSS is crucial for anyone looking to create beautiful and responsive websites. 

JavaScript is another critical component in a front end web developer’s toolbox. It’s one of the most popular languages on the market according to HackerRank’s 2020 Developer report (PDF, 2.8MB) , and the #1 most requested language by hiring managers.

JavaScript is a client-side language that is used alongside HTML and CSS to create dynamic, responsive websites. It’s easy to pick up and incredibly versatile, allowing a developer to handle any part of a website’s design and functionality. Many of the skills involved with writing JavaScript can also be applied to other languages like Python and Java, making it an excellent introduction to coding. 

Learning JavaScript is essential for anyone who wants to work as a full stack or front end web developer. Check out our JavaScript for beginners guide for more information and ways to learn this crucial language.

Get Program Info

Step 1 of 6

4. Additional Front End Development Tools to Learn

Front end development tools help automate and manage your code writing process, so it’s good to identify potential sources of support before tackling any intensive programming projects. 

Package Managers

Package managers can install libraries and other dependencies (also called packages) used for front end development. Dependencies are third-party bits of software that solve a problem or perform a function. For example, npm is a package manager that, as the term implies, helps developers install and manage new packages. 

Build Tools 

Build tools can automate some aspects of web development. They’re useful for menial and error-prone tasks such as replacing text strings within a file and moving or combining files. Below, we’ve listed a few that aspiring developers might find useful. 

gulp is a task runner that automates specific development tasks in JavaScript. You can use it to run a local server, optimize images and preprocess CSS files. It’s powerful but requires some effort to configure. 

webpack is a bundler that’s frequently used in JavaScript development. It takes the code for your application and makes it usable on the web, separating your code based on how it’s used. This makes it much easier to manage and debug. 

Parcel is similar to webpack in that it is a bundler, but it requires less setup to get started. 

Version Control

Version control systems manage the changes you make to your code and allow you to revert to a previous version if you make a mistake or want to make a change. 

When you start learning version control, you’ll probably end up using Git. Git is an industry standard version control system used across major web development companies. It’s an easy-to-learn component of any front end developer’s toolkit. 

GitHub is an online hosting company owned by Microsoft that allows you to store your Git files and share them with others. Think of it as a social network for programmers and web developers. Many large companies use GitHub to manage version control and code changes for their projects –– it’s also an excellent place for you to showcase your projects and build a portfolio. 

Responsive Design 

Think of all the devices you use in your day-to-day life — laptops, desktops, tablets and smartphones. Every website you create needs to function across every device a user could own. 

Responsive design is the idea that websites should respond to a user’s behavior and device. Responsive websites can be used on any device, displaying on everything from a 32-inch monitor to a 5.5-inch smartphone. Understanding responsive design is crucial for modern web developers as more and more people are accessing the web primarily on their mobile devices. 

JavaScript Frameworks

JavaScript frameworks are collections of libraries with pre-written code that can be used for routine tasks. Using a framework helps you build a site more efficiently as you aren’t designing everything from the ground up. 

For example, let’s say you’re building an “About Us” webpage for a local business and want an animation to trigger whenever a user hovers over an employee’s headshot. You can use a framework to save time instead of building an animation from scratch. 

Bootstrap is a huge framework of front end code across CSS, HTML and JavaScript. Interested in learning more? Check out our guide to Bootstrap !

Other major front end JavaScript frameworks to check out include React , Vue.js and AngularJS .

5. Learn WordPress Basics

WordPress is the web publishing software that underlies countless blogs and websites on the internet today. Anyone can download and use WordPress for free , so understanding how to work with it is an essential skill. You’re likely to encounter WordPress in the professional world, so understanding how it works can pay off in the future.

6. Learn the Foundations of Back End Development

Back end development involves structures and tasks that the user does not see –– namely, servers, databases and data analysis. 

Working with Servers 

Back end developers should be familiar with servers and how to manage them. 

The first kind of server is a traditional, centralized server. This is a machine that runs Windows or Linux and stores all of its information in one place. Large enterprise companies often use centralized server architecture, as they want more control over how they store and access their data. 

However, you don’t need a centralized server; gone are the days where you had to purchase your own server and set it up in your own home. Cloud hosting companies like HostGator let you run a website using their servers. 

Today, many companies have turned to distributed, or serverless, hosting. Using this architecture involves a vendor providing back end services for your site. Serverless is a bit of a misnomer –– a server still exists, but you aren’t responsible for maintaining it. This kind of setup is popular because it’s relatively cheap, reasonably fast and scales easily. 

Serverless vendors like Amazon Web Services (AWS) and Microsoft Azure provide infrastructure for an enormous portion of the modern internet. Knowing how to work with one of these platforms is an invaluable skill for a back end developer today. 

So, how do you know if you should use a centralized server architecture or a serverless architecture? First, you need to consider your specific business and technology needs. Startup companies frequently use serverless vendors, as they benefit from the platform’s scalability and quick setup times. However, centralized servers are often better for massive company websites that perpetually sustain high compute loads. 

Programming Languages 

Back end developers should also know a few different programming languages, including: 

• Java:  Java is a universal programming language that can be useful in both client-side and server-side applications. It’s been around for over 20 years and is considered one of the more accessible languages to learn. Java is an open-source language with an enormous developer community and an expansive library of building tools and resources.  Java’s maturity has cemented it as a robust, reliable and scalable language. Large enterprise companies often use it, so having some exposure to the language can benefit you later on as you enter the workforce. 
• Python:   Python is another popular programming language used in back end development. In fact, it’s one of the most popular programming languages in the world.  Python is another great language for beginners because it’s intuitive, flexible and versatile; it’s frequently used in back end development, data analysis and data science. Check out our Python for beginners guide for more information! 
• Node.js:  At its most basic level, Node.js empowers developers to apply JavaScript to back end programming. It’s a runtime environment that allows developers to execute JavaScript code and scripts on a server to create dynamic web pages.  Many notable tech companies use Node.js; these include PayPal, Uber and Microsoft. Given how pervasive it is among major tech players, knowing Node.js will benefit you greatly as a professional. 
• PHP:  PHP is a scripting language that runs on a server. In general terms, PHP is used to request content from a site’s server and make it visible to a user on their machine.  For example, a PHP script can make your three most recent blog posts appear automatically on your site’s homepage. The posts themselves are stored on the server and called when the user reaches your homepage; no page reload is required.  Understanding PHP is essential for anyone working with WordPress websites, as PHP is the engine behind custom WordPress themes and plugins. 
• Ruby:  Ruby was developed in the mid-1990s as a flexible and comprehensive language. It’s popular among startups and small businesses because launching a project using Ruby takes very little time and you can use it to prototype applications quickly.  Ruby isn’t quite as popular as some of the other back end languages, but it still has a robust developer community. It’s an excellent choice for beginning developers or anyone who wants to work in a startup environment. 

Working with Databases 

Databases are critical in back end development. You’ll need to know how to manage and access data to grow as a back end developer. 

Structured Query Language (SQL) is a query language popular among data scientists and back end developers. It’s used to create databases, add new data into existing databases and modify data within databases. SQL allows developers to query data from relational databases –– databases where data is organized into tables . MySQL and Microsoft SQL Server are a few widely used options. 

(Want to learn more? Check out our guide to SQL .)

You’ll also need to know about working with NoSQL databases. These databases don’t structure their data in tables, columns and rows. Rather, these databases are agile, flexible and straightforward. They’re a great option for a business that works with massive amounts of data that can’t be efficiently organized within a conventional table. 

Learning about SQL and NoSQL databases can give you more job flexibility down the line. After all, different businesses have different needs, so knowing how to work with various database types can help you in your future career. 

Data means nothing if you can’t analyze it, and employers look for developers who can analyze data sets effectively. Our guide to data analytics can help you get started.

7. Basics of Website Architecture and Design

Everything we’ve discussed so far deals with the technical implementation of a website. As a web developer, you should also know some of the basics of website architecture and design. 

You’ll need to do some high-level thinking about your site, your users and your goals. Who do you want to read your site? Where are they coming from? What do you want them to do — buy a product, fill out a form or something else? Your site doesn’t need to appeal to everyone, but it should appeal to your target users. 

Website architecture refers to the layout and structure of pages within your site. This can include pages like:

• An “About” page
• Landing pages
• A “Contact us” page

The pages you need will change depending on what your site is supposed to do. For example, an e-commerce site might showcase product categories, product pages and product subcategories. 

Think about how users will navigate your site. Will everything be centralized on a single page? Do you want your users to explore the site and learn more about your company or service? You need to make sure your site’s architecture communicates its purpose and is easy to navigate. 

Design is another important consideration. As a web designer, you’ll manage the appearance and layout of a website. The appearance of your site involves the fonts, colors and images used throughout the site. Layout refers to how the information is structured and categorized on each page. This is your chance to let your artistic side shine through. 

Effective web design draws from design principles more broadly. Consider: 

You have a lot of choices when it comes to color, and color can sell your site’s story from a user’s first impression. For example, a nature blog might want to use earth-tone greens, browns and greys. Understanding some basic color theory can help here. 

Like color, you have a ton of font choices to consider –– fonts can say a lot about your site. Different fonts communicate different messages, so choosing a suitable font is crucial. Check out Google’s guide to choosing web fonts to learn more. 

Your website’s structure should follow a visual hierarchy. Which ideas are important for users to see, and what order should they see them in? Most people read websites in an F-shaped or a Z-shaped pattern. Understanding how people interact with the web can help you set up your pages. 

One way to start thinking about design is to visit some of your favorite websites. Take note of the colors, fonts and layouts they use. How do the elements make you feel? What attributes about the company do they communicate? Pay attention to how individual components are laid out, as well as the use of colors and fonts. This can help you see the websites you build in a new way.

Tips to Consider

• Define your goals: Jumping into the deep end of web development can feel overwhelming if you don’t have a plan. Think about what you want to learn and map out a timeline to achieve your goals. 
• Go beyond tutorials: One of the best ways to learn is to put what you know into practice — tutorials won’t turn you into a developer overnight. Making real-world websites is critical for your learning. 
• Take a bootcamp or class: There’s a lot to learn when it comes to web development. Enrolling in a coding bootcamp focused on web development can help you structure your learning over a condensed period of time so you can start building websites quickly. 
• Never stop learning : The web is constantly changing — so, naturally, web best practices are too. Something you learn today might not be the standard in five years, so you should always have a learning mindset. 
• Put together a portfolio: Creating a portfolio gives you something to show employers once you begin your job search. Keep track of your projects and showcase them to the world. 

What software do I need to learn to build a website?

You’ll need a computer with a web browser like Chrome , Firefox or Safari . You’ll also need a text editor like Atom to write and manage code, and a local web server utility like XAMPP to test sites as you write them. 

Does web development require a degree?

The short answer is no. Many professional web developers work in the field without a degree. If you plan to join them, you’ll need to build a portfolio of your work that showcases your skills and communicates what you can bring to a potential employer. We have a guide on how to become a web developer if you’re interested in the process. 

What web development languages should I learn?

There are a few that you’ll want to learn to help you understand how websites work. HTML, CSS and JavaScript are often used in front end development, for example, while Python, Java and Node.js are ideal for those working in back end development. 

How long does it take to learn web development?

This answer depends on your technical background and the amount of time you can dedicate to learning. The turnaround might be as little as three months for someone with prior web development experience, or around six months to a year for someone without experience. Completing a coding bootcamp can help you get up to speed more quickly with a structured curriculum. 

Do I need to have a technical background to learn web development?

Having technical knowledge can speed up the process, but it is by no means required. Prior experience in programming languages can help you pick up the concepts involved, but many of the coding languages and tools are relatively intuitive and easy to pick up. Contact us if you have any questions about jump-starting your coding education!

Navigate Web Development Articles

From the fundamentals to more advanced web development tutorials.

Ready to learn more about Berkeley Coding Boot Camp in San Francisco ? Contact an admissions advisor at (510) 306-1218 .

More From Forbes

Websites to help you find remote jobs in europe this 2024.

• Share to Facebook
• Share to Twitter
• Share to Linkedin

Websites to Help You Find Remote Jobs in Europe this 2024

Many have already planned their trip to Europe this summer, especially with the upcoming Paris 2024 Olympics. However, jobseekers can seize the opportunity to land a remote job in Europe instead.

According to the Global Remote Work Index 2023 , the top 10 remote work destinations were all in Europe: Denmark, the Netherlands, Germany, Spain, Sweden, Portugal, Estonia, Lithuania, Ireland, and Slovakia.

So, if you’re looking into landing a remote job in Europe, here are some useful websites that can help you in your search:

We Work Remotely

We Work Remotely is one of the largest remote job boards specifically designed to cater to remote job seekers. Although many listings are from North American companies, the website features a dedicated job board for Remote Jobs in Europe in various industries including technology, marketing, design, customer support, sales, and others.

There is also an easy-to-use search and filter options to find the best fit for you. To stay updated, you can also opt to sign up to receive email notifications when new remote roles are posted on the platform to stay updated.

Apple Loop iPhone 16 Pro Details iOS 18 s AI Plans iPhone 14 Pro Special Offer

‘suicide squad: kill the justice league’ ends its weekly updates, 1 dead and 26 hurt in overnight shooting in akron ohio, eu remote jobs.

EU Remote Jobs is a specialized job board focused exclusively on remote job opportunities within Europe. However, it should be noted that it mainly connects job seekers already residing in Europe to employers.

But don’t lose hope. You might still find some opportunities on the website that align with your skills and previous experience. Sign up for email notifications to be alerted for postings that match your preferences.

Sectors with job openings listed on the site include tech, marketing, customer support, design, writing, finance, and others. The website also offers job type filters, such as full-time, part-time, freelance, and contract, which can help you find a suitable role for you. You can also

Wellfound is a dedicated job board and recruitment platform specifically designed for startups and tech companies. Wellfound is the new name for AngelList Talent, which was initially founded to democratize startup investing.

The website covers job categories such as engineering, product management, design, marketing, sales, operations, and others. It also allows filtering by company size (e.g., small startups, larger tech companies) and stage (e.g., seed, Series A, growth stage).

A 2022 Gusto survey among new businesses shows they are becoming more amenable to remote or hybrid workplaces, with 35% having hired fully remote employees. When it comes to startup setups, remote is becoming the norm. So, landing a remote job in a company in a European startup could be a great way to get into the EU job market.

Jobspresso is a curated job board that focuses on providing high-quality remote job listings. Each job post is handpicked to ensure it meets certain quality standards, reducing spam and low-quality job posting.

It features opportunities across industries of tech, marketing, project management, sales, support, and others, with positions ranging from entry-level to executive level.

Like the sites mentioned earlier, users can also set up email notifications for new job postings that match their interests on the website.

And just like every other job search, it’s important to tailor-fit your resume and cover letters for the job you’re applying for and prepare for the interview process by doing your research and listing questions to ask during the talk.

Even though these job boards are a good start to help you find and land a remote job in Europe, networking and continuing to upskill yourself can help advance your career further and achieve your career goals faster. Don’t simply rely on these job boards. Instead, use them as a stepping stone to get closer to the job you want, anywhere you want.

• Editorial Standards
• Reprints & Permissions

Join The Conversation

One Community. Many Voices. Create a free account to share your thoughts. 

Forbes Community Guidelines

Our community is about connecting people through open and thoughtful conversations. We want our readers to share their views and exchange ideas and facts in a safe space.

In order to do so, please follow the posting rules in our site's  Terms of Service.   We've summarized some of those key rules below. Simply put, keep it civil.

Your post will be rejected if we notice that it seems to contain:

• False or intentionally out-of-context or misleading information
• Insults, profanity, incoherent, obscene or inflammatory language or threats of any kind
• Attacks on the identity of other commenters or the article's author
• Content that otherwise violates our site's  terms.

User accounts will be blocked if we notice or believe that users are engaged in:

• Continuous attempts to re-post comments that have been previously moderated/rejected
• Racist, sexist, homophobic or other discriminatory comments
• Attempts or tactics that put the site security at risk
• Actions that otherwise violate our site's  terms.

So, how can you be a power user?

• Stay on topic and share your insights
• Feel free to be clear and thoughtful to get your point across
• ‘Like’ or ‘Dislike’ to show your point of view.
• Protect your community.
• Use the report tool to alert us when someone breaks the rules.

Thanks for reading our community guidelines. Please read the full list of posting rules found in our site's  Terms of Service.

PACER Maintenance, 06/09/2024

Our systems will undergo maintenance on Sunday, June 9, 2024 , from 6:55 a.m. to 7:00 p.m. ET. Access to certain portions of this site may be temporarily unavailable.

An official website of the United States government

Here’s how you know

Official websites use .gov A .gov website belongs to an official government organization in the United States.

Secure .gov websites use HTTPS A lock ( Lock A locked padlock ) or https:// means you’ve safely connected to the .gov website. Share sensitive information only on official, secure websites.

PACER Pricing: How fees work

Access federal court records electronically via the PACER service. Registered users may be charged a fee based on the amount and type of information accessed in a calendar quarter.

Cost for Accessing PACER

$0.10 per page:

Document , such as a docket, motion, order, judgement or brief in a case. 
 
You won't be charged more than $3 per document.

PACER Search Results – Anytime a search is performed you are charged a fee based on the number of pages generated in the search, even if the search displays “no matches found.” There is no maximum fee for these searches.

Reports that are not case-specific, such as the cases report. There is no maximum fee for these reports.

Transcript of court proceedings are added to PACER 90 days after they are produced. There is no maximum fee for transcripts in PACER. Learn more.

$2.40 per audio file:

Audio Files are provided as .mp3 files for some hearings as part of the court record.

Billing: Users are billed on a quarterly basis if they accrue more than $30 in the previous quarter. You will receive an invoice via mail or email.

 Tips for limiting fees

Search by case number instead of party name.

Search by case number rather than by party name so you will go directly to the case without a charge. Otherwise, if you search for a case by a party name that is fairly common, that may yield a high number of pages.

Use Docket Report Filters

You may limit the amount of information listed on the Docket Report by using the filters provided. Depending on the options made available by the court, you may have the ability to toggle the inclusion of “Parties and Counsel” and/or “Terminated Parties,” if that information is not necessary to you. Typically, these options are enabled by default. You also have the option to filter the docket to include filings/entries by date range. Entering a date range prior to running the docket report will display filings or entries within that range. For example: if you last checked the docket on 08/23/19, the next time you search for case updates enter a date range of 08/23/19 to present and unchecking “Parties and Counsel” and “Terminated Parties.” This will avoid pulling docket entries and party information you may have already accessed or do not need.

Search by a Specific Court vs. Using the PACER Case Locator

If you know what court the case was filed in and you know the case number, login to PACER to search directly using the Query option. 

The PACER Case Locator is a nationwide index that searches all federal court case records in one central location. If you are unsure where the case was filed and/or you do not have a case number, you can use the PACER Case Locator to find it. You can search nationwide or you can limit your search criteria to a specific state to locate your case. 

For example, if you know your case was filed in Texas, but are unsure which district in Texas, you can search for the case in the PACER Case Locator in multiple districts at once, instead of manually searching in each one individually.  

Spend $30 or less on court records in 
a quarter and fees are WAIVED…

When is pacer free.

• You are a party in a case
 and receive a Notice of
 Electronic or Notice of
 Docket Activity (one
 free copy) from a court.
• You view case
 information at any
 federal courthouse.
• You are an individual or group who was granted a fee exemption.
• Court opinions are
 always free.

Fee Exemptions

Courts may exempt individuals or groups, such as indigents, pro bono attorneys, academic researchers, and non-profit organizations from paying a fee, upon request to the court. Learn more about fee exemptions for academic researchers . Learn more about fee exemptions for other eligible parties.

The PACER Service Center can find your court records

Delivered Electronically

$30.00 per name or item searched plus $0.10 per page per document delivered electronically, up to five documents. The $3 maximum for any document applies.

Delivered by U.S. Mail

$30.00 per name or item searched plus $0.50 per page for paper copies of documents.

Get started with a request . (pdf)

The PACER Service Center can answer your questions about the best ways to search for a case for free.  

Phone: 1-800-676-6856

Email: [email protected]  

Advertisement

How women became America's safety net

Copy the code below to embed the wbur audio player on your site.

<iframe width="100%" height="124" scrolling="no" frameborder="no" src="https://player.wbur.org/onpoint/2024/06/04/women-work-social-safety-childcare-labor"></iframe>

• Hilary McQuilkin
• Meghna Chakrabarti

Other countries have social safety nets. The U.S. has women.

In the new book " Holding it Together: How Women Became America's Safety Net ," sociologist Jessica Calarco says it’s time that changed.

Today, On Point: How women became America's safety net.

Jessica Calarco , associate professor of sociology at the University of Wisconsin – Madison. Her new book is " Holding it Together: How Women Became America’s Safety Net ."

Becky Logue-Conroy , research analyst with the Center for Women in Work, which is in the School of Management and Labor Relations at Rutgers.

Angelique Espinoza , director of policy at Good Business Colorado.

This program aired on June 4, 2024.

• Economics Nobel Prize goes to Claudia Goldin, an expert on women at work
• The factors behind the huge resurgence of women in the workforce
• Nobel prize winner Claudia Goldin on women, the work force and the pandemic
• Latinas are succeeding, but feel pressured to playing traditional roles for women
• Gender pay gap persists, 15 years after Lilly Ledbetter Fair Pay Act : Here & Now Anytime

Hilary McQuilkin Producer, On Point Hilary McQuilkin is a producer for On Point.

Meghna Chakrabarti Host, On Point Meghna Chakrabarti is the host of On Point.

More from On Point

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Getting started with HTML

• Overview: Introduction to HTML

In this article, we cover the absolute basics of HTML. To get you started, this article defines elements, attributes, and all the other important terms you may have heard. It also explains where these fit into HTML. You will learn how HTML elements are structured, how a typical HTML page is structured, and other important basic language features. Along the way, there will be an opportunity to play with HTML too!

What is HTML?

HTML (HyperText Markup Language) is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements , which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on. For example, consider the following line of text:

If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph ( <p> ) element:

Note: Tags in HTML are not case-sensitive. This means they can be written in uppercase or lowercase. For example, a <title> tag could be written as <title> , <TITLE> , <Title> , <TiTlE> , etc., and it will work. However, it is best practice to write all tags in lowercase for consistency and readability.

Anatomy of an HTML element

Let's further explore our paragraph element from the previous section:

The anatomy of our element is:

• The opening tag: This consists of the name of the element (in this example, p for paragraph), wrapped in opening and closing angle brackets. This opening tag marks where the element begins or starts to take effect. In this example, it precedes the start of the paragraph text.
• The content: This is the content of the element. In this example, it is the paragraph text.
• The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This marks where the element ends. Failing to include a closing tag is a common beginner error that can produce peculiar results.

The element is the opening tag, followed by content, followed by the closing tag.

Active learning: creating your first HTML element

Edit the line below in the "Editable code" area by wrapping it with the tags <em> and </em>. To open the element , put the opening tag <em> at the start of the line. To close the element , put the closing tag </em> at the end of the line. Doing this should give the line italic text formatting! See your changes update live in the Output area.

If you make a mistake, you can clear your work using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Nesting elements

Elements can be placed within other elements. This is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word very in a <strong> element, which means that the word is to have strong(er) text formatting:

There is a right and wrong way to do nesting. In the example above, we opened the p element first, then opened the strong element. For proper nesting, we should close the strong element first, before closing the p .

The following is an example of the wrong way to do nesting:

The tags have to open and close in a way that they are inside or outside one another . With the kind of overlap in the example above, the browser has to guess at your intent. This kind of guessing can result in unexpected results.

Void elements

Not all elements follow the pattern of an opening tag, content, and a closing tag. Some elements consist of a single tag, which is typically used to insert/embed something in the document. Such elements are called void elements . For example, the <img> element embeds an image file onto a page:

This would output the following:

Note: In HTML, there is no requirement to add a / at the end of a void element's tag, for example: <img src="images/cat.jpg" alt="cat" /> . However, it is also a valid syntax, and you may do this when you want your HTML to be valid XML.

Elements can also have attributes. Attributes look like this:

Attributes contain extra information about the element that won't appear in the content. In this example, the class attribute is an identifying name used to target the element with style information.

An attribute should have:

• A space between it and the element name. (For an element with more than one attribute, the attributes should be separated by spaces too.)
• The attribute name, followed by an equal sign.
• An attribute value, wrapped with opening and closing quote marks.

Active learning: Adding attributes to an element

The <img> element can take a number of attributes, including:

The src attribute is a required attribute that specifies the location of the image. For example: src="https://raw.githubusercontent.com/mdn/beginner-html-site/gh-pages/images/firefox-icon.png" .

The alt attribute specifies a text description of the image. For example: alt="The Firefox icon" .

The width attribute specifies the width of the image with the unit being pixels. For example: width="300" .

The height attribute specifies the height of the image with the unit being pixels. For example: height="300" .

Edit the line below in the Input area to turn it into an image.

• Find your favorite image online, right click it, and press Copy Image Link/Address .
• Back in the area below, add the src attribute and fill it with the link from step 1.
• Set the alt attribute.
• Add the width and height attributes.

You will be able to see your changes live in the Output area.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to see the answer.

Boolean attributes

Sometimes you will see attributes written without values. This is entirely acceptable. These are called Boolean attributes. Boolean attributes can only have one value, which is generally the same as the attribute name. For example, consider the disabled attribute, which you can assign to form input elements. (You use this to disable the form input elements so the user can't make entries. The disabled elements typically have a grayed-out appearance.) For example:

As shorthand, it is acceptable to write this as follows:

For reference, the example above also includes a non-disabled form input element. The HTML from the example above produces this result:

Omitting quotes around attribute values

If you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes. This is permitted in certain circumstances, but it can also break your markup in other circumstances. The element in the code snippet below, <a> , is called an anchor. Anchors enclose text and turn them into links. The href attribute specifies the web address the link points to. You can write this basic version below with only the href attribute, like this:

Anchors can also have a title attribute, a description of the linked page. However, as soon as we add the title in the same fashion as the href attribute there are problems:

As written above, the browser misinterprets the markup, mistaking the title attribute for three attributes: a title attribute with the value The , and two Boolean attributes, Mozilla and homepage . Obviously, this is not intended! It will cause errors or unexpected behavior, as you can see in the live example below. Try hovering over the link to view the title text!

Always include the attribute quotes. It avoids such problems, and results in more readable code.

Single or double quotes?

In this article, you will also notice that the attributes are wrapped in double quotes. However, you might see single quotes in some HTML code. This is a matter of style. You can feel free to choose which one you prefer. Both of these lines are equivalent:

Make sure you don't mix single quotes and double quotes. This example (below) shows a kind of mixing of quotes that will go wrong:

However, if you use one type of quote, you can include the other type of quote inside your attribute values:

To use quote marks inside other quote marks of the same type (single quote or double quote), use HTML entities . For example, this will break:

Instead, you need to do this:

Anatomy of an HTML document

Individual HTML elements aren't very useful on their own. Next, let's examine how individual elements combine to form an entire HTML page:

Here we have:

• <!DOCTYPE html> : The doctype. When HTML was young (1991-1992), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML. Doctypes used to look something like this: html <! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" > More recently, the doctype is a historical artifact that needs to be included for everything else to work right. <!DOCTYPE html> is the shortest string of characters that counts as a valid doctype. That is all you need to know!
• <html></html> : The <html> element. This element wraps all the content on the page. It is sometimes known as the root element.
• <head></head> : The <head> element. This element acts as a container for everything you want to include on the HTML page, that isn't the content the page will show to viewers. This includes keywords and a page description that would appear in search results, CSS to style content, character set declarations, and more. You will learn more about this in the next article of the series.
• <meta charset="utf-8"> : The <meta> element. This element represents metadata that cannot be represented by other HTML meta-related elements, like <base> , <link> , <script> , <style> or <title> . The charset attribute specifies the character encoding for your document as UTF-8, which includes most characters from the vast majority of human written languages. With this setting, the page can now handle any textual content it might contain. There is no reason not to set this, and it can help avoid some problems later.
• <title></title> : The <title> element. This sets the title of the page, which is the title that appears in the browser tab the page is loaded in. The page title is also used to describe the page when it is bookmarked.
• <body></body> : The <body> element. This contains all the content that displays on the page, including text, images, videos, games, playable audio tracks, or whatever else.

Active learning: Adding some features to an HTML document

If you want to experiment with writing some HTML on your local computer, you can:

• Copy the HTML page example listed above.
• Create a new file in your text editor.
• Paste the code into the new text file.
• Save the file as index.html .

Note: You can also find this basic HTML template on the MDN Learning Area GitHub repo .

You can now open this file in a web browser to see what the rendered code looks like. Edit the code and refresh the browser to see what the result is. Initially, the page looks like this:

In this exercise, you can edit the code locally on your computer, as described previously, or you can edit it in the sample window below (the editable sample window represents just the contents of the <body> element, in this case). Sharpen your skills by implementing the following tasks:

• Just below the opening tag of the <body> element, add a main title for the document. This should be wrapped inside an <h1> opening tag and </h1> closing tag.
• Edit the paragraph content to include text about a topic that you find interesting.
• Make important words stand out in bold by wrapping them inside a <strong> opening tag and </strong> closing tag.
• Add a link to your paragraph, as explained earlier in the article .
• Add an image to your document. Place it below the paragraph, as explained earlier in the article . Earn bonus points if you manage to link to a different image (either locally on your computer or somewhere else on the web).

Whitespace in HTML

In the examples above, you may have noticed that a lot of whitespace is included in the code. This is optional. These two code snippets are equivalent:

No matter how much whitespace you use inside HTML element content (which can include one or more space characters, but also line breaks), the HTML parser reduces each sequence of whitespace to a single space when rendering the code. So why use so much whitespace? The answer is readability.

It can be easier to understand what is going on in your code if you have it nicely formatted. In our HTML we've got each nested element indented by two spaces more than the one it is sitting inside. It is up to you to choose the style of formatting (how many spaces for each level of indentation, for example), but you should consider formatting it.

Let's have a look at how the browser renders the two paragraphs above with and without whitespace:

Note: Accessing the innerHTML of elements from JavaScript will keep all the whitespace intact. This may return unexpected results if the whitespace is trimmed by the browser.

Entity references: Including special characters in HTML

In HTML, the characters < , > , " , ' , and & are special characters. They are parts of the HTML syntax itself. So how do you include one of these special characters in your text? For example, if you want to use an ampersand or less-than sign, and not have it interpreted as code.

You do this with character references. These are special codes that represent characters, to be used in these exact circumstances. Each character reference starts with an ampersand (&), and ends with a semicolon (;).

The character reference equivalent could be easily remembered because the text it uses can be seen as less than for &lt; , quotation for &quot; and similarly for others. To find more about entity references, see List of XML and HTML character entity references (Wikipedia).

In the example below, there are two paragraphs:

In the live output below, you can see that the first paragraph has gone wrong. The browser interprets the second instance of <p> as starting a new paragraph. The second paragraph looks fine because it has angle brackets with character references.

Note: You don't need to use entity references for any other symbols, as modern browsers will handle the actual symbols just fine as long as your HTML's character encoding is set to UTF-8 .

HTML comments

HTML has a mechanism to write comments in the code. Browsers ignore comments, effectively making comments invisible to the user. The purpose of comments is to allow you to include notes in the code to explain your logic or coding. This is very useful if you return to a code base after being away for long enough that you don't completely remember it. Likewise, comments are invaluable as different people are making changes and updates.

To write an HTML comment, wrap it in the special markers <!-- and --> . For example:

As you can see below, only the first paragraph is displayed in the live output.

You made it to the end of the article! We hope you enjoyed your tour of the basics of HTML.

At this point, you should understand what HTML looks like, and how it works at a basic level. You should also be able to write a few elements and attributes. The subsequent articles of this module go further on some of the topics introduced here, as well as presenting other concepts of the language.

• As you start to learn more about HTML, consider learning the basics of CSS (Cascading Style Sheets). CSS is the language used to style web pages, such as changing fonts or colors or altering the page layout. HTML and CSS work well together, as you will soon discover.
• Applying color to HTML elements using CSS

Official website of the State of California

Resources for California

• Key services
• Health insurance or Medi-Cal
• Business licenses
• Food & social assistance
• Find a CA state job
• Vehicle registration
• Digital vaccine record
• Traffic tickets
• Birth certificates
• Lottery numbers
• Unemployment
• View all CA.gov services
• Popular topics
• Building California
• Climate Action
• Mental health care for all

Jun 4, 2024

Sites Reservoir project clears hurdle thanks to streamlining law

What you need to know: Governor Newsom’s infrastructure streamlining law, which reduces delays caused by CEQA litigation, led to a prompt court ruling supporting the Sites Reservoir project. The reservoir will store enough water to support 3 million households’ yearly usage.

SACRAMENTO — The Sites Reservoir project cleared a major hurdle after Governor Gavin Newsom had  streamlined the project  late last year, overcoming a CEQA challenge and gaining full approval from the  Yolo County Superior Court .

Governor Newsom’s  infrastructure streamlining law  requires that courts must decide CEQA challenges within 270 days to the extent feasible. Today’s decision occurred within 148 days.

“California needs more water storage, and we have no time to waste – projects like the Sites Reservoir will capture rain and snow runoff to supply millions of homes with clean drinking water. We’re approaching this work with urgency, everything from water storage to clean energy and transportation projects.” Governor Gavin Newsom

The Sites Reservoir will capture water during wet seasons and store it for use during drier seasons – holding up to 1.5 million acre-feet of water, enough for 3 million households’ yearly usage. It has received a total of $46.75 million in early funding from the state. In all, Sites is eligible for $875.4 million of Proposition 1 funding. Total project cost is estimated at $4 billion.

How it works

• SB 149 allows the Governor to certify qualifying infrastructure projects for judicial streamlining under the California Environmental Quality Act (CEQA).
• Courts must decide CEQA challenges to certified projects within 270 days to the extent feasible – saving months or even years of litigation delays after a project has already passed environmental review, while still allowing legal challenges to be heard.

Why it’s important

• The project will help California maintain a resilient water supply in the face of climate change, weather extremes, and water scarcity.
• Sites Reservoir is critical to California’s ​​Water Supply Strategy and meeting our goal of expanding above and below ground water storage capacity by 4 million acre feet.

How we got here

• Governor Newsom signed into law a package of bills to accelerate critical infrastructure projects across California that will help build our 100% clean electric grid, ensure safe drinking water and boost the state’s water supply, and modernize our transportation system.
• By streamlining permitting, cutting red tape, and allowing state agencies to use new project delivery methods, these new laws will maximize taxpayer dollars and accelerate timelines of projects throughout the state, while ensuring appropriate environmental review and community engagement.
• The package will take full advantage of an unprecedented $180 billion in state, local, and federal infrastructure funds over the next ten years while creating an estimated 400,000 good-paying jobs.

News , Press Releases

Live updates

🥎 Oklahoma vs. Florida in WCWS semis

⚾️ DI baseball super regional hosts, game times set

DII baseball finals

DIII baseball champ series

NCAA staff | June 4, 2024

• 8 super regional hosts and game times announced for the 2024 NCAA Division I baseball championship

INDIANAPOLIS — The eight super-regional hosts were announced today by the NCAA Division I Baseball Committee.

The following four super regionals will be played Friday, June 7 and Saturday, June 8, with Sunday, June 9 for if necessary or weather-delayed games. The national seed is indicated before the team name, while updated records through the regionals are in parentheses.

GAMES BEGIN FRIDAY, JUNE 7 - All times are Eastern

Note: Game times and ESPN Network subject to change

• 3 p.m. (ESPN2), 11 a.m. (ESPN2), 6 p.m. (ESPNU)
• noon (ESPN), 11 a.m. (ESPN), noon (ESPN2)
• 7 p.m. (ESPNU), 3 p.m. (ESPNU), 3 p.m. (ESPNU)
• 6 p.m. (ESPN2), 8 p.m. (ESPN2), 3 p.m. (ESPN2)

The following four super regionals will be played Saturday, June 8 and Sunday, June 9, with Monday, June 10 for if necessary or weather-delayed games.

GAMES BEGIN SATURDAY, JUNE 8 – All times are Eastern

• 6 p.m. (ESPNU), 9 p.m. (ESPNU), TBD (TBD)
• noon (ESPNU), 12 noon (ESPNU), TBD (TBD)
• 2 p.m. (ESPN), 2:30 p.m. (ESPN), TBD (TBD)
• 2 p.m. (ESPN2), 7:30 p.m. (ESPN2), TBD (TBD)

The determination of the Men’s College World Series order of first-round games both Friday, June 14, and Saturday, June 15, will be announced Monday, June 10. The ESPN family of networks and www.ncaa.com/mcws will release the MCWS game dates and times as soon as they are available. The Men’s College World Series begins play Friday, June 14, at Charles Schwab Field Omaha in Omaha, Nebraska.

• Storylines to watch in the 2024 NCAA baseball super regionals

• 2024 NCAA baseball bracket: Men's College World Series scores, schedule

2024 NCAA DIII baseball championship: Selections, bracket, schedule

• Championship Info
• Game Program

Men's College World Series

• 🗓️ 2024 schedule
• 🔮 Future dates
• 🤔 How the MCWS works
• 🏆 Programs with the most MCWS titles
• 💪 Coaches with the most MCWS wins
• ⚾ Every champion in tournament history

Everything you need to know about how the Men's College World Series works

Di baseball news.

• Full 9th inning from East Carolina-Wake Forest NCAA regional elimination game
• 'We're hungry man': Kentucky baseball is starving for its first trip to Omaha

College baseball career home run leaders

Here are the baseball programs with the most Men's College World Series titles

The 7 longest home runs in MCWS history (that we know of)

Follow di baseball.