Skip to content

Latest commit

 

History

History
151 lines (120 loc) · 6.65 KB

week2.md

File metadata and controls

151 lines (120 loc) · 6.65 KB
Raw

Full Stack Web Development Bootcamp @Otoño2017

~ 20170925

HTML

  • Block-level vs. inline elements: [enlace]
    • Un elemento de tipo block-level siempre empieza en una nueva linea y toma todo el ancho disponible (se agranda hasta la izquierda y derecha tanto como puede). P.e.:
    <div>
<h1>
<p>
<ul>
<ol>
<li>
...
    • Un elemento inline no empieza en una linea nueva y sólo toma el ancho que necesita. P.e:
    <span>
<a>
<em>
<strong>
<small>
<img>
<input>
...
  • Semantic tags: [enlace] 
    <header>
<nav>
<section>
<article>
<aside>
<hgroup>
<footer>
<address>
  • Decidir entre article, section, o div:

A veces resulta bastante difícil decidir qué elemento - artículo, sección o div - es el mejor elemento para el trabajo basado en su significado semántico. El truco aquí, como con cada decisión semántica, es mirar el contenido.

Los elementos article y section contribuyen a la estructura de un documento y ayudan a delinear un documento. Si el contenido se agrupa únicamente con fines de estilo y no proporciona valor al esquema de un documento, utilice el elemento div.

Si el contenido se agrega al esquema del documento y puede redistribuirse o sindicarse de forma independiente, utilice el elemento article>.

Si el contenido se agrega al esquema del documento y representa un grupo temático de contenido, utilice el elemento section.

  • Aside:

El elemento aside contiene contenido, como barras laterales, inserciones o breves explicaciones, que está tangencialmente relacionado con el contenido que lo rodea. Cuando se utiliza dentro de un elemento article, por ejemplo, el elemento aside puede identificar el contenido relacionado con el autor del artículo.

Podemos instintivamente pensar en un elemento aside como un elemento que aparece a la izquierda o a la derecha de una página. No obstante, debemos recordar que todos los elementos estructurales, incluido el elemento aside, son elementos a nivel de bloque y, como tales, aparecerán en una nueva línea, ocupando el ancho total disponible de la página o del elemento que son anidados dentro, también conocido como su elemento padre.

~ 20170926

CSS

  • Specifity ~ prioridad en la selección: inline styles, selector por id, selector por clase, selector por atributo, por pseudo-clase, por elemento y pseudo-elemento. enlace

    • Selector por id > selector por clase > selector por atributo.
    • Para la misma prioridad, el último tiene mayor prioridad. En este caso será rojo: 
      .class1 { color: black; }
.class2 { color: red; }
    • Para tener prioridad sobre todo, usar !important.

  • Type selectors: div, class selectors: .awesome, id selectors: #shayhowe.

  • Selectors:

  • Shorthand properties: enlace.

  • Units: enlace.

    • Relativos: em, ex, ch, rem, vw, vh, vmin, vmax, %.
    • Absolutos: cm, mm, in, px, pt, pc.

  • Box model:

    • width, height, padding, margin, border.
    • box-sizing: content-box | border-box | initial | inherit;
      La propiedad de box-sizing se utiliza para alterar el modelo de caja CSS predeterminado utilizado para calcular el ancho y la altura de los elementos.

  • Position: enlace, gráfico

    • position: static ~ por defecto todos...
    • position: relative ~ respecto su posición natural.
    • position: fixed ~ relativo al viewport.
    • position: absolute ~ relativo al elemento posicionado padre (cuyo position != static).
    • position: sticky ~ relativo a la posición del scroll.
    • float: right | left; enlace
      Elementos después de un elemento float flotarán alrededor de él. Para evitar esto, utilizar la propiedad clear.

  • Tricks:

  • Media querys:

    /* default styles here for older browsers.
   I tend to go for a 600px - 960px width max but using percentages
*/
@media only screen and (min-width:960px){
  /* styles for browsers larger than 960px; */
}
@media only screen and (min-width:1440px){
  /* styles for browsers larger than 1440px; */
}
@media only screen and (min-width:2000px){
  /* for sumo sized (mac) screens */
}
@media only screen and (max-device-width:480px){
  /* styles for mobile browsers smaller than 480px; (iPhone) */
}
@media only screen and (device-width:768px){
  /* default iPad screens */
}
/* different techniques for iPad screening */
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

  • CSS reset: cross-browser compatibility.

~ 20170927

  • Flexbox: La idea principal detrás de flex layout es dar al contenedor la capacidad de alterar sus artículos (anchura, altura y orden) para llenar mejor el espacio disponible. Un contenedor flex expande los elementos para llenar el espacio libre disponible o los encoge para evitar el desbordamiento. enlace cheatsheet

~20170928

SASS

  • extend (placeholders)
  • include (mixins)