This post assumes you’ve got a web browser, a text editor, and can create an HTML Document. If that doesn’t make sense, no worries, just go and check out the post titled Hello World.
Hypertext Markup Language
HTML is also a main part of Accessibility, which essentially is how people with different abilities interact with the web. For example, high quality HTML is able to be bring value to someone with a visual impairment via a screen reader, which will read the content aloud and allow them to navigate effectively.
Cascading Style Sheets
CSS drives all of the presentation and layout of a webpage; this includes colors, backgrounds, fonts, and grids. Using attributes on an HTML tag like class or id will allow you to find HTML elements with selectors and apply styles to them using properties and values. A selector used with properties and values are called a CSS rule-set.
CSS can affect your HTML in three different ways:
- Inline Styles: HTML tags can use the style attribute with CSS properties and values, no selector is needed since the styles are applied directly to the element with a style attribute.
- Internal Style Sheet: HTML
<style>tags can surround CSS rule-sets inside an HTML Document.
- External Style Sheet: HTML can import a .css file using the
<link />tag. This is the most common way to use CSS as styles in separate file are more reusable.
- Variable: Any value you want to store and use later in your code. An example of two variables could be the name and age of a user.
- Control Statement: This determines whether certain code will run. E.g. If user’s age is over 18, you can show them different content.
- Function: A sequence of code that can be used to organize and encapsulate your code and also allows for reusability. E.g. Everytime a user logs in you can show a message that will greet them by name, “Welcome back, John!”
Let’s say this is for a client.
A bouncer for the world’s smallest club with a max occupancy of 10 hired you to build an app so they can keep track of everyone in the club. We’ll need to make sure we never have a negative number of people in the club and we definitely can’t have more than 10 otherwise the fire marshall will shut the club down.
This counter allows you to keep track of the club's occupancy.
The club currently has 0 people.
In computer science terms, the DOM is described as a Tree because literal trees have branches and branches can have branches. For me, it’s a little easier to think of each node as a literal box. A box can contain more boxes, be an empty box, or contain anything really. If you’ve organized and labeled your boxes, it’s pretty easy to locate exactly what you’re looking for and reorganize if needed.
If you’ve never looked at documentation before, it can be intimidating. My recommendation is to never read it like a book. If there’s a quick start or get started page, read that and get familiar with the basics of what the API can do and then start coding with it as soon as possible. As you work, you’ll need to look stuff up and the rest of will be great reference material. With large APIs, it’s likely that you’ll only ever need a small subset of what the API can do.