I’ve been teaching a small class on web development recently, and after my first lecture, I’ve gained a newfound respect for teachers. Teaching didn’t come as naturally to me as I would have imagined. I tried going in prepared: with a few outlines and a few code demos. Instead of letting my preparation go to waste, I decided to share them here with you on my site. It’s a nice break from the Animatable posts, so I hope you enjoy!
<!--more-->
I suggest a couple short readings to check out before the lecture:
* [What is CSS](http://www.sitepoint.com/web-foundations/css/) by Adam Roberts
* [Box Model](http://www.w3.org/TR/CSS2/box.html) by the W3C
Take a quick look if you wish. These are mostly to give an idea of what is going to happen over the next few lectures. What is HTML, CSS, and Javascript? We’ll look into the different parts that form a webpage and how they all interact with each other.
## HTML
HTML is where the content of your site lives. It’s also the file the server returns to no matter what, the bare-bones of a webpage. This file may contain text, pictures, and/or other media.
## CSS
This is where you style your content. Whether it’s through colors, layout, or typography, there are plenty of different ways for you to visually manipulate your content.
## Javascript
Javascript is where you add functionality of your site. Validating user input or having dynamic content are one of the many things you can do with Javascipt.
## How do they all link together?
HTML, CSS, and Javascript each do what they do the best. So how can you have them all play nicely on the same ball field?
### In HTML
Link the CSS file
<pre><codeclass="language-markup">
<link rel='stylesheet' href='style.css' />
</code></pre>
Link the Javascript file
<pre><codeclass="language-markup">
<script src='script.js'></script>
</code></pre>
Give the <p> tag a class of hello and id of world to use in CSS and Javascript
<pre><codeclass="language-markup">
<p class='hello' id='world'></p>
</code></pre>
### In CSS
Refer to any element with class=’hello’ and change it’s text color to red.
<pre><codeclass="language-css">
.hello { color: red; }
</code></pre>
Any element with an id=’world’ will have it’s font-size changed to 2rem
<pre><codeclass="language-css">
#world { font-size: 2rem; }
</code></pre>
You don’t have to only use the class and id attributes in html, you can refer to any attribute. This code snippet grabs any canvas element with data=’sales’ and changes it’s border to be 5px thick, dashed, and the color blue.
<pre><codeclass="language-css">
canvas[data=sales] { border: 5px dashed blue; }
</code></pre>
### In Javascript
Javascript has many properties and methods you can use to reference different HTML elements To grab (an) element(s)
<pre><codeclass="language-javascript">
document.getElementById();
document.getElementsByClassName(); //Returns an array of element(s)
document.querySelector(); //Returns the first matching selector
document.querySelectorAll(); //Returns an array of element(s)
</code></pre>
To add a class to an element
<pre><codeclass="language-javascript">
element.className += “ random-class” //Note the space
</code></pre>
To check whether a certain condition is true in the browser
<pre><codeclass="language-javascript">
window.matchMedia('aspect-ratio: 12/8'); //Returns true if the aspect ratio is 12/8
window.innerHeight; //Is the height of the window
window.innerWidth; //Is the width of the window
</code></pre>
_And a lot more_
## What should handle what?
HTML, CSS, and Javascript should all handle what each of them does best. HTML should handle the content, CSS should handle the styles/presentation, and Javascript should handle the behavior of the webpage. Why, you ask? One reason is that it demonstrates a “separation of concerns”. It would be a mess if you’re writing an article in the HTML and you put style attributes all over the place. That would make the markup confusing and hard to read/edit.
## Can’t I just put everything in a Javascript file?
Yes you can, but then you lose some of the great features of HTML and CSS. HTML and CSS ignore everything that it doesn’t understand. When Javascript encounters something it doesn’t understand, it stops running the code completely, regardless of what comes after. Please note that I am only speaking about what gets served to the user. When it comes to what’s actually on your server, then store your content however you wish.
## Conclusion
To me personally, my first lecture was a mess. Some of my examples didn’t work properly in the first type-through and I was everywhere. Though, to be sharing the little knowledge I do have, comes with it’s own joy. It must not have gone as terrible as I imagined it in my head because they seemed enthusiastic for the next lecture. So I’m excited to share this outline with you, and hopefully I’ll have many more to come. Until next time. 🙂
