Learning to Code Part 4 of 5
This is a jargon-free, plain English series, written to inspire people who are considering learning to code.
It will also help non-coders, who work with coders, understand what the process is to get a feature built, into production, deployed and released on a web or mobile application.
Your own portfolio or website template with HTML, CSS & JavaScript
In this article, you have access to the Portfolio pen, a free template I have created, that you can use and customise. It is designed with HTML, CSS & vanilla JavaScript.
A word of advice, invest your time learning JavaScript. If this project interests you, do read the documentation and try more exercises from W3 Schools and Mozilla, both sites have excellent documentation and free tutorials. Google new terms, read and research as much as you can.
In case you need to go back before you start this section here are the links:
In Part 1 — So you want to learn to Code we explore what motivates you and how to go about learning to code.
In Part 2 What is a “real” coding language? we explore what code is and isn’t and what are the “real” coding languages.
In Part 3 Have fun learning to code HTML, CSS & JavaScript with three “pens” we learn by doing, creating and adapting three mini-projects in HTML, CSS and JavaScript on CodePen. You will need to have completed this to feel comfortable with this section, or have prior knowledge of HTML and CSS.
JavaScript was originally written and designed in 10 days by Brenden Eich in the 1990s. It has as many exceptions as it has rules. It failed to gain popularity until the early 2000s and now it is the fastest growing language by popularity and adoption.
The European Computer Manufacturers’ Association, ECMA, acts as a standards body for JavaScript and updates JavaScript design patterns. ECMA-6, or ES6, was the first major update to JavaScript. Each year since new updates have been added, part of a developers’ job is to keep abreast of these changes, a list of the revisions up to 2020 are on this link.
Like CSS, the basics of vanilla JavaScript or JS, is easy to learn but difficult to master. There are no short-cuts except to practice, practice, practice and learn, learn, learn.
Google new terms and research everything you read to layer and improve your knowledge. Wherever possible, I have added links to make this process easier for you.
Start your project with HTML & CSS first
Go back to the Portfolio pen. Copy and paste the HTML and CSS into your own workspace creating your pen first.
Personalise both the HTML & CSS to suit your needs. Don’t be afraid it is just text, change the text and see how it looks. Then change the styling.
Run the analyse HTML chevron to make sure there are no syntax mistakes. Note that two external libraries have been added to the boiler plate. I have commented the file with notes. If you want to write your own notes the syntax for comments is:
- HTML <! — Write HTML comments here — >
- CSS /* Write CSS comments here */
- JavaScript // Write JS comments here
In the CSS, I have marked the sections with CSS-Grid and CSS-FlexBox, these help in creating flexible layouts, using comments. CSS Tricks is another great resource if you find documentation trying.
Only when you are happy with how the page looks for you progress to the JavaScript section.
How JavaScript uses the DOM-tree to change behaviour of HTML and CSS tags and selectors
JavaScript can target each HTML tag and CSS selector. It can target these tags and selectors because browsers read HTML and CSS and converts these files into a Document Object Model (DOM).
The DOM, is like a tree is representing every branch of the HTML document and its CSS styling. This DOM-tree is stored in memory or the cache of the computer.
This illustration from FreeCodeCamp shows how the tree cascades from the head (and the meta-data in the boiler plate) to the body and all the elements within the body tags.
JavaScript accesses these elements and uses functions — or blocks of code, a set of rules or instructions — to change the behaviour of these elements.
Go to the Traffic Light Pen to this function written on Line 15.
The function called illuminateGreen(){} returns two instructions. To clear the lights and to go to the HTML DOM-tree, find the element with the id of “goLight”, access the style attribute, specifically to access the background colour and change it to green.
The function or set of instructions written here is called declaring the function. Or outlining the set of instructions that you expect the function to perform.
To make the function work, the function must be called or invoked to get executed — or do what it has declared it will do.
Go to Line 3, here we are selecting from the DOM-tree the HTML button element by its id. When the user clicks the button, the function is executed, or runs, or is invoked.
document.getElementById(“goButton”).onclick = illuminateGreen;
Now look at all the functions written or declared and see where they are invoked. Understand the DOM-tree and the elements that are being selected by JavaScript.
See if you can figure out what the clearLights(){} function’s set of instructions are. See where it is executed, called or run.
You will be right if you say the function is called within the other functions to illuminate the traffic light!
How JavaScript stores different types of data
JavaScript stores and changes data with the simple power of functions.
Primitive data or scalar values are:
- Strings (words and letters), which are recognised by the browser parsers when single or double quotes are used “this is a string of words”, ‘this is also a string of words’. Use either but stay consistent within your code base.
- Cardinal numbers (a special characteristic of JavaScript is numerals that are written out as strings are also recognised as numbers). Ordinal numbers (1st/ 2nd/ 3rd) are treated as strings as are Roman numerals (I, II, III).
- Booleans —( true/false statements)
Complex data types are:
Arrays which are recognised by parsers with the square brackets [] they are zero-indexed set of elements, separated by commas.
A zero-index means that the first element is 0 not 1.
We will be using arrays to store our images in our carousel slider. So look out for them. They can store strings, numbers and booleans. Images are stored as strings. Strange, but true.
- Objects which are recognised by parsers with the curly braces {}.
They are an unordered list of key-value pairs.
{name:’Joe’, age: 5, adult: False, favouriteFood: [‘peas’, ‘beans’, ‘eggs’], {parent: ‘Mr Blog’, phone: 123456}}
Each key is separated from its value by a colon. The value can be any data type — strings, booleans, numbers and even arrays. While an object can contain an array, an array can not contain an object. An object can even contain another object, making it a very flexible data type.
Each key-value pair is separated by commas. The last key-value pair — in this case another object — does not have a comma after it.
JavaScript in action with a simple image slide show
Now go back to the Portfolio pen and look at the JavaScript.
I have used a YouTube tutorial by Brad Traversy for this section.
If you want to follow and code along with Brad, I would encourage you to try it. The code has been written in ES6 updates — note how a function now is assigned to a variable to store the const changeImg = () => {}.
The keyword “function” has been dropped and the arrow is used to return the function’s arguments— which are to check the number of elements (in this case the images) in the array.
A conditional statement runs the code. A conditional statement is a JavaScript design pattern that runs code in this order:
if (some condition is met){do this
} else{
do this
}
Our code says, check the length of the array by counting the number of elements by their index number. If there are elements in the array (the element count stops at -1 , indicating the end of the number of elements in the array) do this — add the next element to the index of elements symbolised with the double plus mark ++(add 1 more image in this case). Else go back to 0, the index of the first image.
The index in an array is notated square brackets or [index] as in the code in the Portfolio pen. It is often notated with just an i, like so [i] as you will see in the the documentation from W3 schools or Mozilla.
The images change every 2000 milliseconds or two seconds, you can speed up the change or slow it down and see how you want the slide-show to function.
If you are happy with your portfolio site and want to host it on a URL (unique resource locator) Part 5 of Learning to Code concludes this series with instructions of how to deploy your project with Netifly -> next
<- Previous
Part 1 — So you want to learn to Code
Part 2 What is a “real” coding language?
Part 3 Have fun learning to code HTML, CSS & JavaScript with three “pens”
