Revision 729781 of How to build a website

<p>When learning web design, many people wish to build their own website as soon as possible. In order to ease your journey we tried to narrow down the required skills necessary to achieve this.</p>

<p>By following this guide,&nbsp; you'll be able to do so quickly. If you have any difficulty with a term, please use our <a href="/en-US/docs/Glossary">glossary</a>.</p>

<div class="note">
<p><strong>Note:</strong> How to use the tables below? We suggest you read each of the following articles left to right, top to bottom. So, start by reading the first article in the column Theoretical knowledge, then the first article in the second column, Technical knowledge, followed by the first article in the third column, Practical knowledge, etc.</p>
</div>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row" style="text-align: center;">&nbsp;</th>
   <th scope="col" style="text-align: center;">Theoretical<br />
    knowledge</th>
   <th scope="col" style="text-align: center;">Technical<br />
    knowledge</th>
   <th scope="col" style="text-align: center;">Practical<br />
    knowledge</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row" style="text-align: center;">1</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Thinking_before_coding">Begin your web project</a></strong><br />
    <em>In this article we are presenting the most important activity to perform before starting with a project: defining what you want to accomplish with it.</em></td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;">&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">2</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_the_Internet_works">How the Internet works</a></strong><br />
    <em>This article discusses what the Internet is and how it works.</em></td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;">&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">3</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/page_vs_site_vs_server_vs_search_engine">Understanding the difference between a web page, a web site, a web server and a search engine</a></strong><br />
    <em>In this article we clarify the difference between various concept related to the web: web pages, web sites, web servers and search engines.</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_is_a_web_server">What is a web server?</a></strong><br />
    <em>In this article we are discussing web servers, what they are, how they work and why you should be interested in them</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/What_software_do_I_need">Which software do I need (and what does it do)?</a></strong><br />
    <em>In this article we are discussing the different kind of software components which are required for editing, uploading and viewing a web site.</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">4</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_links_on_the_web">Understanding links on the web</a></strong><br />
    <em>In this article, we will discuss the details on what links are on the web as they are at the heart of the web and it's necessary to become familiar with that notion.</em></td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;">&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">5</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_URLs">Understanding URLs and their structure</a></strong><br />
    <em>This article discusses Uniform Resource Locators (URLs), explaining what they are and how they're structured.</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Understanding_domain_names">Understanding domain names</a></strong><br />
    <em>In this article we discuss domain names: what they are, how they are structured, and how to get one.</em></td>
   <td style="vertical-align: top;">&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">6</th>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Anatomy_of_a_web_page">Anatomy of a web page</a></strong><br />
    <em>When designing a web site, there is some common basic patterns it's good to know to help creating its own web pages.</em></td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/How_much_does_it_cost">How much does it cost to do something on the web?</a></strong><br />
    <em>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.</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">7</th>
   <td style="vertical-align: top;"><a href="/en-US/docs/Learn/The_basics_of_web_design">Beyond design, the basics of web design</a></td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Choose,_Install_and_set_up_a_text_editor">Choose, install and set up a text editor</a></strong><br />
    In this article we highlight some of the things to think about when installing a text editor for web development.</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">8</th>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Set_up_a_basic_working_environment">Set up a basic working environment</a></strong><br />
    <em>This article provide the necessary basis and set up instruction to start making your web site.</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">9</th>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/Write_a_simple_page_in_HTML">Write a simple page in HTML</a></strong><br />
    <em>In this article you will learn how to create a simple web page.</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Open_a_file_in_a_browser">Open a file in browser</a></strong><br />
    <em>This article will help you understand the various way to access a file in a web browser and why it is important to do it the proper way.</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">10</th>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/HTML/HTML_tags">What are HTML tags &amp; how to use them</a></strong><br />
    <em>This article cover the very basic of the <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/HTML" title="HTML: The HyperText Markup Language (HTML) is a descriptive language specifically designed to structure web pages.">HTML</a> language, introducing tags, what they are and how to use them.</em></td>
   <td style="vertical-align: top;"><strong><a href="/en-US/docs/Learn/Upload_files_to_a_web_server">Upload files to a web server</a></strong><br />
    <em>This article shows how to use FTP tools to publish your site online.</em></td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">11</th>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;">&nbsp;</td>
   <td style="vertical-align: top;"><a href="/en-US/docs/Learn/Checking_that_your_web_site_is_working_properly">Checking that your website is working properly</a></td>
  </tr>
 </tbody>
</table>

<p>These are the basics necessary to build your very first website, but if you want to have a professional, more in-depth fuctioning website continue reading below:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="row" style="text-align: center;">#</th>
   <th scope="col" style="text-align: center;">Theoretical<br />
    knowledge</th>
   <th scope="col" style="text-align: center;">Technical<br />
    knowledge</th>
   <th scope="col" style="text-align: center;">Practical<br />
    knowledge</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <th scope="row" style="text-align: center;">12</th>
   <td><a href="/en-US/docs/Learn/What_people_needs_to_see_my_web_site">What people needs to see my web site?</a></td>
   <td>&nbsp;</td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">13</th>
   <td>&nbsp;</td>
   <td><strong><a href="/en-US/docs/Learn/CSS/Using_CSS_in_a_web_page">Using CSS in a web page</a></strong><br />
    <em>This article explain how to set up a webpage in order to be able to make it pretty with <a class="glossaryLink" href="https://developer.mozilla.org/en-US/docs/Glossary/CSS" title="CSS: CSS (Cascading Style Sheets) is a declarative language used to control the presentation and appearance of web pages.">CSS</a>.</em></td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">14</th>
   <td><strong><a href="/en-US/docs/Learn/What_is_accessibility">What is accessibility?</a></strong><br />
    <em>This article introduces the basic concepts behing web accessibility.</em></td>
   <td><a href="/en-US/docs/Learn/CSS/CSS_properties">What are CSS properties and how to use them?</a></td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">15</th>
   <td><strong><a href="/en-US/docs/Learn/Design_for_all_types_of_users_101">Design for all types of users 101</a></strong><br />
    <em>This articles provides the basics tips and tricks to design web sites for any kind of users.</em></td>
   <td><a href="/en-US/docs/Learn/CSS/Basic_text_styling_in_CSS">Basic text styling in CSS</a></td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">16</th>
   <td>&nbsp;</td>
   <td><a href="/en-US/docs/Learn/Using_images">Using images</a></td>
   <td>&nbsp;</td>
  </tr>
  <tr>
   <th scope="row" style="text-align: center;">17</th>
   <td><a href="/en-US/docs/Learn/Common_pitfalls_to_avoid_in_web_design">Common pitfalls to avoid in web design</a></td>
   <td><a href="/en-US/docs/Learn/Basics_of_UX_Design">Basics of User eXperience (UX) Design</a></td>
   <td><a href="/en-US/docs/Learn/Design_of_navigation_menus">Design of navigation menus</a></td>
  </tr>
 </tbody>
</table>

<p>&nbsp;</p>