web-tech-basics

Web Technology Basics

Purpose

Simply explain web technologies so designers can have a better understanding of technical constraints and possibilities of HTML, CSS and Javascript.

HTML

The container of all things that make up a page. Holds text and images.

Categorizes the content of the page into logical chunks.

• Headers
• Paragraphs
• Lists
• Links
• And more!

HTML

<h1>HTML</h1>
<p>The container of all things that make up a page. Holds text and images.</p>
<p>Categorizes the content of the page into logical chunks.</p>
<ul>
  <li>Headers</li>
  <li>Paragraphs</li>
  <li>Lists</li>
  <li>Links</li>
  <li>And more!</li>
</ul>

CSS

Defines content style.

• Colors
• Fonts
• Spacing
• Animation
• Background
• Icons

CSS

h1 {
  font-family: sans-serif;
  color: red;
  height: 30px;
  line-height: 40px;
  margin-bottom: 15px;
}

JavaScript

Business and iteraction logic that brings the page to life by controlling the HTML and CSS dynamically.

• retrieves data from server to generate and display HTML according to design
• adds or removes classes in order to change CSS styles and animations

Document Object Model (DOM)

The DOM is an Application Programming Interface (API).

• The DOM is how browsers determine what elements are on the screen and where they are located.
• Javascript uses the DOM to communicate with the browser in order to manipulate the objects on the screen.