Curso de Materialize

Clases del Curso de Materialize

Instruido por:
Diego De Granda
Diego De Granda
Básico
2 horas de contenido
Ver la ruta de aprendizaje
Platzi News
Proyecto del curso
Platzi News

Desarrolla la estructura de un sitio de noticias usando Materialize. Implementa sus componentes y adáptalos a las necesidades del proyecto.

Curso de Materialize

Curso de Materialize

Progreso del curso:0/17contenidos(0%)

Contenido del Curso
Tutoriales de estudiantes
Preguntas de estudiantes

Progreso del curso:0/17contenidos(0%)

Introducción a Materialize

Material Thumbnail

Frameworks ¿Qué son?

01:59 min

Material Thumbnail

¿Qué es Material Design y Materialize?

05:07 min

Material Thumbnail

La lógica detrás del Grid system

03:41 min

Material Thumbnail

Documentación y características de Materialize

11:34 min

Material Thumbnail

Componentes de Materialize

02:26 min

Desarrollo del sitio

Material Thumbnail

Presentación del proyecto

04:35 min

Material Thumbnail

Instalación del proyecto

03:54 min

Material Thumbnail

Elaboración del header

11:29 min

Material Thumbnail

Estilos al header

13:07 min

Material Thumbnail

Construcción del main homepage

14:10 min

Material Thumbnail

Finalizando cards en el homepage

10:25 min

Material Thumbnail

Terminando el index.html y estilos en el mainpage

09:59 min

Material Thumbnail

Desarrollo de la página de artículo

13:27 min

Material Thumbnail

Desarrollo del formulario de registro

12:49 min

Material Thumbnail

Desarrollo de checkboxes en el formulario

14:33 min

Despliege del proyecto

Material Thumbnail

Despliegue del proyecto en Firebase

07:28 min

nuevosmás votadossin responder
Luis Alejandro Vera Hernandez
Luis Alejandro Vera Hernandez
Estudiante

No me funciono el deploy. Algun consejo?

=== Deploying to ‘materialize-aviation-news’…

i deploying hosting
i hosting[materialize-aviation-news]: beginning deploy…
i hosting[materialize-aviation-news]: found 19 files in public
⠹ hosting: uploading new files [0/7] (0%)
Error: Task a90ec95df1392ee1de9026b8bf62e2c238b4be9c3080c04199a1af191e818f5c
failed: retries exhausted after 6 attempts

0
Luis Alejandro Vera Hernandez
Luis Alejandro Vera Hernandez
Estudiante

Alguien sabe porque queda asi?

troub.png

HTML

<mainclass="container"><!-- SEARCH --><section><divclass="section"><divclass="row"><divclass="col m7 input-field input-container"><iclass="material-icons">search</i><inputid="search"type="text"placeholder="Search"></div></div></div></section><!-- CARDS --><section><divclass="row"><articleclass="col s12 m6 l4"><divclass="card"><divclass="card-image waves-effect-waves-block waves-light"><imgsrc="assets/img/card1.png"alt="Card One"class="activator"></div><divclass="card-content"><spanclass="card-title grey-text activator text-darken-4">Citation Longit
                                <iclass="material-icons right">more_vert</i></span><p><ahref="#">See more</a></p></div><divclass="card-reveal"><spanclass="card-title grey-text text-darken-4"> Citation Longitud<iclass="material-icons right">close</i></span><p>4 Passenger Range: 3,500 nm </p><p> Maximum Passengers: 12</p><aclass="waves-effect waves-teal btn-flat teal lighten-5 right"href="post.html">Go!</a></div></div></article><articleclass="col s12 m6 l4"><divclass="card"><divclass="card-image waves-effect-waves-block waves-light"><imgsrc="assets/img/card2.jpg"alt="Card One"class="activator"></div><divclass="card-content"><spanclass="card-title grey-text activator text-darken-4">Citation Latitude
                                <iclass="material-icons right">more_vert</i></span><p><ahref="#">See more</a></p></div><divclass="card-reveal"><spanclass="card-title grey-text text-darken-4"> Citation Latitude<iclass="material-icons right">close</i></span><p>4 Passenger Range: 2,700 nm </p><p> Maximum Passengers: 9</p><aclass="waves-effect waves-teal btn-flat teal lighten-5 right"href="post.html">Go!</a></div></div></article><articleclass="col s12 m6 l4"><divclass="card"><divclass="card-image waves-effect-waves-block waves-light"><imgsrc="assets/img/card3.jpg"alt="Card One"class="activator"></div><divclass="card-content"><spanclass="card-title grey-text activator text-darken-4">Citation XLS+
                                <iclass="material-icons right">more_vert</i></span><p><ahref="#">See more</a></p></div><divclass="card-reveal"><spanclass="card-title grey-text text-darken-4"> Citation XLS+<iclass="material-icons right">close</i></span><p>4 Passenger Range: 2,100 nm </p><p> Maximum Passengers: 12</p><aclass="waves-effect waves-teal btn-flat teal lighten-5 right"href="post.html">Go!</a></div></div></article><articleclass="col s12 m6 l4"><divclass="card"><divclass="card-image waves-effect-waves-block waves-light"><imgsrc="assets/img/card4.jpg"alt="Citation CJ4 GEN2"class="activator"></div><divclass="card-content"><spanclass="card-title grey-text activator text-darken-4">Citation CJ4 
                                <iclass="material-icons right">more_vert</i></span><p><ahref="#">See more</a></p></div><divclass="card-reveal"><spanclass="card-title grey-text text-darken-4"> Citation CJ4 <iclass="material-icons right">close</i></span><p>4 Passenger Range: 2,165 nm </p><p> Maximum Passengers: 10</p><aclass="waves-effect waves-teal btn-flat teal lighten-5 right"href="post.html">Go!</a></div></div></article><articleclass="col s12 m6 l4"><divclass="card"><divclass="card-image waves-effect-waves-block waves-light"><imgsrc="assets/img/card5.jpg"alt="Citation CJ3+"class="activator"></div><divclass="card-content"><spanclass="card-title grey-text activator text-darken-4">Citation CJ3+
                                <iclass="material-icons right">more_vert</i></span><p><ahref="#">See more</a></p></div><divclass="card-reveal"><spanclass="card-title grey-text text-darken-4"> Citation CJ3+<iclass="material-icons right">close</i></span><p>4 Passenger Range: 2,040 nm </p><p> Maximum Passengers: 9</p><aclass="waves-effect waves-teal btn-flat teal lighten-5 right"href="post.html">Go!</a></div></div></article><articleclass="col s12 m6 l4"><divclass="card"><divclass="card-image waves-effect-waves-block waves-light"><imgsrc="assets/img/card6.jpg"alt="Citation M2"class="activator"></div><divclass="card-content"><spanclass="card-title grey-text activator text-darken-4">Citation M2
                                <iclass="material-icons right">more_vert</i></span><p><ahref="#">See more</a></p></div><divclass="card-reveal"><spanclass="card-title grey-text text-darken-4"> Citation M2<iclass="material-icons right">close</i></span><p>4 Passenger Range: 1,550 nm </p><p> Maximum Passengers: 7</p><aclass="waves-effect waves-teal btn-flat teal lighten-5 right"href="post.html">Go!</a></div></div></article></div></section></main>

CSS

.input-field.input-container { /* aplicando el cascade */height: 100px;
    float: none;
    display: flex;
    margin: 0 auto;

}

.input-field > #search { /* busca al hijo directo (#search) del input-field */margin-top: 25px;
}

.input-containeri {
    margin-top: 45px;
    margin-right: 15px;
}

footer.page-footer {

    height: 80px;
    background: gray;
    bottom: 0;
}
0
Renzo Rolando Manuel Reinoso Alcas
Renzo Rolando Manuel Reinoso Alcas
Estudiante

Para que sirve Firebase??

1
Renzo Rolando Manuel Reinoso Alcas
Renzo Rolando Manuel Reinoso Alcas
Estudiante

Porque utilizar Materialize y no Bootstrap??

0
Néstor Raúl Guzmán Díaz
Néstor Raúl Guzmán Díaz
Estudiante

Hola, Me podrian decir que es y que hace un CDN?.

3
Jaime Andrés Chaves Sánchez
Jaime Andrés Chaves Sánchez
Estudiante

"Error: Failed to authenticate, have you run firebase login"
Solución escribir “firebase login” en la terminal

1
Alberto Romero Barrera
Alberto Romero Barrera
Estudiante

materialize vs material.io son los mismo? materialize esta basado en material.io ?

1
bruno guerra solano
bruno guerra solano
Estudiante

tengo una duda ya construida tu pagina web en local existe algún curso de plazi que te enseñe a subirlo a un hosting y administrarla

2
Juan Esteban Galvis
Juan Esteban Galvis
Estudiante

Para usar la propiedad Bottom: 0 no debe ser position: relative o absolute? busqué en Materialize y no encontré que el footer tenga esa propiedad.

1
Jhonntan Andres Castaño Rojas
Jhonntan Andres Castaño Rojas
Estudiante

quisiera saber por que mi sitio tiene .app en lugar de .com
acaso lo genera automaticamente segun la disposicion del dominio o le di por accidente en esa terminacion?

https://materialize-byandersj.web.app

2