Week 1: FTP & HTML Basics - Firmidable Website Training

You Should Build Stuff

Every single one of you in this room can build something!

You Can Build Stupid Stuff

What We're Going to Build

Not as fun, but useful: a resume site.

Its goal? Show the world how awesome you are professionally.

Example: Even though it's bad to cite yourself.

Ingredients

Picture of Yourself
Current Job Description
Semantic Markup for Search Engines
Potentially, links to other places

What is a URL?

scheme://user@subdomain.host:port/path?query#fragment

http://firmidable.com/be-firmidable

mailto:nathan@firmidable.com

https://oberpekas.com/phoenix-social-security-disability-faqs?campaign=adwords#applying

ftp://doug%40firmidable.com%20@gator3123.hostgator.com

https://gator3123.hostgator.com:2083

View-Source

Right Click > View Source

or Ctrl-U

This shows the entire file before the browser renders the page.

This means any edits from JavaScript won't be represented.

Can show CSS, JavaScript, and HTML files singly.

Inspect Element

Right Click > Inspect Element

or F12

This shows the whole set of files for the current page as they exist at the present state.

You can watch JavaScript work its magic in realtime.

You see CSS, JavaScript, and HTML all at once.

The Importance of Inspect Element & View-Source

HTML, CSS, JavaScript & PHP all run at the time a page is accessed.

You can see the results of a change immediately!

If you break it, you can fix it!

Undo is your friend!

Your First HTML Page

Right-Click on the Remote Site Current Directory pane > Create New File

Call this file index.html.

Right-Click on index.html > View/Edit

Your First HTML Page: Source


<!DOCTYPE html>
<html>
	<head>
		<title>About Me</title>
	</head>
	<body>
		<h1>[YOUR NAME]</h1>
		<p>I work at <a href="http://firmidable.com">Firmidable</a></p>	
	</body>
</html>

Save your file.

You can reach it at http://users.themarketingcenter.com/[USERNAME]/.

Your First HTML Page: Line 1


<!DOCTYPE html>

The DOCTYPE is required. It tells the browser what HTML to use.
We're using "regular" HTML: HTML5.

Your First HTML Page: Line 2


	
<html>
	
	
	
	
	
	
	
</html>

The html tags begin and end the HTML file.
Almost all html tags can & probably should be closed.

Your First HTML Page: Line 3


		
	
	<head>
	
	</head>

The head tags mark the section that holds most of the metadata for the file.
Metadata gives the browser information about what else it should do with the HTML.

Your First HTML Page: Line 4


		
	
	
		<title>About Me</title>

The title tags tell the browser what the page is about.
It's also the #1 on-page SEO ranking factor, because of its role.

Your First HTML Page: Line 6


		
	
	
		
	<body>
	
	
	
	</body>

The body tags define the content of the page.
This is the main part of the page that's visible.

Your First HTML Page: Line 7


		
	
	
		
	
		<h1>[YOUR NAME]</h1>

Heading tags, like h1 are headlines and subheadlines.
Page headings create new sections.

Your First HTML Page: Line 8


		
	
	
		
	
	
		<p>I work at                                               </p>

Paragraph tags - p tags - are for holding text.
p tags act like .

Your First HTML Page: Line 8, Part 2


		
	
	
		
	
	
		            <a href="http://firmidable.com">Firmidable</a>

Anchor tags - a tags - generally link to another page with the text between them.
The href attribute tells the browser what to link to.

Unpacking It All

There are a few versions of HTML - we'll only care about the most recent.
HTML tags are (generally) formatted like
```
<tag>Text</tag>
```
Tags nest inside each other.
Between nesting and the type of tags, HTML creates a sort of outline format.
Some tags tell only the browser things that users can't see.
Some tags take "attributes" that change how that tag is displayed and functions.
A lot of coding is just copying and pasting, changing it as you need.

Outline Format for "About Me"

[YOUR NAME]
1. I work at Firmidable

Right now, outline format doesn't tell you much.

Outline format becomes very useful to visualize between pages & code.

Expanding Your Page

Our page isn't finished!

We're going to want to add a few things to the page to help fulfull the goals of the page.

An image of yourself
Current Job Description
A list of previous jobs
Links to outside projects

Adding Images to the Server

Find an image of yourself - you can always steal one from the Firmidable team page.

Right-Click on the Remote Site Current Directory pane > Create Directory and Enter It

Replace /New Directory with /img

If you're using Chrome, you can drag from the downloads bar at the bottom of your browser and drag the file into the Remote Site Current Directory pane.

Or! Navigate to your image location in the Local Computer Current Directory pane and drag it over into the Remote Site Current Directory pane.

Adding Images to HTML


<!DOCTYPE html>
<html>
	<head>
		<title>About Me</title>
	</head>
	<body>
		<h1>[YOUR NAME]</h1>
		<p>I work at <a href="http://firmidable.com">Firmidable</a></p>
		<p><img src="img/me.jpg" alt="[YOUR NAME]"></p>
	</body>
</html>

Before the </body> tag, we'll insert a paragraph with an image. Make sure to Save

The IMG Tag

One of the few tags that DOES NOT use a closing tag.

src attribute says where to look.

alt attribute tells computers (and humans using a screen reader) what the image is.

This tag has become much more complicated, we'll keep to the basics.

I Guess It's Time To Talk About Styling

HTML, especially in newest version, is all about separation of content and styling.

We're only making the outline right now - we can make the outline look like anything we want later!

HTML provides the semantic skeleton for CSS to style and JavaScript to interact with.

So don't worry about it until next week.

Adding Current Job Description


<!DOCTYPE html>
<html>
	<head>
		<title>About Me</title>
	</head>
	<body>
		<h1>[YOUR NAME]</h1>
		<p>I work at <a href="http://firmidable.com">Firmidable</a></p>
		<p><img src="img/me.jpg" alt="[YOUR NAME]"></p>
		<p>[A ONE-PARAGRAPH DESCRIPTION OF YOUR JOB]</p>
	</body>
</html>

Before the /body tag, we'll insert a paragraph with a short job description.

Updated Outline Format for "About Me"

[YOUR NAME]
1. I work at Firmidable
2. (This is an image of me)
3. Job Description

So we've added some items, but are they really in the right hierarchy?

I'd say "No." We need another section: My Job.

Structuring the Current Job Description


	<body>
		<h1>[YOUR NAME]</h1>
		<p>I work at <a href="http://firmidable.com">Firmidable</a></p>
		<p><img src="img/me.jpg" alt="[YOUR NAME]"></p>
		<section>
			<h2>My Job</h2>
			<p>[A ONE-PARAGRAPH DESCRIPTION OF YOUR JOB]</p>
		</section>
	</body>

We'll create a new section tag, for which the h2 tag becomes a heading.

Note that we use a TAB to keep everything visually organized in the code

Adding Past Jobs


		<section>
			<h2>My Job</h2>
			<p>[A ONE-PARAGRAPH DESCRIPTION OF YOUR JOB]</p>
			<h3>Past Experience</h3>
			<ul>
				<li>[PAST JOB 1]</li>
				<li>[PAST JOB 2]</li>
				<li>[PAST JOB 3]</li>
			</ul>
		</section>

Inside that section, we add another subheading, an h3 for Past Experience.

We create an "unordered list" with a ul tag. We fill that list with "list items" using li tags.

Almost-Final Outline Format for "About Me"

[YOUR NAME]
1. I work at Firmidable
2. (This is an image of me)
3. My Job
  1. Job Description
  2. Past Experience
    1. Past Job 1
    2. Past Job 2
    3. Past Job 3

So we have the basics! You made a super-simple online resume!

But there's one last thing: links to outside projects

Links to Outside Projects

I'm not going to let you just copy & paste!

You should make a section for outside projects that includes the following:

A new section tag
A new h2 that says "My Projects"
A "unordered list" using a ul tag.
An a tag with the href attribute pointing to a URL of your project.

FTP & HTML Basics

Firmidable Website Training

You Can Do It!!!