Fundamentals of the internet

• The wires
• Montana
• Request / Response
• domain names / IPs
• The disappointing reality of the internet

Domain Anatomy

Front-end vs. Back-end

Learning Objectives: HTML

• Identify common HTML elements and write with correct
  syntax

• Assign attributes to elements

• Correctly indent content according to document
  hierarchy

• Recognize name and purpose of HTML5 semantic
  elements

• Build a basic static HTML webpage from scratch

html syntax

A tag is essentially an element or object that you will place on the page. These elements are represented by an opening tag and a closing tag.

NEsted elements

Elements can be nested inside of one another... We use indentation to visually communicate this nested hierarchy.

Page Structure

The main components of every HTML document...

Page elements

MALFORMED HTML LAB

10 MINUTES

In the ugly/ directory in the class starter files

1. Open the index.html file
2. Identify the mistakes
   1. Leverage our text editors to help you find the errors

Creating a Resume in html

30 MINUTES

1. In a new directory/folder, create a new index.html
2. Using the tags we have covered so far, create - to the best of your ability - a copy of your resume

Learning Objectives: css

• Link external stylesheets to your web page.

• Use CSS selectors to target elements for styling.

• Style basic CSS properties of an element.

• Set the box model properties to control the size of
  elements.

• CSS Lab!

css: What is it?

Css syntax

applying Css

We have three ways of applying CSS to our HTML elements

• internal stylesheet
• external stylesheet
• inline

• Let's apply some styles together in these various ways.
• Now you try.

Css selectors

css specificity

css cascade vs. specificity

css Combinators

css short-hand properties vs. explicit

The Box Model

Margin vs. padding

css lab

15 - 30 MINUTES

Using your resume .html file, experiment with the CSS properties we have covered thus far:

1. Use at least 1 ID & 4 classes
2. Combine selectors by using both the element tag name and the class name to achieve greater specificity

Learning Objectives: CSS part 2

• Project Setup from scratch

• Display Types

• Positioning

• Floats and clear

Together, let's:

1. Create a project folder on our Desktop
2. In Sublime / Atom, open that folder
3. Create an index.html file and a main.css file from within Sublime
4. Create the basic structure of an html document

display types

The CSS display property has three main options, and it's important to know how those options alter the orientation and the flow of elements on the page.

positioning

Positioning is intended to move an element outside it's normal flow on the page, whether that flow is inline, block, or inline-block.

positioning

positioning

positioning

Floats & clear

Floats were created as a way for us to impose behavior on page elements that fall outside of the normal flow. By applying floats, we alter the normal flow of the document...

...an alteration that we need to restore to the document after we done floating elements. If we don't 'clear' a float - our page will behave in perplexing, unexpected ways.

floats & clear