Landing Page in 10 Minutes with Astro and CodeStitch
Summary
TLDREn este video, Ryan de Cedar Studios Web Design nos guía a través del proceso de construcción rápida de una página de aterrizaje utilizando Astro, un marco web veloz y potente, junto con Code Stitch, una biblioteca de componentes de HTML y CSS. Comenzando con la creación de un nuevo proyecto en Astro, Ryan explica cómo instalar dependencias, configurar TypeScript y estructurar el sitio web usando componentes y estilos proporcionados por Code Stitch. El tutorial abarca desde la implementación de una barra de navegación y un componente hero hasta la adición de otros elementos esenciales de la página, demostrando lo sencillo y rápido que es construir una página de aterrizaje atractiva y funcional para pequeñas empresas.
Takeaways
- 🛠️ El script proporciona una guía detallada sobre cómo construir una página de aterrizaje utilizando Astro, un framework web rápido y potente, y Code Stitch, una biblioteca de componentes de HTML y CSS para pequeñas empresas.
- 🚀 Astro utiliza un enfoque basado en componentes, lo que facilita la creación de sitios web como bloques de Lego, copiando y pegando componentes de Code Stitch.
- 📁 Astro organiza las páginas web en la carpeta 'Pages', enrutando automáticamente cada archivo como una página individual.
- ⚙️ Los archivos .astro admiten 'front matter' para ejecutar código JavaScript antes de construir el sitio estático o realizar el renderizado del lado del servidor.
- 📄 Los estilos CSS se pueden incluir en etiquetas <style> dentro de los componentes, y se aplicarán de forma aislada a ese componente específico.
- 🔄 Astro permite importar componentes fácilmente usando la sintaxis de importación de ES6.
- 🌐 Los componentes de Code Stitch son responsivos y optimizados para dispositivos móviles de forma predeterminada.
- 💻 El script demuestra la creación rápida de una página de aterrizaje completa combinando componentes de Astro y Code Stitch.
- 📖 Se mencionan futuras lecciones sobre el uso de la sintaxis JSX dentro de los archivos Astro y la creación de layouts.
- ⏱️ El enfoque de Astro y Code Stitch permite construir sitios web de forma rápida y eficiente, especialmente para pequeñas empresas que buscan una solución sencilla y efectiva.
Q & A
¿Qué es Astro y por qué se recomienda utilizarlo?
-Astro es un marco web rápido y potente. Se recomienda utilizarlo porque facilita la creación de sitios web de forma rápida y eficiente, especialmente sitios de aterrizaje (landing pages).
¿Qué es codeStitch y por qué se utiliza junto con Astro?
-codeStitch es una biblioteca de componentes de HTML y CSS puros, diseñada específicamente para pequeñas empresas. Se utiliza junto con Astro porque ofrece componentes responsivos y atractivos que se pueden integrar fácilmente en los proyectos de Astro.
¿Cuál es el propósito de la carpeta 'páginas' en un proyecto de Astro?
-La carpeta 'páginas' (pages) en un proyecto de Astro contiene cada una de las páginas web individuales que componen el sitio web. Astro enruta automáticamente estas páginas.
Explique la funcionalidad del 'front matter' en los archivos de Astro.
-El 'front matter' es una sección YAML al inicio de los archivos de Astro que permite ejecutar código JavaScript antes de construir el sitio estático o renderizarlo en el servidor. Es útil para importar datos, componentes y realizar operaciones previas.
¿Qué ventajas ofrece el enfoque basado en componentes al desarrollar con Astro y codeStitch?
-El enfoque basado en componentes facilita el desarrollo modular, reutilizando componentes y ensamblándolos como bloques de construcción. Esto agiliza el proceso de creación de sitios web, aprovechando los componentes prediseñados de codeStitch.
¿Cómo se pueden aplicar estilos CSS a los componentes en Astro?
-En Astro, se pueden aplicar estilos CSS directamente en los componentes utilizando etiquetas <style>. Los estilos CSS incluidos en un componente estarán automáticamente limitados en su alcance a ese componente.
¿Qué papel juega el archivo 'index.astro' en un proyecto de Astro?
-El archivo 'index.astro' es el punto de entrada principal de un proyecto de Astro. Representa la página de inicio del sitio web y es donde se ensamblan los componentes para construir la estructura completa del sitio.
¿Cómo se importan y utilizan componentes en los archivos de Astro?
-Los componentes se importan en los archivos de Astro utilizando la sintaxis de importación de ES6. Una vez importados, se pueden utilizar como etiquetas personalizadas en el marcado HTML del archivo.
¿Qué son las 'core styles' en codeStitch y cómo se integran en un proyecto de Astro?
-Las 'core styles' en codeStitch son estilos CSS globales que definen colores, fuentes y otros estilos base para toda la aplicación. Se pueden integrar en un proyecto de Astro incluyéndolos en un archivo de estilos global o directamente en el archivo 'index.astro'.
¿Qué otros temas se mencionan que se cubrirán en un video futuro relacionado con Astro?
-Se mencionan los siguientes temas que se cubrirán en un video futuro: usar la sintaxis JSX dentro de los archivos de Astro, trabajar con diseños (layouts) en Astro y construir múltiples páginas.
Outlines
🏗️ Creando un proyecto Astro desde cero
El párrafo describe cómo crear un nuevo proyecto Astro desde la terminal utilizando el comando 'npm create astro@latest'. Explica el proceso de instalación, configuración y lanzamiento del servidor de desarrollo. También menciona que se utilizará Typescript para el desarrollo y se proporcionará un breve resumen de cómo Astro maneja el enrutamiento de páginas a través de la carpeta 'pages'. Además, introduce el concepto de 'front matter' en los archivos Astro, que permite ejecutar JavaScript antes de la construcción del sitio.
🚀 Integrando componentes CodeStitch en Astro
Este párrafo explica cómo integrar componentes de CodeStitch en un proyecto Astro. Comienza copiando el HTML, CSS y JavaScript de un componente de navegación desde CodeStitch. Luego, crea un nuevo componente 'Navbar' en Astro y pega el código copiado. A continuación, importa y renderiza el componente 'Navbar' en la página principal. Después, repite el proceso para un componente de 'Hero' y otros componentes adicionales. Finalmente, muestra el resultado final de una página de destino completa creada rápidamente utilizando Astro y CodeStitch.
Mindmap
Keywords
💡Astro
💡CodeStitch
💡Componentes
💡HTML
💡CSS
💡JavaScript
💡Front Matter
💡Responsivo
💡Barra de navegación
💡Héroe
Highlights
Astro is a web framework that's very fast and powerful, and codeStitch is a component library with pure HTML and CSS components that are responsive and designed for small businesses.
Creating a new Astro project with the latest version using 'npm create astro@latest'.
Astro files have a YAML-style front matter where you can execute JavaScript code before building the static site or server-side rendering.
Demonstrating how to import and use a navigation bar component from codeStitch, including HTML, CSS, and JavaScript.
Showing how Astro styles are scoped by default to the component file, and how to include global styles.
Importing and using a hero component from codeStitch, including HTML and CSS.
Building multiple components by copying and pasting from codeStitch, including side-by-side sections, team section, pricing, reviews, call-to-action, and footer.
Mentioning future plans to demonstrate using JSX syntax within Astro files for fetching data from a CMS, and discussing layouts and building more pages.
Demonstrating the ease and speed of building a landing page using Astro and codeStitch.
Transcripts
hi this is Ryan with cedar Studios web
design today we're going to build a
landing page very quickly using Astro
which is one of our favorite tools it's
a web framework that's very fast and
very powerful and code Stitch which is a
component library with pure HTML and CSS
components that're very nice they're
responsive and they're specifically
designed for small businesses so the
first thing we're going to do is build a
new project I'll copy this here head
into my developer
folder paste that and PM create Astro at
latest that will create an astro project
of the latest version it's going to
launch this installer it's going to ask
for Nam so we'll call it Astro dcode
Stitch we'll just build an empty project
for now and we'll hit install
dependencies this will take a minute to
run while it does I just want to explain
that this is not going to be a very
in-depth Astro or code Stitch tutorial
there's some good videos for that I'll
link a couple below this but I'm just
going to show you a proof of concept of
how fast you can build a site using
these
tools so once this gets done running
it's going to ask us if we want to use
typescript in our project any second now
there it goes I'll say yes we're not
going to use any today but that's
primarily what I use for development and
then I'm going to skip adding a git
repository so this is all created now
I'm going
to go into this project and then I'm
going to
launch so this has built a project for
us it's pretty Bare Bones right now with
a few files in here but the most
important that we're going to be paying
attention to today is the source folder
which has all the code we need to build
a website and then there's this special
folder inside called Pages which is
going to contain each individual web
page that we're using and Astro is going
to Route these Pages automatically it's
already built for us an index page it
looks like this you can see some HTML
boiler plate there's just an H1 here
that says Astro so this should be pretty
Bare Bones so we'll just do npm start
which will launch a Dev server for
us go to this URL and yep you can see
the H1 right here another feature of
Astro files which are basically just
HTML files with a little extra is that
they have this yaml style front matter
in which you can execute JavaScript code
as that's run before you build a static
site or that's run on the server if you
have serers side rendering so for
instance I could create a variable
called sum it'll just equal 1 plus
two and then down here I could open up
an H2 Tag and Call sum and here you go
we have three so again this isn't client
side JavaScript that's going to run on
the website if we wanted that we could
just add a script tag right here and add
some
JavaScript but this is going to be run
uh as you build a website so this is
great great for pulling in data pulling
in components um anything you
need so the first thing we want to do is
let's go ahead and strip this stuff out
we just have blank website now well
we're going to want to go to code Stitch
and first find a nav bar I'm just on a
free account today so you can see what's
available to you before you sign up so
these are locked but we have a couple
options right here there one with a
drop- down and then there's just kind of
like a standard one so let's go to this
we'll hit get
code and we'll see all the files I need
to build a really nice nav bar that's
responsive and mobile friendly so we
have HTML and that's going to place all
of the uh components on or all the
elements on the website we've got CSS
which is going to style those elements
we have one called core Styles I should
put this somewhere in my project and
it'll just give me access to things like
colors like primary colors that's going
to apply throughout the entire website
and then for this particular component
there's going to be some JavaScript
because it's going to make a little
hamburger button on the mobile menu that
you click to open and close it so I'm
going to go ahead and copy this HTML and
come in here to my index. asro file now
I could just start pasting it here in
the body or we could take a more
component-based approach to developing
this in which I would add a new folder
in Source called
components and a new file I'll call it
navb bar. asro and in here I'll paste
that
HTML if I come back here I can again use
this front matter to run JavaScript so
I'm going to
import the
navbar
from components folder navb bar.
Astro and that's going to import this
thing at build time so it's not going to
slow down my website at all to import
this and these Astro files even though
it's just HTML it's going to export
itself as a component for me to use like
this automatically
so here in the body I can open a new tag
and close it off just like a jsx react
kind of component and hit save and now
if I come in here I see my whole nav bar
it's not styled yet CU we haven't added
that in but you can tell that just by
building out components in their own
files copy pasting them from code Stitch
that was super easy I can start just
building these things like Lego blocks I
could have a hero comp comp next
Etc so let's go ahead and finish this
one out and then we'll start with a hero
component so we need the Styles next I'm
going to close these out for
now and go to our CSS I'll copy and now
what I could do is I could add a new
file that's index.css and split it up
like that or I can go into my nav bar I
can open up a style tag and put it all
there and what's great about Astro is
that these styles are going to be scoped
by default to Navar this folder or this
file
rather and so in here I'm going to go
ahead and comment this out for now if I
hit save I have a styled Navar some
things are going to be a little off
right there's this contact us button
that seems to be invisible the reason
that is is because I haven't copied
these core Styles yet that's a code
Stitch thing so I'm going to go ahead
and copy this and again it says put it
in a global style sheet
I could make a global style sheet in
here or I could just go into my index
file and do the same thing just do a
style tag put it in there and save it
come back here and look now everything's
styled it has this nice orange color
that's going to apply throughout the
website the fonts a little off it's the
Sarah fonts and I don't think that's set
in here so I'm just going to go ahead
and do just a very simple font family
system that'll give me this nice sansera
font okay so it was that easy to build a
Navar component and style it and bring
it into my website now you will notice
this looks great on desktop or mobile
but this hamburger button isn't working
and that's cuz I haven't just copied
this jss anymore or yet so I can go back
to my nabar and I can just simply do a
script tag paste it in there types
script's going to yell at me a little
bit because I have that configured for
the project but I come in here and now
it's
working this script tag is also going to
be scoped to the Navar
file so let's go
ahead and let's
start in here I'll collapse this let's
start building this hero right same
thing again we're going to add a new
file we're going to call it hero. Astro
I already picked one out from code
Stitch that I like it's going to be this
one going to hit get code there's going
to be the HTML which I'm going to copy
in now I'll go ahead and do that copy it
here paste it save and then there's
going to be some CSS so I'll copy that
put that in the style
tag
oops paste it save it and then there's
some core styles again I don't need to
recopy this because I already have this
saved right here so now my heroes about
ready to go I'll do command period
little VSS code trick to add the import
and hit save
and there we go now I have a hero that's
taking its orange color from my root uh
Styles right here and everything's
looking great so far so I'm going to
skip ahead and add a few more components
just copy and pasting from code Stitch
and I'll see back here in a second and
just show you the full
website okay so now you can see in
components I've built a lot more
components I have pulled them in here in
the front matter and then I've put them
down here so if I I scroll I see I have
a nice side by side a little meet the
team section some pricing some reviews a
call to action and a footer and that is
how easy it is to build a landing page
with Astro and code Stitch and in my
next video I'll show you some extra fun
things like using jsx syntax
within the Astro files down here which
is great for if you want to pull in data
from a cm m s or something like that
I'll talk about uh layouts in Astro and
build more pages with you but for now I
just wanted to show you a little bit
about how fast you can build a landing
page with Astro and code
Stitch
浏览更多相关视频
Cómo hacer una PÁGINA WEB en BLOC de NOTAS
Curso de Diseño Web, Capitulo 0 - Introducción Para Principiantes
15. Tutorial Xcode: Creando WebView Básico
¿Qué es una página web? ¿Qué es un sitio web? ¿Qué es un portal web? | [ECD]
✌️👑Aprendiendo Desde Cero HTML 5 en Adobe Dreamweaver 2021👍✌️
Tutorial De Como Crear Grilla o Rejillas Con Boostrap Y Html5 En Sublime Text 3
5.0 / 5 (0 votes)