CONFIGURAR Visual Studio Code para HTML y CSS 🚀

Summary

En este tutorial, se muestra cómo configurar Visual Studio Code para el desarrollo de HTML y CSS. Se explica la creación de un proyecto básico, la instalación de extensiones útiles como 'Prettier' para formatear código y 'Live Server' para ver cambios en tiempo real. Además, se recomiendan extensiones como 'CSS Search', 'IntelliSense' para sugerir nombres de clases y 'CSS Grid' y 'Flexbox' para facilitar el diseño de interfaces.

Takeaways

• 💻 Se recomienda instalar Visual Studio Code para trabajar con HTML y CSS.
• 📂 Se sugiere crear una carpeta llamada 'tutorial' y un archivo 'index.html' para empezar a trabajar.
• 🌐 Visual Studio Code ofrece soporte integrado para HTML5 y CSS, incluyendo autocompletado y sugerencias de código.
• 🔧 Se puede formatear el código HTML y CSS de manera automática con la extensión 'Prettier'.
• ⚙️ La extensión 'Prettier' también permite configurar el formato de código cada vez que se guarda el archivo.
• 🖥️ 'Live Server' es una extensión útil para ver los cambios en tiempo real en el navegador.
• 🔎 'CSS Search' ayuda a encontrar y gestionar clases en el código HTML.
• 📝 'CSS Intellisense' sugiere nombres de clases CSS para facilitar la escritura del código.
• 📏 La extensión 'CSS Grid' proporciona soporte y sugerencias para trabajar con Grid Layout.
• 💼 'Flexbox CSS' es otra extensión recomendada para facilitar el uso de Flexbox en los diseños.

Q & A

¿Qué editor se está utilizando en el tutorial?

El tutorial utiliza Visual Studio Code como editor de texto.

¿Qué extensiones se recomiendan para trabajar con HTML y CSS en Visual Studio Code?

Se recomiendan las extensiones Prettier, Live Server, CSS Peek, CSS IntelliSense, CSS Grid, y Flexbox.

¿Qué función tiene la extensión Prettier?

Prettier se utiliza para formatear el código de manera automática en HTML, CSS, y otros lenguajes como JavaScript o JSON.

¿Cómo se activa la extensión Prettier para que formatee el código automáticamente al guardar?

Se debe ir a 'Manage Settings', buscar la opción 'Formatting', y activar la casilla 'Format on Save' para que Prettier formatee el código cada vez que se guarde el archivo.

¿Qué es la extensión Live Server y para qué se utiliza?

Live Server es una extensión que crea un servidor local para ver los cambios en tiempo real en el navegador mientras se edita el código.

¿Cómo se inicia el Live Server en Visual Studio Code?

Se hace clic derecho sobre el archivo HTML en el editor y se selecciona 'Open with Live Server'.

¿Qué hace la extensión CSS Peek?

CSS Peek permite buscar las diferentes clases que se usan en el HTML y ver su definición directamente en el archivo CSS.

¿Para qué sirve la extensión CSS IntelliSense?

CSS IntelliSense sugiere nombres de clases mientras se escriben en el HTML, ayudando a no inventarlas desde cero.

¿Cómo ayuda la extensión CSS Grid en el desarrollo?

CSS Grid ofrece sugerencias y autocompletado mientras se escribe código relacionado con Grid Layout, facilitando su uso.

¿Qué beneficios ofrece la extensión Flexbox en el trabajo con CSS?

La extensión Flexbox ayuda a visualizar y utilizar mejor las propiedades de Flexbox en el código CSS, proporcionando sugerencias automáticas.

Outlines

00:00

💻 Configuración de Visual Studio Code para HTML y CSS

El tutorial comienza con una introducción sobre cómo configurar Visual Studio Code para el desarrollo de páginas web utilizando HTML y CSS. Se menciona la instalación de extensiones útiles y se procede a crear una carpeta llamada 'tutorial' para organizar el proyecto. Dentro de esta carpeta, se crea un archivo 'index.html' y se muestra cómo Visual Studio Code proporciona una estructura básica de HTML5 de forma automática al escribir la extensión '.html'. Además, se explica cómo vincular un archivo CSS al archivo HTML y se destaca la funcionalidad de autocompletado integrada en el editor. Se hace hincapié en que Visual Studio Code ya incluye algunas características por defecto, como el soporte para Markdown, y se sugiere instalar extensiones adicionales para mejorar la experiencia de desarrollo.

05:01

📝 Extensiones Recomendadas para Visual Studio Code

Se recomienda la extensión 'Prettier' para dar formato al código tanto en HTML como en CSS, y se explica cómo activarla y configurarla para que aplique formato automáticamente al guardar el archivo (format on save). Además, se introduce la extensión 'Live Server', que permite ver los cambios en tiempo real en el navegador al guardar los archivos. Seguidamente, se presentan otras extensiones útiles para el desarrollo con CSS, como 'CSS Peek', 'IntelliSense', 'CSS Grid' y 'Flexbox'. Cada extensión es descrita brevemente, explicando su función y cómo pueden ayudar a los desarrolladores a escribir código más eficientemente. El tutorial concluye con una recomendación de suscribirse al canal y agradece la visualización del video.

Keywords

💡Visual Studio Code

Visual Studio Code es un editor de código fuente desarrollado por Microsoft. Es un programa que permite a los desarrolladores escribir y editar código de manera eficiente. En el video, se utiliza Visual Studio Code para configurar un entorno de desarrollo para trabajar con HTML y CSS, mostrando cómo se puede utilizar para crear y editar archivos de estas tecnologías web.

💡Extensiones

Las extensiones son complementos que se pueden agregar a Visual Studio Code para ampliar sus funcionalidades y adaptarlas a las necesidades específicas del usuario. En el tutorial, se recomiendan varias extensiones como 'Prettier', 'Live Server', 'CSS Peek', 'IntelliSense' y 'CSS Grid', para mejorar la experiencia de desarrollo en HTML y CSS.

💡HTML

HTML, o HyperText Markup Language, es el lenguaje de marcado estándar para crear páginas web y sitios web. Es usado para estructurar y diseñar el contenido de una página. En el video, se menciona la creación de un archivo 'index.html' y se explica cómo se puede estructurar con elementos HTML5 básicos.

💡CSS

CSS, o Cascading Style Sheets, es un lenguaje utilizado para describir la presentación de un documento escrito en HTML. Permite controlar el estilo visual, como colores, fuentes y diseño. En el guion, se habla de vincular un archivo CSS a un documento HTML y se mencionan extensiones que facilitan la escritura y comprensión de CSS.

💡Prettier

Prettier es una extensión de Visual Studio Code que se utiliza para formatear el código de manera automática y consistente. En el video, se instala y configura Prettier para formatear tanto el HTML como el CSS, lo que ayuda a mantener un código limpio y legible.

💡Live Server

Live Server es una extensión que se instala en Visual Studio Code y que permite a los desarrolladores ver los cambios en su código HTML y CSS en tiempo real. Cuando se guarda un archivo, Live Server actualiza automáticamente el navegador, permitiendo ver inmediatamente los cambios. Esto se menciona en el video como una herramienta útil para el desarrollo web.

💡Autocompletado

El autocompletado es una función que muchos editores de código, incluido Visual Studio Code, ofrecen para acelerar el proceso de codificación. Sugiere palabras o líneas de código basadas en lo que el usuario ha escrito previamente. En el guion, se muestra cómo Visual Studio Code ofrece autocompletado para HTML y CSS, facilitando la escritura de código.

💡CSS Grid

CSS Grid es una técnica de diseño de cuadrículas en CSS que permite crear diseños complejos de dos dimensiones. En el video, se menciona una extensión que ayuda a los desarrolladores a trabajar con CSS Grid, proporcionando soporte y sugerencias para crear diseños de cuadrícula.

💡Flexbox

Flexbox es un modelo de diseño de cajas flexibles en CSS que permite el alineamiento y la distribución de espacio entre los elementos de una página web de manera eficiente. En el tutorial, se habla de una extensión que facilita el uso de Flexbox, proporcionando ayuda para la creación de diseños flexibles y responsive.

💡IntelliSense

IntelliSense es una característica de muchos editores de código que proporciona sugerencias y autocompletado de código basado en la sintaxis y la estructura del lenguaje que se está utilizando. En el video, se menciona que IntelliSense puede ayudar a los desarrolladores a escribir CSS más rápido y con menos errores.

Highlights

Tutorial de configuración de Visual Studio Code para HTML y CSS.

Creación de una carpeta para el tutorial y arrastrar al editor.

Creación de un archivo 'index.html' y estructura básica HTML5.

Visual Studio Code ofrece autocompletado y sugerencias por defecto.

Instalación de la extensión 'Prettier - Code formatter' para formatear código.

Formateo de código HTML y CSS con Prettier.

Configuración de formateo automático al guardar con 'Format on Save'.

Instalación de la extensión 'Live Server' para ver cambios en tiempo real.

Cómo utilizar Live Server para abrir un servidor local y ver cambios en vivo.

Recomendación de la extensión 'CSS Peek' para buscar clases en HTML.

Introducción de la extensión 'IntelliSense' para sugerir nombres de clases CSS.

Recomendación de la extensión 'CSS Grid' para facilitar el uso de Grid Layout.

Instalación de la extensión 'Flexbox CSS' para asistir en el diseño con Flexbox.

Resumen de extensiones recomendadas para HTML y CSS y sus funcionalidades.

Agradecimientos y despedida del tutorial.

Transcripts

Hola amigos Bienvenidos a este tutorial

en este tutorial vamos a ver Cómo

configurar visual Studio code para html

y css yo bueno ya tengo aquí abto lo que

es el editor para poder hacer Bueno

instalar las extensiones que vamos a

ocupar Antes que nada bueno vamos a

crear tan solo una carpeta Aquí nada más

para que vean

eh Cómo se va a ejecutar las extensiones

voy a crear una carpeta que se va a

nombrar tutorial voy a arrastrar hacia

editor voy a crear tan solo una archivo

que lo voy a nombrar como Index html

creo la estructura básica html5 vean

como ya tan solo poniendo la extensión

visual Studio cod ya viene con algunas

cosas por default por ejemplo con em si

le damos enter al de medio nos crea la

estructura básica en ccs Bueno si le

damos punto Style ccs y vinculamos este

archivo aquí lo podemos vincular vean

como también ya viene em con aquí con el

autocompletado le damos enter y nos pone

el completado también aquí nos sugiere

el

archivo y en ccs también podemos poner

ya Body por ejemplo y empezar a usar ya

también m de aquí viene con varias ya

cosas que vienen incluidas para de esta

manera no tenerlas que instalar Entonces

ya por default viene con md integrado

pero necesitamos otras extensiones para

poder agilizar un poquito más el

desarrollo vamos a venir aquí extensions

la primera extensión que les voy a

recomendar es la de preter

es esta de prer code format y este nos

va a ayudar para formatear el código

esta extensión es para formatear el

código tanto en el html como en el css y

algunos otros como javascript json

etcétera entonces esta se la recomiendo

la de preter y bueno la activamos de la

siguiente forma una vez que ya lo

tenemos aquí Bueno podemos poner aquí un

h1 que diga hola

mundo y si desordenamos el código

vamos a ver ahorita cómo lo vamos a

ordenar conar tenemos que darle clic

derecho del Ratón y vamos a darle donde

dice format con format document con

Vamos a darle en configurar deile format

y vamos a elegir el de preter este de

aquí una vez que ya lo instalaron

elegimos preter y ya si nosotros le

damos format document se formatea con

preter Okay podemos dejarlo así format

document o podemos formatearlo cada vez

que guardamos con control S

y esto lo podemos configurar aquí

directamente vamos a venir aquí ahora lo

que es a manage settings vamos aquí por

ejemplo a buscar el el que

dice vamos a

bajar un momento y debemos de Buscar el

que

dice

formatting este aquí y aquí forman este

de formating format on saave y esto si

le damos click se va a formatear cada

vez que vamos guardando si lo dejamos

seleccionado y cerramos aquí guardamos

vean como ya lo formatea cada vez que

guardamos el archivo eso lo pueden dejar

ahí si lo necesitan lo pueden dejar

activo y es este de aquí Recuerden que

es formating y este de aquí que

seleccionamos por si queremos formatear

el código cada vez que guardamos Okay si

no lo dejamos de esa forma pues

simplemente Tienen que

darle aquí clic derecho del Ratón y

forman document y ya lo formateé a

comprer por si quieren tenerlo un poco

más controlado Okay esa es una extensión

que Les recomiendo la otra extensión es

la de sl

server esta extensión de Live server

bueno la instalan directamente aquí

esperamos unos segundos a que se instale

y esta extensión nos ayuda a ver lo que

son los cambios en tiempo real es Live

server cuando dice disable significa que

ya se instaló regresamos aquí a lo que

es el html y le damos en cualquier parte

del archivo y ahora clic derecho del

Ratón y le vamos a dar donde dice Open

Will

server esperamos unos segundos y se va a

abrir un servidor local en su navegador

permítanme aquí va a aparecer y aquí

está el servidor local y este nos

funciona para ver los cambios en tiempo

real con control S cada vez que vamos

guardando se van viendo los cambios

Entonces es es la otra extensión que Les

recomiendo y la segunda Bueno ya las

extensiones para css las que Les

recomiendo son las siguientes esta que

es

ccs

Search este de aquí cc pic este nos va a

ayudar a buscar lo que son

las las diferentes clases que tenemos en

el html entonces estas se las

recomiendo este cs pic y también la otra

que Les recomiendo es

[Música]

intelligence este de aquí intelligence

para ccs Class name este les va a

empezar a sugerir algunos nombres de las

clases entonces eh se los recomiendo

para que de esta manera puedan escribir

lo que son las diferentes clases y aquí

Bueno pues les agrega algunas

sugerencias para que no tengan que

inventarlas desde cero

la otra extensión que Les recomiendo es

la de ccs

grid esta esta extensión vamos a

buscarla es esta de aquí esta también se

las recomiendo para lo que son el grid

cuando empiecen a escribir grid bueno ya

aquí pueden les va a aparecer las

sugerencias como aquí pueden observar la

otra es la de flexbox cs flexbox

Y esa

extensión es esta de aquí esta también

se la recomiendo y est les va a ayudar a

lo que es

a aquí pueden observar Cómo les puede

ayudar a lo que es el

flexbox aquí pueden observar cómo

funciona Aquí está la documentación de

cómo pueden usarla de acuerdo y esas son

en sí las extensiones que Les recomiendo

para html y ccs ya lo demás viene por

default Pero esas son las más úes Okay

espero les haya servido no se olviden

suscribir al Canal y gracias por ver el

video Bye