Tag Archives: css

JavaScript errors, our friends

Hello and welcome back,

today’s lesson is quite important because it is quite impossible to know if something is not correct unless someone tells us about it.

Over the last few articles we figured out that our browser is the only one who runs our code. So, he is the only one who can tell us if we have errors or not.

In order to figure out how to reach the JavaScript console in your own browser you can google:
“how to open JavaScript console xxxxx” where “xxxxx” is your browser’s name.

In order to make sure you are in the right place. As soon as you are done following the instructions write alert(“the console is working”); . If a message box pops up to you, you made it!

If not, please leave a comment bellow and I will do my best to help you out.

Tomorrow we will recap the current structure of our project and we will learn how to use jQuery.

Take care,
Gabi

Ermm…. jQuery … why, what?

Hello and welcome back,

Painting… colours… so beautiful. Art however has multiple forms. Let’s look at metalworking or carpenters. They also build beautiful things but they also build tools that help them. Let’s say that we want to build a chair and we have only a saw blade. How… we can try to cut directly but we better get ourselves a cutting table first. Nice, now we can cut way better. We should also make some kind of tool first that allows us to cut straight lines without cutting our fingers… yea, that would speed things up.

See, in order to reach our goal easier, to deliver something that looks better and is safer we have build ourselves a “framework” composed by different tools that we mix together for the end result.

That is jQuery. It is a framework for JavaScript. It does everything that JS does but much more, much easier and with less code.

What’s better, just like with the wooden pieces, we can always use either JS or jQuery in any moment as we see fit.

Like when we were building our wood cutting framework, we need to do a bit of setup and building first.

How can we make jQuery work for us?

  1. Search on the internet for “jQuery CDN” or go to http://code.jquery.com  – CDN = content delivery network. It means that some computers around the world have the file and you will get it the fastest from the closest computer to you.
  2. Select the newest version – minified if possible.
    Minified = the smallest possible from which you cannot understand anything but works perfectly.
    Uncompressed = the version that also has the code visible. It also works perfectly.
  3. Click on it
  4. In the HTML file write
    <script type=”text/javascript” language=”javascript” src=”https://code.jquery.com/jquery-2.1.4.min.js”></script>  where the last part “http://code.jquery.com/jquery-2.1.4.min.js” is the URL you got on point number 3
  5. Save the HTML file and refresh

Now, this is how we add jQuery into our HTML. Note that we already this this with our JS and CSS files previously. As stated above, jQuery is not something super super complicated. It is just some JS code written by a team which allows us to write less and do things faster.

How to play with an element?

Let’s use the same JS code as above document.querySelector(“#first_leaf”) and we will change it’s colour just to see that the code works. Let’s add .style.backgroundColor=”red” to our JS selector. Finally, the code will look like this

document.querySelector(“#first_leaf”).style.backgroundColor=”red”;

We can observe here that JavaScript uses the “.” to navigate between the available functions of each function. Note that in the last sentence the word function has been used twice. It is not a mistake. JavaScript is a language based mostly on functions. At the end of the functions there are properties and those properties accept values. Exactly in the same way as the CSS accepts values for its properties. Do you remember how we have said that HTML is mostly based on tags. Same concept, just a different language.

Since we know that jQuery will help us write less but achieve the same result we can write the above code as:

window.jQuery = window.$ = jQuery;
$(“#first_leaf”).css(“backgroundColor”,”red”);

The first line of text is the preparation required that we spoke about previously. From now on, jQuery will be represented by the “$” sign.

The second row is us sending our CSS selector to jQuery and when the results comes back asking jQuery again to change the background colour of our element to red.

Tomorrow we will learn how to see if jQuery works and where we can see the errors because it would be really difficult to create anything without knowing if it works or not. It like painting as a blind man.

Take care,
Gabi

How to point JavaScript to elements

Hello and welcome back,

This we also know, through CSS selectors. They are the ones we have learned about in “Adding colour” . What we need to do is write document.querySelector(“#first_leaf”) . This points to the first leaf. Sadly, this bit of JS code will not do much except allowing us to access the first_lead element.

If we want to select all the elements that fall under a certain selector there is document.querySelectorAll(“”).

Tomorrow we will learn about functions because we will need them in order to play with our elements.

Gabi

How does JavaScript function

Hello and welcome back,

Let’s go back to our paintings. We, together, must make a work of art because that’s how the browser and the developer are working together. The browser is very good at drawing and the developer is the one providing the instructions. See, teamwork! You are the browser, I am the developer.

So, we should paint on wood. But I am not that good, I am learning. You, the artist are good but you cannot pick your own colours.

  1. I accept all the colours that I find because I don’t know anything about them.
  2. I must read all the paint labels and pick the one that is fit for wood.
  3. Mix the paint with oil as stated on the label.
  4. Now that I have sorted the colours for wood I must look at the labels and pick the desired colour.

That’s about how the browser and JavaScript works.

  1. First the browser accepts the file because it trust us.
  2. Reads the file. This step also ensures that our file is correct and can be run (note#1)
  3. Executes all the code that does not belong to a specific function (note#2)
  4. Creates a list of actions that must be executed in order for every element that it is targeted.

Tomorrow we will learn about pointing JavaScript to our HTML elements.

Gabi

Animations

Heya!

Colouring elements is quite cool, but animating them… whooaaa, a whole new level. We can do things like the cool kids.

Before we dig in a bit deeper we should have in mind that there are 2 types of animations. One is made by CSS 3 and one by JavaScript.  Now don’t get scared or intimidated by the “3”. There is nothing different from CSS 1 and CSS 2 (which did not really exist). The 3 means that some new attributes have been added and the browsers know what to do with them.
Do you remember how in the first lesson we were saying that the browser is stupid. Well, payback time, the browser is not THAT stupid. The browser knows how to read the CSS, link it to HTML and draw everything on the screen but since different companies create

Basic difference between the two comes in terms of what the browser knows what do with that bit of code.

JavaScript animations:

  1. Are drawn much better in the same way on all the browsers
  2. Can have more advanced way of controlling the animation
  3. Slightly slower then CSS

CSS 3 animations:

  1. Can look slightly different on a browser or another
  2. Simple to use, very good for buttons or things that don’t move away
  3. Faster then JavaScript

Now that we know about the differences next time we will learn a bit about JavaScript animations.

Take care,
Gabi

Adding colour

Hello and welcome back,

In our previous article we have discussed about how to create our HTML and CSS documents and how to make sure they are working.

In this post we found out about classes and ids. Let’s put them to work!

In the HTML our example we have this line saying “<div class=”green leaf” id=”first_leaf”>first leaf</div>”.

We know that a tag can have as many classes as we want it to have and that those classes are put into different stacks. In order to add classes to a tag we need to write the word “class” after the tag’s name. Right after we add the “=” and between double commas we can add all the class names we want. There are no standard names and it does not matter how they are being called. We name them as we want. They are all split by space. So, in our example, our div tag has 2 classes “green” and “leaf”.

We also know that an element can have only 1 id and it needs to be unique. Like the class, we have to write “id=” and then between double commas the name of the id. Same as with the classes, it does not matter the name.

This is also a good time to learn that the word “class” and “id” are named “attributes”. There are way more but those are the ones we know.

Let’s open our HTML editor and our CSS file.

Here, in order to point to a class we use the “.” sign and in order to refer to an id we use “#”.

Let’s make all our green elements truly green.

  1. Put the following text into the css file
    .green { background-color: green; }
  2. Save the file
  3. Open the HTML file in your browser or refresh the page you already had opened
  4. Be amazed!

All our div elements that had the class “green” actually became green.

The “background-color” it is called a property. and the “green” after the “:” sign is called the value of the property.

Let’s do something with the id as well.

  1. Put the following text in the css file
    #first_leaf{color:white;}
  2. Save the file
  3. Refresh the web page

Notice that the text has turned white. This is quite nice!

You can list multiple CSS properties one after each other and delimit them apart by “;”. For instance, let’s put a black border around all the tags with the green class.

  1. Add border: 1px solid black; inside the “{” “}” of the tags from the green class.
    Now it should look like
    .green {
    background-color: green;
    border: 1px solid black;
    }
  2. Save and refresh

Note how we can split the CSS properties on multiple lines and how we can add as many as we want. On border we did cheat a bit, we have added 3 values to the border property in the same time. This was done just to see that it is possible.

For WAY more information about CSS properties please use http://www.w3schools.com/css/css_intro.asp and make sure you do not click on any of the commercials they have.

Play with it, break things and try to fix them back. Learning is all about experimenting.

You can learn more about HTML tags here http://www.w3schools.com/html/ . Again, make sure you don’t click on the commercials, you do not need any certification, quiz, class etc. Just select from the left menu the tags and read about them.

Next time we learn a bit about animations.

Take care,
Gabi

Drawing for the first time

Yo reader, how are you today?

Two lessons ago we have discussed how we can include our CSS file in the HTML tree. Last lesson we have discussed how the browser knows which colours and distances to apply to which element. Also we found out how to ease his job by knowing when to use a class and when to use and id.

Today we will re-use the example from HTML Tree and tags . We will create a few leaves for our HTML tree and colour them a bit.

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
</head>
<body>
<div class=”green leaf” id=”first_leaf”>first leaf</div>
<div class=”red leaf” id=”second_leaf”>second leaf</div>
<div class=”green flower”>very very small flower</div>
</body>
</html>

Before actually writing some CSS I will take some time and explain all those “div” branches of our tree.
Let’s do this exercise:

  1. Take a piece of paper.
  2. Cut it in 3. Do it!.
  3. Take a second piece of paper.
  4. Put the 3 parts on top of it.

The “div”-s for HTML are exactly as the papers are for you. They are transparent, one with the background but they exist there to hold information for you.

Let’s do the following exercise:

  1. Take the first small piece of paper and write class=”green leaf” id=”first_leaf” on it
  2. Take the second small piece of paper and write class=”red leaf” id=”second_leaf” on it
  3. Take the third small piece of paper and write class=”green flower” on it
  4. Flip the first piece of paper and write on it first leaf
  5. Flip the second piece of paper and write on it second leaf
  6. Flip the third piece of paper and write on it very very small flower
  7. Put them back on the big piece of paper with the text upwards. Not the “class” and “id” non-sense, but with the nice human readable text.

Great job! This is what your browser sees.

Now we are ready to write our CSS file. Let’s play again:

  1. Open your program with which you write text. If you are unsure what I mean please go to http://www.sublimetext.com , download, install and start this program. From now on this is our HTML editor.
  2. Write into the HTML editor all HTML code from above.
  3. Save the file into a directory/folder that you want and name the file “html_file.html”
  4. Get back to sublime and go to File, New file
  5. Save this new empty file into the same directory/folder as the “html_file.html” file and name it “mystyle.css”

That was all! Now you have your very own website. Yes, it takes some more work to make it visible to other people but you can see it locally by:

  1. Go to the directory/folder you have used previously to save the html and css file
  2. Double click on “html_file” or drag it on top of your browser

That’s all, if all went fine you should be able to see the text of your leaves in there. They should have the same text as your small pieces of paper. You see the resemblance now. The browser does no magic tricks. He just reads everything and splits the information is 2 piles. Information for him and information for you. Same as you pieces of paper. Information for the viewer, the nice text, and information for the programmer, the classes and ids from the back of the pieces of paper.

Next time we will write some CSS code to make things pretty.

Take care,
Gabi

 

 

Sprinkle magic dust over HTML with CSS

Hey hey hey!

This time we learn what to write into the CSS file to make it work. Uhh yea!

Before going a bit more into details let’s try to imagine how the linking between the 2 documents can function.

Let’s use http://corioblog.com/Mondrian.jpg as an example.

Selecting an element:

  1. Let’s look at the square with thick black border positioned from the top underneath first row of white rectangles, the big red one. This was a bit slow and we are happy for the red colour, otherwise it would have been even slower. This is one way of writing a CSS selector, based on the elements that hold it.
  2. Another way is if we put a number in each square, from the upper left corner to the upper right corner. Now we can say that we talk about the square number 5. This was way faster. This called an “id”. Each “id” must be unique, else we ruin all the speed and idea. An HTML tag can have 1 id.
  3. Let’s try to locate the element which has “square black”. It went quite as fast as the “id”, maybe a bit slower, but still way faster then the first solution. This is called a class. An html tag can have any number of classes. The more they are the slower it becomes to knowing which one we select.

Adding a style to an element:

We have seen how selecting elements work, which is the fastest and which is the slowest. Let’s imagine how paining would work if we imagine ourselves as browsers. We will ignore the first try of selection because it is plain stupid to work like that.

  1. Apply a border to the tags with id 1,2,3,4,5,6,7,8,9…19,20. This looks quite slow because you always have to go back and see if the tag with a specific “id” needs to have the border painted or not.
  2. Apply the border to all the tags with class “black”. Hm…. this looks super fast if you already have all the tags split in piles. All the ones with “black” in the “black” pile. All the “squares” in their own pile and all the “rectangles” in the “rectangles” one.

This is how the browser finds tags and paints tags. We can easily see why the “id” is faster to find and why the “class” is faster to paint.

Next time we will add some colour to our small piece of HTML from the previous lessons.

Have a good one,
Gabi

How to link CSS to our HTML?

Welcome back to a new discussion,

In the previous lesson we have learned that the CSS is a file which holds all the information required by the browser to colour our HTML beautifully.

Let’s go back to our tree. We have learned in the article about the HTML tree and HTML tags that the “head” html tag can hold some information that will help us to describe a part of the identity of our tree. Now we will find out that inside the head element we can call for our CSS with:

<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>

The link element is more special. It does not have a closing “</link>” because it cannot hold any “leaf”. It just tells the browser that in this HTML document there is a link to a CSS file which should be fetched as well.

Let’s use the same example from what is HTML and include our own CSS file.

<!DOCTYPE html>
<html>
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css”>
<title>The title of our tableau</title>
</head>
</html>

Next time we will find out how the browser makes the connection between what’s in the CSS and what’s in the HTML file.

Have a good one,
Gabi

What it is CSS?

Hello reader,

CSS is a file with text in it. This text will help us give shape and colour to the HTML tags.

Remember how in the article about what is HTML we have said that:

This infinite piece of paper is the HTML. It has no specific colour, shape, size, nothing but it can have everything if we make it have.

  1. Let’s imagine that you need to document your painting so that it can be reproduced by anyone who has no skill. In the end we do know that our browsers have no understanding or knowledge of anything.
    writing_inside_image
    Look at that. It is quite ugly and hard to understand because of all the text. Mona Lisa would look quite terrible.
  2. When you are trying to copy a drawing imagine how long it would take if I read all that information for you. Try to read the following lines 1 by 1 and imagine the shape. I bet it will take over 1 second:border width: 10 points
    border colour: black
    width: 135 points
    height: 70 points
    left corner: 59×77 points
    right corner: 209×159 points
    transparent filling. Now you know everything there is to know for the first shape and you can draw it! Took us a while but it was not impossible, just slower.
  3. The order of the information matters. If in the previous example I had given you the left corner on the 3rd position, you could have put the pencil in that point and wait for more information. You knew already that the border is black and that it is 10 points thick. You could have had the 10 points black pencil in your hand waiting for the starting point.

To conclude our lesson:

1) What is CSS?
It is a document where we store all the information related to the layout of our HTML tags.

2) Why is it better to put this information in a separate file?
The browser will receive this file in the same time as our HTML file. This makes everything faster and will be able to arrange the information in the desired order because it knows that inside the CSS file there will be only information related to styles.

Next time we will learn how we can tell the html page to take the css with it when it leaves towards the user’s browser.

Have a good evening,

Gabi