Introduction

Welcome to the Computing Documentation. The purpose of this project is to help you with your career and interests in computing.

Topics include:

  • HTML5
  • CSS3
  • JavaScript
  • Bootstrap
  • GitHub
  • README File
  • Python
  • Computing Terms
  • Groups
  • References

HTML5

HTML5 is the language for designing web pages. HTML stands for Hyper Text Markup Language.

HTML describes the structure of a web page.

How to write a simple HTML5 document

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My First Paragraph</p>

</body>
</html>

How to link to another web site without leaving the current web site

<a href="https://www.bcs.org" target="_blank" title="BCS">BCS</a>

How to link to a PDF File without leaving the current web site

<a href="pdf/karaoke.pdf" target="_blank" title="Karaoke">Karaoke List</a>

How to write a comment in HTML

<!-- This is a comment -->

Comments are not displayed by the browser, but they can help you to document your source code.

CSS3

CSS3 is a language that describes the style of an HTML document.

CSS3 describes how HTML elements should be displayed.

Example - making the paragraph blue in colour using the font of Arial.

p {
font-family: Arial, Verdana, sans-serif;
color: blue;
}

Writing the class of blue to use in any tag (e.g. p, li)

.blue {
color: blue;
}

Using the blue class in the p tag

<p class="blue">Computing is fun</p>

Writing a comment in CSS3

/* This is a comment */

You can also use Google Fonts to choose other fonts (e.g. Roboto).

To use Font Roboto, copy this code into the <head> of your HTML Document. It must be used before the <link> containing the custom CSS file (css/custom.css) or the <style> element.

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">

To use this code before the <link> element containing the custom CSS file (css/custom.css).

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">

To use this code before the <style> element.

<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
<style>
body {
font-family: "Roboto", Arial, Verdana, sans-serif;
height: 100%;
}
</style>

You can refer to other examples such as:

JavaScript

JavaScript is the programming language of HTML and the Web.

JavaScript is easy to learn.

Writing a single line comment in JavaScript

// This is a single line comment
document.getElementById("demo").innerHTML = "My Contents";

Writing a multi line comment in JavaScript

/*
This is a multi-line comment in JavaScript
Change the heading with id of myH and
paragraph with id of myP
*/
document.getElementById("myH").innerHTML = "My First Page";
document.getElementById("myP").innerHTML = "My First Paragraph";

You can refer to other examples such as:

Bootstrap

Bootstrap is the most popular HTML, CSS and JavaScript framework for developing responsive, mobile-first websites.

Bootstrap is completely free to download and use! Versions 3 and 4 are available.

In your browser, go to

https://www.getbootstrap.com

and follow the instructions.

You can also use FontAwesome

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css" />
<link rel="stylesheet" href="style.css" type="text/css" />

Once you have got FontAwesome you can use icons such as:

<p>Computing <i class="fa fa-desktop" aria-hidden="true"></i></p>

You can refer to other examples such as:

GitHub

GitHub stores a copy of our local repositories on a remote server.

You need to sign in or create an account.

Go to GitHub to sign in or create an account.

Once you have signed in or created an account, you can set up a Remote Repository.

That stores our code on a remote server so that it can be backed up, and so it can be accessed by others (team members, for example).

You use it by connecting your local repository to your remote repository and pushing code from the local repository to the remote repository.

GitHub Pages allows us to deploy our website within GitHub.

You use it by enabling pages and specifying the branch to deploy from the repository's settings.

Examples of Git Commands:

git init
git config --global user.name "Your Name"
git config --global user.email you@example.com
git remote add origin https://github.com/derektypist/technical-documentation-page
git pull origin master
git push --set-upstream origin master

Checking git status

git status

Performing Commits (First Time)

git add .
git commit -m "Initial Commit"

Future Commits

git status
git add .
git commit -m "Created index.html"

Pushing to Remote Repository

git push

You will be required to enter your username and password.

Examples of GitHub Pages

README File

README File is a markdown, which allows us to write shorthand code. You use it by using the appropriate markdown syntax.

Examples

# generates the h1 tag
## generates the h2 tag
### generates the h3 tag
#### generates the h4 tag
##### generates the h5 tag
###### generates the h6 tag

A README file is very useful for generating documentation.

If you submit your milestone projects, without the README file, then they will fail.

A detailed README file can help the reader get a feel for your project and your vision as a developer.

Python

Python is a programming language.

Python can be used on a server to create web applications.

Writing a single line comment

# This is a comment
x = 15

Writing, Printing and Accessing a list

# Define and Print List metals = ["Iron", "Magnesium", "Calcium"]
print(metals)
# Access Item 1
print("Item 1 is ", metals[1])

Other applications include Flask and Django

You can refer to examples and documentation such as:

Computing Terms

Information Architecture (IA) is the practice of structuring of information to suit particular purposes.

For Example, a Football League Website is structured into clubs, news, fixtures, tables, photos, videos and history.

Its organising principle is services.

Version Control enables us to create snapshots of code at various stages using Git.

Wireframe is the visual representation of a structure of a web page.

User Story is an informal, natural language description of one or more features of a software system. Taken from Wikipedia.

For Example, Train Operating Company Website

As a user, I want to check to see if there is any engineering work in my area on the date I intend to travel.

As a user, I want to check for any disruptions in my area.

As a user, I want to get information about my train station (e.g. accessibility).

Groups

References