CONFIGURAR Visual Studio Code para HTML y CSS 🚀
Summary
TLDREn 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
💻 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.
📝 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.
Mindmap
Keywords
💡Visual Studio Code
💡Extensiones
💡HTML
💡CSS
💡Prettier
💡Live Server
💡Autocompletado
💡CSS Grid
💡Flexbox
💡IntelliSense
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
関連動画をさらに表示
CONFIGURAR Visual Studio Code para HTML y JAVASCRIPT 🚀
Las 8 mejores extensiones para potenciar tu experiencia en Visual Studio Code
CURSO de CSS 2021 Rapido y Facil # 2 | 💻 PRIMEROS PASOS
CURSO DE CSS 2021 rapido y facil | 💻 Presentación
CURSO de CSS 2021 Rapido y Facil # 4 | 💻 EL COLOR
Curso de HTML. 2.3. Introducción a las Hojas de Estilo CSS
5.0 / 5 (0 votes)