Lesson 1

 Lesson 1

Every website on the internet is made up of at least 3 fundamental components: HTML, CSS, and JavaScript. With these three you can build just about anything. There are additional components that can be used to help build more complex websites, but these components are optional. This course will cover the 3 fundamental components of every website.

Difference between a script and a program

Before we go over the three fundamental components of a website let us first discuss what a website is. Sometimes to better understand what something is you have to understand what it is not. A website is not a program. Often times people make this mistake, and think that web development involves programming websites. This is not technically correct. For the purpose of this course, a program is code that was compiled into machine code; the 1’s and 0’s of the binary language. This process of taking human readable code and compiling it into machine code is really what sets executable programs from scripts. Scripts are never compiled into machine code. Instead they are interpreted by a program. This is exactly how websites work.

Web we view a website we are actually running a program called a “Browser.” Common modern browsers are Google Chrome, Firefox, and Safari. Less modern browsers include Internet Explorer, and Edge. These programs load websites just like a word processor loads a text document. There is special mark up that define how the browser is to interpret the content (HTML and CSS), as well as a scripting language (JavaScript). Now that we understand that these 3 fundamental components of every website are markup languages, and scripts lets take a look at each of these a little bit closer.

HTML

HTML stands for Hyper Text Markup Language. HTML is the skeleton of the website. It provides the structure that holds our content. With HTML you can define the website layout. For example you have want a traditional website with a top horizontal navigation, main content area, and a footer area. Or you may want a website with a side vertical navigation instead of a top horizontal navigation. It is the scaffolding that you apply CSS style changes to, and manipulate with JavaScript. It also holds the website content.

Another way of visualizing HTML with everyday objects, would be to consider a wide shallow bowl filled with water compared to a tall thin glass filled with water. Both of these everyday objects are containers. They both hold water. However, they have a different structure, and when you fill them with liquid the space that the liquid occupies is drastically different. This is because the container’s structure effects the container’s content. In this same way, HTML acts as a collection of containers that hold content.

We will be uncovering more and more about HTML through out this course, but will dedicate lesson 2 to the basics of HTML.

CSS

CSS stands for Cascading Style Sheet. CSS is skin of the website. It changes how the site looks. For every element in your website, the browser will load a default style. Each browsers has different defaults. We will go over this in more detail in lesson 3. CSS overwrites the browser’s default style, and replaces it with new style commands.

CSS can effect visual aspects of a website, things like: font size, background color, padding, and even animations.

JavaScript

JavaScript is the common use term for ECMAScript, of which there are several version; the current script supported by all browsers is ECMAScript 5 or ES5. There are more modern versions of ECMAScript, but not all of the browsers support all of these new features yet. JavaScript is the muscles of the website. It allows a website to do things.

JavaScript allows you to change how the website looks in response to user interaction. For example: if a user click a button, hidden text should be toggled from invisible to visible. We will cover this in greater detail in lesson 4.