Crea una cuenta o inicia sesi贸n

隆Contin煤a aprendiendo sin ning煤n costo! 脷nete y comienza a potenciar tu carrera

Configuraci贸n del proyecto

4/18
Recursos

Vamos a generar el setup del proyecto para tener muy bien organizados todos nuestros archivos, im谩genes y dem谩s.

image.png

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.

image.png

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谩.

3.png

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 123

Preguntas 16

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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.

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 鈥渜uemar鈥 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.

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.

Tiene muy buena pinta este curso para repasar los contenidos vistos anteriormente en el curso con Leonidas Esteban

Interesante, empecemos鈥

Aqu铆 linkeamos archivos usando una URL relativa, pero en proyectos reales suele ser una mejor pr谩cica usar URL鈥檚 absolutas ^^

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

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 鈥渄oc鈥 en el editor, le das a Enter y te sale igual.

muy interesante!!!

Dato:
La etiqueta <meta http-equiv=鈥淴-UA-Compatible鈥 content=鈥渋e=edge鈥> tiene que ver con la compatibilidad del navegador donde se esta consultando la p谩gina web, en este caso, http-equiv=鈥漍-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?

  1. Un archivo index .html
  2. 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

Algo que me di贸 curiosidad para que fuera mas 鈥渃re铆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

Si has llegado hasta aqu铆 soldado, Animo!, Dev贸rate el mundo!! 鉂わ笍鉂わ笍鉂わ笍鉂わ笍

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.

  1. Tenemos que tener la carpeta de nuestro proyecto.

  2. Necesitamos crear un archivo llamado index.html.

  3. Creamos nuestra carpeta de CSS donde vamos a tener todos nuestros estilos.

    El nombre de este puede ser 鈥淐SS鈥 o 鈥渟tyle鈥.

  4. 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 鈥淕oogleClone鈥

      • 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 鈥渕ain.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 setup del proyecto

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.

las clases de HTM y CSS requieren de practica y de volver a repasar cada tema. es muy enriquecedor

![](

馃挌Setup del proyecto
Es la organizaci贸n de las 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 鈥淐SS鈥 o 鈥渟tyle鈥.

  • 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.

鉁匰hortcut

  • Es una abreviaci贸n que tenemos en nuestro editor de texto para poder generar c贸digo o de ciertas l铆neas de c贸digo.

鉁匟TML

  • 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.

鉁匟ead

  • 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.

鉁匧ink

  • Sirve para referencias ciertos assets.

鉁匓ody

  • Es donde se encuentra todo lo visible las cosas con las que se pueden interactuar y agregar estilos en nuestro proyecto.

馃槂

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.

+2

Muy buena expllicaci贸n!

Buena clase hay conceptos que no sabia y unos que me hicieron reforzarlos.

Vamos all铆!!!

a repasar!

Vamos.

me gusta este tipo de organizacion para este tipo de proyectos peque帽os

Bien

.