_nology Coding Glossary

Click here for our printable version of the coding glossary

HTML

Stands for Hyper Text Markup Language. It is the language used to create all websites, putting elements onto the page.

ClassGives HTML elements a label or a nickname, as a reference to that element. An element can have one or more classes, separated by spaces. For example;

<div class=”small-blue blue-square”>This is a small blue square.</div>

<div> – A block level container (or ‘division’ of the web page) for content with no semantic meaning.

<div>This is a div element.</div>

Element – A component within the HTML document. Adding elements into our HTML document will give us the structure of our webpage and put components on the page for the user to see.

HeadingsHeading elements like <h1>, <h2>, <h3>, … allow you to use six levels of document headings, ranging from the most important, main title, to the least important sub-title, breaking up the document into logical sections. For example;

<h1> This is a main heading! </h1>

<h2> This is the next subtitle after my main title</h2>

<h6> This is the least important subtitle. </h6>

Id – An element can have an id attribute to identify it. For example;

<div id=”blue-square”></div>

id elements should always be unique to that single element, and each element should never have more than one id.

<P> – One of the most common tags in HTML – it denotes a paragraph of text.

Tags– Basic labels that define and separate our HTML into elements. They are comprised of a keyword surrounded by angle brackets <>. Content goes between two tags and the closing one is prefixed with a slash. For example a paragraph tag would look like this;

<p>This is the content of the paragraph tag that sits between the opening and closing tags.</p>


CSS

 Stands for Cascading Style Sheet. Adds styling and decoration to the HTML, which by itself is very plain.

Border-radius – rounds the corners of an element’s border.

Class selectors Will select all elements with a matching class.

For example;

.small-blue {

font-size: 24px;

}

All elements with a class of “small-blue” will now have a font-size of 24px.

Element selectorsYou are able to select HTML elements by simply using the name of the element.

For example;

body {
background-color: orange;
}

Flexbox – A CSS tool that allows you to easily format the layout of the HTML elements. Flexbox makes it simple to align items vertically and horizontally, making responsive design easier.

Font-familyThe font-family property sets the font of an element’s text.

Hex code – Is a format for identifying colours in CSS. Each hex code refers to a very specific shade of colour and is often a hashtag followed by a series of numbers, letters or both.

For example;

color: #ea9999;

Id selectors – Id selectors are used to select only a single item on a page. They will only select the first element with a matching ID.

For example;

#my-element {
color: blue;
font-size: 24px;
}

Justify-content – controls the alignment of items on the Main Axis when using Flexbox.

Margin – The margin is the space around the element. The larger the margin, the more space between our element and the elements around it. We can adjust the margin to move our HTML elements closer to or further from each other.

Padding – The padding is the spacing between the content and the border (edge of the element.). We can adjust the padding to move the border closer to or further from the content.

Pixels (px) – A unit of measurement in CSS.

Universal Selector (*) – Used to select all the elements on the page. For example;

* {
color: blue;
}

Now all the text in every element on the page will be blue.


 General

Browser – Allows a user to find and view information on the Internet.

Chrome – A browser developed by Google.

Code Editor – A computer program for writing and editing code.

Javascript – A programming language that allows us to make the webpage interactive and able to respond to the users clicks/typing/zooming in and out etc. With just HTML and CSS our webpage is static, just like a page in a magazine. The programming language is what allows the user to interact with it.

Landing Page – What is presented to the user as they “land on” the website.

Syntax – Feeding computers a series of specific letters and words in specific orders, so that they do what we want them to do.