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
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.
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 rundev
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-60
h-px
to define a height of one pixelm-v-8
for a vertical marginAdditionally, 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%);
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
Para los que tienen problemas al ejecutar npm run watch hagan lo siguiente:
npm install [email protected] --save-exact
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"
Para mantener el server activo mientras se hacen los cambios y no repetir a cada rato npm run dev, usa npm run watch
Want to see more contributions, questions and answers from the community?