4 Steps to Creating a Simple Website

  1. Open www.example.net
  2. View and copy source code for www.example.net
  3. Paste the source code for example.net into the text editor of your choice:
  4. Save your file to desired file name with an "htm" extension, e.g. desiredName.htm
  5. You now have an excellent template which you can easily edit the HTML, CSS, and DATA as desired to make it your very own static web page.

Learn the 4 core components of HTML for a simple webpage:

The Steps with Commentary

  1. Open www.example.net
  2. View and copy source code for www.example.net
    • Mac using Google Chrome Browser:
      1. On the Horizontal Menu: select "View"
      2. From the Drop Down Menu: select "Developer"
      3. From the Popout Menu: select "View Source"
      f
      • Note the keyboard shortcut: "⌥⌘U" which are the "alt,command,u" keys pressed down as a group.
        • Learning and using keyboard commands for commonly used items speeds up work flow especially for web developers and programmers whose main tool is the keyboard.
        • If you rarely or only occasionally engage in programming activities, then learning and knowing keyboard shortcuts is not that important. However, committing to learn and master keyboard shortcuts will reward you with increased productivity for any computer activity that requires a lot of time on the keyboard.
    • Windows and Chromebook users: Many keyboard shortcuts will be similar. NOTE!!! Google is your friend, e.g. searching for "windows common keyboard shortcuts" will reveal a plethora of information you can use:
  3. Paste the source code for example.net into the text editor of your choice:
    source code
    <!doctype html>
    
<html>
    
<head>
    
    <title>Example Domain</title>
    

    
    <meta charset="utf-8" />
    
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <style type="text/css">
    
    body {
    
        background-color: #f0f0f2;
    
        margin: 0;
    
        padding: 0;
    
        font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    
        
    
    }
    
    div {
    
        width: 600px;
    
        margin: 5em auto;
    
        padding: 50px;
    
        background-color: #fff;
    
        border-radius: 1em;
    
    }
    
    a:link, a:visited {
    
        color: #38488f;
    
        text-decoration: none;
    
    }
    
    @media (max-width: 700px) {
    
        body {
    
            background-color: #fff;
    
        }
    
        div {
    
            width: auto;
    
            margin: 0 auto;
    
            border-radius: 0;
    
            padding: 1em;
    
        }
    
    }
    
    </style>    
    
</head>
    

    
<body>
    
<div>
    
    <h1>Example Domain</h1>
    
    <p>This domain is established to be used for illustrative examples in documents. You may use this
    
    domain in examples without prior coordination or asking for permission.</p>
    
    <p><a href="http://www.iana.org/domains/example">More information...</a></p>
    
</div>
    
</body>
    
</html>
  4. You now have an excellent template which you can easily edit the HTML, CSS, and DATA as desired to make it your very own static web page.

For more information and great free tutorials on how to do this stuff w3schools.com is a great place to start!

Recommended Order to Look at Subjects:

just follow the order of w3schools horizontal menu:
  1. Start with HTML
  2. Then look at CSS
  3. Follow that with Javascript