Lo que aprenderás sobre HTML y CSS

2/18
Recursos
Transcripción

Bienvenido y bienvenida a este curso en el que pondrás en práctica todo lo aprendido en el Curso Definitivo de HTML y CSS. Por lo que si aún no lo has completado, te recomiendo que vayas y lo hagas. ¡Es muy completo!

Como proyecto, crearemos un clon de la página principal de Google, esa que ves cada que abres tu navegador Chrome. Para ello necesitaremos lo siguiente:

  • Editor de texto
  • Navegador

¿Qué es HTML y CSS?

Recordemos los conceptos básicos sobre los que vamos a trabajar.
HTML es un lenguaje de etiquetas para crear la estructura de la información de una página web.
image.png

Mientras que todas las etiquetas contenedoras (que llevan contenido) siempre llevan etiqueta de cierre, las etiquetas de contenido (que son el contenido) no siempre lo hacen.

CSS es un lenguaje de estilos en cascada que nos permite aplicar diseños a nuestra estructura en HTML.
image.png

Aplicamos los diseños usando reglas. Empleamos una declaración para un selector (casi siempre una etiqueta), que está compuesta por una propiedad y su valor.

Recordatorio: HTML y CSS no son lenguajes de programación.

Algunas librerías de las que puedes aprender:

Documentación sobre HTML, CSS y JS:
https://developer.mozilla.org/en-US/
Guía para entender las propiedades de CSS son ejemplos animados:
https://cssreference.io/
Guía completa de Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Aprende HTML con ejercicios:
https://www.w3schools.com/html/default.asp

Aprende sobre Flexbox jugando:
https://flexboxfroggy.com/#es

¡El resto lo iremos viendo en las siguientes clases, así que presta mucha atención y no olvides de llevar tus apuntes!

Contribución creada con aportes de: José Miguel Veintimilla y christian04velzquez.

Aportes 250

Preguntas 30

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

❤️ Si te gusta la nueva animación de Platzi.

El curso que indica al inicio ya NO figura dentro de la plataforma, así que toca avanzar directamente.
Me indican en soporte que el Curso de desarrollo web online ha sido sustituido por este Curso Definitivo de HTML y CSS.

Super este resúmen, quien más viene del curso definitivo de HTML y CSS?

Introducción al Curso
.
Herramientas que utilizaremos:
Visual Code Studios, el editor de código.
Chrome, el navegador.
.
Repaso:
HTML5, nos ayuda a estructurar la información que nosotros mostraremos a los usuarios mediante el proyecto. Se trabaja con etiquetas, cuando son etiquetas contenedoras se abren y se cierran, pero si son de contenido no siempre se cierran.
CSS3, nos ayuda a dar estilos y presentar nuestro proyecto. Sus herramientas son; un selector que normalmente es la etiqueta, una declaración es una propiedad y su valor.
.
Nota: HTML5 y CSS3, no son lenguajes de programación como JavaScript

Yo pensando que los cursos “Prácticos” se tomaban antes que los cursos “normales” :v

Estrenando mi suscripción expert con este curso.

Iniciando el 5 de Enero de 2022. ¡A darle!

Like si estas arrancando con tus propósitos de año nuevo! Voy por el diploma de la carrera de Arquitectura FrontEnd. 😃

muy emocionado de empezar un nuevo curso.
Sigo con mi ruta de arquitectura frontend !!!
n_n

❤️ Si crees que diego es uno de los mejores docente que tiene platzi 😄

Iniciare la ruta Frontend

¡Excelente introducción, esperaba con ansias este curso!

Vengo del curso Definitivo de HTML y CSS, y tengo muchas ganas de tomar este curso.

hoy me desvelo xd!!!

Visual code studio😂

este curso me cae como anillo al dedo, entre otras cosas por la importancia de estudiar por proyectos.

Genial! Pongamos en práctica nuestros conocimientos. Se ve muy interesante y práctico 👌🏻👌🏻

Llevo 3 años trabajando como desarrollador y estos contenidos son muy claros.

Aquí comienza un nuevo camino 😎

El mejor profesor de Platzi, empezamos…

soy nuevo espero aprender mucho!!!

Puedo usar otro lenguaje de programa para la web?

Like si fuiste a tomar el curso de Desarrollo web y volviste con más fuerza!

Si aprobase el curso definitivo de HTML y CSS puedes continuar con este curso. Es una alternativa, y a mi parecer más completa al curso de desarrollo web online, el cual yo pude aprobar solo con el curso definitivo de HTML y CSS

El curso definitivo de HTML y CSS estuvo de maravilla, toca complementar con este 😄

Repasando. Mucho JavaScript y quiero tocar base 😄

Vamossss A Darlee !!

feliz de estar en este curso!!!

No me voy a dejar detener por el sindrome del impostor. Mis dos generaciones anteriores aprendieron, yo igual puedo XD.

Gente le tengo miedo al codigo xd, ojala en un par de años regrese a este post para reirme de mi mismo

Todos los cursos de desarrollo web deberían tener su versión práctica. Sería grandioso.

¡Vamos a esto!

Tengo miedo porque tomare el practico antes que el definitvo :C

Suena muy bueno el curso. Ya tengo algo que experiencia con HTML y CSS pero estoy seguro de que regresar a las cosas básicas siempre nos lleva a re-aprender ciertas prácticas. 😀

Acabando El curso definitivo me vine para acá

Nos apoyaremos con 2 herramientas:
Editor de Texto → Visual Studio Code
Navegador → Chrome o Firefox

Repaso de:
HTML → Lenguaje que nos ayuda a estructurar nuestro contenido que mostraremos al usuario final. Trabajamos con etiquetas
CCS → Lenguaje que nos permite darle estilos a nuestro código. Se necesita una declaración que generalmente es la etiqueta

Yujuu vengo del Curso de Desarrollo Web Online de Leonidas y del Curso Html, css y javascript de Rulótico, genial para continuar con mi carrera de Frontend =)

vamos a poner en practica lo aprendido con el profe Leonidas en el curso de Desarrollo Web Online

regresando despues de terminar cursos de “desarrollo web online” y responsive desing"

ojala puedas sacar un curso de litElement
desde la vez que vi tu platica sobre esa tecnologia quede muy intrigado mientras tanto a darle !

Cuando dijo que debía ver el curso de diseño web online me detuve y pensé. ¿Sé lo suficiente de HTML5 y CSS3 como para tomar este curso? por supuesto si me veo abrumado lo pospondré y haré el básico de los mismos pero siento que puedo hacerlo y será interesante poner mis habilidades a prueba con este curso.

Les recomiendo tomar el curso css y html definitivo

Vuelvo en un parpadeo…

Veremos que tal va este curso.

ya volví! jaja

Hagamos posible lo imposible, aprendiendo más y más.

Me emociona maquetar el clone de Google 😁

Listo para empezar, vamos con toda!

Genial, vamos con todo 😃

adoro el sonido de inicio

Vamos a darle

Un muy buen inicio

Listo para aprender un dia mas!

¡A practicar!

Justo lo que necesito Practica practica y mas practica

A darle!

+2

Si tienen problemas para escribir más rápido su línea de código con atajos, les recomiendo el curso de Prework y hay una clase que te enseña a configurar los plugins necesarios para VS Code para un trabajo más fluido

Excelente vamos con toda

Vengo del curso definitivo de HTML y CSS, a seguir aprendiendo

En CSS las reglas es el conjunto de elementos que agregan estilos a etiquetas HTML Los selectores que son las etiquetas, clases que las llamamos con un . y los ID que son mas especificos y se llaman con #

The teacher DIego is excelent.

soy nuevo

Imagino entonces que luego nos tocará JavaScript, que nervios, después de muchos años retomaré algo que nunca inicié. Con fe!!!

Empezando un nuevo curso, yo se que si puedo!

Aquí les comparto a todos mi toma de notas de todo el curso en un Google Docs para que entre todos podamos ir mejorándolo!
Espero que les sirva y podamos aportar al documento juntos!

Suerte en el curso, es muy entretenido!

Además en cada archivo se encuentran los links a todas las demás tomas de notas existentes.

https://docs.google.com/document/d/1qflkIWbeC7wxVj-6kagcDw5P0RbbUm0NZjmvh9BaXbM/edit

♥ si vienes de la ruta de Wordpress.

A iniciar este curso y poner en practica todo lo del Curso definitivo de HTML y CSS, a practicar se ha dicho, saludos a todos!!!

AQUI ME VERAN EN TODOS LOS CURSOS

Si no puedes instalar visual, puedes ejecutar html y css en:
codepen

jajajajaaja por cosas raras, el video empezo a 0.85x y decia ¿porque diego parece estar ebrio?

PInta genial la cosa!!

#Aporte de 3 extensiones para VSCode que son una ayuda visual para programar:
1 Bracket Pair Colorizer.
2 indent-rainbow.
3 Rainbow Tags.

el curso de desarrollo web online ya no funciona

Me emociona la clase

Pues vamos a recuperar las bases :3

Etiquetas contenedoras se abren y se cierran, cuando son etiquetas de contenido como una etiqueta de imagen o video no siempre se cierran

Para los nuevos que llegamos, Platzi actualizó el curso de desarrollo web online, por el curso definitivo de HTML y CSS.
Aquí les dejo el link👇
https://platzi.com/clases/html-css/

Estupenda introducción al curso instructor Diego, es todo un gusto ser parte de él y aprovechare al máximo las enseñanzas.

Pueden ver a HTML como hacer una casa en obra negra y el CSS es la pintura, muebles, piso, etc…
Espero que mi aporte les sirva de algo 😉

HTML no es un lenguaje de programación, esto debes tenerlo muy en claro desde el principio, HTML es un lenguaje de marcado de hipertexto o “HyperText Markup Language” por el desarrollo de sus iniciales en inglés, básicamente este lenguaje se escribe en su totalidad con elementos, estos elementos están constituidos por etiquetas, contenido y atributos.

Comenzamos.

Acabo de llegar del Curso de Desarrollo Web Online

Apenas acabe el de Diseño web online, listo para seguir 😃

Vamos por ese badge!

Ay vamos…

ESPERO SEA INCREÍBLE EL CURSO

Buen comienzo !

a por ello!

Interesante hacer clones, para así aprender mas sobre los métodos usados por grandes empresas.

buen curso, ¡complementa el de desarrollo web de forma increíble!

vamoh a darle

Let’s Go!

Dijo curso de desarrollo web offline?? no lo encuentro

Me encanta que sigan renovando los cursos que ya tienen y agregando aun mas

se ve interesante el curso! vamos a hacerle.

Genial, empecemos.

Aquí vamos! Suerte a todos, nos vemos al final 😉