Section
Open allClose all
Instructions: Clicking on the section name will show / hide the section.
Setting up
Please read and follow the directions on our getting started wiki page.
Click the box to the right if you have bookmarked the sites on the getting started page
Click the box to the right if you have registered for github
Click the box to the right if you have used a username on github that CANNOT IDENTIFY you
Click the box to the right if you have installed visual studio code on your school computer
Click the box to the right if you have moved visual studio code to your applications folder
Click the box to the right if you have created a programming folder (you can put the folder on your desktop or in your documents folder)
Click the box to the right if you understand you should never move or rename your programming folder
Click the box to the right if you have installed the visual code extension bracket pair colorizer by CoenraadS
Click the box to the right if you have installed the visual studio extension sftp by liximomo
Click the box to the right if you have configured the sftp extension and you can upload files to your internet site
Local & remote hosts
Introduction
Any device that has established a connection to a network qualifies as a host[2]
- localhost and local host mean exactly the same thing.
- In computer networking, a localhost is a hostname that means this computer. [3].
- A remote host is a computer which is accessed over a network. Remote hosts can be far away or very close. But they share a common characteristic of being accessed over a network.
- A very common way to write a computer program is to write code on a local host, and then upload it to a remote host. Many development tools make uploading code to a remote host easy.
- localhost and local host mean exactly the same thing.
External Resources
Assess your understanding
Input - process - output
Introduction
This is the most basic idea in designing a program: There is input and the input is processed and then there is some sort of output. The output depends on what happens during processing.
This diagram is used from Johnstone, D., Bonner, M., & Tate, M. (2004) "Bringing human information behaviour into information systems research: an application of systems modelling" Information Research, 9(4) paper 191, Available at http://InformationR.net/ir/9-4/paper191.htmlExternal Resources
Assess your understanding
HTML
Introduction
- HTML (Hypertext Markup Language) is not a programming language. It is a markup language that tells web browsers how to structure the web pages you visit. It can be as complicated or as simple as the web developer wants it to be. HTML consists of a series of elements, which you use to enclose, wrap, or mark up different parts of content to make it appear or act in a certain way. The enclosing tags can make content into a hyperlink to connect to another page, italicize words, and so on.
For example, consider the following line of text:
My cat is very grumpy
If we wanted the text to stand by itself, we could specify that it is a paragraph by enclosing it in a paragraph (
<p>
) element:<p>My cat is very grumpy</p>
Note: Tags in HTML are case-insensitive. This means they can be written in uppercase or lowercase. For example, a
<title>
tag could be written as<title>
,<TITLE>
,<Title>
,<TiTlE>
, etc., and it will work. However, it is best practice to write all tags in lowercase for consistency, readability, and other reasons. External Resources
This is a link to HTML elements: https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
You should understand the following elements:
html - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/html
head - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/head
title - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title
link - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link
body - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/body
h1 through h6 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
p - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p
div - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div
ol - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol
li - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/liul - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul
a - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
br - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br
small - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small
span - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/span
img -https://developer.mozilla.org/en-US/docs/Web/HTML/Element/imgThis resource is excellent to help you learn about HTML, forms, and CSS. You should use this resource as official-and-best information about HTML and forms. https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Getting_started
Please READ this article and mark it completed (there's a checkbox to the right) when you are done reading.
Assess your understanding
Understanding forms
Your learning outcomes for this topic are:
- You will understand the structure of an HTML form
- You will understand the required attributes of an HTML form
- You will understand what happens after a form has been submitted
- You will understand how forms pass data from one HTML page to another page.
The video below is part 1 to help you understand the basics of forms. Forms are how we gather user input.
The video below is part 2 to help you understand the basics of forms. Forms are how we gather user input.
Do I understand this?
Input types and forms
Introduction
The HTML
<input>
element is used to create interactive controls for web-based forms in order to accept data from the user; a wide variety of types of input data and control widgets are available, depending on the device and user agent. The<input>
element is one of the most powerful and complex in all of HTML due to the sheer number of combinations of input types and attributes (source).External Resources
This resource is excellent to help you learn about HTML, forms, and CSS. You should use this resource as official-and-best information about HTML and forms. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
Assess your understanding
Frameworks & Bootstrap
Introduction
Bootstrap is a free collection of tools for creating a websites and web applications.
It contains HTML and CSS-based design templates for typography, forms, buttons, navigation and other interface components, as well as optional JavaScript extensions.
Some reasons programmers prefer Bootstrap Framework
- Easy to get started
- Great grid system
- Base styling for most HTML elements(Typography,Code,Tables,Forms,Buttons,Images,Icons)
- Extensive list of components
- Bundled Javascript plugins
- Pre Styled Components
Some of the components pre-styled are:
- Dropdowns
- Button Groups
- Navigation Bar
- Breadcrumbs
- Labels & Badges
- Alerts
- Progress Bar
Resources
Assess your understanding