Don't like this style? Click here to change it! blue.css
Let's learn HTML and Javascript (also some CSS).
First some resources:
Here are a list of tasks that, if you can accomplish them, promote you to a level 1 web developer (I have no idea what the scale is but somehow this is a step up from nothing).
Our goal will be to walk you through these tasks in this basic introduction.
HTML stands for Hyper-Text Markup Language. The way to think of it (and any "markup" language) is as something which augments normal text.
Let's say that you've written a letter. The raw text of your letter might look like this:
Here is a version that has been "marked up". The markup is not displayed but used to provide semantic context about the content in the document.
There are some things to note about this. The markup parts of the document are
in angle brackets: <tagname>.
HTML is a subset of XML (Extensible Markup Language). HTML endows certain
"tags" with meaning. Here is a list of the most useful HTML tags:
pbodydivheaderfooterspanascriptulliinputbuttonimgIntro to HTML: Try this INTRO TO HTML
Explore: Go to any website (even this one) and "view source". You can look at the HTML of the page you are looking at. In some browsers you can "inspect element" which zooms in on a specific tag (tag is the HTML name, element is the javascript/DOM name (more on the distinction later)).
You'll notice that most HTML tags in real websites have "attributes". That is key/value pairs included in each tag, for instance:
<section id="main"> is a "section" tag with an "id" attribute whose value is "main".
There are many types of attributes and they vary based on which tag you use,
but there are two attributes that web developers need for pretty much every tag: id and class.
Use id for elements that are unique to your page. Use class for properties that you want many tags to share.
In web development we need to target specific tags (from now on I'll say elements) for several reasons. Interacting with elements, styling them, and changing them.
CSS stands for Cascading Style Sheets, it is the language of style in web development.
There are two parts to any CSS "rule", the visual rule like "background-color: salmon" and the selector which selects which elements to target (for instance body { }).
You can target elements by tag, class, and id (as well as with many more exotic selectors). To target by tag you just use the tag name, like:
p { color: red} to change the (text) color of every paragraph (p) tag to red.
To target by class you can use .someclass { margin-left: 30px;} which will make a left-hand margin
for every element that has the attribute class="someclass".
When selecting by "id" use the # symbol like #someid { font-size: 16px; }.
Take a look at the following example:
See the Pen yorGpx by Andy Novocin (@AndyNovo) on CodePen.
Infer: What are the visual rules I used in that example? What are the selectors? Do the classes make sense? Do the ids?
Intro to HTML: Try this INTRO TO CSS
A world of possibilities has just opened up. You can put any tags and any attributes on any text. You can style those elements in many ways.
But there are good practices and bad practices. In general you want your HTML to live independently of your styling, here is the perfect example:
CSS Zen Garden: Go to the csszengarden.com. Look at the HTML. Notice how none of the class names or id names have anything to do with "styling", only "meaning". Internalize the value of separating presentation from content by exploring several of the themes they have available.
OK, to prove to yourself that you can put tags, classes, ids, and styles onto some text try to stylize the following text.
I've made you a codepen where the HTML currently has no markup or styles, just some text (a blog post from Zen Habits).
Markup and Style Text: Here is the link: https://codepen.io/AndyNovo/pen/gxyZyG?editors=1100. Your job is to put tags and attributes into this text and do some basic styling. Feel free to lookup examples online, in documentation, or just to steal styles from other sites. Try adding an image and having the text wrap around the image.
OK, next up you have to let users interact with your site.
For interactivity we will need Javascript (sometimes known as ECMAScript).
Let's set our sites on having a button and when we click the button the text on the page will change.
Let's look up the various attributes of the button tag at: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
OK here is a button:
See the Pen brJzNj by Andy Novocin (@AndyNovo) on CodePen.
Let's start by altering the paragraph of text with Javascript.
First Edits: Add the line: document.querySelector("#messages").innerText = "bananas";
Shorthand Version: With IDs you can save some typing (sometimes). Add the line: messages.innerText += " are great";
There is alot going on here. One, javasacript executes sequentially without delay. Two, there are global variables: document and in this case messages, another one is window.
These are part of the Document Object Model (well not messages), also known as the DOM. It is an abstract "class" which is an abstraction of any "document" which is all pages. The document is the abstract "app" of this site.
Think of it as the HTML made into a real thing. This is where "elements" come from, in your document, elements are the components that live on screen (or off screen). HTML is used to initialize a document in the browser.
All of that to say: document.querySelector is a method, specified by the DOM, which lets you programmatically use CSS selectors to select one element.
Once you have selected an element you can do things with it, like setting innerText.
Other useful things you can do include adding/dropping classes, reading attribute values, setting display properties for that element, and so on.
Take a look at these (kind of silly) functions:
Javascript has many ways of declaring functions. This example shows a longhand and a shorthand way of declaring and calling a function.
So one of the toughest adjustments when learning Javascript and web dev in general is thinking in the paradigm of event-based coding.
Most of web dev is done inside of "callback" functions. These are functions that are called in response to events, there is a specification for the inputs to the callback which is often contextual. In our case there is an event object which is passed into the function you provide. OK examples are needed:
See the Pen mMgvKK by Andy Novocin (@AndyNovo) on CodePen.
Check the Console: console.log is how we check-in on
the health of our programs. Find the Javascript console in your browser then click the button. Inspect what attributes are in the eventObject.
Counter: Adjust the callback function so that there is a counter displayed on screen which increments every time someone clicks.
Our last big task is to get data from a user and react to it. The key to this one is the
input tag. There are many varieties. They also adapt to the operating system they are running on.
Take a look at these varieties of input tags:
See the Pen eEoxXd by Andy Novocin (@AndyNovo) on CodePen.
Other inputs that I didn't include here are dropdowns (the tags are select and option) and radio buttons.
Each of these input types has idiosyncracies in terms of which events they emit.
Most input types have two important attributes: value and name.
Value is your programmatic way of getting the current state of the input. Name is a bit more subtle. Inputs are
seen as inputs to form elements which will serialize every form input into a key-value pair for sending to a server.
There is a lot to explore in that sentence but now is not the time.
See the Pen rzbRBj by Andy Novocin (@AndyNovo) on CodePen.
Input Data: Write a website that asks someone their name, favorite color, and birthday. Change the background of the web page to match their favorite color and display their birthday and name. Try this with several types of events (blur, change, or clicking a button)
Fun Flag For The Day: https://websec.prof.ninja/ctf/selectors/