Code is just a set of instructions written in a language that computers can understand. When we write code, we’re literally just writing a text document with a specific combination of characters and symbols (like punctuation).

This is a bonus lesson, for anyone who wants to understand a little better the terminology and eco-system around the skills we’ll be teaching you.

We’ll be learning coding languages which include HTML & CSS.

A website is made up of a collection of these text files (some written in HTML, some written in CSS and possibly some written in Javascript) and assets like images all stored within a folder.

During the course, you’ll be writing code in HTML, CSS and Javascript which the browser will interpret and ‘draw’ into a beautiful interactive website.

Key Takeaways

Front-end vs Back-end

• Front-end development deals with the part of the web you can see and interact with – the user interface of websites and apps. Frontend development always includes HTML & CSS and sometimes Javascript.
• Web-Development is a subset of Front-end development that just deals with how to built websites.
• Back-end development deals with the part of a website or app that you can’t see – that interacts with the database or server, powers apps etc. Many simple websites don’t need a backend at all, but complex sites like e-commerce stores, Netflix, Google, etc all have a backend powering their functionality.

Languages, Libraries & Frameworks

At the top level we have programming languages – things like HTML, CSS, Javascript, PHP, etc. Each language has it’s own syntax and semantics (it’s vocabulary and patterns of usage that allow it to make sense).

HTML controls the structure of web-pages. We use HTML to add headings, paragraphs, links, images, sections etc to our website.

CSS controls the style of the website, by applying colors, fonts, positioning, etc to the HTML elements.

Javascript adds interactivity to your website. If you have a slider, or pop-up or FAQs that drop-down these were likely controlled Javascript.

Below programming languages we have libraries and frameworks. These are sets of pre-written code that allow us to code in that particular programming language faster. jQuery for example is a library for javascript that takes many of the common tasks someone would want to accomplish with javascript (like showing and hiding content) and does the hard work for you – you can just write shorthand jQuery and it will utilise the pre-written code to speedup your workflow.

Imagine it kind of like building a desk – the programming languages are the raw materials, timber, steel, plastic etc. But the libraries and frameworks are pre-built components like table-legs and table-top that you can quickly assemble together.

You may have heard of Angular, React, jQuery, Vue.js … these are some of the most popular libraries for Javascript. jQuery is great for adding simple functionality to websites, while the others can be used to create interactive interfaces for complex web apps.

Likewise Bootstrap, Foundation & Materialize, are all libraries for HTML & CSS that have a set of pre-written code to allow you to quickly build common elements (like say a button or a contact form). For example, by using one of these libraries to create a button you could just use built-in classes like ‘button’ and it would pull in pre-written css styles to make that link look and feel like a button.

Many sites also then have a CMS or Content Management System, like Wordpress, Joomla, CloudCannon, etc. Content management systems are a piece of software that sits between an end user and the code files and allows non-technical users to make changes to the content of the website without knowing how to code.

When someone says they have a ‘wordpress website’ they mean that they have a site that’s built in HTML, CSS & javascript but integrated into the wordpress content management system using PHP (the programming language that wordpress uses). Because Wordpress has a specific way that it likes the code to be written you can’t always take a Wordpress website and move it away from Wordpress even though it also uses HTML & CSS.