Learning to Code Part 3 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.
Have fun learning to code HTML, CSS & JavaScript with three “pens”
In this article, you will need to sign-up to CodePen, an open source sand-box. You can create your own pens by copying the code and playing with it. Don’t worry if you break your code — it’s part of the process of learning. Just go back and copy my pen and start again!
The super-fast HTML crash course pen
I demo the basics of how HTML (hyper-text-mark-up language) code runs on this link or as CodePen terms it a pen.
As a brief guide to understanding this pen, HTML was designed in 1990 to share documents over the world wide web. The current version in use is HTML5 with several enhancements to the original text-mark-up language.
As it is a programming language, identifying HTML on a browser starts with meta-tags, or data invisible to the reader but read by a browser that is enclosed in <> </> known as opening and closing tags.
Every HTML page, or document, starts with a boiler plate.
To create your own HTML pen in CodePen, copy and paste the boiler plate from the pen link.
Look at the tags between the <body></body> tags to see how front-end-code works.
Experiment with the views on CodePen to toggle between the code and how it looks to a user. If you have not read Part 2 of Learning to Code, I briefly outline the difference between learning to code for front-end web and mobile applications is vs. learning to code for the back-end of an app.
This boiler plate that you copy into your workspace, or pen, is parsed — or read — by the web browsers. If the syntax is wrong and you miss an opening or closing tag, the program breaks and will not run. Each browser has its own JavaScript engine that parses HTML, CSS and JavaScript in a different way.
The reason why computer code is written according to strict rules (the syntax of the code) or protocols is to ensure that there is a uniform, consistent way of writing code that can be read or parsed by different browsers.
This is the right moment to talk about clean code. Clean code is important as a browser will parse id, iD, ID differently as computer languages are case-sensitive.
Typos will make the difference between code working or breaking. So ensure your code is clean and consistent when you are working in your pen.
There are thousands of HTML tags — the key ones are six h-tags for headings. Search engines will rank a h1 tag the highest in terms of importance and h6 the lowest. The semantic tags like <body></body> <header></header> <section></section><article></article> <aside><aside> <footer></footer> are self-explanatory.
Always check the documentation from W3 schools. I have used different HTML tags for forms and the W3 tutorial was one of the first that I did before I made the decision to go to bootcamp.
Work on the examples in CodePen and repeat the same examples many times to feel comfortable with HTML as a language and its syntax.
Don’t forget to have fun and play in the playpen :-)
Experiment with the chevrons — format HTML, analyse HTML, full page view, edit view. The analyse option helps you check mistakes in your code and correct them with helpful hints.
Try and make your own HTML pens that are different from the pen you have copied. Experiment with the inline styling tags and then move on to Pen 2 to get a better understanding of how to style with CSS.
The CSS Bouncing Balls pen
Here is a project you can truly make your own. Go to this pen copy the HTML and CSS (Cascading Style Sheets) to your own work space and change the shape, sizes and animations in the CSS section. Like HTML, CSS has evolved and the current version is CSS3.
In the HTML pen, you will see the tags used have attributes. Attributes within tags can be used for in-line styling.
<section style=”background-color:blanchedalmond;”>
However, this is not best practice. Ideally CSS should be held in a separate file.
CSS files have a file extension .css just like an HTML page has a file extension .html or a word doc has a file extension .doc to identify the file type.
In the boiler plate HTML note that the HTML file is linked to the CSS file in the pen <link rel=”stylesheet” href=”index.css”> The same background colour attribute now can be coded in CSS.
CSS is a language that sets rules for the style of an HTML element. Should the heading be bold, what font-size, should the text be aligned to the centre, what should the line-height be. All of these are defined by a set of rules.
A selector selects the property and gives it a value
body {
background-color: green;
}
The property selected is the body HTML attribute, and the background colour is green. The syntax is the selector, opening and closing curly-braces, the property is the background-color (note in American spelling) followed by a colon, the code stops when it encounters the semi-colon and closing braces.
Once again, clean-code and being mindful of the small syntax errors that you make can result in coding running or you having to go back and fix the typo in the syntax.
It happens all the time, to experienced coders as well so don’t feel bad about it! In the early stages of coding, it is so easy to blame yourself and feel bad. Stay calm — as they say — and keep coding :-).
In the pen, see how we use a linear gradient and a background image.
Use this site to change the background to your pen using the linear gradient effect. There are 300 to choose from and you can add to the six bouncing balls more divs with your own design of how the balls bounce and your own animation.
Experiment with the shape and size of the six class selector attributes in HTML. Change the class selector to an id selector and experiment with this too.
Read more documentation referring to Mozilla’s HTML, CSS and JavaScript sections. Use W3 Schools as well, get to understand what you are doing and why.
The Traffic Light Pen
To boost your confidence, this small exercise is to help you understand the power of JavaScript animation compared with CSS.
JavaScript allows you to interact with every single element of HTML. Like CSS you can access each HTML tag and make it do stuff.
This pen is the next step. So check you are comfortable with HTML and CSS first.
In the HTML section, note we have not imported the JavaScript file in the meta-tags in the boiler plate.
In the body-tag we now have more semantic tags. We are also using id attributes not class attributes in the HTML elements meta-data.
In the CSS we are using more selectors, properties and values. We are experimenting with more linear gradients.
Do the same with when you copy the files to your project. Have fun and get familiar with the new CSS and HTML introduced in the project.
Now go to the JavaScript file. See how we can select from the document, by selecting the id in the attribute tag, we change the CSS from black to red.
Note that this change is triggered by the onClick of the button — an action that is referred to as an “event” in JavaScript.
Note that the JavaScript files are imported just above the </body> closing tag and not in the meta-data in the HTML boiler plate.
Don’t worry too much about how this works, have fun and read the next section if you want to delve into some of the fundamental concepts of JavaScript.
To recap, in case you have missed the first two in the series 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 4 of Learning to Code, we will continue to use CodePen and you will get a free pre-written template of a portfolio or website template that you can adapt, change and reuse many times over! -> next
