Basics of Web Development

Preface

If you are reading this, you've either stumbled upon this article, or show an interest in Website Development. In this article, I will go over the absolute basics for website development, and will (hopefully) go more in-depth in a series of YouTube videos, sometime in the future.

Setting Up

The setup process can vary between workspaces, operating systems, and even languages.

In the case of the Dulles Robotics Website, which is written in PHP, I personally use WSL (Windows Subsystem for Linux) to run the preview. You can use php -S 0.0.0.0:80 to run a site preview in any directory, and it isn't limited just for PHP files. It can run on directories with HTML files only as well. You don't have to use WSL to run the php command, there are other ways such as running a python command python -m SimpleHTTPServer 8080 for the preview.

Now for editing the code itself.

I myself use 3 different text editors, and switch between them depending on what project I am working on. I work on this website mostly in Atom, a free and open-source text editor. There are other alternatves such as Visual Studio Code or a paid option: PhpStorm (although you can get it for free from GitHub Student Dev Pack).

Building the Site

For this demo site that we are building, we will create two files within the same directory (folder), name one index.html and the other custom.css. The main website code will be in the html file and styling in the css file.

This section will be divided into 2 parts.

HTML
CSS

Writing HTML

We start HTML files, regardless of whether we are writing in PHP or not, more or less the same way

HTML
<head>
    <title>Title Here</title>
    <meta name="description" content="Write the page description here" />
  
    <!-- This is linking the CSS file into the HTML file -->
    <link rel="stylesheet" type="text/css" href="/css/custom.css">
  
</head>
<body>
</body>

In the above code block, I wrote the head segment for a basic website with a css file

The head is where you can link CSS, JavaScript, and put all of your Meta tags. Meta tags allow you to specify things like the page description

Within the body tags go the general elements, such as text and images. For this we use tags such as <h1> or <p> to put text, as well as <img> for images.

HTML
<img src="w.png" width="50" height="50">
  
<p>a line of text</p>

Shown above are examples of writing text with a paragraph tag (<p>) and embedding an image with the img tag.

With basic tags, we can begin to write an HTML page, although without CSS.

Example Code:

HTML
<!DOCTYPE html>
<head>
    <title>Title Here</title>
    <meta name="description" content="Write the page description here" />
  
    <!-- This is linking the CSS file into the HTML file -->
    <link rel="stylesheet" type="text/css" href="/custom.css">
  
</head>
<body>
        <h1>Basic HTML Page</h1>
    <img src="w.png" width="50" height="50">
  
    <p>a line of text within paragraph tags</p>
  
</body>

Writing CSS

Once we write an HTML page, it is now time to link up CSS, which stands for Cascading Style Sheets. CSS allows you to specify styling information for different HTML elements, by using class, id or even element identifiers.

Since we already have linked a CSS file at the location /custom.css with / being the root relative directory. At this point we can begin defining styling for different HTML elements.

CSS
body{
    background-color:black;
    color:white;
}

Shown above are example defintions for anything within the <body> tags (basically almost everything visible). More explained below.

In the example above, I defined the body "element", with background-color setting the colour for the background, and color setting the colour for the text itself. Now that we have set our general styling, we can go further and define individual divs. CSS uses classes and Div id's to define divs. You can denote a class vs id with a period .classname and id's with #idname