You don't have access to this class

Keep learning! Join and start boosting your career

Aprovecha el precio especial y haz tu profesión a prueba de IA

Antes: $249

Currency
$209
Suscríbete

Termina en:

0 Días
12 Hrs
34 Min
51 Seg
Curso de Introducción a Laravel 9

Curso de Introducción a Laravel 9

Profesor Italo Morales F

Profesor Italo Morales F

Diseño personalizado

25/31
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 rundev

How 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-60
  • h-px to define a height of one pixel
  • m-v-8 for 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:

Want to see more contributions, questions and answers from the community?

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"
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)