CSS z-index

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed)

The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.

Advertisements

CSS Layout Notes

From the following resources:

inline-block

  • elements are affected by the vertical-align property, which you probably want set to top.

position

  • A static element is said to be not positioned and an element with its position set to anything else is said to be positioned.
  • relative behaves the same as static unless you add some extra properties.
    • Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be adjusted away from its normal position.
    • Creates a coordinate system for child elements
    • When you use the offset property to shift a relatively positioned element, it doesn’t affect the element(s) that follow. Other content will not be adjusted to fit into any gap left by the element.
  • A fixed element is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.
    • An element with position: fixed shares all the rules of an absolutely positioned element, except that the viewport (browser/device window) positions the fixed element, as opposed to any parent element. Additionally, a fixed element does not scroll with the document
    • As with relative, the top, right, bottom, and left properties are used.
    • A fixed element does not leave a gap in the page where it would normally have been located.
  • absolute behaves like fixed except relative to the nearest positioned ancestor instead of relative to the viewport.
    • Think of it as an element with a giant strip of velcro on its back
    • Unlike the static and relative values, an absolutely positioned element is removed from the normal flow
    • absolute elements create a new coordinate system for child elements
    • If an absolutely-positioned element has no positioned ancestors, it uses the document body, and still moves along with page scrolling

box-sizing : border-box

  • When you set box-sizing: border-box; on an element, the padding and border of that element no longer increase its width.

max-width

  • Using max-width instead of width in this situation will improve the browser’s handling of small windows. This is important when making a site usable on mobile.

width

  • Setting the width of a block-level element will prevent it from stretching out to the edges of its container to the left and right.

 margin : auto

  • you can set the left and right margins to auto to horizontally center that element within its container.

display

  • display is CSS’s most important property for controlling layout.
    • inline vs. block
      • The a element is the most common inline element, since you use them for links.
    • A common display value is none. Some specialized elements such as script use this as their default. It is commonly used with JavaScript to hide and show elements without really deleting and recreating them.

meta viewport

  • Using the meta viewport value width=device-width instructs the page to match the screen’s width in device independent pixels.

Responsive design

  • Create breakpoints based on content, never on specific devices, products or brands.
  • Design for the smallest mobile device first, then progressively enhance the experience as more screen real estate becomes available

Float

  • For example, if you assign float: left to an element, it will move to the left-most boundary of its parent element.
  • The value none is the default value and tells an element not to float at all.
  • The inherit value tells an element to inherit the float value of its parent element.

Self-study and learning environments

From Jesse Farmer’s Quora answer: http://www.quora.com/Are-programming-boot-camps-a-better-way-to-learn-programming-instead-of-self-study

“..If you’re studying on your own, I think it’s critical that you find at least one expert mentor/coach/teacher who can give you semi-regular feedback on your work. 

I see things like Lynda, Codecademy, Udacity, etc. as the internet’s version of a public library card — amazing and unquestionably valuable, but not comparable to having a peer, mentor, or teacher who is vested in your learning.  I believe very firmly that the most important factor in student learning is frequent, high-quality feedback from an expert-teacher.  In other words, who you’re learning with matters a lot more than how you’re learning and how you’re learning matters a lot more than what you’re learning

Self-Study and Unconscious Incompetence 

One thing I’ve found about students who learn on their own is that they can be stuck in a state of unconscious incompetence for a very long time.  It wasn’t until I had been learning on my own for several years that I was able to look back and see how hopelessly confused I was for months and months on end.  Make sure you’re constantly asking yourself, “Do I really, truly believe I understand this?  How can I put that belief to the test?”

Paul Tough on “Who Gets to Graduate?”

Another important education feature by Paul Tough:

“More than 40 percent of American students who start at four-year colleges haven’t earned a degree after six years. If you include community-college students in the tabulation, the dropout rate is more than half, worse than any other country except Hungary.”

http://www.nytimes.com/2014/05/18/magazine/who-gets-to-graduate.html?_r=0

Anonymous (i.e. Self-invoking) Functions

Notes from:  https://teaching.cs.uml.edu/~heines/91.461/resources/SlideSharePresentations/JavaScriptPatterns-SelfInvocation.pdf

 

Definition:  Functions that execute immediately when they’re defined.

Purpose: To create scope. In JavaScript, only functions have scope. Any time variables are defined outside of a function, they are carelessly dumped into the global object.

Implementation:

function () {
var foo = ‘Hello’;
var bar = “world”;
var baz = [foo, bar];
alert(baz.join(‘, ‘));
} ();

Note: It it recommended that an extra set of parentheses wrap the function definition as well so to provide a visual clue to the developer that the function isn’t a normal function, as follows:

(function () {
var foo = ‘Hello’;
var bar = “world”;
var baz = [foo, bar];
alert(baz.join(‘, ‘));
})();

Passing parameters: If a self-invoking function requires parameters, they can be passed just like in a regular function.
The following example applies an “negative” class on every input element who’s numeric value is below 0.

(function (elements) {

for (var i = 0; i < elements.length; i++) {

if ((elements[i].value * 1) < 0 {

elements[i].className = ‘negative’;

}

};

})(document.getElementsByTagName (‘input’));

Scope

Even though the function is executing in its local scope, the ‘this’ keyword still refers to the global object.

The following uses Function.call() method to execute a self-invoking function within the scope of the first table element on the page.

(function (elements) {

for (var i = 5; i < this.rows.length; i++ {

this.rows[i].className = ‘hide’;

}

}).call(document.getElementsByTagName(‘table’)[0]);