Introducción al curso

1

Presentación y bienvenida al curso de Frontend Developer

2

HTML y CSS: definición y usos

3

¿Qué son y para qué nos sirven HTML y CSS?

4

DOM, CSSOM, Render Tree y el proceso de renderizado de la Web

5

5 tips para aprender CSS

Conceptos iniciales de HTML

6

Anatomía de un Elemento HTML: Atributos, Anidamiento y Elementos vacíos

7

Anatomía de un Documento HTML: DOCTYPE, html, head y body

8

Funciones de las etiquetas HTML más importantes

9

La importancia del código semántico

10

Tipos de errores en HTML, debugging y servicio de validación de etiquetas

11

Reto 1: Organiza el siguiente bloque de código de forma semántica

Conceptos iniciales de CSS

12

Anatomía de una declaración CSS: Selectores, Propiedades y Valores

13

Tipos de selectores, pseudo-clases y pseudo-elementos

14

Modelo de caja

15

Valores relativos y absolutos

16

Displays en CSS

17

Funciones de las propiedades CSS más usadas

18

Posicionamiento en CSS

Arquitectura CSS

19

¿Qué son y para qué nos sirven las arquitecturas CSS?

20

OOCSS, BEM, SMACSS, ITCSS y Atomic Design

21

Reto 2: Identifica el error de arquitectura del siguiente bloque de código

Construcción de componentes

22

¿Qué es un componente? Analicemos nuestros diseños

23

Estructura con HTML y BEM de un menú desplegable

24

Estilizando nuestro menú desplegable con CSS

25

Creación de un buscador

26

Creación de un carousel de imágenes con CSS: Estructura principal

27

Creación de un carousel de imágenes con CSS: Detalle de cada item

Maquetación y diseño responsivo

28

Flexbox

29

Nuestro nuevo sistema de layout: CSS Grid

30

Maquetación de la pantalla de login: Estructura HTML

31

Maquetación de la pantalla de login: Estilización con CSS

32

Estilización de inputs y footer en la pantalla de login

33

Media queries

34

Maquetación de la pantalla principal

35

Reto 3: Maquetación de la pantalla de Not Found

Preprocesadores

36

¿Qué es un preprocesador, cuáles existen y cuáles son sus diferencias?

37

Instalación de SASS y configuración inicial

38

Hablemos de variables, herencia, anidamiento, operadores y más

Accesibilidad

39

La accesibilidad y nuestra responsabilidad como desarrolladores

40

Mejorando la accesibilidad de nuestra página de inicio

Conclusión

41

Conclusión del curso y paso siguiente

Bonus

42

Visualización de un botón usando storybook para HTML

43

Flexbox

¿Qué son y para qué nos sirven HTML y CSS?

3/43
Recursos
Transcripción

HTML: Es un lenguaje de marcado usado para decirle a tu navegador cómo estructurar las páginas web que visitas. No es un lenguaje de programación.

CSS: Es un lenguaje que nos permite crear páginas web con un diseño agradable para los usuarios. Tampoco es un lenguaje de programación.

Aportes 276

Preguntas 9

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Yo ya entiendo HTML y CSS pero voy a ver este curso como si no supiera nada, quizá aprenda algo nuevo

Siempre aparece algún comentario de desprecio hacia HTML y CSS porque no son lenguajes de programación. A esas personas les digo que HTML y CSS, cuando no se saben usar bien, pueden causar los mismos, y hasta peores, dolores de cabeza que cualquier lenguaje de programación.

Por eso lo importante de estas clases y aprender a usarlos correctamente 😃

en esta pagina pueden ver todas las etiquetas HTML

Buena explicación.
Personalmente a personas que no tienen conocimiento de web me gusta explicar que HTML son los huesos, CSS es la carne y la piel y JS son los músculos, ligamentos y articulaciones.

Antes de conocer las recomendaciones de la profesora, utilizaba esta página (asesoramiento).
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos

Aunque puedes crear tu sitio con muchos div es recomendable que utilices las etiquetas respectivas como article, footer, header, section, aside, nav esto permite a los buscadores saber que es tal cosa y cumplir requerimientos para SEO

si no aprendo HTML Y CSS con ella, no aprendo con nadie !

Les recomiendo a todos que lean también la documentación de css de la fundación mozilla firefox. Es bastante completa tanto para css como para html

Primera clase ¿qué es HTML y CSS? ¿Para qué nos sirve?.

  • HTML: es un lenguaje de marcado de Hipertexto que nos permite estructurar las páginas web, nos permite estructurar la información para que el navegador pueda leerla y mostrarla.
    HTML Reference
  • CSS: es un lenguaje de hojas de estilo, que nos permite estilizar las paginas web, es todo el diseño que se le da a la web.
    CSS Reference

Direfencias entre HTML y CSS

genial, pensaba saltarme el video por ser algo basico, pero conoci htmlreference.io muy bueno 😃 no me saltare ningun segundo de los videos desde ahora

Todo Ok, sigamos! en lo personal me agrada la manera de explicar de teffcode Aguilar.

Dejo por una “Tabla periódica” con todos los tags de HTML.
AQUI
Espero les sirva 💚

https://htmlreference.io/
y https://cssreference.io/ nos ayudarán a ver los códigos que se pueden ejecutar con cada uno de ellos

HTML
(HyperText Markup Language) es un lenguaje compuesto por un grupo de etiquetas definidas con un nombre que permiten estructurar la información de una pagina, no es considerado un lenguaje de programación, sino un lenguaje de maquetado.

Css
(Cascading Style Sheets) es el lenguaje que se utiliza para definir los estilos de las etiquetas HTML como color, tamaño, borde, etc.

HTML nos proporciona las herramientas para crear una estructura de cómo va a ir nuestro contenido. Con CSS podemos darle un estilo al contenido de nuestra página.

¿Es la versión actualizada de desarrollo web online?

El ejemplo que utilizo para describir HTML y CSS,
Imagina que queremos contruir una casa, HTML sería lo que nos permite crear una estructura base, bloques, ladrillos, cemento etc. Con css a esa estructura en obra negra que hemos formado le daremos la apariencia, colores de paredes, ventanas, puertas, con ellos podemos tener una casa muy bien hecha y muy bonita.

(Claro, para que funcione bien debemos agregar JS, que serían los servicios, agua, luz, gas)

Saludos

Buen inicio de curso, muy conceptual y eso es clave.

Muy buenas las referencias, os comparto una por si a alguien le sirve que tiene además enlace dentro de cada elemento a la documentación oficial de la W3C

HTML5 Doctor

Excelente las referencias que da la profe.

https://htmlreference.io/
https://cssreference.io/

htmlreference.io

cssreference.io

Les dejo el link

HTML y CSS: Ambos son lenguajes (marcado y estilo).
NO son lenguajes de programación.

para abrir el inspector de elementos en google chrome de una forma mas rápida y sencilla ejecutamos con el teclado Cntrl + shift + i 😄

HTML: (Hyper Text Markup Language)
HTML, que significa Lenguaje de Marcado para Hipertextos (HyperText Markup Language) es el elemento de construcción más básico de una página web y se usa para crear y representar visualmente una página web.

CCS: (Cascading Style Sheets)
El CSS++ (hojas de estilo en cascada)++ es un lenguaje que define la apariencia de un documento escrito en un lenguaje de marcado (por ejemplo, HTML).

HTML no es un lenguaje de programación. Es un lenguaje de marcado que se encarga de, con unas reglas y etiquetas en específico, estructurar la pagina web y traducirla a un lenguaje visual.

CSS es un lenguaje de estilos. Este es el encargado de estilizar esa estructura y perfeccionarla.

No conocía las páginas de HTML y CSS reference, muy buenas fuentes.

HTML no es un lenguaje de programacion sino un lenguaje de marcado y lo que hace es decirle al navegador como estructurar la pagina web → ESQUELETO

Dentro de esta estructura tenemos : Elementos y etiquetas, lo que nos sirve para construir botones, imagenes, textos, etc.

Un input es una etiqueta para poder insertar texto para lo que sea por ejemplo buscar algo

https://htmlreference.io/

CSS es otro lenguaje de hojas de estilo podemos estilizar las paginas web, como fuente texto, colores tamaños, etc.

https://cssreference.io/

Comparto la tabla periódica de HTML, espero les sea de utilidad:

Les dejo el link:
https://lenguajehtml.com/html/introduccion/tabla-periodica-html5/

Yo no sabia que el HTML ni el CSS eran lenguajes 😦 gracias por la info platzi ❤️

En mi opinion una de las mejores paginas para buscar material sobre CSS es CSS-Tricks

jajaja también me pasó lo mismo de niño

Que linda 😃

Genial, gracias por las paginas de HTML y CSS reference, muy utiles.

sacando el juego a mi suscripcion

excelente explicación

dia a dia se aprende algo nuevo

HTML
Lenguaje de Marcado.

CSS
Lenguaje de estilo.

Me gusta como estan abordando los temas, gran trabajo 💚

**HTML ** - Hyper Text Markup Language -
Lenguaje de marcado de hypertexto, un lenguaje para describir la estructura de la pagina web.
Es un lenguaje de marcado para decirle al navegador como estructurar la página que visitas

**CSS ** - Cascade Style Sheets -
Hojas de estilo en cascada, son una serie de reglas que describen la apariencia de una página web
Es un lenguaje que permite crear páginas web con un diseño agradable para los usuarios

html y css para hacerle una pagina web a tu morrita,


¡Hola Platzinautas! ☺
Les comparto un poco de mis apuntes sobre lo que he visto en esta clase. 👋🏽

HTML: Estructura
CSS: Diseño
JavaScript: Interacción

https://htmlreference.io
el sitio web que recomienda la profesora para ver las etiquetas de HTML 😮

De las clases que he visto acerca de este tema me quedó facilito así:
HTML: Es el esqueleto (humano)
CSS: Es el cuerpo - aspecto físico - como tal (color de piel, cabello etc).
En web sería
HTML: Estructura de la página
CSS: Estilo de la página.

La forma como me quedo más claro la diferencia de HTML, CSS y JS fue con la siguiente imagen:

Les dejo una página donde también pueden consultar sobre HTML, CSS, JS y otrosl lenguajes de programación developer mozilla. Espero les ayude

este curso debería estar mas arriba en la ruta !

Me gusta como explican cada tema

cuando dicen que css es un lenguaje es como cuando dicen que los homeopatas son medicos y recetan medicina de verdad

al momento de inspeccionar nos encontramos con una cantidad de información, a mi personalmente me recuerda la cantidad de herramientas que tengo por conocer y aprender a utilizar.

Me paso lo mismo con el inspector de elementos cuando estaba pequeño, pensaba que habia dañado algo jaja

HTML (Hypertext Markup Language)
HTML = Hypertext + MarkUp
Hypertext
Es texto ordinario al que se le incorporan funcionalidades adicionales como:
Formato,
Imágenes,
Multimedia
Y enlaces a otros documento.
MarkUp
Es el proceso de tomar el texto ordinario e incorporarle símbolos adicionales. Cada uno de estos símbolos identifica a un comando que le indica al navegador como mostrar ese texto.

HTML, es un lenguaje de marcado, usado para decirle a tu navegador cómo estructurar las páginas que visitas. No es un lenguaje de programación.
CSS, es un lenguaje que permite crear páginas web con un diseño agradable para los usuarios. Tampoco es un lenguaje de programación

  1. ¿Qué son y para qué nos sirven HTML y CSS?
  • HTML
    Es un lenguaje, pero no es un lenguaje de programación, como se vio en la anterior clase es un lenguaje de marcado, es usado para decirle a tu navegador cómo estructurar las páginas web que visitas. No es un lenguaje de programación.
  • CSS
    Cascade style sheets u Hoja de estilo en cascada es un lenguaje que nos permite dar estilos a nuestra página web con un diseño agradable para los usuarios. Tampoco es un lenguaje de programación.

es bueno comenzar desde el principio, aunque ya lo conozca

Me quiero acabar el curso de Frontend con angular en menos de 21 horas porque #SoyPobre les documentare como me va

Son valiosísimas esas dos páginas que nos recomienda Estefany sobre HTML y CSS. Hay ocasiones en que se me olvida si un elemento es block o inline, y me gusta como la página simplemente te ilumina a cuál de los dos corresponde c:

Otra referencia de documentación: https://www.w3schools.com

Inicio desde cero

Hay que aprender unas ~100 propiedades de HTML
Y unas ~100 propiedades de CSS
Es factible!😉

Las referencias para buscar los elementos de HTML y CSS son mucho más bonitas que toda la documentación que llevo leyendo en los últimos meses. Gracias por ello!

Buenos temas tocados en esta clase.

Estoy realizando mis apuntes con Notion… es una herramienta brutaaaal!! Lo pueden ver aquí --> Here!

¡Hola Platzinautas! ☺
Les comparto un poco de mis apuntes sobre la anatomía HTML. 👋🏽

<!DOCTYPE html>
<html>
<head>
	<title>HTML</title>
</head>
<body>
	<h1>Hola a todos</h1>
</body>
</html>

¡Nunca hay que dar por hecho que lo sabemos todo… quiero saber más!!

HTML es un lenguaje de marcado usado para estructurar los sitios web.
Css es un lenguaje (no de programación ni de marcado) de hojas de estilo. Nos permite estilizar las páginas web.

Me encanta esta documentacion para el CSS

Tabla con todas las etiquetas de HTML:
.

HTML: Es un lenguaje de marcado usado para decirle a tu navegador cómo estructurar las páginas que visitas.

https://htmlreference.io/

CSS: En un lenguaje que permite crear páginas web con un diseño agradable para los usuario.

https://cssreference.io/

Muy interesante.

😃

Estos pequeños aporte que nos dan son de maravilla y sobre todo que ya hay mucho documentación de ayuda.

Hoy aprendi que CSS es un lenguaje de hojas de estilo.

Sitio para consultar las etiquetas de HTML :
https://htmlreference.io

Recurso útil.

HTML(Hyper Text markup lenguage): es un lenguaje de marcado de texto, de una manera simple es el estándar de codificación y estructuración de la información de una pagina web

Entendamos esto de acá arriba:

Codificación: quiere decir que es la forma en la que entregamos el mensaje, por ejemplo, sabemos que <h1> en HTML es la etiqueta que se utiliza para hacer mas grande un texto y eso lo sabemos porque la codificación esta estandarizada y por eso todo el mundo usa h1 en vez Title.

Estructuración: Esta es mas fácil, determina, de una forma estandarizada(cabe destacar que si se hace bien porque puede que todo este hecho con div’s y aunque funcionaria eso esta mal por cierto), la estructura de una pagina web y aun si uno ve el HTML de alguien que lo hizo en polonia o grecia o china casi todos tienen la misma estructura y se sabe donde se puede encontrar cierta información, por ejemplo si yo haciéndole servicio técnico a una pagina web quiero arreglar algo que esta en la barra de menú que se encuentra en la parte de arriba de mi pagina, lo primero que haria seria buscar un <header> que es la etiqueta Estandarizada que da lugar al inicio de la información que se encuentra en la parte de arriba de una pagina web y es mas Header es cabecera, o sea, la cabeza, la parte de arriba, ¿tiene sentido no?

Es mi segunda clase de html y css. veremos que tal nos va…😃

Me gusta mucho que en los diferentes cursos se repitan conceptos ya expuestos en cursos anteriores, esto nos ayuda a mejorar el aprendizaje haciendo que estos conocimientos se queden guardada en nuestra memoria de largo plazo, hay una tecnica de aprendizaje que se llama repeticion espaciada la cual consiste en repasar lo aprendido x cantidad de veces con unos intervalos de tiempo.

Aqui les dejo mas informacion por si desean conocer mas esta tecnica
https://soulimproveledge.com/repeticion-espaciada/

Hi don’t know nothing, but i want learn very much

Quiero meterme en las especificaciones de JS como ESMAScrip 6+ es una necesidad de adquierir todo este conocimiento. Creo que será un buen curso. 🚀🚀

gente, sabían que hay herramientas-tecnologías que nos permiten aumentar los poderes de CSS para utilizarlo como si estuviéramos usando un lenguaje de programación? Esos son los preprocesadores y aquí en este curso empezaremos a utilizarlos, de igual manera, Platzi tiene cursos especiales para ello 😄

Que buena clase!

Es un gran aporte para mi tener las referencias de HTML y CSS. siento que me puede servir cuando este diseñando mi pagina web y tenga que usar alguna etiqueta, saber que significa y para que sirve aquella etiqueta…

HTML-REFERENCE: https://htmlreference.io/
CSS-REFERENCE: https://cssreference.io/

HTML estructura de la pagina web
CSS estilo de la pagina web

Esta es una muy buena explicacion y tambien resalta la importancia de HTML y CSS, son usados en todas las paginas web y al igual que los lenguajes de programacion dependiendo si son paginas estaticas o dinamicas.