HTML & CSS Basics

Warmup

What is the purpose of HTML? HTML provides a way to order and structure content on a webpage
What is the purpose of CSS? CSS allows you to style your content
What are some HTML tags you learned over break? Anything interesting?
What is the purpose of a class in CSS? an id? Class allows you to classify related elements into groups that can be styled together; id allows you to single-out unique elements
Any other interesting ways to select things using CSS?

HTML

Hypertext Markup Language

HTML Skeleton

The typical outline for a conventional, compatible site; includes doctype, html, head & body elements; all nested tags are indented.

<!DOCTYPE html> <!-- document type declaration; informs web browsers which version of HTML is being used and is placed at the very beginning of the HTML document; this is default for latest version (HTML5) -->
<html> <!-- signifies the beginning of the document -->
  <head> <!-- identifies the top of the document, including any metadata (accompanying information about the page); content is not displayed on the web page itself -->
  </head> <!-- closing head tag -->

  <body> <!-- opening body tag; all of the visible content within the web page -->
  </body> <!-- closing body tag -->
</html> <!-- closing html tag; indicates your html doc is finished -->

<title>Some Title</title> <!-- Document title- displayed on the title bar in browser  -->
<link rel="stylesheet" type="text/css" href="css/main.css"> <!-- links to external files; tells you the type & path -->

<h1></h1> <!-- heading rank 1; block-level element; helps break up content & establish hierarchy; aid search engines in indexing & determining content on page -->
<p></p> <!-- paragraph element; often support headings; add information -->
<img src="img/image1.png"> <!-- image element; allows you to display an image; src value is the path to the image -->
<a href="http://www.google.com">Google</a> <!-- anchor element; in-line; href attribute is a hyperlink reference & required in `a` elements; href value identifies path destination of link; text wrapped in `a` is what will display  -->
<ul> <!-- unordered list; list of related items whose order does not matter -->
  <li>Item 1</li> <!-- first list item (list item marker is a preceding dot by default) -->
  <li>Item 2</li> <!-- second list item -->
</ul> <!-- closing ul tag -->

Semantic Tags

Give meaning to page organization and improve structural semantics; all block-level elements; no implied position or style; may be used multiple times per page

<header> <!-- identifies the top of a page, article, section, or other segment of a page; may include a heading, introductory text, and navigation. -->
<nav> <!--  identifies a section of major navigational links; reserved for primary navigation sections (global navigation, a table of contents, previous/next links, etc.); most commonly link to other pages within the same website or to parts of the same page. -->
<main> <!-- represents the main content of  the <body>; content that is directly related to, or expands upon the central topic of a doc or the central functionality of an application. -->
<footer> <!-- identifies the closing or end of a page, article, section, or other segment of a page; found at bottom of parent; should be relative to its section -->
<article> <!-- identifies a section of independent, self-contained content that may be independently distributed or reused -->
<aside> <!-- holds content, such as sidebars, inserts, or brief explanations; tangentially related to the content surrounding it -->
<section> <!-- identifies a thematic grouping of content; usually includes a heading; commonly used to break up & provide hierarchy -->

Plus some others...

<hr> <!-- element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section -->

Non-Semantic Tags

Generic containers for styling purposes only (no overarching meaning or semantic value); give us the ability to apply targeted styles to a contained set of content

<div> <!-- block-level element commonly used to identify large groupings of content; helps to build a web page’s layout and design -->
<span> <!-- inline-level element commonly used to identify smaller groupings of text within a block-level element -->

CSS

Cascading Style Sheets

Selectors

p { /* selects all p elements */
  background-color: #00F; /* changes the background-color property value for all p-type elements */
  color: #FFF; /* changes font color property value for all p-type elements */
}

Class Selectors

.some-class { /* selects all elements that have the class attribute value "some-class" */
  background-color: orange; /* changes the property background-color to orange for all elements with class attribute value "some-class" */
}

ID Selectors

#some-id { /* selects a single element based on its id attribute value */
  background-color: purple; /* changes the background color for above to purple */
}

Box Model

^^ all elements have are rectangular boxes & may have width, height, padding, borders & margins; Total width is right (margin + border + padding) + width + left (margin + border + padding) Total height is similar

block-level elements are 100% width by default
inline & inline-block expand & contract horizontally to accommodate content
inline-level elements cannot have a fixed size
inline elements: margins only work horizontally; vertical padding may bleed into lines above and below Margin & padding properties have both long- and short-hand form;
same value on all four sides requires only one value, e.g. div { margin: 20px }
one value for top & bottom & one value for left & right requires two values e.g. div { margin: 10px 20px }
unique values on all four sides requires four specific values Shorthand values for the border property are stated in that order—width, style, color Border-radius accepts length units, including percentages and pixels, that identify the radius by which the corners of an element are to be rounded; single value rounds all four corners of an element equally; two values round the top-left/bottom-right and top-right/bottom-left corners in that order; four values will round the top-left, top-right, bottom-right, and bottom-left corners in that order.

Display Property

Block will take up as much horizontal space as possible.
Inline will allow text to wrap around an element.
- Accepts margin and padding.
- Will ignore width and height.
Inline-Block like inline, but will respect width and height.
None will hide an element.

Floats

The float property allows removal of an element from the normal flow of a page; positions it to the left or right of its parent element; all other elements flow around the floated element

h1 {
  display: inline-block;
  padding: 20px;
  float: left; /* left & right floats are most popular */
}

.buttons {
  float: right;
}

Clearfix

.clearfix:after { /* used when a floated element overflows its container; element can automatically clear its child elements; combats the zero-height container problem for floated elements */
  content: ' ';
  display: table;
  clear: both;
}

Detour: Lorem Ipsum

Hipster
Bacon
Beer
Seinfeld
Ulysses

Wireframing

With a partner

Think of a type of site (store, personal, news, review, blog).
Brainstorm content that would be displayed on the front page.
Create a wireframe for that site.

Code Along

Implement a simple wireframe.

Other examples available here.

Implement Your Wireframe