VictoriaVasys/html_css_basics.md

## html_css_basics.md

      
    Raw
  

              html_css_basics.md
            
          
    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

With a partner

See if you can create the basic layout for the site you wireframed.


Other CSS Wizardry


Pseudo-Classes


:hover
:nth-child(2)
:nth-of-type(2)


Spaces, Commas, and Dots


Period With No Space: Apply to elements that have both selectors.
Comma: Apply elements that have either selector.
Space: Child elements.
>: Direct children.


Additional Wireframes

With the time remaining:

See if you can implement two more high level wireframes.
If you have time remaining, play with pseudo-classes and relative selectors.