A√ļn no tienes acceso a esta clase

Crea una cuenta y contin√ļa viendo este curso

Index y Layout: definiendo estructura HTML

8/20
Recursos

Aportes 15

Preguntas 5

Ordenar por:

¬ŅQuieres ver m√°s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi√≥n.

El uso de @yield y @section son de mis cosas favoritas en Laravel, te permite crear peque√Īos archivos que despu√©s puedes ‚Äúpegar‚ÄĚ de cierto modo en una plantilla jaja, por eso amo Blade
.
Por si a alguien le interesa, ir√© poniendo el c√≥digo del proyecto en mi repositorio ūüĎÄ:

Creación de las primeras vistas
959bac2

Un supertip, se pueden ahorrar todo el Boiler plate HTML (estructura base de un HTML) si usan VSCode. Solo escriben: ! y les saldr√° un auto completado, espero les sirva!

Para la sintaxis de blade, laravel y desarrollo web en general les recomiendo instalar en VS Code las siguientes extensiones:

- PHP Intelephense
- Laravel Blade Snippets
- Auto Rename Tag
- Prettier - Code formatter

Hola, estaba un poco confundido porque no me tomaba algunos estilos css como text-3xl pero investigando mas a fondo me di cuenta que mi css no contiene esta propiedad y parece ser en parte a que uno puede personalizar el css, tal vez mi version no es la misma pero en el archivo app.css siguiendo la documentación de tailwindcss
adicione este estilo y funcionó, lo que significa que si algunos estilos no les da igual, puede ser que no este en la base css y por eso no lo reconozca y no lo aplique.

Index y Layout: definiendo estructura HTML


Es bueno entender que como estamos usando Laravel 8 y tailwind, escribimos poco código y obtenemos grandes resultados.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">

    <title>Cursos de Programacion Web</title>
</head>
<body>
    <main class="py-10 ">
        <div class="container mx-auto px-4">
            @yield('content')
        </div>
    </main>
</body>
</html>
@extends('layouts.web')

@section('content')
    <div class="text-center">
        <h1 class="text-3xl text-gray-700 uppercase">√öltimos Cursos</h1>
        <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnología</h2>
        <h3 class="text-lg text-gray-600">70% de los graduados duplican sus ingresos</h3>
    </div>
@endsection

Les comparto los archivos
web.blade.php

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cursos de Programación Web</title>
  <link rel="stylesheet" href="{{ asset('css/app.css') }}"
</head>
<body>
  <main class="py-10">
    <div class="container mx-auto px-4">
      @yield('content')
    </div>
  </main>
</body>
</html>

index.blade.php

@extends('layouts.web')

@section('content')
<div class="text-center">
  <h1 class="text-3xl text-gray-700 mb-2 uppercase">Ultimos Cursos</h1>
  <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnología</h2>
  <h3 class="text-lg text-gray-600">70% de los graduados duplica sus ingresos</h3>
</div>
@endsection

A los que depronto los estilos de los h1, h2, h3 no les salen como los del video ejecuten:

npm update && npm install && npm run dev

hay algo que definitivamente salió mal jajaja. Ayuda?

Index y Layout: definiendo estructura HTML

Primero que todo nos aseguramos de tener instaldo las dependencia de javascript las cuales son principalmente el css y tailwind.

$ npm install && npm run dev
o con yarn
$ yarn install && yarn dev

dentro de resources/views eliminamos el welcome.blade.php y creamos el index, entramos a la carpeta de layouts y creamos un archivo llamado web.blade.php

Este archivo contiene la configuracion de la plantilla y agregamos el @yield(‚Äúcontent‚ÄĚ) para imprimir ahi el hijo en este caso el index

web.blade.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <main class="py-10">
        <div class="container mx-auto px-4">
            @yield('content')
        </div>
    </main>
</body>
</html>

hacemos referencia de que queremos extender el layout y tambien sobre cual sección

@extends('layouts.web')

@section('content')
<div class="text-center">
    <h1 class="text-3xl text-gray-700 mb-2 uppercase">√öltimos Cursos</h1>
    <h2 class="text-xl text-gray-600">Fórmate online como profesional en tecnologia</h2>
    <h3 class="text-lg text-gray-600">70% de los graduados duplican sus ingresos</h3>
</div>
@endsection

Dentro del archivo de configuración de rutas routes/web.php direccionamos a el index

Route::view('/', 'index');

asegurate de que diga view y no get

provamos la pagina con php artisan serve

No sé si es mi impresión o el vídeo, como está grabado se nota un poco lento.
.
Le subí la velocidad a 1.25 jaja
.
No había trabajado con TailWind, y leyendo la documentación en conjunto con algunas templates, me parece Genial!

Mis aportes:

paso 2:

La tedencia actualmente es dejar de usar ‚Äútemplates‚ÄĚ y usar en su lugar ‚Äúcomponentes‚ÄĚ. El futuro de blade esta en los componentes y personalmente lo prefiero porque es m√°s natural y simple.

Si estas viendo este curso después del 2022, puede que los estilos cambien un poco ya que estamos en la nueva versión de tailwind css que es la 3.
Hay dos soluciones consultar la nueva documentación y poner los estilos, o instalar la versión 2.
No es mucho la diferencia pero los estilos del curso no e te aplicaran al 100%

Me parece muy util el jetstream, sin embargo aun no entiendo muy bien como manejar el migrations y las DB es algo confuso

web.blade.php

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Laravel 8 - Platzi - JJ</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body>
    <main class="py-10">
        <div class="container mx-auto px-4">
            @yield('content')
        </div>

    </main>
    
</body>
</html>

index.blade.php

@extends('layouts.web')

@section('content')
<div class=text-center>
    <h1 class="text-3xl text-gray-700 mb-2 uppercase">√öltimos Cursos</h1>
    <h2 class="text-xl text-gray-600">Fórmate online como profesional en Tecnología</h2>
    <h3 class="text-lg text-gray-600">70% de los graduados duplica sus ingresos</h3>
</div>
@endsection