Construcción de un Clon Web con HTML y CSS

❤️ 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.

Les comparto unas librerías que, les ayudarán para practicar.
https://developer.mozilla.org/es/docs/HTML/HTML5/HTML5_lista_elementos
https://cssreference.io/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://www.w3schools.com/html/default.asp

Un juego:
https://flexboxfroggy.com/#es

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 😄

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

Iniciare la ruta Frontend

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

hoy me desvelo xd!!!

Visual code studio😂

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

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

Aquí comienza un nuevo camino 😎

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

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

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

El mejor profesor de Platzi, empezamos…

Le falta mucho.! Pero para ser mi primer intento y sin ningún tutorial, estoy contenta con el resultado

soy nuevo espero aprender mucho!!!

Puedo usar otro lenguaje de programa para la web?

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

Repasando. Mucho JavaScript y quiero tocar base 😄

Vamossss A Darlee !!

Quien en el 2023?

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

Clase 2 - Lo que aprenderás sobre HTML y CSS

¿Cuál es el proyecto que realizaremos en este curso?

• Un clon de la página principal de Google.

¿Qué herramientas usaremos para desarrollar nuestro proyecto?

• Visual Studio Code.
• Google Chrome.

¿Por qué usar Visual Studio Code como nuestro editor de código y no otro?

• Porque este cuenta con unos plugins que nos facilitan nuestro proceso de desarrollo.

¿Por qué usar Google Chrome como nuestro navegador y no otro?

• Porque este cuenta con una herramienta de desarrolladores que nos permite ver los cambios en nuestro código en tiempo real.

¿HTML y CSS son lenguajes de programación?

• No.

¿Para qué nos sirve HTML?

• Para estructurar la información de nuestra página web.

¿Qué significan las siglas HTML?

• Hypertext Markup Language o en español lengua de marcado de hipertexto.

¿Para qué nos sirve CSS?

• Para darle estilos o una mejor apariencia visual a nuestra página web.

¿Qué significan las siglas CSS?

• Cascading Style Sheets o en español lenguaje de estilos en cascada.

¿Qué usamos para trabajar con HTML?

• Etiquetas.

¿Qué tipos de etiquetas hay en HTML?

• Etiquetas con pareja de cierre o de contenido.
• Etiquetas sin pareja de cierre, self closing o etiquetas vacías.

¿Qué usamos para trabajar con CSS?

• Selectores.
• Propiedades.
• Valores de propiedades.

¿Cómo se le conoce al conjunto de la propiedad y el valor de la propiedad?

• A esto se le conoce como declaración.

¿Cómo llamamos al conjunto de selector y declaración?

• Regla de CSS.

¿Cuáles son los selectores más conocidos y usados?

• De elemento o de etiqueta.
• De clase.
• De id.

¿Cómo debemos usar el selector de elemento o etiqueta para poder usarlo en CSS?

• Este selector simplemente necesita del nombre de la etiqueta a la que queremos aplicarle estilos. Es importante saber que si usamos este selector las declaraciones que escribamos en esta regla aplica a absolutamente todas las etiquetas con el mismo nombre que escribimos en el selector.

¿Cómo debemos de usar el selector de clase para poder usarlo en CSS?

• Para poder usar este selector es importante que primero le asignemos a los elementos HTML que queremos modificar el atributo “class” y que a cada uno de estos elementos le asignemos el mismo valor en dicho atributo. Luego de esto si podemos usar el valor del atributo “class” como selector en nuestro archivo CSS. la sintaxis para usar este selector es la siguiente:

• HTML

<h1 class="title">Soy un título de ejemplo</h1>

• CSS

.title
{
    font-size: 20px;
    color: red;
}

• Como vemos en este ejemplo es muy importante que antes del valor del atributo “class” debemos escribir un punto.

¿Cómo debemos de usar el selector de id para poder usarlo en CSS?

• Para poder usar este selector es importante que primero le asignemos a un elemento HTML que queremos modificar el atributo “id”, además debemos de saber que el valor que asignemos a este atributo debe ser único e irrepetible, por lo cual solo podemos usarlo en un elemento HTML. Luego de esto usamos el valor que escribimos en el atributo “id” como selector en nuestro archivo CSS. La sintaxis de este selector es la siguiente:
• HTML:

<h1 id="title">Soy un título de ejemplo</h1>

• CSS

#title
{
    font-size: 20px;
    color: red;
}

• Como vemos en este ejemplo es muy importante que antes de escribir el valor del atributo “id” como nuestro selector debemos de escribir el símbolo de numeral (#).

Cuando me entero que haré un clon de Google…

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!