Flexbox & Containers
Remember how much fun float was? There are better ways of doing layout now. Flexbox is short for flexible box and it is the most popular way to do layouts for responsive screen design. That means that it’s perfect for developing websites that you have no idea of how they will be viewed – desktop,…
Read MoreHaving Fun With Borders & Boxes
There are three easy ways to make your boxes (or really just areas of your website with different color backgrounds) stand out – adding curved corners, adding shadows and changing the opacity of the color. Curved Boxes border-radius – allows rounded corner to things with either a border, background color or background image. You simply…
Read MoreHomework Help: Manipulating HTML & CSS
Having trouble figuring out how to do the four boxes…. HTML <!DOCTYPE html> <html> <head> <link rel=”stylesheet” href=”change.css”></link> <script src=”change.js”></script> </head> <body> <h1 id=”top”>Let’s See How Things Change</h1> <p>We are going to make a simple grid of four boxes of different color and then play around with them.</p> <div class=”clear”></div> <div id=”box1″>This is box 1</div>…
Read MoreHomework: Manipulating HTML & CSS
We’re going to make this page… Get stuck…here’s a hint.
Read MoreEvents in JavaScript
HTML events are things that happen to HTML elements. When JavaScript is used – it can react to these events. Some events: A web page has finished loading An HTML button or element was clicked An HTML input field was changed. These are just a few of the many, many events you use in JavaScript.…
Read MoreChanging HTML & CSS
Once you have found the HTML element you want to change – let’s learn how to change it. You do this by using the innerHTML property. Every element has this property and it tells you what content is between the starting and ending tags of an element. Here is the basic syntax: document.getElementById(id).innerHTML =”new HTML”…
Read MoreFinding HTML DOM Elements
Now that you know what the DOM is – how do you use it? In order to change HTML you need to be able to find the HTML element that you want to change. There are several ways to do this, but we are going to learn the most straightforward way first. By ID This…
Read MoreDocument Object Model
The DOM is a tree like structure that comes down from the root element with branches like head or body. For example, if you have the HTML document below: <!DOCTYPE html> <html> <head> <title>Basic HTML Page</title> <link> rel=”stylesheet” href=”style.css”></link> </head> <body> <h1>My First Web Page</h1> <p>This is a paragraph with a bit of <a href=”link.html”>link.</a></p>…
Read MoreConditionals in JavaScript
What is a conditional? A conditional is when you look at possible changeable data point and take different actions based on the outcome. For example, in the morning before you go to school – you look at the weather to see if it is going to be rainy. If it is going to be rainy,…
Read MoreComparison & Logical Operators
Booleans Booleans are another date type along with numbers and strings which you learned about in the last lesson. An important part of programming is being able to compare values in order to make decisions in code. Very often, in programming, you will need a data type that can only have one of two values,…
Read More