From Zero to Website – Understanding the Basics – It’s Simple

View Github Repository Open presentation in a new window

redler

See all presentation from redler

From Zero to Website – Understanding the Basics – It’s Simple

0 0

zero2web

From Zero to Website - Slide Deck

On Github redler / zero2web

From Zero to Website

Understanding the Basics

Ken RedlerCTO, cSubs

ksr@ksredler.com kenredler @redler

You need to already know

  • Nothing

It’s Simple

HTMLCSSJavaScript

HTML

Document

  • Where is it?
  • How do you view it?
  • How do you edit it?

Tags

Behind the curtain...


1. Will this be red?

2. Is it greenor is it blue?
  • Most tags contain their content, so they have a start and an end
  • Some tags stand alone, and have no content

HTML Document

Just a text file


<!DOCTYPE html>
<html>

</html>

HTML Document

Like the skeleton, a head and a body


<!DOCTYPE html>
<html>

	<head>

	</head>
	
	<body>

	</body>

</html>

Head

The head contains data about the document


<head>
	<title>Bask in the magnificence of this page!</title>
</head>

Body

The body contains the content of the document


<body>
	<h1>Welcome!</h1>
	<p>We hope you'll stay awhile.</p>
</body>

Images

If you have a file like a gif or jpeg, just point to it from an tag

<img src="myCoolPhoto.jpg">

Even if you don't have your image, how about a placeholder?

<img src="http://placekitten.com/150/300">

<img src="http://sheenholders.com/421x550">

The full document

<!DOCTYPE html>
<html>
<head>
	<title>Bask in the magnificence of this page!</title>
</head>
<body>

<h1>Welcome!</h1>
<p>We hope you'll stay awhile.</p>

<p>And, by the way, whitespace

			doesn't
						matter
				</p>

		<p>And that includes indentation</p>

</body>
</html>

CSS

Decorating the skeleton


body {
  color: red;
  background-color: black;
}

Styles can go in the document's head


<!DOCTYPE html>
<html>
<head>
	<title>Bask in the magnificence of this page!</title>

	<style>

	body {
		color: red;
		background-color: black;
	}

	</style>

</head>
<body>

<h1>Welcome!</h1>
<p>We hope you'll stay awhile.</p>

</body>
</html>

And also their own file


<head>
	<title>Bask in the magnificence of this page!</title>
	<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>

JavaScript

A full programming language

  • Runs in all browsers
  • Allows interaction with the document
  • Java is to JavaScript as ham is to hamster

Like CSS, JS can go directly in the HTML document

<head>
<script>
	
for (var i = 1; i <= 6; i++) {
	alert('Annoying you six times!');
}	

</script>
</head>

But also like CSS, a separate file is preferred

<head>
<title>My OK Page</title>
<script src="/my_fancy_scripts.js"></script>
</head>

What about jQuery

  • Super popular library
  • It IS JavaScript
  • Makes some things easier
  • Helps clean up browser differences
  • Subject for another session...

What about Bootstrap?

  • A CSS framework and more
  • Originally a project at Twitter
  • A bunch of CSS and JavaScript files
  • Get a site together quickly by linking in the bootstrap CSS and JavaScript files
  • Subject for another session...

Tools

  • Google Chrome and Dev Tools
  • Sublime Text or any text editor of choice
  • Github: A place to host a simple website for free: https://pages.github.com/
From Zero to Website Understanding the Basics Ken RedlerCTO, cSubs ksr@ksredler.com kenredler @redler