Para los que tienen problemas al ejecutar npm run watch hagan lo siguiente:
npm install [email protected] --save-exact
Introducción a Laravel
Introducción a Laravel 9: Configuración Inicial y Bienvenida
Estructura principal de Laravel
Fundamentos de Laravel
Uso de Artisan en Laravel: Comandos y Funciones
Manejo de Solicitudes HTTP en PHP
Uso de Blade para Crear Vistas en Laravel
Configuración de Plantillas para Vistas Reutilizables en Laravel
Controladores en Laravel: Gestión de Rutas y Peticiones
Cómo Crear Migraciones en Laravel
Cómo Crear Modelos en Laravel
Manejo de Datos con Eloquent en Laravel
Configuración de Relaciones entre Tablas con Eloquent
Manos a la obra con nuestro proyecto
Enfoque del proyecto
Inicio de sesión
Sistema de inicio de sesión
Panel administrativo
Listado de publicaciones
Función de eliminar
Crear y editar (primer paso)
Controles de un formulario
Función de guardar
Función de editar
Validación
Registros duplicados
Trabajemos en el diseño web de nuestro proyecto
Diseño web
Diseño personalizado
Página home
Destacado
Publicación individual
Buscador
Optimización
Cierre
Mejoras Finales y Cierre del Proyecto en Laravel
You don't have access to this class
Keep learning! Join and start boosting your career
If you already have an account,
Resources
How can we improve the design of our home page?
Improving the design of a website is not an easy task, but making the right choices can make all the difference. This time, we will focus on the template and see how a design tweak can give that professional touch to our page. We will start by developing a line just after the header to improve the visual aesthetics. This process includes the use of some Tailwind CSS classes and npm commands.
What do we do if we use unregistered classes?
When working with web development, it can be frustrating to use classes that are not automatically updated. In case you use a new unregistered class in your final file, it is essential to run the npm rundev command again. However, you can avoid this repeated process by keeping the system on, so that it observes any changes and automatically updates the final CSS file. This is accomplished by reusing the command with an option that keeps the server in continuous monitoring.
npm rundevHow do we create a new line with gradient?
Now, after ensuring that our framework is configured, we proceed to create a gradient line right after the header. Start with a div container and apply the following Tailwind CSS classes:
opacity-60h-pxto define a height of one pixelm-v-8for a vertical margin
Additionally, a CSS property is used to apply a gradient that evolves from transparent to a visible gray. The use of rgba helps us to define the gray and transparency levels. Below, you will find the code snippet to set this gradient.
background: linear-gradient(to right, rgba(200, 200, 200, 200, 0) 0%, rgba(200, 200, 200, 200, 1) 30%, rgba(200, 200, 200, 200, 1) 70%, rgba(200, 200, 200, 0) 100%);What else can we include in our template to make it stand out?
Once we've set up our gradient line, it's time to add a custom touch to our page. At the end of the template, we can include a small paragraph containing our logo. In addition, it is recommended to use CSS classes to align the content to the center and apply appropriate padding. Here is the code snippet you can apply.
<div class="p-y-16 text-center"> <!-- Here's your logo --></div>With these elements, your page will start to look more professional and attractive. Don't forget to review your changes in the browser and make sure that each adjustment meets your expectations and adds value to the design. Stay updated and open to new ideas and tools that can further enrich your web projects, keep learning and improving!
Contributions 8
Questions 1
Sort by:
En vite, si el host de desarrollo no está en la misma máquina en que se escribe el código, agregar esto a package.json
"scripts": {
"dev": "vite --host ip_del_host_de_ejecución",
"build": "vite build"
se me olvido borrar la coma en el ultimo rgb y no me mostraba la linea jeje
Para mantener el server activo mientras se hacen los cambios y no repetir a cada rato npm run dev, usa npm run watch
A mi no me salió el diseño y no se por qué, alguien me podría ayudar
```js
```\
a ustedes si les funciono, a mi no y no se porque
```js
```
Muchachos para los que quieran ver los cambios en tiempo real tienen que abrir dos consolas dentro de VS code, en una de ellas debes ingresar el comando npm run dev y dejarlo corriendo. En la otra consola efectua el php artisan serve y listo. Podras ver los cambios de clases casi al instante sólo recuerda guardar los cambios para que el compilador los pueda detectar.
Con Vite ya no es necesario ejecutar `npm run watch` ya que con `npm run dev` Vite se queda escuchando y refresca automáticamente el navegador (hot reload)
Want to see more contributions, questions and answers from the community?