Front End Web Development

Spark Boulder, Summer 2017

Session 1: The Motion Picture

Hosting your site on Site44, HTML tags

More dumb fun web stuff

http://jenniferdewalt.com/

Projects!

Over the course of the next 10 weeks, I'm going to have you complete 4 different projects.

You can present your project to the class, if you want! Definitely not required.

Just like all of the other assignments, these aren't formally "due" anytime.

These projects won't be formally graded at all, but they'll be included in your "report card" at the end of the class. They're also really cool to show off to potential clients and employers!

Assignment 4, Project 1: Portfolio Site

For your first project, I'd like you to create a simple portfolio site. Nothing too fancy!

You can put whatever you'd like on it! You can include things like:

Really, anything you want! I'm not "grading" these. You can submit them whenever you want.

If you'd like to see a couple examples of other portfolios, you can check them out on the readings for session 4. Some of these are pretty advanced! I just want you to create something simple that you're comfortable with.

A couple things:

Tonight, on Front End Web Development...

Hosting our site on Site44

If you don't already have Dropbox on your computer, go install that first!

This whole flow may look slightly different when you sign up for the first time - at some point in the process Site44 will ask to access your Dropbox, and you should allow it access.

<html>
    <body>
        <h1>Hello, World!</h1>
    </body>
</html>

Multiple pages on the same site, and why index.html is special

You can have multiple pages on the same site, but you have to specify which file you want in the URL.

For example, you can have an about.html page, but then you'll need to go to http://notajetski.site44.com/about.html instead of just http://notajetski.site44.com/.

Or, contact.html -> http://notajetski.site44.com/contact.html

index.html

Way back in the dark beginnings of the internet, you would connect to a web server (a site) and browse all of the files that they had.

You needed to know what files there were on the server, so by default, the server sent back a file index.html which contained a list of all of the files on the server.

Because it was basically default to want the index.html when you connected to a server, servers started sending index.html when the client didn't request a specific file.

This means that both of these URLs:

will serve the exact same file (index.html).

Debugging your site: Chrome's Developer tools

Firefox and Safari both have their own versions of this - they might look a little bit different, but you should be able to accomplish the same things.

There's a couple ways to access developer tools:

  1. Hamburger Menu > Other Tools > Developer Tools
  2. View > Developer > Developer Tools
  3. ⌘-opt-I (or ctrl-opt-I if you're on a PC)

Poke around with the developer tools, see what's there! There's a lot of interesting stuff, like the page "source" (the code behind the page), tools to track web requests and CPU usage, and a console for JavaScript.

Inspecting elements

There's a couple ways to inspect an element:

  1. Right-click an element on the page > Inspect
  2. Click the upper-left button in the Developer tools pane
  3. ⌘-shift-C (or ctrl-shift-C if you're on a PC)

Once you've selected an element, check out the "Styles" pane inside of Developer tools, and see what's going on there.

HTML tags

We already learned that we can use HTML tags to create HTML elements, and we need both an opening and closing tag for each HTML element.

Remember: HTML elements can be nested! You can put HTML elements inside of other HTML elements.

Paragraph HTML tags

We saw paragraph tags last time. They're literally what they sound like - just an easy way to separate out a couple of paragraphs of content.

<p>
    Lose yourself to dance digital love nightvision, phœnix. Alive, veridis quo voyager. Motherboard, face to face, technologic giorgio by moroder, too long. Fragments of time. Harder, better, faster, stronger, within daftendirekt, da funk rock'n roll on/off. Make love high life human after all. Television rules the nation fragments of time.
</p>
<p>
    Beyond steam machine daftendirekt, human after all, rock'n roll, within get lucky. Veridis quo robot rock, contact WDPK 83.7 FM indo silver club one more time. Contact. Make love. Steam machine superheroes. One more time around the world burnin' da funk. Lose yourself to dance robot rock, high life. Get lucky.
</p>
<p>
    Rock'n roll nightvision lose yourself to dance technologic. Lose yourself to dance crescendolls digital love giorgio by moroder veridis quo high fidelity lose yourself to dance rock'n roll superheroes motherboard touch touch, beyond. Nightvision the prime time of your life da funk. Homework. Emotion rollin' and scratchin', da funk motherboard.
</p>

Heading HTML tags

We also saw an h1 "Heading" element last time. Headings are a good way to provide "titles" for different sections of a page.

You can have headings of different levels of importance, from h1 (most important) to h6 (least important).

<h1>Around the World</h1>
<h2>Around the World</h2>
<h3>Around the World</h3>
<h4>Around the World</h4>
<h5>Around the World</h5>
<h6>Around the World</h6>

List HTML tags

We can put lists of elements on the page, in a numbered (ordered) and bullet point (unordered) format.

First, you need to decide if you want an ordered (<ol>) or unordered (<ul>) list. Then, you put some list items (<li>) inside of the list tags.

<h1>How to be a web developer</h1>
<ol>
    <li>Look stuff up on the internet</li>
    <li>Make stuff</li>
    <li>Repeat</li>
</ol>

<h1>Ken's shopping list</h1>
<ul>
    <li>Milk</li>
    <li>Eggs</li>
    <li>Absurd amounts of peanut butter</li>
</ul>

Strong and emphasis HTML tags

<p>
    Never accept the world as it <em>appears</em> to be.
    Dare to see it for what it <strong>could</strong> be.
</p>

Notice the difference in whitespace here.

Anchor tags

Anchor tags are basically just links.

Why are they called anchor tags? Sounds like they were originally intended to link between different sections of a page (we'll do that next session) but then Tim Berners-Lee came up with the "teleporter" concept.

Put anchor tags in everything! Everywhere!

Use the href attribute to tell where the anchor tag to link to. (we'll talk more about attributes next session)

The href attribute can link to other pages in the same folder, or to other pages on the internet.

<a href="syllabus.html">back to syllabus</a>
<p>
    You can have anchor tags <a href="https://en.wikipedia.org/wiki/HTML_element">only on specific parts</a> of a nested element.
</p>

In general, put anchor tags inside other tags. One exception is image tags, which we'll demonstrate in just a bit.

Did you know: when designing the Internet, anchor tags were supposed to be "privileged" - they could only link to pages that gave permission to be linked to. They got the first part done (linking to external pages), then the internet blew up and they never got around to building the second part (making sure that external pages gave permission to be linked to)

(still need to find the source for that)

Image tags

    <img src="pugs/pug1.jpeg" />
    <img src="https://media.giphy.com/media/oSwcTWom8isyA/giphy.gif" />

Note that image tags typically don't include a closing tag!

You can put a / at the end of any tag instead of a closing tag. That means that the element has no content, and it's typically called a self-closing tag.

Combination image and anchor tags

<a href="https://media.giphy.com/media/daUOBsa1OztxC/giphy.gif">
    <img src="https://media.giphy.com/media/daUOBsa1OztxC/giphy.gif" />
</a>

This is one of those situations where you'd put another tag inside the anchor tag, instead of some text.

Division tags

If you want to have a bunch of elements nested together, you might want to use a division tag. This is handy for making a bunch of tags into a single link, or especially for styling. More on that when we get to CSS!

<a href="projects.html">
    <div>
        <h1>Projects</h1>
        <p>
            I've done a lot of projects and stuff! No matter if you click on the heading or the paragraph, you'll get taken to the same place.
        </p>
    </div>
</a>

Forms and Buttons

There's a whole group of tags focused on helping the user interact with the page - <form>, <input>, <select>, <option>, and more - they can be styled and manipulated just like any other elements.

Forms usually interact with a "Back End" - user adding email address to a mailing list, or changing some profile information.

When we build our Coin Flipping App, we'll run some JavaScript to change the page whenever a <button> is clicked.

When we build our Social Network Frontend app, we'll run some JavaScript to communicate with a server whenever someone wants to create a new post.

Conceptually, it makes more sense for us to cover this in the second half of the course, when we talk about JavaScript, listening for user interaction, and communicating with a server.

The title tag

See that little text on the browser tab? That's the page's "title".

We can change that with the <title> tag.

<title>Ken's Super Duper Awesome Portfolio Site</title>

It's important to note that the title isn't actually rendered anywhere on the page - just on that little tab text at the top.

You can put the title tag wherever you'd like on your page, but I'd recommend putting it inside of your <head> tag. More on that in just a bit.

The html tag

Technically, all of your tags on your page should be wrapped in a single <html> element.

This just lets browsers know that the page should be rendered as HTML.

<html>
    <p>
        Hey look! A valid HTML document using the html tag. This won't look any different than if you left out the html tag.
    </p>
</html>

If the browser is pretty confident that your file is an HTML file (if it has a .html extension, if it has a bunch of HTML tags in it), then the browser will usually automatically add the <html> tag for you.

head and body tags

Directly inside the <html> tag, you should have a <head> tag and a <body> tag.

Put all the content that is going to be displayed on the page inside the <body> tag. This includes headings, paragraphs, images, links, etc.

Put all the content that doesn't get directly displayed on the page inside the <head> tag. This includes our <title> tag, and in the future will contain links to stylesheets (CSS) and scripts (JavaScript).

<html>
    <head>
        <title>my page title goes here!</title>
    </head>
    <body>
        <h1>my page content goes here!</h1>
    </body>
</html>

That one weird tag that makes everything look better on mobile

<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <h1>This heading's size looks different on your mobile device, depending on if you've included that tag at the top or not.</h1>
    </body>
</html>

(try opening your page on your phone, and then adding/removing that <meta> tag)

HTML Tables

HTML tables are kind of a pain. Wrap everything in a <table>, define rows using <tr>, and individual cell data with <td>. You can use <th> instead of <td> to denote a heading cell.

Don't use tables to lay out your site! That's so 1996. We'll do page layout once we get to CSS.

<html>
    <body>
        <h1>Places Ken Has Lived</h1>
        <table>
            <tr>
                <th>
                    Year
                </th>
                <th>
                    City
                </th>
                <th>
                    State
                </th>
            </tr>
            <tr>
                <td>
                    2016-present
                </td>
                <td>
                    Boulder
                </td>
                <td>
                    Colorado
                </td>
            </tr>
            <tr>
                <td>
                    2014-2015
                </td>
                <td>
                    Seattle
                </td>
                <td>
                    Washington
                </td>
            </tr>
            <tr>
                <td>
                    2007-2013
                </td>
                <td>
                    Boulder
                </td>
                <td>
                    Colorado
                </td>
            </tr>
        </table>
    </body>
</html>

What questions are there?

Stuff for tonight:

How to be a Web Developer

Excelsior! 🚀

Appendix

"File system" or "File structure"

Files and folders are represented as a tree on your computer.

"directory" == "folder"

/ - is the "root" of your file system. The absolute top-most directory of your hard drive

/Users/ken/Documents - a directory where I keep all my documents!

/Users - all the users on my computer

/Users/ken - all the things that I (ken) own (are there other users?)

/Users/ken/dev - where I keep all of my development-related directories

(for Windows or Linux, this will look a bit different)