Skip to content

Instantly share code, notes, and snippets.

@mariastenquist
Last active March 14, 2017 14:14
Show Gist options
  • Save mariastenquist/d334bbde085e61fb63d65415c295ddc9 to your computer and use it in GitHub Desktop.
Save mariastenquist/d334bbde085e61fb63d65415c295ddc9 to your computer and use it in GitHub Desktop.

###HTML Skeleton Consists of the set of tags required for an HTML file.

-- declaration of the type of HTML (e.g. HTML5)

< html > --root element of an HTML page < head > contains meta tags of the document. Not visible to user < /head >

< body > where visible content lives. This is viewable to the user/displayed on a browser < /body > < /html > --closes the document

Head Element < head > < /head >

meta information goes between the open/closing tags of the element name head

Body Element < body > < /body >

between the tags represents the content of an HTML document. Only one element can be used in a document.

###Semantic Tags Semantic Tags: elements with meaning. Semantic elements clearly describe the meaning of the element, both to the browser and the programmer. Examples: < form >, < table >, and < article > these define the content they contain.

###Non-Semantic Tags

Non-descriptive elements < div > and < span > - Tells nothing about its content.

###CSS

Cascading Style Sheets: A style sheet language used to describe the presentation of a markup language document. File extension: .css Media type: text/css Used most often to create visual style of web pages/UI written in HTML, CSS can be used in any XML document and can be rendered in speech or other media. CSS is used to enable the separation of document content and document presentation. This allows for the same markup page to be presented in different styles for different rendering methods (web/mobile/print/braille)

###Selectors

Patterns which are used to select element(s) you want to style.

###Class Selectors A type of basic selector which chooses elements based on the value of their class attribute E.g. .classname will match any element that has a class .classname

###ID Selectors Chooses nodes based on the value of its id attribute. There should only be one element with a specific ID in an HTML document

###Box Model

HTML elements can be looked at as boxes. The CSS box model refers to design/layout. Surrounding each HTML element, there is an imaginary box that wraps around the element. The sections include: margin, border, padding, and content (in order from the outside inward). The box model allows us to define space between elements and define borders around elements.

###Display Property

One of CSS's most important property for managing layout. There is a default display value for each type of element. For most elements the defaulty is usually block or inline. A block element is also called a block-level element. Inline elements: called inline elements. A div is the standard block-level element. Span is the standard inline element. None: is another common display value.

###Floats

A CSS positioning property. Specifies that an element should be taken from it's default and placed along either left/right side of the container it is located in. Float can be used to wrap text around images.

###Clearfix

A way for an element to auto clear its child elements. Its usage is generally for float layouts, where clearfix can combat the zero-height container problem for floated elements.

###Detour: Lorem Ipsum

"Lorem ipsum dolor sit amet consectetuer" is just jumbled/nonsense Latin. It does have a long history, and has been used by typographers to show distinctive features of fonts. It became a standard for 'dummy text' in the printing industry, and has been continued to use as dummy/fake text in styling webpages. Developers use lorem ipsum as filler text! There are many lorem ipsum generators online, spanning a wide variety of topics. Cupcake ipsum and bacon ipsum are two fun sites. http://www.cupcakeipsum.com/, https://baconipsum.com/

###Wireframing

An important step in designing the layout of a web page/web application. It's like a blueprint for your site. It allows you to define information in a hierarchy, or a series of priorties in placement. Also, wireframing can be important for the user interface, and organizing calls to action you want the user to process through.

###Pseudo-Classes A keyword that is added after a selector to denote a specific 'state' the element holds. e.g: a:hover will apply a style when the user hovers over the link.

@mariastenquist
Copy link
Author

screen shot 2017-03-13 at 2 51 47 pm

@Carmer
Copy link

Carmer commented Mar 14, 2017

I would suggest going through some examples of selectors and making sure you know what they all do, especially with spaces, commas, and dots.

Good work here. I like your explanations.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment