What are browser developer tools? - Learn web development

What are browser developer tools?
=================================

Every modern web browser includes a powerful suite of developer tools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load. This article explains how to use the basic functions of your browser's devtools.

**Note:** Before you run through the examples below, open the Beginner's example site that we built during the Getting started with the Web article series. You should have this open as you follow the steps below.

How to open the devtools in your browser
----------------------------------------

The devtools live inside your browser in a subwindow that looks roughly like this, depending on what browser you are using:

![Screenshot of a browser with developer tools open. The web page is displayed in the top half of the browser, the developer tools occupy the bottom half. There are three panels open in the developer tools: HTML, with the body element selected, a CSS panel showing styles blocks targeting the highlighted body, and a computed styles panel showing all the author styles; the browser styles checkbox is not checked.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/devtools_63_inspector.png)

How do you pull it up? Three ways:

* ***Keyboard:***
    + **Windows:** *`Ctrl` + `Shift` + `I`* or `F12`
    + **macOS:** *`⌘` + `⌥` + `I`*
* ***Menu bar:***
    + **Firefox:** Menu
     ![Firefox hamburger menu icon that has more options to customize and control Firefox.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) *➤ Web Developer ➤ Toggle Tools,* or *Tools ➤* *Web Developer ➤ Toggle Tools*
    + **Chrome:** *More tools ➤ Developer tools*
    + **Safari:** *Develop ➤ Show Web Inspector.* If you can't see the *Develop* menu, go to *Safari ➤ Preferences ➤ Advanced*, and check the *Show Develop menu in menu bar* checkbox.
    + **Opera**: *Developer ➤ Developer tools*
* ***Context menu:*** Press-and-hold/right-click an item on a webpage (Ctrl-click on the Mac), and choose *Inspect Element* from the context menu that appears. (*An added bonus:* this method straight-away highlights the code of the element you right-clicked.)

![The firefox logo as a DOM element in an example website with a context menu showing. A context menu appears when any item on the web page is right-clicked. The last menu items is 'Inspect element'.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector_context.png)

The Inspector: DOM explorer and CSS editor
------------------------------------------

The developer tools usually open by default to the inspector, which looks something like the following screenshot. This tool shows what the HTML on your page looks like at runtime, as well as what CSS is applied to each element on the page. It also allows you to instantly modify the HTML and CSS and see the results of your changes reflected live in the browser viewport.

![A test website is opened in a tab in the browser. The browser developer tools sub-window is open. The developer tools has several tabs. Inspector is one of those tabs. Inspector tab displays the HTML code of the website. An image tag is selected from the HTML code. This results in highlighting of the image corresponding to the selected tag in the website.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/inspector_highlighted.png)

If you *don't* see the inspector,

* Tap/click the *Inspector* tab.
* In Chrome, Microsoft Edge, or Opera, tap/click Elements.
* In Safari, the controls are not so clearly presented, but you should see the HTML if you haven't selected something else to appear in the window. Press the *Style* button to see the CSS.
### Exploring the DOM inspector

For a start, right-click (Ctrl-click) an HTML element in the DOM inspector and look at the context menu. The available menu options vary among browsers, but the important ones are mostly the same:

![The browser developer tools sub-window is open. The inspector tab is selected. A link element is right-clicked from the HTML code available in the inspector tab. A context menu appears. The available menu options vary among browsers, but the important ones are mostly the same.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/dom_inspector.png)

* **Delete Node** (sometimes *Delete Element*). Deletes the current element.
* **Edit as HTML** (sometimes *Add attribute*/*Edit text*). Lets you change the HTML and see the results on the fly. Very useful for debugging and testing.
* **:hover/:active/:focus**. Forces element states to be toggled on, so you can see what their styling would look like.
* **Copy/Copy as HTML**. Copy the currently selected HTML.
* Some browsers also have *Copy CSS Path* and *Copy XPath* available, to allow you to copy the CSS selector or XPath expression that would select the current HTML element.

Try editing some of your DOM now. Double-click an element, or right-click it and choose *Edit as HTML* from the context menu. You can make any changes you'd like, but you cannot save your changes.

### Exploring the CSS editor

By default, the CSS editor displays the CSS rules applied to the currently selected element:

![Snippet of the CSS panel and the layout panel that can be seen adjacent to the HTML editor in the browser developer tools. By default, the CSS editor displays the CSS rules applied to the currently selected element in the HTML editor. The layout panel shows the box model properties of the selected element.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/css_inspector.png)

These features are especially handy:

* The rules applied to the current element are shown in order of most-to-least-specific.
* Click the checkboxes next to each declaration to see what would happen if you removed the declaration.
* Click the little arrow next to each shorthand property to show the property's longhand equivalents.
* Click a property name or value to bring up a text box, where you can key in a new value to get a live preview of a style change.
* Next to each rule is the file name and line number the rule is defined in. Clicking that rule causes the dev tools to jump to show it in its own view, where it can generally be edited and saved.
* You can also click the closing curly brace of any rule to bring up a text box on a new line, where you can write a completely new declaration for your page.

You'll notice a number of clickable tabs at the top of the CSS Viewer:

* *Computed*: This shows the computed styles for the currently selected element (the final, normalized values that the browser applies).
* *Layout*: In Firefox, this area includes two sections:
    + *Box Model*: represents visually the current element's box model, so you can see at a glance what padding, border and margin is applied to it, and how big its content is.
    + *Grid*: If the page you are inspecting uses CSS Grid, this section allows you to view the grid details.
* *Fonts*: In Firefox, the *Fonts* tab shows the fonts applied to the current element.
### Find out more

Find out more about the Inspector in different browsers:

* Firefox Page inspector
* Chrome DOM inspector (Opera's inspector works the same as this)
* Safari DOM inspector and style explorer
The JavaScript debugger
-----------------------

The JavaScript debugger allows you to watch the value of variables and set breakpoints, places in your code that you want to pause execution and identify the problems that prevent your code from executing properly.

![A test website that is served locally in port 8080. The developer tools sub-window is open. The JavaScript debugger tab is selected. It allows you to watch the value of variables and set breakpoints. A file with name 'example.js' is selected from the sources pane. A breakpoint is set at line number 18 of the file.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/firefox_debugger.png)

To get to the debugger:

**Firefox**: Select
 ![Firefox menu icon that has more options to customize and control Firefox.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) ➤ *Web Developer* ➤ *Debugger* or press `Ctrl` + `Shift` + `S` to open the JavaScript Debugger. If the tools are already displayed, click on the **Debugger** tab.

**Chrome**: Open the Developer tools and then select the **Sources** tab. (Opera works the same way.)

**Safari**: Open the Developer Tools and then select the Debugger tab.

### Exploring the debugger

There are three panes in the JavaScript Debugger on Firefox.

#### File list

The first pane on the left contains the list of files associated with the page you are debugging. Select the file you want to work with from this list. Click on a file to select it and view its contents in the center pane of the Debugger.

![Snippet of the sources pane of the debugger tab in the browser developer tools. The files related to the current page that you are debugging are visible under the folder whose name is same as the url of the site that is open in the current browser tab.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/file_list.png)

#### Source code

Set breakpoints where you want to pause execution. In the following image, the highlight on the number 18 shows that the line has a breakpoint set.

![Snippet of developer tools debugger panel with the breakpoint at line 18 highlighted.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/source_code.png)

#### Watch expressions and breakpoints

The right-hand pane shows a list of the watch expressions you have added and breakpoints you have set.

In the image, the first section, **Watch expressions**, shows that the listItems variable has been added. You can expand the list to view the values in the array.

The next section, **Breakpoints**, lists the breakpoints set on the page. In example.js, a breakpoint has been set on the statement `listItems.push(inputNewItem.value);`

The final two sections only appear when the code is running.

The **Call stack** section shows you what code was executed to get to the current line. You can see that the code is in the function that handles a mouse click, and that the code is currently paused on the breakpoint.

The final section, **Scopes**, shows what values are visible from various points within your code. For example, in the image below, you can see the objects available to the code in the addItemClick function.

![Snippet of the sources pane of the debugger tab of the browser developer tools. In the call stack it shows the function that is called at Line 18, highlighting that a breakpoint is set at this line and showing the scope.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/watch_items.png)

### Find out more

Find out more about the JavaScript debugger in different browsers:

* Firefox JavaScript Debugger)
* Microsoft Edge Debugger
* Chrome Debugger
* Safari Debugger
The JavaScript console
----------------------

The JavaScript console is an incredibly useful tool for debugging JavaScript that isn't working as expected. It allows you to run lines of JavaScript against the page currently loaded in the browser, and reports the errors encountered as the browser tries to execute your code. To access the console in any browser:

If the developer tools are already open, click or press the Console tab.

If not, Firefox allows you to open the console directly using `Ctrl` + `Shift` + `K` or using the menu command: Menu
 ![Firefox menu](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/2014-01-10-13-08-08-f52b8c.png) *➤ Web Developer ➤ Web Console,* or *Tools ➤* *Web Developer ➤ Web Console.* On other browser, open the developer tools and then click the Console tab.

This will give you a window like the following:

![The Console tab of the browser developer tools. Two JavaScript functions have been executed in the console. The user entered functions, and the console displayed the return values.](/en-US/docs/Learn/Common_questions/Tools_and_setup/What_are_browser_developer_tools/console_only.png)

To see what happens, try entering the following snippets of code into the console one by one (and then pressing Enter):

```js
alert("hello!");
```

```js
document.querySelector("html").style.backgroundColor = "purple";
```

```js
const loginImage = document.createElement("img");
loginImage.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);
```

Now try entering the following incorrect versions of the code and see what you get.

```js
alert("hello!);
```

```js
document.cheeseSelector("html").style.backgroundColor = "purple";
```

```js
const loginImage = document.createElement("img");
banana.setAttribute(
  "src",
  "https://raw.githubusercontent.com/mdn/learning-area/master/html/forms/image-type-example/login.png",
);
document.querySelector("h1").appendChild(loginImage);
```

You'll start to see the kind of errors that the browser returns. Often these errors are fairly cryptic, but it should be pretty simple to figure these problems out!

### Find out more

Find out more about the JavaScript console in different browsers:

* Firefox Web Console
* Chrome JavaScript Console (Opera's inspector works the same as this)
* Safari Console
See also
--------

* Debugging HTML
* Debugging CSS


How do you host your website on Google App Engine? - Learn web development

How do you host your website on Google App Engine?
==================================================

Google App Engine is a powerful platform that lets you build and run applications on Google's infrastructure — whether you need to build a multi-tiered web application from scratch or host a static website. Here's a step-by-step guide to hosting your website on Google App Engine.

Creating a Google Cloud Platform project
----------------------------------------

To use Google's tools for your own site or app, you need to create a new project on Google Cloud Platform. This requires having a Google account.

1. Go to the App Engine dashboard on the Google Cloud Platform Console and press the *Create* button.
2. If you've not created a project before, you'll need to select whether you want to receive email updates or not, agree to the Terms of Service, and then you should be able to continue.
3. Enter a name for the project, edit your project ID and note it down. For this tutorial, the following values are used:
    * Project Name: *GAE Sample Site*
    * Project ID: *gaesamplesite*
4. Click the *Create* button to create your project.
Creating an application
-----------------------

Each Cloud Platform project can contain one App Engine application. Let's prepare an app for our project.

1. We'll need a sample application to publish. If you've not got one to use, download and unzip this sample app.
2. Have a look at the sample application's structure — the `website` folder contains your website content and `app.yaml` is your application configuration file.
    * Your website content must go inside the `website` folder, and its landing page must be called `index.html`, but apart from that it can take whatever form you like.
    * The `app.yaml` file is a configuration file that tells App Engine how to map URLs to your static files. You don't need to edit it.
Publishing your application
---------------------------

Now that we've got our project made and sample app files collected together, let's publish our app.

1. Open Google Cloud Shell.
2. Drag and drop the `sample-app` folder into the left pane of the code editor.
3. Run the following in the command line to select your project:

```bash
gcloud config set project gaesamplesite
```

4. Then run the following command to go to your app's directory:

```bash
cd sample-app
```

5. You are now ready to deploy your application, i.e. upload your app to App Engine:

```bash
gcloud app deploy
```

6. Enter a number to choose the region where you want your application located.
7. Enter `Y` to confirm.
8. Now navigate your browser to *your-project-id*.appspot.com to see your website online. For example, for the project ID *gaesamplesite*, go to *gaesamplesite*.appspot.com.
See also
--------

To learn more, see Google App Engine Documentation.


How do you make sure your website works properly? - Learn web development

How do you make sure your website works properly?
=================================================

In this article, we go over various troubleshooting steps for a website and some basic actions to take in order to solve these issues.

|  |  |
| --- | --- |
| Prerequisites: |
 You need to know how to
 upload files to a web server.
  |
| Objective: |
 You will learn how to diagnose and resolve some basic issues you can run
 into with your website.
  |

So you've published your website online? Very good! But are you sure it works properly?

A distant web server often behaves quite differently from a local one, so it's a good idea to test your website once it's online. You might be surprised at how many problems come up: images don't show up, pages don't load or load slowly, and so on. Most of the time it's no big deal, just a simple mistake or an issue with your web hosting configuration.

Let's see how to diagnose and solve those problems.

Active Learning
---------------

*There is no active learning available yet. Please, consider contributing.*

Dig deeper
----------

### Test in your browser

If you want to know whether your website works correctly, the first thing to do is fire up your browser and go to the page you want to test.

#### Uh-oh, where's the image?

Let's look at our personal website, `http://demozilla.examplehostingprovider.net/`. It's not showing the image we expected!

![Oops, the 'unicorn' image is missing](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-missing.png)

Open Firefox's Network tool (**Tools ➤ Web Developer ➤ Network**) and reload the page:

![The image has a 404 error](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/error404.png)

There's the problem, that "404" at the bottom. "404" means "resource not found", and that's why we didn't see the image.

#### HTTP statuses

Servers respond with a status message whenever they receive a request. Here are the most common statuses:

**200: OK**

The resource you asked for was delivered.

**301: Moved permanently**

The resource has moved to a new location. You won't see this much in your browser, but it's good to know about "301" since search engines use this information a lot to update their indexes.

**304: Not modified**

The file has not changed since the last time you asked for it, so your browser can display the version from its cache, resulting in faster response times and more efficient use of bandwidth.

**403: Forbidden**

You aren't allowed to display the resource. Usually it has to do with a configuration mistake (e.g. your hosting provider forgot to give you access rights to a directory).

**404: Not found**

Self-explanatory. We'll discuss how to solve this below.

**500: Internal server error**

Something went wrong on the server. For instance, maybe the server-side language (PHP, .Net, etc.) stopped working, or the web server itself has a configuration problem. Usually it's best to resort to your hosting provider's support team.

**503: Service unavailable**

Usually resulting from a short term system overload. The server has some sort of problem. Try again in a little while.

As beginners checking our (simple) website, we'll deal most often with 200, 304, 403, and 404.

#### Fixing the 404

So what went wrong?

![Le list of images in our project](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/demozilla-images-list.png)

At first glance, the image we asked for seems to be in the right place but the Network tool reported a "404". It turns out that we made a typo in our HTML code: `unicorn_pics.png` rather than `unicorn_pic.png`. So correct the typo in your code editor by changing the image's `src` attribute:

![Deleting the 's'](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/code-correct.png)

Save, push to the server, and reload the page in your browser:

![The image loads correctly in the browser](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/image-corrected.png)

There you go! Let's look at the HTTP statuses again:

* **200** for `/` and for `unicorn_pic.png` means that we succeeded in reloading the page and the image.
* **304** for `basic.css` means that this file has not changed since the last request, so the browser can use the file in its cache rather than receiving a fresh copy.

So we fixed the error and learned a few HTTP statuses along the way!

### Frequent errors

The most frequent errors that we find are these:

#### Typos in the address

We wanted to type `http://demozilla.examplehostingprovider.net/` but typed too fast and forgot an "l":

![Address unreachable](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/cannot-find-server.png)

The address cannot be found. Indeed.

#### 404 errors

Many times the error results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources. First check the spelling and accuracy of the file path, and if there's still a problem, upload your files again. That will likely fix the problem.

#### JavaScript errors

Someone (possibly you) added a script to the page and made a mistake. This will not prevent the page from loading, but you will feel something went wrong.

Open the console (**Tools ➤ Web developer ➤ Web Console**) and reload the page:

![A JavaScript error is shown in the Console](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/js-error.png)

In this example, we learn (quite clearly) what the error is, and we can go fix it (we will cover JavaScript in another series of articles).

### More things to check

We have listed a few simple ways to check that your website works properly, as well as the most common errors you may run across and how to fix them. You can also test if your page meets these criteria:

#### How's the performance?

Does the page load fast enough? Resources like WebPageTest.org or browser add-ons like YSlow can tell you a few interesting things:

![Yslow diagnostics](/en-US/docs/Learn/Common_questions/Tools_and_setup/Checking_that_your_web_site_is_working_properly/yslow-diagnostics.png)

Grades go from A to F. Our page is just small and meets most criteria. But we can already note it would have been better to use a CDN. That doesn't matter very much when we're only serving one image, but it would be critical for a high-bandwidth website serving many thousands of images.

#### Is the server responsive enough?

`ping` is a useful shell tool that tests the domain name you provide and tells you if the server's responding or not:
```

$ ping mozilla.org
PING mozilla.org (63.245.215.20): 56 data bytes
64 bytes from 63.245.215.20: icmp_seq=0 ttl=44 time=148.741 ms
64 bytes from 63.245.215.20: icmp_seq=1 ttl=44 time=148.541 ms
64 bytes from 63.245.215.20: icmp_seq=2 ttl=44 time=148.734 ms
64 bytes from 63.245.215.20: icmp_seq=3 ttl=44 time=147.857 ms
^C
--- mozilla.org ping statistics ---
4 packets transmitted, 4 packets received, 0.0% packet loss
round-trip min/avg/max/stddev = 147.857/148.468/148.741/0.362 ms
```

Just keep in mind a handy keyboard shortcut: **Ctrl+C**. Ctrl+C sends an "interrupt" signal to the runtime and tells it to stop. If you don't stop the runtime, `ping` will ping the server indefinitely.

### A simple checklist

* Check for 404s
* Make sure all webpages are behaving as you expect
* Check your website in several browsers to make sure it renders consistently
Next steps
----------

Congratulations, your website is up and running for anyone to visit. That's a huge achievement. Now, you can start digging deeper into various subjects.

* Since people can come to your website from all over the world, you should consider making it accessible to everybody.
* Is the design of your website a bit too rough? It's time to learn more about CSS.


How much does it cost to do something on the Web? - Learn web development

How much does it cost to do something on the Web?
=================================================

Getting involved on the Web isn't as cheap as it looks. In this article we discuss how much you may have to spend, and why.

|  |  |
| --- | --- |
| Prerequisites: |
 You should already understand
 what software you need, the difference between
 a webpage, a website, etc., and what
 a domain name is.
  |
| Objective: |
 Review the complete process for creating a website and find out how much
 each step can cost.
  |

Summary
-------

When launching a website, you may spend nothing, or your costs may go through the roof. In this article we discuss how much everything costs, and how you get what you pay (or don't pay).

Software
--------

### Text editors

You likely have a text editor: such as, Notepad on Windows, Gedit on Linux, TextEdit on Mac. You'll have an easier time writing code if you choose an editor that color-codes, checks your syntax, and assists you with code structure.

Many editors are free, for example Brackets, Bluefish, TextWrangler, Eclipse, Netbeans, and Visual Studio Code. Some, like Sublime Text, you can test as long as you like, but you're encouraged to pay. Some, like PhpStorm, can cost between a few dozen and 200 dollars, depending on the plan you purchase. Some of them, like Microsoft Visual Studio, can cost hundreds, or thousands of dollars; though Visual Studio Community is free for individual developers or open source projects. Often, for-pay editors will have a trial version.

To start, we suggest trying out several editors, to get a sense of which works best for you. If you're only writing simple HTML, CSS, and JavaScript, go with a simple editor.

Price does not reliably reflect a text editor's quality or usefulness. You have to try it for yourself and decide if it meets your needs. For example, Sublime Text is cheap, but comes with many free plugins that can greatly extend its functionality.

### Image editors

Your system likely includes a simple image editor, or viewer: Paint on Windows, Eye of Gnome on Ubuntu, Preview on Mac. Those programs are relatively limited, you'll soon want a more robust editor to add layers, effects, and grouping.

Editors can be free (GIMP, Paint.NET), moderately expensive (PaintShop Pro, less than $100), or several hundred dollars (Adobe Photoshop).

You can use any of them, as they will have similar functionality, though some are so comprehensive you'll never use every feature. If at some point you need to exchange projects with other designers, you should find out what tools they're using. Editors can all export finished projects to standard file formats, but each editor saves ongoing projects in its own specialized format. Most of the images on the internet are copyrighted, so it is better to check the license of the file before you use it. Sites like Pixabay provide images under CC0 license, so you can use, edit and publish them even with modification for commercial use.

### Media editors

If you want to include video or audio into your website, you can either embed online services (for example YouTube, Vimeo, or Dailymotion), or include your own videos (see below for bandwidth costs).

For audio files, you can find free software (Audacity, Wavosaur), or paying up to a few hundred dollars (Sound Forge, Adobe Audition). Likewise, video-editing software can be free (PiTiVi, OpenShot for Linux, iMovie for Mac), less than $100 (Adobe Premiere Elements), or several hundred dollars (Adobe Premiere Pro, Avid Media Composer, Final Cut Pro). The software you received with your digital camera may cover all your needs.

### Publishing tools

You also need a way to upload files: from your hard drive to a distant web server. To do that you should use a publishing tool such as an (S)FTP client, RSync, or Git/GitHub.

Each operating system includes an (S)FTP client, as part of its file manager. Windows Explorer, Nautilus (a common Linux file manager), and the Mac Finder all include this functionality. However, people often choose dedicated (S)FTP clients to display local or remote directories side-by-side and store server passwords.

If you want to install an (S)FTP client, there are several reliable and free options: for example, FileZilla for all platforms, WinSCP for Windows, Cyberduck for Mac or Windows, and more.

Because FTP is inherently insecure, you should make sure to use SFTP — the secure, encrypted version of FTP that most hosting sites you'll deal with these days will offer by default — or another secure solution like Rsync over SSH.

Browsers
--------

You either already have a browser or can get one for free. If necessary, download Firefox here or Google Chrome here.

Web access
----------

### Computer / modem

You need a computer. Costs can vary tremendously, depending on your budget, and where you live. To publish a barebones website, you only need a basic computer capable of launching an editor, and a Web browser, so the entry level can be quite low.

Of course, you'll need a more serious computer if you want to produce complicated designs, touch up photos, or produce audio and video files.

You need to upload content to a remote server (see *Hosting* below), so you need a modem. Your ISP can rent Internet connectivity to you for a few dollars per month, though your budget might vary, depending on your location.

### ISP access

Make sure that you have sufficient bandwidth:

* Low-bandwidth access may be adequate to support a 'simple' website: reasonably-sized images, texts, some CSS and JavaScript. That will likely cost you a few dozen dollars, including the rent for the modem.
* On the other hand, you'll need a high-bandwidth connection, such as DSL, cable, or fiber access, if you want a more advanced website with hundreds of files, or if you want to deliver heavy video/audio files directly from your web server. It could cost the same as low-bandwidth access, upwards to several hundred dollars per month for more professional needs.
Hosting
-------

### Understanding bandwidth

Hosting providers charge you according to how much bandwidth your website consumes. This depends on how many people, and Web crawling robots, access your content during a given time, and how much server space your content takes up. This is why people usually store their videos on dedicated services such as YouTube, Dailymotion, and Vimeo. For example, your provider may have a plan that includes up to several thousand visitors per day, for "reasonable" bandwidth usage. Be careful, however as this is defined differently from one hosting provider to another. Keep in mind that reliable, paid, personal hosting can cost around ten to fifteen dollars per month.

**Note:** There is no such thing as "unlimited" bandwidth. If you consume a huge amount of bandwidth, expect to pay a huge amount of money.

### Domain names

Your domain name has to be purchased through a domain name provider (a registrar). Your hosting provider may also be a registrar (Ionos, Gandi for instance are at the same time registrars and hosting providers). The domain name usually costs $5-15 per year. This cost varies depending on:

* Local obligations: some country top-level domain names are more costly, as different countries set different prices.
* Services associated with the domain name: some registrars provide spam protection by hiding your postal address and email address behind their own addresses: the postal address can be provided in care of the registrar, and your email address can be obscured via your registrar's alias.
### Do-it-yourself hosting vs. "packaged" hosting

When you want to publish a website, you could do everything by yourself: set up a database (if needed), Content Management System, or CMS (like Wordpress, Dotclear, spip, etc.), upload pre-made or your own templates.

You could use your hosting provider's environment, for roughly ten to fifteen dollars per month, or subscribe directly to a dedicated hosting service with pre-packaged CMSs (e.g., Wordpress, Tumblr, Blogger). For the latter, you won't have to pay anything, but you may have less control over templating and other options.

### Free hosting vs. paid hosting

You might ask, why should I pay for my hosting when there are so many free services?

* You have more freedom when you pay. Your website is yours, and you can migrate seamlessly from one hosting provider to the next.
* Free hosting providers may add advertising to your content, beyond your control.

It is better to go for paid hosting rather than relying on free hosting, as it is possible to move your files easily and uptime is guaranteed by most paid sites. Most hosting providers give you a huge discount to start with.

Some people opt for a mixed approach. For example, their main blog on a paid host with a full domain name, and spontaneous, less strategic, content on a free host service.

Professional website agencies and hosting
-----------------------------------------

If you desire a professional website, you will likely ask a web agency to do it for you.

Here, costs depend on multiple factors, such as:

* Is this a simple website with a few pages of text? Or a more complex, thousand-pages-long website?
* Will you want to update it regularly? Or will it be a static website?
* Must the website connect to your company's IT structure to gather content (say, internal data)?
* Do you want some shiny new feature that is popular at the moment? At the time of writing, clients are seeking single pages with complex parallax.
* Will you need the agency to think up user stories or solve complex UX problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas.

And for hosting you need to consider following choices:

* Do you want redundant servers, in case your server goes down?
* Is 95% reliability adequate, or do you need professional, around-the-clock service?
* Do you want high-profile, ultra-responsive dedicated servers, or can you cope with a slower, shared machine?

Depending on how you answer these questions, your site could cost thousands to hundreds of thousands of dollars.

Next steps
----------

Now that you understand what kind of money your website may cost you, it's time to start designing that website and setting up your work environment.

* Read on about how to choose and install a text editor.
* If you're more focused on design, take a look at the anatomy of a web page.


What text editors are available? - Learn web development

What text editors are available?
================================

In this article we highlight some things to think about when installing a text editor for web development.

|  |  |
| --- | --- |
| Prerequisites: | You should already know about various software you need to build a website. |
| Objective: |
 Learn how to choose a text editor that best suits your needs as a web
 developer.
  |

Summary
-------

A website consists mostly of text files, so for a fun, pleasant development experience you should choose your text editor wisely.

The sheer number of choices is a bit overwhelming, since a text editor is so basic to computer science (yes, web development is computer science). Ideally, you'd try as many editors as you can and get a feel for what suits your workflow. But we'll give you some pointers for getting started.

Here are the primary questions you should consider:

* Which OS (operating system) do I want to work with?
* What kind of technologies do I want to manipulate?
* What kind of basic features do I expect from my text editor?
* Do I want to add extra features to my text editor?
* Do I need support/help while using my text editor?
* Does my text editor's look-and-feel matter to me?

Notice we didn't mention price. Obviously, that matters too, but a product's cost has little connection with its quality or capability. There's a big chance you'll find a suitable text editor for free.

Here are some popular editors:

| Editor | License | Price | OS | Support | Doc. | Extensible |
| --- | --- | --- | --- | --- | --- | --- |
| Bluefish | GPL 3 | Free | Windows, Mac, Linux | Mailing list, wiki | Online Manual | Yes |
| Brackets | MIT/BSD | Free | Windows, Mac, Linux | IRC | GitHub Wiki | Yes |
| Nova | Closed source | $99 | Mac | Twitter,
 Forum,
 Online | eBook | Yes |
| CodeLobster | Closed source | Free | Windows, Mac, Linux | Forum, Email | Online Manual | Yes |
| Emacs | GPL 3 | Free | Windows, Mac, Linux | FAQ,
 Mailing list, News Group | Online Manual | Yes |
| Espresso | Closed source | $99 | Mac | Email | Online Manual | Yes |
| Gedit | GPL | Free | Windows, Mac, Linux | Discourse, IRC | Online Manual | Yes |
| Kate | LGPL, GPL | Free | Windows, Mac, Linux | Mailing list,
 IRC | Online Manual | Yes |
| Komodo Edit | MPL | Free | Windows, Mac, Linux | Forum | Online Manual | Yes |
| Notepad++ | GPL | Free | Windows | Forum | Online Manual | Yes |
| PSPad | Closed source | Free | Windows | FAQ,
 Forum | Online Help | Yes |
| Sublime Text | Closed source | $70 | Windows, Mac, Linux | Forum | Official,Unofficial | Yes |
| TextMate | Closed source | $50 | Mac | Twitter,
 IRC,
 Mailing list, Email | Online Manual,
 Wiki | Yes |
| BBEdit | Closed source | Free | Mac | FAQ | Online Manual | No |
| Vim | Specific open license | Free | Windows, Mac, Linux | Mailing list | Online Manual | Yes |
| Visual Studio Code | Open Source under MIT
 license/ Specific license for product
  | Free | Windows, Mac, Linux | FAQ | Documentation | Yes |

Active Learning
---------------

In this active learning section, we would like you to try using and/or installing a text editor of your choice. Your computer may already be installed with one of the editors suggested above (e.g. Gedit if you use GNOME desktop, Kate if you use KDE etc.), if not then you should try installing one or more text editors of your choosing.

Try digging through the settings of your editor and read the manual or documentation to see what its capabilities are. In particular (if possible in your editor), try to:

* Change syntax highlighting settings and colors
* Play with indentation width, setting it to an appropriate setting for your needs
* Check autosave and session saving settings
* Configure any available plugins and investigate how to get new ones
* Change color schemes
* Adjust view settings and see how you can change the layout of the views
* Check what programming languages/technologies your editor supports

While you're learning the default settings of most text editors should be fine to use, but it is important to become familiar with your chosen tools, so you can select the best one for your usage. You will learn more about customizing your editors and tools as you gain experience, and more importantly you will learn what features are more useful to your purposes.

Dig deeper
----------

### Choice criteria

So, in more detail, what should you be thinking about when you choose a text editor?

#### Which OS (operating system) do I want to work with?

Of course it's your choice. However, some editors are only available for certain OSs, so if you like switching back and forth, that would narrow down the possibilities. Any text editor *can* get the job done, if it runs on your system, but a cross-platform editor eases migration from OS to OS.

So first find out which OS you're using, and then check if a given editor supports your OS. Most editors specify on their website whether they support Windows or Mac, though some editors only support certain versions. If you're running Ubuntu, your best bet is to search within the Ubuntu Software Center. In general, of course, the Linux/UNIX world is a pretty diverse place where different distros work with different, incompatible packaging systems. That means, if you've set your heart on an obscure text editor, you may have to compile it from source yourself (not for the faint-hearted).

#### What kind of technologies do I want to manipulate?

Generally speaking, any text editor can open any text file. That works great for writing notes to yourself, but when you're doing web development and writing in HTML, CSS, and JavaScript, you can produce some pretty large, complex files. Make it easier on yourself by choosing a text editor that understands the technologies you're working with. Many text editors help you out with features like:

* **Syntax highlighting.** Make your file more legible by color-coding keywords based on the technology you're using.
* **Code completion.** Save you time by auto-completing recurring structures (for example, automatically close HTML tags, or suggesting valid values for a given CSS property).
* **Code snippets.** As you saw when starting a new HTML document, many technologies use the same document structure over and over. Save yourself the hassle of retyping all this by using a code snippet to pre-fill your document.

Most text editors now support syntax highlighting, but not necessarily the other two features. Make sure in particular that your text editor supports highlighting for HTML, CSS, and JavaScript.

#### What kind of basic features do I expect from my text editor?

It depends on your needs and plans. These functionalities are often helpful:

* Search-and-replace, in one or multiple documents, based on regular expressions or other patterns as needed
* Quickly jump to a given line
* View two parts of a large document separately
* View HTML as it will look in the browser
* Select text in multiple places at once
* View your project's files and directories
* Format your code automatically with code beautifier
* Check spelling
* Auto-indent code based on indentation settings

#### Do I want to add extra features to my text editor?

An extensible editor comes with fewer built-in features, but can be extended based on your needs.

If you aren't sure which features you want, or your favorite editor lacks those features out of the box, look for an extensible editor. The best editors provide many plugins, and ideally a way to look for and install new plugins automatically.

If you like *lots* of features and your editor is slowing down because of all your plugins, try using an IDE (integrated development environment). An IDE provides many tools in one interface and it's a bit daunting for beginners, but always an option if your text editor feels too limited. Here are some popular IDEs:

* Aptana Studio
* Eclipse
* Komodo IDE
* NetBeans IDE
* Visual Studio
* WebStorm

#### Do I need support/help while using my text editor?

It's always good to know if you can get help or not when using software. For text editors, check for two different kinds of support:

1. User-oriented content (FAQ, manual, online help)
2. Discussion with developers and other users (forum, email, IRC)

Use the written documentation when you're learning how to use the editor. Get in touch with other users if you're troubleshooting while installing or using the editor.

#### Does my text editor's look-and-feel matter to me?

Well, that's a matter of taste, but some people like customizing every bit of the UI (user interface), from colors to button positions. Editors vary widely in flexibility, so check beforehand. It's not hard to find a text editor that can change color scheme, but if you want hefty customizing you may be better off with an IDE.

### Install and set up

Installing a text editor is usually quite straightforward. The method varies based on your platform but it shouldn't be too hard:

* **Windows.** The developers will give you an `.exe` or `.msi` file. Sometimes the software comes in a compressed archive like `.zip`, `.7z`, or `.rar`, and in that case you'll need to install an additional program to extract the content from the archive. Windows supports `.zip` by default.
* **Mac.** On the editor's website you can download a `.dmg` file. Some text editors you can find directly in the Apple Store to make installation even simpler.
* **Linux.** In the most popular distros you can start with your graphical package manager (Ubuntu Software Center, mintInstall, GNOME Software, &c.). You can often find a `.deb` or `.rpm` file for prepackaged software, but most of the time you'll have to use your distro's repository server or, in worst case scenario, compile your editor from source. Take the time to carefully check the installation instructions on the text editor's website.

When you install a new text editor, your OS will probably continue to open text files with its default editor until you change the *file association.* These instructions will help you specify that your OS should open files in your preferred editor when you double-click them:

* Windows
* macOS
* Linux
    + Ubuntu Unity
    + GNOME
    + KDE
Next steps
----------

Now that you have a good text editor, you could take some time to finalize your basic working environment, or, if you want to play with it right away, write your very first web page.


How do I start to design my website? - Learn web development

How do I start to design my website?
====================================

This article covers the all-important first step of every project: define what you want to accomplish with it.

|  |  |
| --- | --- |
| Prerequisites: | None |
| Objective: | Learn to define goals to give direction to your web project. |

Summary
-------

When starting with a web project, many people focus on the technical side. Of course you must be familiar with the technique of your craft, but what really matters is *what you want to accomplish*. Yes, it seems obvious, but too many projects fail not from a lack of technical know-how, but from lack of goals and vision.

So when you get an idea and want to turn it into a website, there are a few questions you should answer before anything else:

* What exactly do I want to accomplish?
* How will a website help me reach my goals?
* What needs to be done, and in what order, to reach my goals?

All of this is called *project ideation* and is a necessary first step to reach your goal, whether you are a beginner or an experienced developer.

Active Learning
---------------

*There is no active learning available yet. Please, consider contributing.*

Deeper dive
-----------

A project never starts with the technical side. Musicians will never make any music unless they first have an idea of what they want to play—and the same is true for painters, writers, and web developers. Technique comes second.

Technique is obviously critical. Musicians must master their instrument. But good musicians can never produce good music without an idea. Therefore, before jumping into the technical side — for example, code and tools—you must first step back and decide in detail what you want to do.

An hour's discussion with friends is a good start, but inadequate. You must sit down and structure your ideas to get a clear view of what path you must take to make your ideas a reality. To do this, you need only pen and paper and some time to answer at least the following questions.

**Note:** There are countless ways to carry out project ideation. We cannot lay them all out here (a whole book wouldn't be enough). What we will present here is a simple method to handle what professionals call Project Ideation, Project Planning, and Project Management.

### What exactly do I want to accomplish?

This is the most important question to answer, since it drives everything else. List all the goals you want to reach. It can be anything: selling goods to make money, expressing political opinions, meeting new friends, gigging with musicians, collecting cat pictures, or whatever you want.

Suppose you are a musician. You could wish to:

* Let people hear your music.
* Sell goodies.
* Meet other musicians.
* Talk about your music.
* Teach music through videos.
* Publish photos of your cats.
* Find a new apartment.

Once you have such a list, you need to prioritize. Order the goals from most important to least important:

1. Find a new apartment.
2. Let people hear your music.
3. Talk about your music.
4. Meet other musicians.
5. Sell goodies.
6. Teach music through videos.
7. Publish photos of your cats.

Doing this simple exercise—writing goals and sorting them—will help you out when you have decisions to make. (Should I implement these features, use these services, create these designs?)

So now that you have a prioritized list of goals, let's move on to the next question.

### How could a website bring me to my goals?

So you have a list of goals and you feel you need a website to reach those goals. Are you sure?

Let's look back at our example. We have five goals connected to music, one goal related to personal life (finding a new apartment), and the completely unrelated cat photos. Is it reasonable to build a single website to cover all those goals? Is it even necessary? After all, scores of existing web services might bring you to your goals without building a new website.

Finding a new apartment is a prime case where it makes more sense to use existing resources rather than build a whole new site. Why? Because we'll spend more time building and maintaining the website rather than actually searching for a new apartment. Since our goal is what matters most, we should spend our energy on leveraging existing tools rather than starting from scratch. Again, there are so many web services already available for showcasing photos that it isn't worth the effort to build a new site just to spread the word about how cute our cats are.

The other five goals are all connected to music. There are, of course, many web services that could handle these goals, but it makes sense in this case to build a dedicated website of our own. Such a website is the best way to *aggregate* all the stuff we want to publish in a single place (good for goals 3, 5, and 6) and promote *interaction* between us and the public (good for goals 2 and 4). In short, since these goals all revolve around the same topic, having everything in one place will help us meet our goals and help our followers connect with us.

How can a website help me reach my goals? By answering that, you'll find the best way to reach your goals and save yourself from wasted effort.

### What needs to be done, and in what order, to reach my goals?

Now that you know what you want to accomplish, it's time to turn those goals into actionable steps. As a side note, your goals are not necessarily set in stone. They evolve over time even in the course of the project, especially if you run across unexpected obstacles or just change your mind.

Rather than go through a long explanation, let's go back to our example with this table:

| Goals | Things to do |
| --- | --- |
| Let people hear your music | 1. Record music
2. Prepare some audio files usable online (Could you do this with
 existing web services?)
3. Give people access to your music on some part of your website
 |
| Talk about your music | 1. Write a few articles to start the discussion
2. Define how articles should look
3. Publish those articles on the website (How to do this?)
 |
| Meet other musicians | 1. Provide ways for people to contact you (Email? Facebook? Phone?
 Mail?)
2. Define how people will find those contact channels from your website
 |
| Sell goodies | 1. Create the goodies
2. Store the goodies
3. Find a way to handle shipping
4. Find a way to handle payment
5. Make a mechanism on your site for people to place orders
 |
| Teach music through videos | 1. Record video lessons
2. Prepare video files viewable online (Again, could you do this with
 existing web services?)
3. Give people access to your videos on some part of your website
 |

Two things to notice. First, some of these items are not web-related (e.g., record music, write articles). Often those offline activities matter even more than the web side of the project. In sales, for instance, it's far more important and time-consuming to handle supply, payment, and shipment than to build a website where people can place orders.

Second, setting out actionable steps leads to new questions you'll need to answer. Usually there turn out to be more questions than we originally thought. (For example, should I learn how to do all this myself, ask someone to do it for me, or use third-party services?)

Conclusion
----------

As you can see, the simple idea "I want to make a website" generates a long to-do list, which only grows longer as you think about it. Soon it may look overwhelming, but don't panic. You don't need to answer all the questions and you don't need to do everything on your list. What matters is to have a vision of what you want and how to get there. Once you have that clear vision, you need to decide how and when to do it. Break down big tasks into small, actionable steps. And those small steps will add up to great achievements.

From this article, you should now be able to make a rough plan for creating a website. A next step might be to read how the Internet works.


What do common web layouts contain? - Learn web development

What do common web layouts contain?
===================================

When designing pages for your website, it's good to have an idea of the most common layouts.

|  |  |
| --- | --- |
| Prerequisites: |
 Make sure you've already thought about
 what you want to accomplish
 with your web project.
  |
| Objective: | Learn where to put things on your webpages, and how to put them there. |

Summary
-------

There's a reason we talk about web design. You start out with a blank page, and you can take it so many directions. And if you don't have much experience, starting out with a blank page might be a bit scary. We have over 25 years' experience and we'll give you some common rules of thumb to help you design your site.

Even now with the new focus on mobile Web, almost all mainstream webpages are built from these parts:

Header

Visible at the top of every page on the site. Contains information relevant to all pages (like site name or logo) and an easy-to-use navigation system.

Main content

The biggest region, containing content unique to the current page.

Stuff on the side

1) Information complementing the main content; 2) information shared among a subset of pages; 3) alternative navigation system. In fact, everything not absolutely required by the page's main content.

Footer

Visible at the bottom of every page on the site. Like the header, contains less prominent global information like legal notices or contact info.

These elements are quite common in all form factors, but they can be laid out different ways. Here are some examples (**1** represents header, **2** footer; **A** main content; **B1, B2** things on the side):

**1-column layout**. Especially important for mobile browsers so you don't clutter the small screen up.

![Example of a 1 column layout: Main on top and asides stacked beneath it.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/1-col-layout.png)

**2-column layout**. Often used to target tablets, since they have medium-size screens.

![Example of a basic 2 column layout: One aside on the left column, and main on the right column.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-right.png)
![Example of a basic 2 column layout: One aside on the right column, and main on the left column.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-left.png)

**3-column layouts**. Only suitable for desktops with big screens. (Even many desktop-users prefer viewing things in small windows rather than fullscreen.)

![Example of a basic 3 column layout: Aside on the left and right column, Main on the middle column.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout.png)
![Another example of a 3 column layout: Aside side by side on the left, Main on the right column.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout-alt.png)
![Another example of a 3 column layout: Aside side by side on the right, Main on the left column.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/3-col-layout-alt2.png)

The real fun begins when you start mixing them all together:

![Example of mixed layout: Main on top and asides beneath it side by side.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/1-col-layout-alt.png)
![Example of a mixed layout: Main on the left column and asides stack on top of each other on the right column](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-left-alt.png)
![Example of a mixed layout: one aside on the left column and main in the right column with an aside beneath main.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-mix.png)
![Example of a mixed layout: Main on the left of the first row and one aside on the right of that same row, a second aside covering the whole second row.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/2-col-layout-mix-alt.png)…

These are just examples and you're quite free to lay things out as you want. You may notice that, while the content can move around on the screen, we always keep the header (1) on top and the footer (2) at the bottom. Also, the main content (A) matters most, so give it most of the space.

These are rules of thumb you can draw on. There are complex designs and exceptions, of course. In other articles we'll discuss how to design responsive sites (sites that change depending on the screen size) and sites whose layouts vary between pages. For now, it's best to keep your layout consistent throughout your site.

Active learning
---------------

*There is no active learning available yet. Please, consider contributing.*

Deeper dive
-----------

Let's study some more concrete examples taken from well-known websites.

### One-column layout

**Invision application**. A typical one-column layout providing all the information linearly on one page.

![Example of a 1 column layout in the wild](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-product.jpg)
![1 column layout with header, main content, a stack of aside contents and a footer](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-product-overlay.jpg)

Quite straightforward. Just remember, many people will still browse your site from desktops, so make your content usable/readable there as well.

### Two-column layout

**Abduzeedo**, a simple blog layout. Blogs usually have two columns, a fat one for the main content and a thin one for stuff on the side (like widgets, secondary navigation levels, and ads).

![Example of a 2 column layout for a blog](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-blog.jpg)
![A 2 column layout with the main content on the left column](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-blog-overlay.jpg)

In this example, look at the image (B1) right underneath the header. It's related to the main content, but the main content makes sense without it, so you could think of the image either as main content or as side content. It doesn't really matter. What does matter is, if you put something right under the header, it should either be main content or *directly related* to the main content.

### It's a trap

**MICA**. This is a bit trickier. It looks like a three-column layout:

![Example of a false 3 columns layout](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-education.jpg)
![It looks like a 3 columns layout but actually, the aside content is floating around.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-education-overlay.jpg)

But it's not! B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about CSS.

Why would you think it's a three-column layout? Because the image on the top-right is L-shaped, because B1 looks like a column supporting the shifted main content, and because the "M" and "I" of the MICA logo create a vertical line of force.

This is a good example of a classic layout supporting some design creativity. Simple layouts are easier to implement, but allow yourself room to express your creativity in this area.

### A much trickier layout

**The Opera de Paris**.

![An example of a tricky layout.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-opera.jpg)
![This is a 2 column layout but the header is overlapping the main content.](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Common_web_layouts/screenshot-opera-overlay.jpg)

Basically a two-column layout, but you'll notice many tweaks here and there that visually break up the layout. Especially, the header overlaps the image of the main content. The way the curve of the header's menu ties in with the curve at the bottom of the image, the header and main content look like one thing even though they're technically completely different. The Opera example looks more complex than the MICA example, but it's actually easier to implement (all right, "easy" *is* a relative concept).

As you see, you can craft stunning websites even with just basic layouts. Have a look at your own favorite websites and ask yourself, where's the header, the footer, the main content, and the side content? That will inspire you for your own design and give you good hints for which designs work and which ones don't.


What HTML features promote accessibility? - Learn web development

What HTML features promote accessibility?
=========================================

The following content describes specific features of HTML that should be used to make a web page more accessible to people with different disabilities.

Link text
---------

If you have a link that isn't self-descriptive, or the link destination could benefit from being explained in more detail, you can add information to a link using the `aria-label` or `aria-labelledby` attributes.

```html
<p>
  I'm really bad at writing link text.
  <a
 href="inept.html"
 aria-label="Why I'm rubbish at writing link text: An explanation and an apology."
 >Click here</a
 >
  to find out more.
</p>
<p>
  I'm really <span id="incompetence">bad at writing link text</span>.
  <a href="inept.html" aria-labelledby="incompetence">Click here</a> to find out
  more.
</p>
```

Note that, most of the time, it is better to instead write useful link text:

```html
<p>
  I wrote a
  <a href="capable.html">blog post about how good I am at writing link text</a>.
</p>
```

Skip Links
----------

To aid tabbing, you can supply a skip link that allow users to jump over chunks of your web page. You might want to allow someone to jump over a plethora of navigation links that are found on every page. This enables keyboard users to quickly tab over repeated content and go directly to the page's main content:

```html
<header>
  <h1>The Heading</h1>
  <a href="#content">Skip to content</a>
</header>

<nav>
  <!-- navigation stuff -->
</nav>

<section id="content">
  <!--your content -->
</section>
```

Alt attribute for image
-----------------------

Every image should have an `alt` attribute. If the image is purely decoration and adds no meaning to the content or context of the document, the `alt` attribute should be present, but empty. You can optionally also add `role="presentation"`. All other images should include an `alt` attribute providing alternative text describing the image in a way that is helpful to users who can read the rest of the content but can't see the image. Think about how you would describe the image to someone who can't load your image: that's the information you should include as the value of the `alt` attribute.

```html
<!-- decorative image -->
<img alt="" src="blueswish.png" role="presentation" />
<img
 alt="The Open Web Docs logo: Carle the book worm smiling"
 src="carle.svg"
 role="img" />
```

The `alt` attribute for the same content may vary depending on the context. In the following example, an animated gif is used instead of a progress bar to show the page load progress for a document teaching developers how to use the HTML `<progress>` element:

```html
<img alt="20% complete" src="load-progress.gif" />
<img
 alt="The progress bar is a thick green square to the left of the thumb and a thin grey line to the right. The thumb is a circle with a diameter the height of the green area."
 src="screenshot-progressbar.png" />
```

ARIA role attribute
-------------------

By default, all semantic elements in HTML have a `role`; for example, `<input type="radio">` has the `radio` role. Non-semantic elements in HTML do not have a role. ARIA roles can be used to describe elements that don't natively exist in HTML, such as a `tablist` widget. Roles are also helpful for newer elements that exist but don't yet have full browser support. For example, when using SVG images, add `role="img"` to the opening tag, as there is an SVG VoiceOver bug whereby VoiceOver does not correctly announce SVG images.

```html
<img src="mdn.svg" alt="MDN logo" role="img" />
```


How can we design for all types of users? - Learn web development

How can we design for all types of users?
=========================================

This article provides basic tips to help you design websites for any kind of user.

|  |  |
| --- | --- |
| Prerequisites: |
 You should first read
 What is accessibility?, since we don't cover accessibility in detail here.
  |
| Objective: |
 Universal design means design for everybody, regardless of disabilities
 or technical constraints. This article lists the most important
 quick-wins for universal design.
  |

Summary
-------

When you're building a website, one top issue to consider is Universal Design: accommodating all users regardless of disability, technical constraints, culture, location, and so on.

Active Learning
---------------

*There is no active learning available yet. Please, consider contributing.*

Dig deeper
----------

### Color contrast

To keep your text readable, use a text color that contrasts well with the background color. Make it extra easy to read the text, to help visually-impaired people and people using their phones on the street.

The W3C defines a good color mix with an algorithm that calculates luminosity ratio between foreground and background. The calculation may seem pretty complicated, but we can rely on tools to do the job for us.

Let's download and install the Paciello Group's Color Contrast Analyser.

**Note:** Alternatively you can find a number of contrast checkers online, such as WebAIM's Color Contrast Checker. We suggest a local checker because it comes packaged with an on-screen color picker to find out a color value.

For instance, let's test the colors on this page and see how we fare in the color Contrast Analyser:

![Color contrast on this page: excellent!](/en-US/docs/Learn/Common_questions/Design_and_accessibility/Design_for_all_types_of_users/color-contrast.png)

The luminosity contrast ratio between text and background is 8.30:1, which exceeds the minimum standard (4.5:1) and should enable many visually-impaired people to read this page.

### Font size

You can specify font size on a website either through relative units or absolute units.

#### Absolute units

Absolute units are not proportionally calculated but refer to a size set in stone, so to speak, and are expressed most of the time in pixels (`px`). For instance, if in your CSS you declare this:

```css
body {
  font-size: 16px;
}
```

… you are telling the browser that whatever happens, the font size must be 16 pixels. Modern browsers get around this rule by pretending that you're asking for "16 pixels when the user sets a zoom factor of 100%".

#### Relative units

Also called *proportional units,* relative units are computed relative to a parent element. Relative units are friendlier to accessibility because they respect the settings on the user's system.

Relative units are expressed in `em`, `%` and `rem`:

Percent-based sizes: `%`

This unit tells your browser that an element's font size must be N% of the previous element whose font size was expressed. If no parent can be found, the default font size within the browser is considered as the base size for the calculation (usually the equivalent of 16 pixels).

Em-based sizes: `em`

This unit is calculated the same way as percents, except that you compute in portions of 1 and not portions of 100. It is said that "em" is the width of a capital "M" in the alphabet (roughly speaking, an "M" fits into a square).

Rem-based sizes: `rem`

This unit is proportional to the root element's font size and is expressed as portions of 1, like `em`.

Suppose we wanted a base font size of 16px and an h1 (main heading) at the equivalent of 32px, yet if within the h1 we find a `span` with the `subheading` class, it too must be rendered at the default font size (usually 16px).

Here is the HTML we're using:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Font size experiment</title>
  </head>
  <body>
    <h1>
      This is our main heading
      <span class="subheading">This is our subheading</span>
    </h1>
  </body>
</html>
```

A percent-based CSS will look like this:

```css
body {
  /\* 100% of the browser's base font size, so in most cases this will render as 16 pixels \*/
  font-size: 100%;
}
h1 {
  /\* twice the size of the body, thus 32 pixels \*/
  font-size: 200%;
}
span.subheading {
  /\* half the size of the h1, thus 16 pixels to come back to the original size \*/
  font-size: 50%;
}
```

The same problem expressed with ems:

```css
body {
  /\* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels \*/
  font-size: 1em;
}
h1 {
  /\* twice the size of the body, thus 32 pixels \*/
  font-size: 2em;
}
span.subheading {
  /\* half the size of the h1, thus 16 pixels to come back to the original size \*/
  font-size: 0.5em;
}
```

As you can see, the math quickly gets daunting when you have to keep track of the parent, the parent's parent, the parent's parent's parent, and so on. (Most designs are done in pixel-based software, so the math has to be done by the person coding the CSS).

Enter `rem`. This unit is relative to the root element's size and not to any other parent. The CSS can be rewritten thus:

```css
body {
  /\* 1em = 100% of the browser's base font size, so in most cases this will render as 16 pixels \*/
  font-size: 1em;
}
h1 {
  /\* twice the size of the body, thus 32 pixels \*/
  font-size: 2rem;
}
span.subheading {
  /\* original size \*/
  font-size: 1rem;
}
```

Easier, isn't it? This works as of every current browser, so please feel free to use this unit.

**Note:** You may notice Opera Mini does not support font sizing in rem. It will end up setting its own font size, so don't bother feeding it font units.

#### Why would I want to use proportional units?

Because you don't know when a browser is going to come around and refuse to zoom up text whose size is expressed in pixels. Also, check your website's statistics: you may receive visits from older browsers.

We would advise the following:

* Describe fonts in `rem` units, most browsers will be very happy with them;
* Let older browsers display fonts with their own internal engine. Browser's engines will ignore any property or value in the CSS if they can't cope with them, so that your website is still usable if not true to your designer's vision. Older browsers are on the way out anyway.

**Note:** Your mileage may vary. If you have to cater to older browsers, you'll have to use `em`s and do a bit more math.

### Line width

There is a longstanding debate about line length on the web, but here's the story. Back when we had newspapers, printers realized that the reader's eyes would have trouble going from one line to the next if the lines were too long. The solution? Columns.

Of course the problem doesn't go away when we switch to the Web. The reader's eyes act like a shuttle going from line to line. To make it easier on people's eyes, limit line width to around 60 or 70 characters.

To achieve this, you can specify a size for your text's container. Let's consider this HTML:

```html
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Font size experiment</title>
  </head>
  <body>
    <div class="container">
      <h1>
        This is our main heading
        <span class="subheading">This is our subheading</span>
      </h1>

      <p>[lengthy text that spans many lines]</p>
    </div>
  </body>
</html>
```

We have a `div` with class `container`. We can style the `div` either to set its width (using the `width` property) or its maximum width so that it never gets too large (using the `max-width` property). If you want an elastic/responsive website, and you don't know what the browser's default width is, you can use the `max-width` property to allow up to 70 characters per line and no more:

```css
div.container {
  max-width: 70em;
}
```

### Alternative content for images, audio, and video

Websites often include stuff besides plain text.

#### Images

Images can be either decorative or informative, but there's no guarantee that your users can see them. For example,

* Visually impaired users rely on a screen reader, which can only handle text.
* Your readers may be using a very strict intranet that blocks images originating from a CDN.
* Your readers may have disabled images to save bandwidth, especially on mobile devices (see below).

Decorative images

They're just for decoration and don't convey any real information. They could most often be replaced by a background image. Make sure they feature an empty `alt` attribute: `<img src="deco.gif" alt="">` so they don't clog up the text.

Informative images

They are used to convey information, hence their name. They can, for instance, feature a graph, or show a person's gesture, or any other information. At minimum, you must provide a relevant `alt` attribute.

If the image can be described succinctly, you can provide an `alt` attribute and nothing more. If the image cannot be described succinctly, you will have to either provide the same content in another form in the same page (e.g., complement a pie chart with a table providing the same data), or resort to a `longdesc` attribute. This attribute's value is a URL pointing towards a resource explicitly describing in detail the image's content.

**Note:** The use and even the existence of `longdesc` has been debated for quite some time. Please refer to the W3C's Image Description Extension (longdesc) for the full explanation and thorough examples.

#### Audio/video

You must also provide alternatives to multimedia content.

Subtitling/close-captioning

You should include captions in your video to cater to visitors who can't hear the audio. Some users have hearing challenges, lack functioning speakers, or work in a noisy environment (like on the train).

Transcript

Subtitles only work if somebody watches the video. Many users don't have time, or lack the proper plugin or codec. Additionally, search engines rely mainly on text to index your contents. For all these reasons, please provide a text transcript of the video/audio file.

### Image compression

Some users may choose to display images, but still have limited bandwidth available, especially in developing countries and on mobile devices. If you want a successful website, please compress your images. There are various tools to help you, either online or local:

* **Installed software.** ImageOptim (Mac), OptiPNG (all platforms), PNGcrush (DOS, Unix/Linux)
* **Online tools.** Dynamic drive's Online Image Optimizer (which can convert automatically from one format to another if it's more bandwidth-efficient)


What is accessibility? - Learn web development

What is accessibility?
======================

This article introduces the basic concepts behind web accessibility.

|  |  |
| --- | --- |
| Prerequisites: | None. |
| Objective: | Learn what accessibility is and why it matters. |

Summary
-------

Because of physical or technical limitations, maybe your visitors can't experience your website the way you hoped. In this article we give general accessibility principles and explain a few rules.

Active learning
---------------

*There is no active learning available yet. Please, consider contributing.*

Dig deeper
----------

### Accessibility: general principles

We might associate accessibility at first with negative limitations. This building has to be accessible, so it must follow these regulations for door width and toilet size and elevator placement.

That's a narrow way to think of accessibility. Think of it as a wonderful way to empower people and serve more customers. What can the people in Brazil do with your English website? Can the people with smartphones browse a heavy, cluttered website designed for a large desktop monitor and unlimited bandwidth? They'll go somewhere else. In general, *we must think about our product from the viewpoints of all our target customers, and adapt accordingly.* Hence accessibility.

### Web accessibility

In the specific context of the web, accessibility means that anyone can benefit from your content, regardless of disability, location, technical limitations, or other circumstances.

Let's consider video:

Hearing impairment

How does a hearing-impaired person benefit from a video? You have to provide subtitles — or even better, a full text transcript.

Also, make sure people can adjust the volume to accommodate their unique needs.

Visual impairment

Again, provide a text transcript that a user can consult without needing to play the video, and an audio-description (an off-screen voice that describes what is happening in the video).

Pausing capacity

Users may have trouble understanding someone in a video. Let them pause the video to read the subtitles or process the information.

Keyboard capacity

Let the user tab into/out of a video, play it, and pause it without being trapped in it.

#### The basics of Web accessibility

A few necessities for basic Web accessibility include:

* Whenever your site needs an image to convey meaning, include text as an alternative for visually-challenged users or those with slow connections.
* Make sure all users can operate graphical interfaces (like unfolding menus) solely with a keyboard (e.g., with Tab and the Return key).
* Provide an attribute explicitly specifying your content's language, so that screen readers read your text properly.
* Make sure that a user can navigate to all widgets on a page solely with the keyboard, without getting trapped. (At least let them Tab in and out.)

And that's just the beginning.

### Accessibility champions

Since 1999, the W3C has operated a working group called the Web Accessibility Initiative (WAI) promoting accessibility through guidelines, support material, and international resources.

More details
------------

Please refer to:

* Wikipedia article about accessibility
* WAI (W3C's Web Accessibility Initiative)
Next steps
----------

Accessibility can impact both a website's design and technical structure.

* From a design point of view, we suggest learning about designing for all types of users.
* If the technical side interests you more, you could learn how to embed images in webpages.


What are hyperlinks? - Learn web development

What are hyperlinks?
====================

In this article, we'll go over what hyperlinks are and why they matter.

|  |  |
| --- | --- |
| Prerequisites: |
 You should know
 how the Internet works
 and be familiar withthe difference between a webpage, a website, a web server, and a
search engine.
  |
| Objective: | Learn about links on the web and why they matter. |

Summary
-------

Hyperlinks, usually called links, are a foundational concept behind the Web. To explain what links are, we need to step back to the very basics of Web architecture.

Back in 1989, Tim Berners-Lee, the Web's inventor, spoke of the three pillars on which the Web stands:

1. URL, an address system that keeps track of Web documents
2. HTTP, a transfer protocol to find documents when given their URLs
3. HTML, a document format allowing for embedded *hyperlinks*

As you can see in the three pillars, everything on the Web revolves around documents and how to access them. The Web's original purpose was to provide an easy way to reach, read, and navigate through text documents. Since then, the Web has evolved to provide access to images, videos, and binary data, but these improvements have hardly changed the three pillars.

Before the Web, it was quite hard to access documents and move from one to another. Being human-readable, URLs already made things easier, but it's hard to type a long URL whenever you want to access a document. This is where hyperlinks revolutionized everything. Links can correlate any text string with a URL, such that the user can instantly reach the target document by activating the link.

Links stand out from the surrounding text by being underlined and in blue text. Tap or click a link to activate it, or if you use a keyboard, press Tab until the link is in focus and hit Enter or Spacebar.

![Example of a basic display and effect of a link in a web page](/en-US/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-1.png)

Links are the breakthrough that made the Web so useful and successful. In the rest of this article, we discuss the various types of links and their importance to modern Web design.

Deeper dive
-----------

As we said, a link is a text string tied to a URL, and we use links to allow easy jumping from one document to another. That said, there are some nuances worth considering:

### Types of links

Internal link

A link between two webpages, where both webpages belong to the same website, is called an internal link. Without internal links, there's no such thing as a website (unless, of course, it's a one-page website).

External link

A link from your webpage to someone else's webpage. Without external links, there is no Web, since the Web is a network of webpages. Use external links to provide information besides the content available through your webpage.

Incoming links

A link from someone else's webpage to your site. It's the opposite of an external link. Note that you don't have to link back when someone links to your site.

When you're building a website, focus on internal links, since those make your site usable. Find a good balance between having too many links and too few. We'll talk about designing website navigation in another article, but as a rule, whenever you add a new webpage, make sure at least one of your other pages links to that new page. On the other hand, if your site has more than about ten pages, it's counter-productive to link to every page from every other page.

When you're starting out, you don't have to worry about external and incoming links as much, but they are very important if you want search engines to find your site (see below for more details).

### Anchors

Most links tie two webpages together. **Anchors** tie two sections of one document together. When you follow a link pointing to an anchor, your browser jumps to another part of the current document instead of loading a new document. However, you make and use anchors the same way as other links.

![Example of a basic display and effect of an anchor in a web page](/en-US/docs/Learn/Common_questions/Web_mechanics/What_are_hyperlinks/link-2.png)

### Links and Search Engines

Links matter both to users and search engines. Every time search engines crawl a webpage, they index the website by following the links available on the webpage. Search engines not only follow links to discover the various pages of the website, but they also use the link's visible text to determine which search queries are appropriate for reaching the target webpage.

Links influence how readily a search engine will link to your site. The trouble is, it's hard to measure search engines' activities. Companies naturally want their sites to rank highly in search results. We know the following about how search engines determine a site's rank:

* A link's *visible text* influences which search queries will find a given URL.
* The more *incoming links* a webpage can boast of, the higher it ranks in search results.
* *External links* influence the search ranking both of source and target webpages, but it is unclear by how much.

SEO (search engine optimization) is the study of how to make websites rank highly in search results. Improving a website's use of links is one helpful SEO technique.

Next steps
----------

Now you'll want to set up some webpages with links.

* To get some more theoretical background, learn about URLs and their structure, since every link points to a URL.
* Want something a bit more practical? The Creating hyperlinks article of our Introduction to HTML module explains how to implement links in detail.


How does the Internet work? - Learn web development

How does the Internet work?
===========================

This article discusses what the Internet is and how it works.

|  |  |
| --- | --- |
| Prerequisites: |
 None, but we encourage you to read the
 Article on setting project goals
 first
  |
| Objective: |
 You will learn the basics of the technical infrastructure of the Web and
 the difference between Internet and the Web.
  |

Summary
-------

The **Internet** is the backbone of the Web, the technical infrastructure that makes the Web possible. At its most basic, the Internet is a large network of computers which communicate all together.

The history of the Internet is somewhat obscure. It began in the 1960s as a US-army-funded research project, then evolved into a public infrastructure in the 1980s with the support of many public universities and private companies. The various technologies that support the Internet have evolved over time, but the way it works hasn't changed that much: Internet is a way to connect computers all together and ensure that, whatever happens, they find a way to stay connected.

Active Learning
---------------

* How the internet Works in 5 minutes: A 5-minute video to understand the very basics of Internet by Aaron Titus.
* How does the Internet work? Detailed well visualized 9-minute video.
Deeper dive
-----------

### A simple network

When two computers need to communicate, you have to link them, either physically (usually with an Ethernet cable) or wirelessly (for example with Wi-Fi or Bluetooth systems). All modern computers can sustain any of those connections.

**Note:** For the rest of this article, we will only talk about physical cables, but wireless networks work the same.

![Two computers linked together](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-1.png)

Such a network is not limited to two computers. You can connect as many computers as you wish. But it gets complicated quickly. If you're trying to connect, say, ten computers, you need 45 cables, with nine plugs per computer!

![Ten computers all together](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-2.png)

To solve this problem, each computer on a network is connected to a special tiny computer called a *router*. This *router* has only one job: like a signaler at a railway station, it makes sure that a message sent from a given computer arrives at the right destination computer. To send a message to computer B, computer A must send the message to the router, which in turn forwards the message to computer B and makes sure the message is not delivered to computer C.

Once we add a router to the system, our network of 10 computers only requires 10 cables: a single plug for each computer and a router with 10 plugs.

![Ten computers with a router](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-3.png)

### A network of networks

So far so good. But what about connecting hundreds, thousands, billions of computers? Of course a single *router* can't scale that far, but, if you read carefully, we said that a *router* is a computer like any other, so what keeps us from connecting two *routers* together? Nothing, so let's do that.

![Two routers linked together](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-4.png)

By connecting computers to routers, then routers to routers, we are able to scale infinitely.

![Routers linked to routers](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-5.png)

Such a network comes very close to what we call the Internet, but we're missing something. We built that network for our own purposes. There are other networks out there: your friends, your neighbors, anyone can have their own network of computers. But it's not really possible to set cables up between your house and the rest of the world, so how can you handle this? Well, there are already cables linked to your house, for example, electric power and telephone. The telephone infrastructure already connects your house with anyone in the world so it is the perfect wire we need. To connect our network to the telephone infrastructure, we need a special piece of equipment called a *modem*. This *modem* turns the information from our network into information manageable by the telephone infrastructure and vice versa.

![A router linked to a modem](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-6.png)

So we are connected to the telephone infrastructure. The next step is to send the messages from our network to the network we want to reach. To do that, we will connect our network to an Internet Service Provider (ISP). An ISP is a company that manages some special *routers* that are all linked together and can also access other ISPs' routers. So the message from our network is carried through the network of ISP networks to the destination network. The Internet consists of this whole infrastructure of networks.

![Full Internet stack](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-7.png)

### Finding computers

If you want to send a message to a computer, you have to specify which one. Thus any computer linked to a network has a unique address that identifies it, called an "IP address" (where IP stands for *Internet Protocol*). It's an address made of a series of four numbers separated by dots, for example: `192.0.2.172`.

That's perfectly fine for computers, but we human beings have a hard time remembering that sort of address. To make things easier, we can alias an IP address with a human-readable name called a *domain name*. For example (at the time of writing; IP addresses can change) `google.com` is the domain name used on top of the IP address `142.250.190.78`. So using the domain name is the easiest way for us to reach a computer over the Internet.

![Show how a domain name can alias an IP address](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/dns-ip.png)

### Internet and the web

As you might notice, when we browse the Web with a Web browser, we usually use the domain name to reach a website. Does that mean the Internet and the Web are the same thing? It's not that simple. As we saw, the Internet is a technical infrastructure which allows billions of computers to be connected all together. Among those computers, some computers (called *Web servers*) can send messages intelligible to web browsers. The *Internet* is an infrastructure, whereas the *Web* is a service built on top of the infrastructure. It is worth noting there are several other services built on top of the Internet, such as email and IRC.

### Intranets and Extranets

 Intranets are *private* networks that are restricted to members of a particular organization.
 They are commonly used to provide a portal for members to securely access shared resources, collaborate and communicate.
 For example, an organization's intranet might host web pages for sharing department or team information, shared drives for managing key documents and files,
 portals for performing business administration tasks, and collaboration tools like wikis, discussion boards, and messaging systems.

 Extranets are very similar to Intranets, except they open all or part of a private network to allow sharing and collaboration with other organizations.
 They are typically used to safely and securely share information with clients and stakeholders who work closely with a business.
 Often their functions are similar to those provided by an intranet: information and file sharing, collaboration tools, discussion boards, etc.

 Both intranets and extranets run on the same kind of infrastructure as the Internet, and use the same protocols.
 They can therefore be accessed by authorized members from different physical locations.

![Graphical Representation of how Extranet and Intranet work](/en-US/docs/Learn/Common_questions/Web_mechanics/How_does_the_Internet_work/internet-schema-8.png)

Next steps
----------

* How the Web works
* Understanding the difference between a web page, a website, a web server and a search engine
* Understanding domain names