Fundamentos de HTML y CSS para Desarrolladores Frontend

Esta es la imagen que más se suele usar para describir qué es HTML, CSS y JavaScript 👇
.

.
Dejemos por ahora de lado a JavaScript y centrémonos en lo que nos importa 👀. Está bien representar a HTML como “el esqueleto” y a CSS como “la parte visual”, pero… ¿Realmente qué significa todo esto? 👇
.
Cuando hablamos de “esqueleto” nos referimos a que es la estructura de nuestro contenido. Es decir, es cualquier cosa que queramos poner en nuestra página web. Por ejemplo, imagina que quieres poner un botón… ¿Cómo lo haces? ¡Con HTML! Imagina que necesitas poner una caja de texto para que el usuario escriba, ¿cómo lo harías? 🤔… ¡Con HTML! ¿Y si quieres poner un título cómo lo harías?.. Tú sabes la respuesta 😉.
.
HTML nos permite poner dentro de nuestra página web cualquier cosa que queramos poner. Básicamente usar HTML es decirle al navegador: “oye quiero que pongas esto, esto y esto otro”, eso es todo 😄.
.
¿Y CSS? 🤔… Bueno, el navegador te pondrá los estilos por defecto. Con CSS puedes literalmente agarrar cualquier cosa que hayas puesto con HTML y decirle:
.

“Quiero que tengas este color de fondo, también quiero que tengas este tamaño y quiero que tengas bordes redonditos porque se ven bien cool 😎”.

.
¡Sí! Con CSS puedes personalizar tus elementos, o sea, darle estilos. Por eso decimos que “CSS” es la parte visual 💅.
.
Por cierto, aunque el home de Platzi cambió, quiero que vean cómo incluso entre diferentes versiones de la misma página lo que es HTML y CSS siempre se van a conservar 👀. ¡Es que HTML y CSS son los dioses de la web! Gracias a ellos dos podemos hacer páginas web. Y sí, todas… TODAS las páginas web tienen HTML y CSS 😏
.

Les comparto, mis apuntes. 😄

HTML

Son siglas en ingles de HyperText Markup Language o Lenguaje de Marcado de Hipertexto.

¿Para qué sirve?

Nos sirve para estructurar toda nuestra página web, si hacemos la referencia con el cuerpo humano es como el sistema óseo, lo vamos a utilizar para colocar texto, imágenes, botones, videos, etc. Nos da una estructura inicial.

CSS

Son siglas en inglés de Cascading Style Sheets u Hoja de estilos en cascada.

¿Para qué sirve?

Lo usaremos para darle vida a nuestros sitios web, si hacemos referencia con el cuerpo humano sería el aspecto ya sea la altura, contextura física, color de piel, cabello, etc.

Nos permite estilizar todo nuestra estructura de HTML ya sean textos, imágenes, botones, etc.

HTML y CSS

Estos son un gran complemento, trabajan juntos.

HTML: nos ayuda a darle una estructura a nuestra página web.
CSS: Nos ayuda a darle estilos a los componentes de la estructura del HTML.!

Apuntes de la clase:
HTML

• HTML: lenguaje de marcado de hipertexto

• HTML nos sirve para estructura nuestra pagina web.

CSS

• CSS: hojas de estilo en cascada

• CSS: nos permite estilizar nuestros textos, imágenes, etc.

Herramientas de Google Chrome

• Podemos hacer clic derecho en una página e inspeccionar como está construida

• Por un lado arriba veremos el código HTML, las etiquetas.

• Y en la parte de abajo veremos el código CSS, las propiedades y sus valores.

Ahh! El antiguo Home! Me gustaba más, personalmente. Podía repasar contenido de los aportes de los compañeros cuando alguien mas comentaba

Les comparto esta página en donde pueden encontrar mucha documentación sobre desarrollo web.
Espero que les sirva 😄

Práctica 1. Repitiendo los pasos vistos en clase, realice una inspección al sitio web de platzi y explica un bloque de código css de su preferencia.

Ejemplo:

.Question-answer {
    color: #8da2c0;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #8da2c0;
    border-radius: 0.5rem;
    padding: 12px 40px 12px 12px;
}

Este bloque de código contiene las características de estilo que tendrá toda caja en el html que asginemos con el nombre .Question-answer, entiéndase una caja como un div en el html (al menos eso es lo que entiendo al momento de hacer este aporte)

El bloque CSS inicia donde abren las llaves y finaliza donde cierran (duh), dentro de el se definen características como el color que está dado por su valor equivalente en código ASCII, el tamaño de la fuente, la cual esta dada en la unidad de medida rem, el alto de la linea (no se especificamente a que linea se refiere), el borde de la caja donde se aloja todo el contenido del div , el radio del borde (tampoco me queda claro como se mide) y el padding que son algo asi como márgenes alrededor de la caja.

Podemos observar a detalle la definición de un padding en el siguiente enlace:

https://developer.mozilla.org/es/docs/Web/CSS/padding

HTML es un lenguaje de marcas de hipertexto, y aquí es donde se estructura toooda la página web. CSS nos da la vida a nuestras páginas web agregando estilos a TODOS los elementos que se insertan al documento html.

• HTML (lenguaje de marcas de hipertexto), es el lenguaje donde se define la información o el contenido del documento, el formato de los archivos es .html

• CSS (cascading style sheets), el lenguaje donde se especifica el diseño del documento, maneja todo lo relacionado con la parte visual, el formato de los archivos es .css

• JavaScript, el lenguaje que hace que todo sea interactivo, es realmente el lenguaje de programación que nos permite crear sitios web, el formato de los archivos es .js

El ejemplo del lego con que Platzi tambien explica ayuda mucho

Clase 2 - ¿Qué es HTML y CSS? ¿Para qué sirven?

¿Qué significan las siglas HTML?

• En inglés significan Hypertext Markup Language o en español Lenguaje de marcado de hipertexto.

¿Para qué nos sirve HTML?

• Para darle estructura a nuestra página web.

¿Qué es la estructura en HTML?

• Son todos los elementos que necesitaremos para construir nuestra página web, por ejemplo:
  • Textos.
  • Imagenes.
  • Videos.
  • Formularios.
  • Botones.

¿Qué significan las siglas CSS?

• En inglés significa Cascading Style Sheet o en español es Hojas de estilo en cascada.

¿Para qué nos sirve CSS?

• Para darle estilos a nuestra estructura HTML. Es decir, darle colores, tamaños, ubicación y muchas otras cosas más a los elementos HTML.

¿HTML y CSS trabajan juntos?

• Sí.

¿Cuál es la tercera tecnología que es fundamental para la construcción de páginas web?

• JavaScript (JS).

¿Para qué nos sirve JavaScript?

• Para darle interactividad y funcionalidad a las páginas web.

¿Cómo podemos abrir las herramientas de desarrollo o Dev Tools?

• Clic derecho -> en el menú contextual damos clic en la opción inspeccionar (Inspect en inglés).
  -Pulsando la tecla F12.
• CTRL + Shift + I
• Cmd + Opt + I

¿Para qué nos sirven las herramientas de desarrollo o Dev Tools?

• Nos permite visualizar el código de nuestra página web e identificar cada elemento que la compone.

¿En qué ventanas están divididas nuestras herramientas de desarrollo o Dev Tools?

• Esta de manera básica se componen de dos ventanas. En la que está en la parte superior podemos ver todo el código HTML y en la que está en la parte baja el código CSS.

HTML es un lenguaje de marcado utilizado para definir la estructura y contenido de una página o documento web.🦴

El CSS es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML).🎨

HTML y CSS, son fáciles de entender y de usar, o al menos en mi experiencia lo fue … talvez, no para todos.

Despues del curso de prework deberia seguir este curso

Me suena el nombre “Motores de renderizado”, pero no me acuerdo como tal. Esta vez no sucederá lo mismo 😌

Vaia vaia, el antiguo Home

Hola. Les comparto este repositorio que sirve de guía para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificación y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 😄.
Platzi-Test

HTML = Es un lenguaje de marcado de hipertexto. Nos ayuda a estructurar una página web.
CSS = Sus siglas en significan Hojas de Estilo en Cascada. Es el lenguaje que le da vida a nuestros sitios webs.

Me gusta a mi parecer el nuevo diseño de la plataforma de Platzi, ya que me genera menos esfuerzo al ser un fondo oscuro. Además de que tiene aplicado el diseño responsive. A seguir aprendiendo 💪

Wow 🤩 Estoy enamorada del inspector!!! 💛🙌🏼Gracias !!!

a darle!

https://www.mclibre.org/consultar/htmlcss/index.html

Reforzando html y css, nunca esta de mas repasar lo basico

me encanta volver y poder seguir la ruta que deje hace un par de meses y volver a retomar con cursos actualizados

Yo quiero una silla como la de Esteff, se ve muy comoda.
Excelente curso, soy backend y siempre le tengo cierto miedo al front

Me encanto la forma de explicar cada concepto, muy genial la profe 😃

HTML: es la estructura a nuestra página web es como el esqueleto.
CSS: Nos ayuda a darle estilos a los componentes de la estructura del HTML. - aporta el diseño/estilo del sitio web.

HTML marca la estructura con etiquetas
CSS define los estilos con reglas
JS permite programar interactividad y funcionalidad

Platzi en los videos deberian agrandar la letra y no utilizar fondos negros con letras oscuras…La vista primero…

Excellent

html es el esqueleto como esta estructurado y css es el diseño que se da

Conceptos básicos que vale la pena volver a ver una y mil veces… 🤓

Geniales las clases relacionadas para ver el potencial que abarca HTML & CSS. Abre el panorama para posteriormente ver que camino seguir.

HTML y CSS

HTML: Estructura

Usa etiquetas HTML para marcar el contenido, es así que le dice al navegador cual es un link, cual es una imagen, cual es un texto, cual es una cabecera, etc.

CSS: Apariencia

Haciendo uso de las etiquetas, clases, pseudoclases e identificadores, asigna colores, tamaños, animaciones, etc a la estructura generada con HTML.

Para que se pueda entender fácilmente, hice este resumen espero les ayude 😃

Html

Es un lenguaje de marcado de hipertexto, que sirve para estructurar una página web, siendo un esqueleto

CSS

es el que da diseño, Hojas de estilo en cascada que le da vida al esqueleto

Siempre se usa de ejemplo para explicar el HTML, CSS y JS a una persona. A mi me gusta imaginarme el sitio web como una casa. Me explico:
HTML: Son las puertas, ventanas, mesas, sillas, etc. Los elementos que conforman la clasa.
CSS: Son el color de la puerta, el tamaño de la mesa, la posicion de la ventana, etc. Viene a ser las caracteristicas visuales de los elementos de la casa.
JS: Seria la automatizacion de la apertura y cierre de cortinas y ventanas, etc. Viene a ser el control sobre los elementos que conforman nuestra casa. (Una casa del futuro, llegado a este punto)

¿Qué es HTML y CSS? ¿Para qué sirven?

HTML: Lenguaje de marcado de hipertexto, esto nos indica que HTML nos va a servir para estructurar toda nuestra página web.

CSS: Hojas de estilo en cascada, nos va a dar vida a todos nuestros sitios web. Con CSS podemos estilizar la estructura que creamos con HTML, como pueden ser textos, imágenes, botones etc.

HTML: Lenguaje de marcado de hipertexto. Es el que se encarga de estructura la página web.

CSS: Hojas de estilo en cascada. Es el que se encarga de estilizar la estructura construida con HTML.

excelente resumen. me encanta las clases de la profe

Me gustó mucho lo sencillo que la profe hace ver el contenido del curso.

HTML es la base y esqueleto 💀 de la pagina web, mientras que el CSS seria la apariencia que va a tener la pagina web 👨🏻‍🦰

genial!

✅

Muy emocionada de iniciar este curso! Muchas gracias @teffcode 👩‍💻💚

Me ayuda mucho estudiar con Flashcards, aquí te compartiré algunas, solo copia y pega. Espero te sirvan.

Conclusión: HTML & CSS son un gran complemento, unidos hacen la fuerza!

😀😀

HTML

Lenguaje de marcado de hipertext

Es el codigo que ayuda a estructurar una pagina web (Botones, Texto, Imagenes)

CSS

Hojas de estilo en cascada

Es la que le da vida a la estructura que hiciste con HTML (Colores, Tamaño, Ubicaciones)

Este curso me ayudara a repasar los conceptos fundamentales de html y css

la base para construccion de sitios web, html y estilos de CSS

Amo los memes que han publicado JAJAJA, la verdad pensé que HTML era un lenguaje de programación

Les recomiendo w3schools para practicar tanto html como css

Otro ejemplo de como entender fácil la estructura es:

Otra descripcion grafica…

HTML se utiliza para estructurar el contenido de una página web y CSS para darle estilo y formato. Ambos son esenciales para el desarrollo web moderno.

html
código para construir una estructura de una pagina web
css
describir presentación de los elementos de la pagina web

Las herramientas de desarrollador se despliegan con la combinación de teclas F12 / Ctrl + Shift + I / Cmd + Opt + I o clic derecho e “Inspeccionar” en tu navegador preferido (se recomienda Google Chrome).

Aprender HTML y CSS requiere dedicación y tiempo!!! Lo bueno es que estos cursos nos guian en ese proceso 😎

.

Mis apuntes en Notion💚

Hola! Es mi primer curso en esta plataforma, esta muy bien explicado, excelente la Prof. Estefany!

HTML:

Es un lenguaje de marcado hipertexto que nos ayuda a darle una estructura inicial a un sitio web.

CSS:

Hojas de estilo en cascada que le dan estilo a la página web.

Conclusión: CSS (hojas de estilo en cascada) es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (HTML).

En HTML lo que hace es armar la estructura de una página web, como va a estar conformada, pero por mas que se termine falta detalles como las formas (por que en solo HTML siempre habrán formas rectas), colores, tamaños, fuentes y estilos; es ahí donde CSS entra en acción y es donde las páginas web van dando identidad con los elementos que queramos incluir.

HTML- estructura
CSS- da vida a la estructura

👨🏻‍💻Hoy: Maratón de JavaScript🦾

Imaginemos una casa:

• HTML sería la estructura de la casa (vigas, columnas, elementos metálicos, etc).

• CSS serían los acabados, pintura, cuadros y lo que le dan estilo a la casa.

• Por último, JavaScript serían las tuberías de agua y drenaje, cables eléctricos y otras instalaciones, en pocas palabras, lo que la da funcionalidad a la casa.

html= el lenguaje de marcado para la pagina web
css = el diseño del la pagina web

Los apuntes de la profe son súper! Con ellos me fue mucho más sencillo interiorizar conceptos, gracias 💚

Mi resumen:

HTML (Hyper Text Markup Language) = Es la estructura de la pagina.

CSS (Cascade Style Sheets) = Es la presentación de la página, en el fondo es el ropaje de la estructura.

Un ejemplo

Si esta oración fuera una web:

Freddy vestido de mariachi cantando la bikina.

Cada parte correspondería:

HTML = Freddy
(Estructura del contenido)

CSS = vestido de mariachi
(El diseño visual)

JS = cantando la bikina
(La interacción)

*) CSS (Hoja de Estilos en Cascada - Cascading Style Sheets)
No es un lenguaje de programación. Es una herramienta que nos permite darle vida a nuestros sitios web (darle color y ciertos efectos). Si hacemos una comparación con el cuerpo humano, el css vendría a ser las características físicas del cuerpo humano (altura, ancho, color de piel, color de ojos, etc).
Esta herramienta CSS nos permite estilizar y darle vida a la estructura HTML (ya sean títulos, textos, botones, imágenes, etc).

*) HTML (Lenguaje de Marcado de Hipertexto - Hyper Text Markup Language)
No es un lenguaje de programación. Es una tecnología o herramienta que nos permite o sirve para estructurar todo nuestro sitio web. Si hacemos una comparación con el cuerpo humano, el html vendría a ser el esqueleto. El html lo vamos a utilizar para colocar el título, texto, imágenes, videos, links, botones, formularios, etc. Nos va permitir dar una estructura inicial al sitio web.

Algo importante, sugiero que vean a html como una caja, eso nos permite tener una mejor visualizacion de lo que debemos hacer.

Css + js es lo mejor

html: Se encarga de dar un estructura inicial de texto
css: Hojas de estilo en cascada ayuda a dar diseño a las estructuras de de html trabajando juntos.

Ejemplo con auto

HTML el chasis
CSS la pintura y forma
JS el cableado

Visto de otra forma.
***Creditos a quien corresponda

Dejo este meme como refencia

HTML es la estructura de nuestra página.
CSS son los estilos para nuestra página.