jk1dd/html_and_css_basics.md

## html_and_css_basics.md

      
    Raw
  

              html_and_css_basics.md
            
          
    HTML

HTML stands for Hypertext Markup Language. It is like the scaffolding of a web page, in that it gives structure. HTML uses lots of tags, most of which must be closed, to label the pieces and allow the browser to render it.

HTML Skeleton

<!DOCTYPE html>
<html>
  <head>
  </head>

  <body>
  </body>
</html>

doctype denotes that this is an html document
html tag is the root element
head element contains meta data (not displayed on the page)
body element has all the stuff that is displayed


<head></head>

<title>Some Title</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
head tags contain meta information about the document - in this case, the title (which displays on the tab in chrome, for instance), and the link to the stylesheet stored separately

<body></body>

<h1></h1>
<p></p>
<img src="img/image1.png">
<a href="http://www.google.com">Google</a>
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
</ul>
body contains all the visible page content.

heading 1 - denotes meaning
paragraph - paragraph of text
img is an image. self closing
a is an anchor, clickable
ul is unordered list
li is list item


Semantic Tags

<header>
<nav>
<main>
<footer>
<article>
<aside>
<section>
Semantic tags clearly define meaning, both to the browser and the developer.

Non-Semantic Tags

<div>
<span>
Non-semantic elements do not say anything about the content.

CSS

CSS stands for Cascading Style Sheets. This allows for styling to be separate from the HTML it applies to - one could have mulitple pages refer to the same CSS stylesheet. CSS can also be used inline for an HTML element, or internally with the <style> tag in the <head> section.

Selectors

p {
  background-color: #00F;
  color: #FFF;
}
Selectors select the element to apply the style to. The above would apply the properties and values (property:value) in the curly braces to all paragraph elements.

Class Selectors

.some-class {
  background-color: orange;
}
Class selectors apply the style to a certain class (which can be assigned to multiple different elements), denoted by the '.' at the beginning. could also call p.some-class to only select paragraphs with the some-class class. More specific than type selectors.

ID Selectors

#some-id {
  background-color: purple;
}
Uses id attribute of specific HTML element to select specific element. Should be unique within a page.

Box Model

All HTML elements are boxes - margins, borders, padding, content. Box sizing allows one to indicate what the sizing properties include. Otherwise, it is just the content (not accounting for the other three pieces, which add to the width and height.)

content - the text and/or image(s)
padding - transparent area around content
border - around padding and content
margin - clears an area outside the border


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.

The display property dictates how/if an element is displayed. Most elements default to block or inline. None makes them disappear (common with JavaScript). They can be over-ridden with the display property in css.
https://www.w3schools.com/css/css_display_visibility.asp

Floats

h1 {
  display: inline-block;
  padding: 20px;
  float: left;
}

.buttons {
  float: right;
}
Floats - a positioning property, elements remain a part of the page flow (versus absolute positioned elements). Can be left, right, none (won't float), or inherit (from parent).
Clear property moves the element past down below the float (good for keeping a floated footer at the bottom of the page, for example). Both, left, right are used. None used rarely.
https://css-tricks.com/all-about-floats/

Clearfix

.clearfix:after {
  content: ' ';
  display: table;
  clear: both;
}
Apply the clearfix to the the element, using the CSS pseudo-selector :after, adding a small bit of content after the parent, and clearing the float.
https://css-tricks.com/all-about-floats/#article-header-id-4

Detour: Lorem Ipsum


Hipster
Bacon
Beer
Seinfeld
Ulysses

Generate random placeholder text, in a more entertaining way than the traditional Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

Wireframing is a visual schematic or mock-up for a page.

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)

Defines special state of an element. :hover shows when the mouse is over the link. :nth-child(2) Selects every <p> element that is the second child of its parent. :nth-of-type(2) selects every <p> element that is the second <p> element of its parent. Allows one to select where to apply style with more finesse.

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.