Developer Tools en navegador I

Clase 10 de 67 • Curso de HTML5 y CSS3 2015

Ricardo Garrido Cruz

student•

Hola a todos, les dejo este tip por si les sucede lo mismo que a mi al momento de mandar llamar la imagen, ya que me fastidio el día y me hizo perder mucho tiempo.

Puse la imagen en la carpeta de assets pero se me ocurrio crear una carpeta de llamada "css" dentro de assets. cuando yo mandaba llamar la imagen en el archivo .CSS hacía esto:

.home {

background-image: url('assets/bg.jpg');
}

Cuando yo lo que debía hacer era esto:
.home {

background-image: url('../bg.jpg');
}

El código lo que hace es retroceder un nivel de carpeta porque es ahi donde se encuentra tu imagen, ya que mi CSS está en la carpeta 'assets/css/style.css' .

Espero les ayude esto por si les llega a pasar.

Julián Andrés Uribe Gonzalez

student•

eres el puto amo! si no fuera por ti hubiera perdido mucho tiempo, gracias por compartir

Harrison mora barón

student•

me sirviò mucho, gracias

Rocio Guadalupe Moreno Muro

student•

Tu manera de explicar es música para los oidos! Felicitaciones!

Irvin Chan

student•

amo su voz jajaja

Roger Carlos Ariel Alba

student•

cuando querramos agregar una imagen de background unas propiedades que vale la pena usar según el ejemplo son:

Posición vertical y horizontal: background-position: center center;
Si queremos que se repita o no: background-repeat: no-repeat;
El tamañno del fondo: background-size: cover;

pueden explorar las opciones.

Jenny Alvarado

student•

El sublime text , no tiene las mismas opciones para ver al lado derecho los tags.No tiene el ,mismo menu. Eso no me permite manejar la misma informacion d e la profesora.

Edgardo T

student•

Si lo tiene, solo debes activar la vista lateral, revisa las opciones de sublime.

Aldo Sáez Jofré

student•

Sublime si lo tiene. Puedes mostrar/ocultar la barra lateral de proyectos con Ctrl + K + B en Windows y con cmd + K + B en Mac. Recuerda que solo funciona cuando tienes un proyecto (carpeta) ya agregado en Sublime. Para agregar proyectos en Sublime sería Project-> Add folder to project.
Saludos!

Carmen de la Vara

student•

Es genial este curso, el mejor de Platzi sin duda. Me encanta como explicas Marcela, un 10!!

Miguel Mendoza Molina

student•

Nav : Navegacion
ul: Lista sin numeracion
li : item dentro de la lista

Jhon Carlos Colorado Angulo

student•

Ok pero en el height de la clase home cuando se refiere al 100% no se está refiriendo a la pantalla del navegador si no más bien al alto de la imagen.

Les propongo que hagan prueba con otro valor aun teniendo el reset.css ya que no tiene nada que ver como dice la profesora.

Federico Guzmán

student•

No, el porcentaje se refiere al elemento padre que contiene al elemento que estás manipulando. La altura del elemento no tiene nada que ver con la imagen que estás definiendo como fondo.

Luis Manuel Sanchez Torres

student•

si quieres que la imagen de fondo abarque el 100% de tu pantalla debes hacerlo con viewport
solo agrega esto en tu archivo css
height:100vh; que vh significa viewport height, no importa en que dispositivo lo veas siempre abarcara el 100%

Diego Hernández Ramírez

student•

Amo tu forma de explicar. ¡Te entiendo todo! :)

Erick Neftalí Sarmiento Cortes

student•

La manera en que lo explican es increíble, muchas gracias, entendiendo perfectamente y con muchas ganas de seguir adelante.

Omar Alejandro Torres

student•

Hola...este código no funciona:
html, body {
color:#282828;
heigth: 100%;
}

El dato heigth: 100%; da el error "Unknow property name"...¿alguien sabe cómo solucionarlo?

Hugo Rafael Rafael

student•

omaralejandrotorres si lo tienes tal cual escrito como mencionas escribiste "heigth" y debes de escribirlo "height"

Pamela Freyre

student•

La propiedad "display" afecta la forma en que se muestran los elementos.

Carlos Lizarazo

student•

Los punto y coma se usan tal cual como en Java

Carlos Lizarazo

student•

Aprender CSS nunca fue tan facil, todo excelente hasta ahora :)

Felipe Santana

student•

Sí se desea una lista ordenada *numerada* la etiqueta es

<ol> <li>Un elemento</li> <li>Un elemento</li> </ol>

//dara como resultado:

Un elemento
Un elemento

Vale la pena experimentar, tambien este tipo de lista ;)

Yeraldin Acevedo Acevedo

student•

bonito y facil ! = )

Iñaki Retegi

student•

Cuando se pone en css:

html, body {
color: #282828;
{

¿a qué afecta, a todos los textos de body, es decir a todos los textos de la web?

Iñaki Retegi

student•

¿y si en vez de poner "html,body", pones solo "body"?

Jonattan Infante

student•

Yo solo lo aplico al html y los estilos se aplican a toda la pagina. Si pones body sucedera lo mis, como el <head> no es visible al usuario entonces no hay diferencia.

Ricardo Arratia Joglar

student•

¿alguien sabe cómo hacer que firebug funciones con archivos locales, para seguir la clase?

Joel Buenrostro

student•

Todo muy bien hasta ahora!!!!

Maria Fernanda Ramírez Sánchez

student•

Dónde puedo encontrar un diccionario o lista de etiquetas en CSS?

Developer Tools en navegador I

Bienvenidos

Materiales

Descarga el código del proyecto

Introducción a HTML5 y CSS3

Preguntas antes de la clase

Diferencias entre Backend y Front-end

¿Qué es un Frontend?

¿Qué es HTML y CSS?

Semántica en HTML5

Metodología BEM

Introducción a CSS I

Introducción a CSS II