Module 1: Pillars of a Webpage: HTML, CSS, and JavaScript

Let's jump right into looking at some code, beginning with the web's humble but ever-present powerhouse: HTML.

What Is HTML?

Hypertext Markup Language (HTML) is one of the three cornerstone languages used on every webpage in existence. Though the syntax might seem daunting at first, by the end of the course it should be very familiar to you.

HTML represents the basic structure and content of a webpage. This means that HTML is responsible for the most basic aspects of a website, including the following:

• What text is on the page?

• What images are on the page?

• In what order will the images and text appear?

• Which text elements are the primary headings? Which are the secondary headings?

HTML is not responsible for things like the following:

• Fanciful colors and layouts

• Snazzy effects on the page

• Complex user interactivity

HTML represents the bare skeleton of a webpage. Cascading Style Sheets (CSS) and JavaScript are then used to add the fancy things like visual aesthetics, effects, and event handling (such as form submissions and database interactions).

Tag, You're It!

Every HTML document is made up of various pieces of content wrapped in tags. These tags are most often represented by angle brackets (< tag >) with an associated tag name contained inside. We then insert the content between an opening and a closing tag so that our browser understands how to treat the content. When the brower renders a tag and its content (if it has any), it becomes an element. During the boot camp, you will learn about the difference between tags and elements. For now, you can ignore this distinction.

For instance, let's say we want to use HTML to style the phrase "Coding Rocks!" in bold. Let's see what the HTML for that is, and then what it looks like in a browser:

HTML Code:

<strong>Coding Rocks!</strong>

What This Looks Like in a Browser:

Notice how we used the opening <strong> tag and the closing </strong> tag to wrap the content. The browser interprets this HTML like this: The developer wants this phrase to be in bold.

Don't worry—there are only a few dozen HTML tags out there, and after just a few weeks in the course they will all become second nature.

Here are a few tags that you'll come across frequently:

• title: Aptly named, this tag defines the title of the website as shown on the webpage's tab.

• head and body: These tags help define the structure of the overall webpage. In essence, head contains invisible matter that the browser uses to render the page correctly, and body represents the actual content shown to the user.

• h1, h2, h3, h4, h5, and h6: These tags represent the level of heading a given text block represents. Headings are exactly what they sound like: larger, more prominent elements of text on a page.

• p: This tag represents paragraphs or blocks of text. You'll use this tag extensively to wrap most of the text on your webpages.

• strong and em: These tags are used respectively to bold or italicize a text element.

• br: This tag is used to create a line of empty space between two blocks of content.

• img: This tag is used to display images on a page. The syntax for images is slightly different than for text (see below). We'll walk through its makeup later in the course.

• a: This tag (which is short for anchor) is used to create links to elements within the webpage or to other webpages. Again, the syntax is slightly different than for text alone, but you'll become comfortable using a tags as the course progresses.

• ul, ol, and li: These tags represent unordered lists, ordered lists, and list items. In essence, these HTML elements represent bulleted or numbered lists.

Hello, HTML

The best way to learn coding concepts is to actually code. So let's roll up our sleeves and get started!

We're going to use a super-handy free service called JSFiddle. It allows you to write HTML, CSS, and JavaScript in your browser and instantly see the results. If you haven't already, click on the link in the previous sentence and let's take a look. (You might want to drag that tab to its own window, and keep it next to this one.)

The first thing you should do is close the big blue banner at the top of the page by clicking the Close button in the upper-left hand corner.

Next, notice that the main portion of the page is divided into four sections: HTML in the upper-left, CSS in the upper-right, JavaScript in the lower-left, and Result in the lower-right. You can drag the horizontal and vertical dividers between these sections at any time to change their size.

Let's write some HTML. Click anywhere in the HTML section and type an opening heading tag, <h1>:

<h1>

Notice that JSFiddle automatically created the closing tag, </h1>, and placed your cursor in the tag's content area. Type an inspirational message on that line, like Heading for the stars!.

Now locate the Run button to the upper-left of the HTML section, and click it. You should see your message, big and bold (because it's a heading), in the Result area in the lower-right corner.

Congratulations, you have just created a webpage! Feel free to play around in JSFiddle a bit if you're feeling adventurous. Maybe try out a few tags from the list above. Then we'll start playing with pandas.

Modern web browsers are very forgiving when parsing HTML. The webpage we just created is actually missing a lot of tags that a valid page should contain (according to the World Wide Web Consortium). All webpages should have the following tags: doctype, html, head, meta, title, and body.

Here's an example of a complete webpage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Panda Fan Site!</h1>
    <p>I LOVE PANDAS!!! I LOVE PANDAS!!! I LOVE PANDAS!!! I LOVE PANDAS!!! I LOVE PANDAS!!!</p>
    <h2>Reasons I like Pandas</h2>
    <ul>
      <li>They are fuzzy</li>
      <li>They are cute</li>
      <li>They are adorable</li>
      <li>They are brutally powerful</li>
    </ul>
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/67/Giant_Pandas_having_a_snack.jpg/1200px-Giant_Pandas_having_a_snack.jpg
" width="400" alt="Cute Pandas" />
    <br>
    <a href="https://www.reddit.com/r/pandas">More pandas!</a>
  </body>
</html>

Most humans will see this as an illegible mess, but web browsers think this is a beautifully structured document that is easy to parse. It will become very easy for you to parse, too, as you work with HTML throughout the boot camp.

Let's see what this page looks like in a browser. Copy the above code and paste it into the HTML section of JSFiddle, replacing all of the h1 markup from earlier. Hit the Run button, and you should see a page about pandas in the Result section:

Nice work! Spend some time looking at the HTML and see if you can identify where each tag is rendered in the Results section. Feel free to play around with the HTML too.

It's okay if you break stuff; you can always paste the HTML above into the HTML section at any time to start over. Or just refresh the page to start with a clean slate.

Now that you've had some practice creating basic HTML, it's time to learn about CSS. With the power of CSS, you can apply a wide variety of styles to your HTML and take your webpages to the next level.

What Is CSS?

CSS is a style sheet language used for describing the presentation of a webpage. If HTML is the skeleton of a webpage, then CSS is its skin and pinstripe suit. Whereas HTML is strictly concerned with the structure of webpages, CSS is focused on colors, aesthetics, and visual layout. It works by hooking onto specific elements of an HTML page and formatting them using any number of options (called styles).

However, jumping into CSS isn't always straightforward. As is a common theme in web development, the process for formatting visual styles on a website requires an explicit level of detail and a precise command of the language. Again, it's worth remembering that creating web applications isn't a drag-and-drop process. Colors, aesthetics, fonts, and visual layouts each need to be coded in order for every browser to consistently render the page correctly.

Beyond Black and White

Our panda page is adorable, but mostly because of the photo of pandas. The plain text and formatting that you get out of the box with HTML does little to please the eye. So let's add some style! Copy the below CSS code and paste it into the CSS section of JSFiddle.

body {
  background-color: brown;
}

h1 {
  color: white;
  text-decoration: underline;
}

h2, h3, p {
  color: yellow;
}

ul {
  list-style: disc
}

p, li {
  font-size: 24px;
  font-family: cursive;
}

li:nth-child(odd) {
  color: black;
}

li:nth-child(even) {
  color: white;
}

img {
  box-shadow: 5px 5px 10px #222222;
}

a {
  background-color: black;
  color: white;
  padding: 5px;
}

When you hit the Run button, the layout will look something like this:

Much better! Now let's talk about the CSS code we just pasted.

How CSS Works

If you spend a few moments looking at the CSS code you just pasted, you will notice that each block, or rule, follows this syntax:

  HTML-TAG {
    CSS-PROPERTY: VALUE
  }

In effect, each rule is referencing specific HTML elements and then applying changes to how they are formatted. The format options are known as properties in CSS, with specific options for how they can be modified.

Take a closer look at the CSS code and try to identify the HTML tags that each rule affects. Then look at the Result section and see how the browser renders those specific tags according to the CSS rules.

Don't expect to memorize all of the formatting options available through CSS. For many of your early weeks and months as a developer, you will need to continually reference websites like W3 Schools to recall the exact syntax.

Believe it or not, using simple HTML and CSS alone, you can build complex, beautiful web layouts like this one:

If you'd like to browse more great CSS designs, pour a cup of tea and spend some time at CSS Zen Garden. All of the pages on that site use the exact same HTML; only the CSS has been modifed to create a wide variety of unique designs!

JavaScript

HTML defines the structure of a webpage, CSS defines its appearance, and JavaScript defines its functionality. Using JavaScript, you'll be able to power your websites with effects, interactivity, data communication, and much more. During this boot camp, you'll be spending several weeks on JavaScript alone. It's a critical tool in every web developer's tool belt, so let's take an introductory look now.

The Joys of JavaScript

Like C++, Java, Ruby, and Python, JavaScript comes with all the fixings expected of a complete programming language. In it, you will find variables, conditionals, loops, functions, and so much more. We'll be using JavaScript extensively to create the logic that defines the behavior of our web applications.

How to JavaScript

While the full power of JavaScript is beyond the scope of this prework, let's get a small taste of what's possible.

Let's start a new JSFiddle. If you want, you can save the panda project by clicking the Save button, and even create a free account to be able to save and modify multiple projects. You can start a new JSFiddle by simply reloading the page in your browser.

Copy the below code into the HTML section of the new JSFiddle:

<!DOCTYPE html>
<html>
<head>
  <title>Jiggle Into JavaScript</title>
</head>
<body>

  <p>Press the buttons to move the box!</p>

  <div id="box" style="height:150px; width:150px; background-color:orange; margin:25px"></div>

  <button id="shrinkBtn">Shrink</button>
  <button id="growBtn">Grow</button>
  <button id="resetBtn">Reset</button>

</body>
</html>

There are a couple of new tags in this HTML, notably div and button. You can guess what button does; it renders a button that the user can click. div is noteworty because it's a generic tag that you can put almost anywhere when something like an h1 or p or any other special-purpose tag doesn't make sense. You're going to see a lot of div's in this boot camp and throughout your career, so we thought it was worth giving it a special introduction.

Another bit of HTML worth noting is the id attribute in the div and button tags. All you need to know about the id attribute is that it allows you to uniquely identify a specific HTML tag. This is very useful when you want to write some JavaScript that needs to interact with specific HTML tags, as you're about to see.

Click the Run button and your JSFiddle should look like this:

Pretty fancy!

The thing is, if you try clicking the buttons, you will quickly realize that they have no impact on the size of the box. No fun whatsoever. This is where JavaScript comes in.

Copy the following code into the JavaScript section of JSFiddle:

document.getElementById("shrinkBtn").addEventListener("click", function(){
  document.getElementById("box").style.height = "25px";
});

document.getElementById("growBtn").addEventListener("click", function(){
  document.getElementById("box").style.height = "250px";
});

document.getElementById("resetBtn").addEventListener("click", function(){
  document.getElementById("box").style.height = "150px";
});

Click Run again. Now clicking the Shrink, Grow, and Reset buttons will change the height of the orange box. That is fun!

The Magic Behind the Magic

So how did that work?

The three code blocks you pasted into the JavaScript section are responsible for the changes being made. Let's take a moment to dissect the components:

• The lines each begin with document.getElementById. In a way, this is simply a reference to say, "If you ever click the button with a specific id, then do something". Each id (shrinkBtn, growBtn, and resetBtn) corresponds to the id of a button in the HTML.

• The lines then continue to say that we'll addEventListener("click"...). This code effectively means that we'll be watching for any clicks on our targeted buttons.

• We then open up a function with some code inside. This code targets the box id and restyles the height to an arbitrary pixel size. In a way, we're using JavaScript to dynamically change the CSS of our box in response to button clicks.

Even though the syntax might seem scary, the concepts are simple. Take a few moments to experiment some more. The W3Schools website has an entire table of changes you can make using the document.style syntax that we're using above.

Is That All?

This simple example doesn't even scratch the surface. Through JavaScript (and a wide variety of JavaScript libraries and frameworks), you can build truly powerful web applications with complex user interfaces, dynamic live-reloading data visualizations, geolocation tools, and more.

There's so much that JavaScript can do, so come prepared to have your mind blown repeatedly over the course of the boot camp.🤯

Take a Break!

This was a whirlwind tour of some core techonologies that you're going to get to know very well. For now, you only need a high-level understanding of what HTML, CSS, and JavaScript can do. The best thing you can do right now is to take a break and let your brain process all of this stuff.

Then if you would like to go a bit deeper, explore the list of resources below. Learning more about these topics before the boot camp starts will definitely help you during the first few weeks. And don't worry if you end up generating more questions than answers because the boot camp is the perfect place to ask them!

---

Resources

HTML

• HTML Introduction
• If you know nothing about HTML, this is where you start
• Introduction to HTML
• HTML Fundamentals

CSS

• CSS Introduction
• Learn CSS - Crash Course #1 (Free)
• Introduction to CSS

JavaScript

• JavaScript Introduction
• Introduction to JavaScript
• JavaScript

---

© 2019 Trilogy Education Services