No-Brainer HTML, JS, CSS and testing starter tutorial — Part 1

This tutorial series is aimed as notes for participants of workshop which will be held in OKE Software Poland. It assumes that participants have very basic understanding of HTML, CSS and JS technology. It doesn’t provide complex overview of current frontend state of the art, but rather should be treated as encouragement to further pursue the knowledge needed to become frontend dev or automated tester.

Plan — HTML, CSS, JS introduction

This is blazing fast overview of the technologies used to building websites. Like really rapid one.


So imagine a world without internet. Like 40 years ago. No Facebook. No Google. Your all photos on Instagram? Non-existent. Oh you’d like to check what was the score in the latest game on NBA? You’d better tune in to the radio, buy a newspaper or wait for the sport news in your TV. Or maybe you’d like to transfer you’re money to pay for a book bought on Amazon? Not going to happen. It seems like ages ago, but it isn’t.


The wholemighty, omnipresent HTML was started by Tim Berners-Lee, when he was working on a method for physics scientists to exchange the documents about their researches more swiftly. He also wrote the first specifications regarding the HTML tags to describe the content and format of the documents.

How does the HTML look like?

It’s just a series of tag enclosing in one another, if you don’t believe me just open your favourite browser and use developer tools! They’re not so scary as it seems. You can open them (in Chrome) pressing the right button of your mouse and choosing “Inspect”. See nothing but a bunch of tags, with a little bit of whatdabuckgoddangitthehellisit. Let’s break it down. This is html tag:


this is also a tag


Every tag that we open should’ve matching closing tag (exceptions are self-closing tags like img).

This is closing tag:

</p> or </div>

Most tags can have text inside them:

<p>I am a paragraph</p> or <div>I am a document division</div>

Tags can have attributes that provide additional information/configuration about them. You can add pretty much anything as an attribute, but some have special powers! Attributes are built by combinig key and value. If you don’t pass a value, attribute will be interpreted as having true value. Let’s take a look at some examples.

<header start="ready">We're ready to launch!</header>

Here we define header element with attribute start with value ready. It’s not going to be interpreted as a meaningful attribute by the browser, because it’s just an attribute that I made up, but if we write a tag with class attribute:

<section class="ticket-list">Tickets</section>

It will be important and meaningful attribute, because it can be use to describte the looks of our section. This is a tag representing disabled button:

<button disabled class="confirmation_btn">But a ticket!</button>

How does basical structure of html document looks like? Well, as we saw html document consist of head and body:

So it goes like this:


This is the most basic html document you can create.

Head provides the information about the document itself. The metadata about the styles, title, language, loading the fonts etc. It’s useful of course but we’ll spend most of our time working on the body.

Body is where your document structure actually is and from where the content will be rendered to display.

As you should notice already most of the tags have ability to be nested inside another tags, which creates tree like structure:

HTML as a tree

Ok so we can see that the html NODE can be a parent for another node, like body is for section or header. It can be a child of like contactform for footer or a sibling of like list items . Remember this one, as it will come in handy later.

Remeber that HTML first aim was to share documents, that’s why you find many tags relatable to what you can see in an article in your newspaper i.e.

article, section, header, footer, paragraph

This analogy goes further. Traditionally the site starts rendering first page called index.html. Why? Well, it supposed to be kinda like table of contents, where if you navigate to given directory you’d get the list of files/documents in it.

Full list of possible html tags can be found out here:

Ok but how does the browser actually know what to render if you shove some tags into it? Browser is using something called DOM (Document Object Model), to parse, display and eventually manipulate the document. If you want to see how does DOM looks like, you need to use the Developer Tools.

DOM in Safari’s developer tools

Often the DOM will look just like the html code that you’ve wrote, but not always. It will all become clear once we introduce JS.


We pretty much covered the basics of the structure/content of our web page, but what about the looks? Well, this is where Cascading Style Sheets (CSS) come in. They determine how your page looks and why it looks so cool. How important are they? I’d say very imporant. This is instagram without css:

Not so eye-catching isn’t it?

So how does css file looks like? Well it just bunch of objects with describing location of a node (selectors) that we’d like to style as well as how to do it. Let’s say that we’d like to style our header element. We could do this like this:

Ok but how you add css file to the html? Well, we know that there is head tag in html, we can use it to plug css into html:

Please be aware that files with CSS code must have .css extension to be parsed by browser.

Ok so we can see that we could use the name of our tag to select DOM element and style it. We give it the width: 100% to span it across the screen, we specify it’s height and color. Of course you can nest the elements inside a style (because they’re cascading, duuuuh):

Now if we nest input inside our header it will get font size of 12px and text color of chucknorris.

The names of the tags aren’t the only possible selectors. Whole list can be found here:

We’ll try to keep ourselves considered with the most popular ones which are

  • classes — for example .my-cool-header or ticket-item they can be applied to multiple elements on the page
  • ids — used for unique page elements. There can be only one definite id on given page, i.e. #photo or #info-box
  • tag names — like section, h1 or stuff like that.

This can be used in connectivity for more specific selectors and nested as we please to achieve for example something like this:

Mind the differences between having a space separating selectors in one line or not. Without the space the style is applied to node which has all the requirements, otherwise it’s applied to the most nested element that fits the last selector:

<header id="my-cool-header></header>


header #my-cool-header
<div id="my-cool-header">


Ok so here comes the great part! We rushed through the structure of our site, the looks of it, but here it gets really good! We can use programming language called JavaScript (of course it has basically nothing to do with Java:

Java and Javascript are similar like Car and Carpet are similar.

) to introduce dynamic behaviour to our static site.

JavaScript is powerful language, who was for a long time treated as little, retarted, unuseful brother of other languages, but it exploded recently. Now it runs not only in your browser, but also in your mobile device, server, microcontroler and even PS4.

It’s really hard to introduce all the fantastic concepts of JavaScript at once, so here we’ll look on two most basic ones that we’ll then develop further down the road.

First one are variables. Variables are containers for data. They can be declared, initialized, modified and used to create another variables:

var artistName; //declared variable
artistName = 'Bush'; //initialized variable
var ticketAmount = 2; //declared and initialized in the same line
ticketAmount = 15; //modified variable with reassigned value
var informationLabel = 'You have bought ' + ticketAmount + ' tickets' //variable used to create another variable

The second concept are functions. Function are blocks of code used to perform given operation (same as in your good, old high school math). They’re declared with keyword function , then comes the name and the list of arguments function can take. Let’s take a look at function that will take something as an input and multiply it by 2 (y =x * 2 ):

function multiplyByTwo (x) {
return x * 2

Ok so here we have our function. Its name is multiplyByTwo it takes x as argument (functions can take as many arguments as needed) and it returns a value of argument multiplied by 2. Be aware that not every function must return something, some just do stuff.

How do we call our function? We’ll we simply write its name and pass some arguments for example:

multiplyByTwo(4) // it is 8 BTW

There are many wonderful things you might do with functions! For example you can assign function to a variable!

var y = function multiplyByTwo (x) {
return x * 2
y(16) //32
y(54) //108

Or even better you can pass functions as arguments to other functions!

Ok but how to add JavaScript to your HTML file?

Well, you can use script tag to write some JS inside HTML file:

But please don’t. Like never. Trust me on this one. It can get really messy really fast.

It’s way better to move your javascript to seperate file and load it:

JavaScript loaded from ‘myscript.js’ file

Please be aware that files with JavaScript code must have .js extension to be parsed by browser.

I really encourage you to explore JS in depth as it is the language that literally creates the web as we know it. For example you could try it with this free course:

That’s the fastest introduction to the web technologies that there is. In the next part we’ll actually start working on our app! Cheers!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.