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

HTML y CSS: definición y usos

2/43
Recursos

Aportes 277

Preguntas 7

Ordenar por:

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

Internet: Interconnected y Network
Red de computadoras conectadas en todo el mundo.

Tim Berners-Lee Invento World Wide Web.
Fundo el consorcio W3C para estandarizar el desarrollo de las tecnologías base Internet

  • HTTP Hyper Text Transfer Protocol 😕/ (Permite la comunicación de datos entre dispositivos)
  • URL Uniform Resource Locator: (Dirección de un sitio web)
  • HTML Hyper Text Markup Language (Lenguaje para describir la estructura de una sitio web)

En 1994 apareció CSS Cascade Style Sheets.

2. HTML y CSS definición y usos
Definiciones

  • Internet
    A principios de los años 80 nació esta tecnología Interconected Network o red interconectada, y esta es la que hoy en día nos permite compartir sonidos, videos e imágenes.

  • WWW
    En 1990 Word Wide Web; fue creada por Tim Berners-Lee el cual también creo el consorcio de la W3C

  • W3C
    Word Wide Web Consortium y es el consorcio que estandariza y supervisa las tecnologías del internet HTTP, URL Y HTML

- HTTP
Hyper Text Transfer Potocol ó protocolo de transferencia de hipertexto es la bases que permite la comunicación entre los dispositivos conectados en la red por ejemplo computadores y servidores

- URL
Uniform Resource Locator ó el localizador de rescursos uniformes más conocido como la dirección de un sitio web, es la manera que agregamos un punto a la red

- HTML
Hyper Text Markup Language ó lenguaje de marcado de hiper text esta es lo que le da la estructura un sitio web como dándonos como herramienta: o lista encabezado, párrafo etc.

  • CSS
    Cascade style sheets ú Hoja de estilo en cascada la cual fue creada en 1994 y son unas series de reglas que describen la apariencia de un sitio web y es el navegador que se encarga de agregar estos estilos a nuestro sitio. esta surgió por la necesidad de mejorar la apariencia de los sitios web, en ella podemos definir el estilo de los componentes html como su tamaño, color, fuente entre otras cosas.

Aprendo mas en un vídeo que 3 años de carrera.

Tremenda explicación en tan corto tiempo.

Estoy aquí para desbloquear la habilidad de Agente Puntoycoma jeje

Para los que quieren probar el código que él colocó en el ejemplo:

platzi.html

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <title>Mi primera página web</title>

    <link rel="stylesheet" href="platzi.css">
</head>

<body>
    <p>Nunca pares de aprender 🚀</p>

</body>

</html>

platzi.css

p{
    color: #98CA3F;
    font-size: 40px;
    font-weight: bold;
    font-family: "Helvetica";
}

JS CHALLENGE 😎😎

Me parece buena idea que varios cursos hagan una recapitulación rápida de los conceptos necesarios previos al contenido del mismo.

/*Curso de Frontend Developer*/
	/*Presentación y bienvenida al curso de HTML y CSS*/
		Resumen de la app de platzi video.	
	/*Presentación y bienvenida al curso de HTML y CSS*/

	/*HTML y CSS: definición y usos*/
		Interconnnected Network
				InterNET

		Tim Berners-LEE
			W W W => W3C(Estandar):{
				HTTP=>Protocolo de transferencia de Hiper Texto || Hyper Text Transfer Protocol ://,
				URL=>Localizador de Recursos || Uniform Resource Locator,
				HTML=>Lenguaje de marcado de Hiper texto || Hyper Text Markup Language
			}
		CSS =>{Hojas de estilo en cascada || Cascade Style Sheets}==>>>>Responsive Desing || diseño web adaptativo o responsivo
	/*HTML y CSS: definición y usos*/

/*Curso de Frontend Developer*/

/*Notas*/
	Este es un archivo .js solo para buscar la forma de dar "Forma al texto", pero no es valido, es solo una colección de apuntes del curso con el cual fue nombrado.
/*Notas*/```

Les comparto mi código.
platzi.html
<!DOCTYPE html>
<html lang=“es”>

<head>
<!-- Codificación basada en Unicode para acentos–>
<meta charset=“UTF-8”>
<!-- Codificación de los caracteres -->
<meta http-equiv=“X-UA-Compatible” content=“IE=edge”>
<!-- Diseño multi-dispositivo -->
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<!-- Descripcion del Autor -->
<meta name=“author” content=“Cesar Paulino”>
<!-- Titulo de página web -->
<title>Mi primera página web</title>
<!-- Favicon imagen que se muestra en la pestaña del navegador -->
<link rel=“shortcut icon” href=“favicon.png”>
<!-- Referencia de tu Hoja de Estilo CSS–>
<link rel=“stylesheet” href=“platzi.css”>

</head>

<body>

<h1>Sin miedo al Exitó</h1>
<p>Nunca para de aprender 🚀</p>

</body>

</html>
platzi.css

body{
/fondo de pantalla/
background-color: rgb(42, 104, 175);
}

h1{
/Estilo H1/
font-size: 40px;
/Tamaño de letra PX (Píxel)/
font-family: ‘Franklin Gothic Medium’, ‘Arial Narrow’, Arial, sans-serif;
/Fuente letra/
font-style: italic;
/Estilo de la letra/
text-align: center;
/Alineación del texto/
color: yellow;
/Color de la letra puede ser en ingles o en codigo binario/
}

p{
/El valor está en Hezadecimal/
color: #98CA3F;
/Tamaño de letra PX (Píxel)/
font-size: 30px;
/Estilo de fuente/
font-weight: bold;
/Fuente letra/
font-family: “Helvetica”;
}

El enfoque que usan para explicar las cosas de esta forma es lo que mas me gusta de platzi.

Comencemos…

![](

Lista mi primer página, y entendidos los conceptos de HTML y CSS.

Ok, ahí vamos con el JSChallenge 2021

Dando seguimiento al curso Prework, les comparto el tutorial que hice usando la terminal y VSCode
https://youtu.be/5gP2cgHA6RQ

Si quieres profundizar en la historia del internet, les recomiendo el curso de Historia y funcionamiento de internet. Explica a detalle qué es internet, por qué es diferente a la web. Como surgió HTML, URL, HTTP. Luego CSS y JS. Un poco de contexto de programación para todas las personas.

Así queda el ejemplo.

    HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer pagina Web</title>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
    <p>Nunca pares de aprender 🚀</p>
</body>
</html>

      CSS

p {
    color: #98CA3F;
    font-size: 40px;
    font-weight: bold;
    font-family: Helvetica;
}

Resultado final.

Internet nació a principios de los años 80
Es un red inmensa de Computadores conectados entre sí.
Nos permite compartir Imágenes, vídeos, texto y sonidos.
Tim berners-lee inventor de la World Wide Web (W3C) para estandarizar y supervisar de las tecnologías base de internet HTTP, URL, HTML
Protocolo de transferencia de Hipertexto (HTTP)

Hyper

Text

Transfer

Protocolo: //

Es la base que permite la comunicación de datos de dispositivos conectados a la red.
Ejemplo: ( Computadores y servidores )

El localizador de recursos uniforme (URL) Mas conocido como la url de nuestro sitio web por Ejemplo : platzi.com
Uniform

Resource

Locator

El lenguaje de marcado de hipertexto (HTML) Nos permite crear la estructura a nuestra pagina web
Hyper

Text

Markup

Language

En 1994 nació el CSS. Serie de reglas que describen la apariencia de una página web.
Casscade
Style
Sheets

En la web existen tecnologías importantes como HTTP, URL, HTML y CSS

HTML: Hyper Text Markup Language
CSS: Cascade Style Sheet

Chevere

Me encanta cómo la animación me dejaba entender y visualizar las explicaciones. ¡Calidad! Siguan haciendo videos y cursos así, me encantan.

Blowmind con lo de interconnected network jajaja no tenía ni idea XD

Aquí les dejo el repositorio con el ejemplo.
https://github.com/aaronyamil/demo_page

Saludos

Súper animado para empezar 💪🏻

hola, no me salio igual de grande la letra y no se como es hace para que salga el cohete. salu2

El curso de Fundamento de Ingenieria de Software profundiza mucho mas. Es muy bueno

Qué buena explicación tan visual. Genial.

siempre me ha parecido interesante el desarrolo frontend! despues de varias pruebas de aprendizaje espero esta sea la definitiva jajajaj

¿Cómo surge internet?
Internet nace a principios de los años 80 y es la combinación de dos palabras interconnected y network, lo que significa que es una red inmensa de computadoras conectadas entre sí alrededor del mundo, nos permite compartir información entre quienes están conectados cómo texto, sonido o imágenes, entre otros.
Tim Berners Lee fundó la W3C o world wide web la red con la que nos conectamos, el W3C se creó para estandarizary supervisar el desarrollo de las tecnologías base de internet: HTTP, URL y HTML.
• HTTP o hiper text transfer protocol en español el protocolo de transferencia de hipertexto, es la base que permite la comunicación de datos entre los dispositivos conectados en la red por ejemplo: computadoras y servidores.
• URL o uniform resource locator, en español el localizador de recursos uniforme, màs conocido còmo la dirección de un sitio web es la manera en que agregamos un nombre a un punto de la red.
• HTML o hyper text markup language, en español lenguaje de marcado de hipertexto, es un lenguaje para escribir a estructura de las paginas web, con recursos cómo listas, párrafos, encabezados, etc
En 1994 nace CSS o cascade style sheets para poder mejorar la apariencia de los sitios web, estas hojas de estilo en casada son una serie de reglas que describen la apariencia de una web incluidos los colores, tipografía, margen y el tamaño de los elementos inclusive adaptando una página web a pantallas grandes o pequeñas conocido como responsive design.
El navegador se encarga de tomar esos estilos y los agrega a cada elemento que se tiene en el HTML.

Hice este background minimalista… Me transmite paz.

I am ready to start the JS CHALLENGE 2021

Confirmado, el color Platzi es #98CA3F

Internet nació a principio de los años 80’, y es la combinación de las palabras Interconnected y Network, lo que quiere decir que es una red de computadoras conectadas entre sí en todo el mundo.

Tim Berners-Lee, el inventor de la World Wide Web (WWW) en 1989, fundó luego el consorcio W3C para estandarizar el desarrollo de las tecnologías base de internet: HTTP, URL y HTML.

  1. HTTP (HyperText Transfer Protocol): El protocolo de transferencia de hipertexto es el que permite las transferencias de información en la red, por ejemplo entre una computadora y un servidor.
  2. URL (Uniform Resource Locator): El localizador de recursos uniformes o mejor conocido como la dirección de un sitio web, es la manera en como agregamos un punto a la red.
  3. HTML (Hypertext Markup Language): El Lenguaje de Marcado de Hipertexto es lo que permite al desarrollador realizar la estructura del contenido de un sitio web, como texto, imágenes, vídeo, etc.

En 1994 surge la necesidad de mejorar la apariencia de los sitios web, naciendo así el estándar CSS (Cascade Style Sheets): que se define como las hojas de estilo en cascada, este permite realizar el diseño de un sitio web, organizar los elementos, cambiar los colores y modificar los estilos del contenido. El HTML funciona como el esqueleto del sitio web y el CSS como la apariencia que tendrá al exterior.

MI ejercicio de como funciona HTML y CSS en la web

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera pagina web</title>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
    <p>Nunca pares de aprender 🚀</p>
</body>
</html>

CSS

p{
color: #98ca3f;
font-size: 40px;
font-weight: bold;
font-family: Helvetica;
}

Resumen

La primer página web:

info.cern.ch/hypertext/WWW/TheProject.html

El curso de Introducción a la web, profundiza mucho más en la historia y nacimiento de esta revolucionaria herramienta. Y es uno de los mejores cursos introductorios en este mundo del Desarrollo.

#JSChallenge :3

😀

Mis apuntes de esta clase. 😄

Importante.

Tengan en cuenta que al crear el archivo html y css en su editor de codigo tienen que tener los archivos en la misma carpeta de lo contrario no les va a funcionar.

Para enlazarlos usan este codigo:

<link type=“text/css” rel=“stylesheet” href=“estilo.css”>

Lo unico que cambia es “estilo.css”, que es como llamarias a tu archivo css.

Conocen de libros donde se pueda profundizar acerca de HTML y CSS?

Buenísimas ❤️ animaciones, ritmo y gráfica del vídeo.
–> link a la Primera Web: (Mirad todos los enlaces que tiene)

Esta muy interesante el video, logra explicar lo hitos importantes de forma didáctica y clara

Hemocho 😃

como es que se puede aprender tanto en tan poco tiempo omg

Genial el video…

Todos los conceptos que mencionan en el vídeo, se explican de manera profunda en el curso de fundamentos de ingeniería de software
quiero tomar el curso

Wauu excelente la creatividad. Es mucho lo que enseñan en un corto vídeo.

Este curso luce muy prometedor! Empecemos!

Si quieren saber por que se usan tantos colores y animaciones vayan a ver el curso de Curso de Estrategias para Aprender en Línea Efectivamente con la profe Ann. Ahí se explica por que por medio de vídeos con alto contenido gráfico y llamativos se aprende más y mejor.

Tim Berners -Lee
Inventor de World Wide Web.
fundó el consorcio w3c para estandarizar y supervisar el desarrollo de las tecnologías
HTTP (Protocolo de transferencia de hipertexto) permite la comunicación de datos entre computadores y servidores.
URL(Localizador de recursos uniformes) dirección de un sitio web
HTML(lenguaje de mercado de hipertexto) estructura de una pagina web

-INTERNET: Interconecterted Network
-WWW: Word Wide Wed, inventada por Tim Berners -Lee, posteriormente fundo el consorcio W3C para estandarizar el desarrollo de las tecnologías base de internet.
-HTTP: Protocolo de transferencia de hipertexto, permite comunicación de datos entre dispositivos.
-URL: Dirección de sitio web (Uniform Resource Locator)
HTML: Lenguaje para describir la estructura de un sitio web (Hyper markup Languaje)
-CSS: Cascade Style Sheets, apareciendo en 1994.

También podemos ejecutar ejemplos en https://codepen.io/

URL: Localizador de Recursos Uniforme.
HTML: Lenguaje de Marcado de HiperTexto.
W3C
CSS: Serie de reglas que describen la apariencia de una página web.

a darle con todo 😃

Genial, todo esto se vio en el curos de programacion basica con Fredy 😃

reforzar html y css

Me encanto la primera pagina web

1994 CSS

Hola todos, mucho gusto y con mucha expectativa y aceptando el reto del agente punto y coma.!

keeeevin de amangoooo 😮

HTML: Estructura de tu sitio web - los cimientos
CSS: La belleza de tu sitio web - la magia
JavaScript: La funcionalidad de tu sitio web - la magia

Este mundo del desarrollo frontend no tiene limites, es increible lo que se puede lograr!

UN MUNDO DE POSIBILIDADES!

Que buenos conceptos presenta ,con una explicación magnifica

Yai, primera página en HTML. Lo que no me pudieron enseñar en 5 horas, me lo enseñaron en 12 minutos.

CSS es súper extenso y podemos resolver muchos problemas de Frontend usando únicamente HTML y CSS

Go!!!
Frontend
Professional

HTML
<code>
<!DOCTYPE html>
<html lang=“en” dir=“ltr”>
<head>
<meta charset=“utf-8”>
<title>Dale Broo, Dalee</title>
<link rel=“stylesheet” href=“m.css”>
</head>
<body>
<p>Nunca dejes que te detengan 🚀 </p>
</body>
</html>

CSS
<code>
p{
  color: #98CA3F;
  font-size: 40px;
  font-weight: bold;
  font-family: "Helvetica";}
``

Buena clase gratuita! Por si a alguien le interesa un poco más de historia la Wikipedia es nuestro aliado jeje

https://es.wikipedia.org/wiki/HTML

Vaya manera de explicar!
No me arrepiento de pagar expert ❤️

Muy claro

Muy buena clase ! Se le va perdiendo el miedo y agarras con mas confianza el VSC.

😃

Internet significa INTERconected NETwork, que es una red de computadoras conectadas por todo el mundo. Nos permite compartir información unos con otros.
El inventor de la world wide web es Tim Bernes Lee. También fundó el consorcio W3C, para estandarizar y supervisar el desarrollo de las tecnologías base de internet:

  • HTTP (HyperText Transfer Protocol): Es la base que permite la comunicación de datos entre dispositivos conectados en la red.
  • URL (Uniform Resource Locator): Es la dirección de un sitio web. Es la manera en que agregamos un nombre a un punto de la red.
  • HTML (HyperText Markup Language): Lenguaje para escribir la estructura de las páginas web.

Con estas tres tecnologías nació la página web, pero se veía muy simple, así que se vió la necesidad de mejorar la apariencia Por lo que en 1994 nació el primer borrador de CSS (Cascade Style Sheets). Son una serie de reglas que describen la apariencia de una página web.

genial explicación 😎

Video para bombardear tu mente.
¡Hagan más videos así Team Platzi!

HTML FOR EVER

Así me quedó

Me encantó generar mi primera línea de código.

Me siento feliz, logré hacer HTML y CSS por primera vez, la comunidad de PLatzi es lo mejor que me ha pasado, me ayudaron a instalar extensiones en visual y poder ver lo que estaba realizando en el código .

que gran aporte

Muy chevere el video

Una gran explicación en solo 4 minutos, wow!

Internet es la Red de Computadoras Interconectadas, su función es transmitir datos como archivos de texto, audio, video, etc. Nació a principios de los años 80, y en 1990 se funda la World Wide Web por Tim-Berners-Lee para estandarizar el desarrollo de las tecnologías base de internet:
• HTTP (Hypertext Transfer Protocol): Permite la comunicación entre los dispositivos conectados en la red (como si de establecer una carretera se tratase).
• URL (Uniform Resource Locator): Si HTTP es la carretera o la vía, URL es la dirección a la que se va a llegar. Así como para llegar a un lugar físico dices “P Sherman, calle Wallaby 42, Sidney”, en Internet para llegar a un sitio específico dices “platzi” (no me dejó escribir el link)
• HTML (HyperText Markup Language): Lo que viaja a través de internet (en realidad es más complejo que esto, pero por fines discursivos digamos que) son datos en texto plano. Para que las computadoras lo puedan entender necesitan seguir ciertas reglas de etiquetas, jerarquía entre otras cosas. HTML es el formato clásico en el que se escriben estos archivos.

Luego de que se creó HTML, llegó al mundo (gracias al cielo) CSS, una tecnología que aplica estilos a los documentos HTML para que sean agradables a la vista.

Si les interesa un poco más de la historia del internet les recomiendo el curso de Introducción a la Web: Historia y Funcionamiento de Internet 💚😃

EXCELENTES APORTES… INTERESANTE

Código

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primer pagina Web</title>
    <link rel="stylesheet" href="./style.css"/>
</head>
<body>
    <p>Nunca pares de aprender </p>
</body>
</html>

    
  CSS

p {
    color: #98CA3F;
    font-size: 40px;
    font-weight: bold;
    font-family: Helvetica;
}
  • Internet nace a principios de los 80 y es la combinación de dos palabras Interconnected & network (red inmensa de computadoras conectadas entre si)
  • TIM BERNERS-LEE Inventor de la WORLD WIDE WEB (WWW) Funda W3C Que supervisan las tecnologías para el futuro del internet.
  • HTTP - Hyper Text Transfer Protocol
  • URL - Uniform Resouce Locator
  • HTML - Hyper Text Markup Language
  • CSS - Nace en 1994 - Cascade Style Sheets

Internet = Interconnected Network
Que excelente, no habia pensado en buscar el significado mas profundo de la palabra, solo lo conocia como red informatica.

Mucho que agradecerle a Timothy “Tim” John Berners-Lee.
😎