Configuración del proyecto
.
Setup del proyecto, es como vamos a organizar nuestras carpetas y archivos del proyecto.
Shortcut, abreviación que nos permite generar un grupo de código.
.
Repaso de etiquetas:
• <!DOCTYPE html> esta etiqueta sirve para avisar al navegador que estamos hablando de HTML5.
• Head, es una etiqueta contenedora, y no es visible para el usuario, pero es necesaria para manejar dependencias.
• Body, es una etiqueta contenedora, y contiene todo lo visual con lo que el usuario puede interactuar.
• Link, es una etiqueta de contenido que sirve para referenciar ciertos assets y por medio de esta invocaremos nuestro archivo css.
Introducción
#PlatziCodingChallenge || PlatziCodingChallenge
Lo que aprenderás sobre HTML y CSS
Análisis y creación del proyecto
Análisis del proyecto Google Clone
Configuración del proyecto
Chrome Dev Tools como herramienta
Qué son las Chrome Dev Tools
Header Google Clone
Qué es el Header y cómo hacer su maqueteado
Agregando estilos al Header
Posicionar una lista en horizontal
Manejo de íconos e imágenes en etiquetas
Contenido principal Google Clone
Maquetado de la sección principal
Estilos en la sección principal
Estilos en la sección del input
Íconos y manejo de background hover
Estilos en los botones
Footer Google Clone
Maquetado del Footer
Estilos en Footer
Cierre
Cierre: diferencias entre CSS Grid y Flexbox
Comparte tu proyecto y certifícate
Crea una cuenta o inicia sesión
¡Continúa aprendiendo sin ningún costo! Únete y comienza a potenciar tu carrera
Convierte tus certificados en títulos universitarios en USA
Antes: $249
$209
Paga en 4 cuotas sin intereses
Termina en:
17 Días
22 Hrs
3 Min
4 Seg
Configuración del proyecto
4/18Recursos
Vamos a generar el setup del proyecto para tener muy bien organizados todos nuestros archivos, imágenes y demás.
Creación de carpetas y subcarpetas
Lo primero que necesitamos es abrir nuestro editor de texto y crear una carpeta para nuestro archivo HTML, una subcarpeta para nuestro archivo CSS y otra para las imágenes que vayamos a utilizar. Recuerda que puedes llamar tu hoja de estilos como prefieras, pero siempre debe ser clara su importancia si tienes más de una.
Generación del esqueleto HTML básico
Usamos un shortcut para generar todo nuestro esqueleto HTML básico y empezar a modificarlo a partir de allí. Te dejo una lista con otros atajos de teclado para Visual Studio Code acá.
Recordemos:
- <!DOCTYPE html> sirve para avisar al navegador que estamos hablando de la versión HTML5.
- head es una etiqueta contenedora, y no es visible para el usuario, pero es necesaria para manejar dependencias.
- body es una etiqueta contenedora, y contiene todo lo visual con lo que el usuario puede interactuar.
- link es una etiqueta de contenido que sirve para referenciar ciertos assets y por medio de esta invocaremos nuestro archivo css.
Contribución creada con aportes de: Valeria Calcina Cisneros y José Miguel Veintimilla.
Aportes 132
Preguntas 17
Ordenar por:
Sería bueno que para el curso PROFESIONAL DE DESARROLLO WEB, se hagan este y por lo menos 5 proyectos más. así para asimilar bien el conocimiento.
Me encanta que siempre se haga un repaso antes de empezar, así sea rápido, te ayuda a reforzar conocimientos e incluso descubres algo nuevo!
Esta era la primera etiqueta que había que memorizarse antes de que saliera HTML 5:
**<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
**
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
La vista de compatibilidad es una característica que fue incorporada en Internet Explorer 8, que permiten al navegador mostrar las páginas web que no cumplen con los estándares como si corrieran en versiones anteriores de IE.
Por si a alguno les sirve para su resumen.
Aunque los estilos se pueden “quemar” directamente en el html, la mejor práctica es hacerlo por separado al igual que lo hacen en esta clase.
Aunque sean conceptos y funcionalidades ya vistas siempre valdrá la pena volver a verlo, el conocimiento de un mismo tema crece al saberlo de diferentes mentes.
Les dejo la fotografia de la pagina web q desarrolle:
https://www.w3schools.com/tags/default.asp
Para repasar o cuando no recuerdo las etiquetas y atributos. Lo que me gusta es que tiene un editor en línea para hacer tus pruebas en el momento.
Espero les sea de utilidad
que buen repaso
La generación automática de código en el editor de código, ayuda a evitar errores y facilita la creación de proyectos. Yo uso Sublime Text 3, es gratis, ocupa poco espacio y es muy bueno.
Les comparto es página de atajos con visual studio code
Animo!
Recomiendo a la par iniciar la gestión de versiones por medio de Git para ir viendo la evolución de nuestro proyecto y los cambios que se han hecho en cada commit.
Aquí linkeamos archivos usando una URL relativa, pero en proyectos reales suele ser una mejor prácica usar URL’s absolutas ^^
Tiene muy buena pinta este curso para repasar los contenidos vistos anteriormente en el curso con Leonidas Esteban
Interesante, empecemos…
Importante el orden en que creamos los archivos. 1. index.html y después crear el folder CSS sino no va a funcionar el live server visual estudio code.
Este proyecto me emociona, está muy bien explicado. Genial aprender a usar atajos en Visual Studio Code.
En el curso definitivo de html, css y javascript hay una explicación más descriptiva de cada parte de nuestro shorcut de html !doctype, en el curso de programación básica también Freddy al inicio nos enseña para que sirve cada linea de código que después generamos de manera rápida
Si has llegado hasta aquí soldado, Animo!, Devórate el mundo!! ❤️❤️❤️❤️
La hice responsive.
Lo mejor de este profe es que siempre da un quick review de lo que se ha hecho en el curso para que no nos sintamos perdidos.
Ya envie mi imagen con el proyecto. Pero queria dar un aporte para agradecer por el profe. No se si todos aqui se sienten igual que yo, pero me parece que este profesor que ha estado con nosotros desde el inicio del curso ha sido una persona clave en la sensacion tan gratificante que se siente aprender esto (diria cualquier tipo de cosa… pero esto tiene mas magia jaja)
Asi que gracias profe!!!! Aqui seguire y llegare hasta lograr la aplicacion que tengo en mente. 🤘
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
gracias platzi por este dia gratis, me siento como un ni;o aprendiendo cosas nuevas
Otra forma de inicializar el proyecto es escribir “doc” en el editor, le das a Enter y te sale igual.
muy interesante!!!
Dato:
La etiqueta <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> tiene que ver con la compatibilidad del navegador donde se esta consultando la página web, en este caso, http-equiv=”X-UA-Compatible”, y en el atributo content, el valor ie=edge se refiere al viejo navegador Internet Explorer el cual ya no es tan usado, en lugar de ello se indica usar el estándar de Edge como navegador de Microsoft.
Estupenda clase, tener esta estructura desde un principio nos permitirá organizar rápidamente los archivos del proyecto y nos facilitará su búsqueda.
Creo que degranda explica mejor que esteban… de todas formas pienso que los dos son excelentes.
Que bueno repasar los conceptos en cada curso, para un mejor memoria de la estructura básica y la etiqueta <link>.
me parece perfecto que el primer curso arranque a mil con leonidas y después bajemos un cambio. de hecho el primer curso me voló la cabeza.
El head es la parte no visible del proyectos, aquí van los metas y dependencias para que el proyecto funcione, mientras que el body es parte visible del proyecto para el usuario.
Practico, sencillo y con mucha sabiduría la explicación
Un setup del proyecto es saber cómo vamos a organizar nuestras carpetas y archivos.
¿Qué tipo de carpetas y archivos necesitamos?
- Un archivo index .html
- una carpeta especial para css
Requerimos de estructurar nuestro HTML de forma semántica.
esta bien para empezar
En Visual Studio Code podemos poner hmlt:5 y automaticamente nos genera una estructura base
Les dejo los siguiente SVG:
Menú de 9 puntos:
<svg>
<path d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path>
</svg>
Lupa:
<svg>
<path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path>
</svg>
Búsqueda por voz:
<svg>
<path fill="#4285f4" d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"></path>
<path fill="#34a853" d="m11 18.08h2v3.92h-2z"></path>
<path fill="#fbbc05" d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"></path>
<path fill="#ea4335" d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"></path>
</svg>
Búsqueda por imagen:
<svg viewBox="0 0 192 192">
<rect fill="none" height="192" width="192"></rect>
<g>
<circle
fill="#34a853"
cx="144.07"
cy="144"
r="16"
></circle>
<circle
fill="#4285f4"
cx="96.07"
cy="104"
r="24"
></circle>
<path fill="#ea4335" d="M24,135.2c0,18.11,14.69,32.8,32.8,32.8H96v-16l-40.1-0.1c-8.8,0-15.9-8.19-15.9-17.9v-18H24V135.2z"></path>
<path fill="#fbbc05" d="M168,72.8c0-18.11-14.69-32.8-32.8-32.8H116l20,16c8.8,0,16,8.29,16,18v30h16V72.8z"></path>
<path fill="#4285f4" d="M112,24l-32,0L68,40H56.8C38.69,40,24,54.69,24,72.8V92h16V74c0-9.71,7.2-18,16-18h80L112,24z"></path>
</g>
</svg>
Clase 4 - Configuración del proyecto
¿Cuál es el shortcut para generar la estructura básica de un archivo HTML en VSC?
- Simplemente escribimos el signo de admiración de apertura (!) y pulsamos la tecla Tab o Enter.
¿Para qué nos sirve la etiqueta <!DOCTYPE html>?
- Nos permite indicarle al navegador que el archivo estará escrito en la versión 5 de HTML.
¿Para qué nos sirve la etiqueta <head>?
- Es una etiqueta contenedora la cual no es visible para el usuario, pero nos ayuda a agrupar dentro de ella las diferentes dependencias que necesitamos para que nuestro proyecto funcione.
¿Para qué nos sirve la etiqueta <body>?
- Es una etiqueta contenedora la cual nos permite agregar todo el contenido que queremos mostrar en nuestra página web.
¿Para qué nos sirve la etiqueta <link>?
- Nos permite referenciar ciertos assets que usamos para el funcionamiento de nuestro proyecto, en el caso más común lo usamos para referenciar nuestro archivo CSS, esto lo podemos hacer de la siguiente manera:
<link rel="stylesheet" href="./css/main.css">
- El nombre y la ruta del archivo CSS cambian dependiendo de como lo nombremos y en donde lo guardemos.
Mi setup del proyecto
LA CONFIGURACION DE NUESTRO PROYECTO:
📌Setup del proyecto: Es como vamos a organizar nuestras carpetas y archivos del proyecto.
Shortcut, abreviación que nos permite generar un grupo de código.
- Repaso de etiquetas:
📌<!DOCTYPE html> esta etiqueta sirve para avisar al navegador que estamos hablando de HTML5.
📌 HEAD: Es una etiqueta contenedora, y no es visible para el usuario, pero es necesaria para manejar dependencias.
📌BODY: Es una etiqueta contenedora, y contiene todo lo visual con lo que el usuario puede interactuar.
📌LINK: Es una etiqueta de contenido que sirve para referenciar ciertos assets y por medio de esta invocaremos nuestro archivo css.
Algo que me dió curiosidad para que fuera mas “creíble” el clon, fue cambiar el logo en la pestaña del navegador, no sabía e investigué como hacerlo y comparto la línea para esto.
<link rel="shortcut icon" href="./assets/img/icon-google-32.png" type="image/x-icon">
Esta línea va dentro de la etiqueta head y en el atributo href la ubicación donde tenemos nuestro ícono
**NOTA: **El ícono debe tener como máximo unas medidas de 32x32 píxeles
En esta clase vimos como hacer el setup del proyecto, es como vamos a organizar nuestras carpetas y archivos del proyecto.
También para referenciar las carpetas podemos poner ./ (punto + línea diagonal y te auto completa las rutas ).
Les comparto mis apuntes, espero que le sirva. 😄
Setup del proyecto
Es la organización de nuestras carpetas y archivos del proyecto, las carpetas que van a contener los assets o elementos como las fuentes, iconos y archivos.
-
Tenemos que tener la carpeta de nuestro proyecto.
-
Necesitamos crear un archivo llamado index.html.
-
Creamos nuestra carpeta de CSS donde vamos a tener todos nuestros estilos.
El nombre de este puede ser “CSS” o “style”.
-
Dentro de nuestra carpeta de CSS creamos nuestro archivo con CSS, puede tener cualquier nombre, se lo suele llamar style.css o main.css.
Cada nombre tiene que usemos tiene que significar algo que hace en el proyecto.
Shortcut
Es una abreviación que tenemos en nuestro editor de texto para poder generar código o de ciertas líneas de código.
HTML
La forma en la que sabemos que estamos trabajando con HTML5 es con la declaración <!DOCTYPE html> del tipo de documento que está leyendo el navegador, en este caso HTML5.
head
Es la estructura en nuestro HTML que no se ve, pero que necesita el navegador para manejar ciertas dependencias y metadatos que son importantes. Esto es lo primero que lee el navegador para que el proyecto funcione.
Vamos a traer o linkear todas las dependencias que necesitamos para que proyecto pueda funcionar en el navegador.
link
Nos sirve para referencias ciertos assets.
body
Es la etiqueta en donde se encuentra todo lo visible las cosas con las que se pueden interactuar y agregar estilos en nuestro proyecto.
-
Crear un setup
-
Se crea una carpeta contenedora del proyecto, en este caso se creo “GoogleClone”
-
Dentro de la carpeta creada se crea el archivo principal HTML, index.HTML
-
Se crea una carpeta para los estilos CSS aqui la carpeta se va a llamar CSS
Aqui se crea un archivo “main.css” los nombres de los archivos deben de indicar la parte del proyecto a la cual le dan estilo en este caso todo se realizara en un solo archivo por eso se llama main.
-
Con esto tenemos una estructura base de nuestro setup.
-
Creí que el reto de la clase anterior era generar una copia de google jajaja ya no me siento tan mal de haberme tardado 2 días haciendo el clon
Retomando este curso, espero terminarlo hoy y asi repasar todo el contenido que aprendi en los cursos anteriores…
Recomiendo a todos que usen GIT y GIT HUB para todos los proyectos, no importa lo pequeño que sean
muy buena la explicacion de todo, aunque es algo que ya conocemos, esto cae muy bien para refrescar la memoria
@degranda Excelente! lo explicas de una manera muy entendible, justo termine el curso de Desarrollo web online y ahora vamos por este, existe una diferencia entre cada docente al explicar pero sin ninguna duda Platzi tiene muy buenos docentes que hacen que valga la pena seguir aprendiendo aquí 😄
No sabía lo del ! ,para tener toda la estructura escribía html:5 tab para tener la estructura, con ! me parece tambien práctico, excelent!!
HTML5 con respecto a anteirores trae varias cosas que nos facilitan mucho la vida a la hora de programar
Me agrada mucho la forma en que explica Diego, su manera de expresarse es excelente, hasta ahora nada nuevo, solo repaso, digamos que en un breve resumen de todo lo que se a ha visto.
que bueno es hacer este curso, refuerza muchísimo lo que aprendí en el curso anterior
Recomiendo que hagan el curso de Git! para organizar sus repositorios y avance! Saludos
https://platzi.com/clases/git-github/
Gracias Diego de Granda tienes una capacidad para enseñar envidiable, no como otros profes que no quiero nombrar
ahhahaahhahhahaahhha
explicaste muy bien
muy buena clase 😄
Se puede usar ATOM en vez de Visual Estudio Code
Muy interesante!!
Hagamos esta práctica!
buen curso para repasar
genial…
esta clase es un pequeño recordatorio ✔
Excelente repaso!
Son las bases, algo de repaso nada mas
Venga vamos a aprender nuevas cosas o mejorar lo aprendido en los anteriores cursos.
Estoy emocionado con este proyecto…
A continuar.
En que utilizaríamos este proyecto
La página de MDN tiene información buena y actualizada.
Setup Del Proyecto:
Es la organización de los archivos y carpetas
excelente, listo para escribir código
maquetar antes de es muy importante
Mi plan se vence en Diciembre
Me doy cuenta que aquí necesito o mejor dicho quiero documentar mis avances, la manera en como voy aprendiendo y las cosas que voy implementando, para un futuro lograr encontrarlo fácil, rápido, sencillo. Para eso estoy viendo lo mas basico que es un Sistema Control de Versiones (GIT) y a la vez porque no? LinkedIn para la parte mas sociable. Todo esto previo a escribir codigo y seguir avanzando en mi aprendizaje de manera diferente.
el setup de un proyecto es la forma de organizar nuestros archivos y carpetas del proyecto una forma de obterner la estructura de html es con el signo de admiracion y la tecla tab, otra es escribiendo doc y la tecla enter, y escribiendo ht nos sale una pantalla de seleccion ,escojer la que dice html: 5
Acá les dejo mi versión, previo a tomar estas clases como tal: <https://lestherxm.github.io/google_clone_v1/>
<head>
Lo único del <head> que será visible para el usuario es el <title> y el <link> del favicon.
crod
las clases de HTM y CSS requieren de practica y de volver a repasar cada tema. es muy enriquecedor
otra forma para buscar tus archivos a los cuales vas a referenciar es con ./ y automaticamente te mostrara cuales son los archivos que puedes tomar
Este curso tiene muy buena pinta
Algún libro recomendador para aprender a profundidad acerca de CSS?
Muchas gracias por la oportunidad de poder aprender
Genial, me gusta que se expliquen conceptos tan basicos! Muy buen profesor
Sin duda, Diego es el mejor profesor de Platzi 👌🏼
incluso lo mas basico que ya se sabe lo explicas bien XD
Proyecto configurado!
Genial
Les comparto para que puedan repasar etiquetas HTML: https://htmlreference.io/
me encanta este curso
emocionado por el curso
que genial un repaso rápido de todo, muy interesante.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?