Diseño de Mockups: Práctica y Colaboración en Comunidad

Curso Profesional de Vue.js 2

Contenido del curso

Introducción

CLI y Dev Tools

Manipulación del DOM

REST y HTTP

Sistema de Componentes

Vue Router

Extendiendo VueJS

Clases, Animaciones y Transiciones36

38
Animaciones CSS3 con transiciones en Vue
06:54 min

Vuex

Nuxt.js

Deploy a Producción con Now

Conclusiones

50
Cómo hacer deploy de tu app Vue.js
00:49 min

Bonus

Tomar examen

En este ejercicio te proveemos un par de Mockups para que pongas en práctica los conocimientos adquiridos durante los videos anteriores, recuerda que es muy importante compartir, así que te invito a crear tus propios mockups, compartir tu código en el sistema de discusiónes y a retroalimentar a más usuarios, revisando su código, ayudándolos a resolver errores e inclusive proponiendo mejoras.

Este es el primero de los ejercicios que debes realizar:

Diseño de Mockups: Práctica y Colaboración en Comunidad

Josh Ospina

Estudiante

Ejercicio

index.pug

doctype html
html(lang='es')
  head
    title Platzi Lunar
    meta(charset='UTF-8')
    meta(name='viewport', content='width=device-width, initial-scale=1')
    link(href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet")
    link(href='asset/css/style.css', rel='stylesheet')
    
  body
    .container
        .container-img
            img(src="asset/img/img.jpg" class="container-img--responsive")
        h2(class="title") Registro estación Platzi

        .container-element
            label(for="name" class="container-label") Nombre
            input(type="text" id="name" name="name" class="container-input")
        .container-element
            label(for="lastname" class="container-label") Apellido
            input(type="text" id="lastname" name="lastname" class="container-input")
        .container-element
            label(for="role" class="container-label") Cargo
            input(type="text" id="role" name="role" class="container-input")
            
        .container-submit
            button(class="container-btn") Enviar```

main.scss

//Variables

$container-w: 320px;
$container-h: 409px;
$color-black: #212121;
$color-yellow: #ff9300;
$color-lightblue: #00bfd6;
$color-whiteblue: #A3ECF3;

.container{
    width: $container-w;
    height: $container-h;
    font-family: 'Roboto', sans-serif;
    &#{-img}{
        &--#{responsive}{
            max-width: 100%;
        }
    }
    &#{-elemnent}, &#{-img}{
        width: 100%;        
    }
    &#{-label}, &#{-input}{
        width: 100%;
        display: block;        
    }
    &#{-label}{
        font-size: 9px;
        color: $color-yellow;           
    }
    &#{-input}{
        border: 0;
        border-bottom: 1px solid $color-yellow;
        margin-bottom: .75em;  
        padding: 3px 0 .5em;   
        &:focus {
            outline: 0;
        }
          
    }
    &#{-submit}{
        padding: .5em 0;
        display: flex;
        justify-content: flex-end;
               
    }
    &#{-btn}{
        border-radius: .2em;
        background-color: $color-lightblue;
        color: $color-whiteblue;
        padding: .7em 3em;
        text-transform: uppercase;
        font-size: 10px;
        font-weight: 700;
        border: none;
        box-shadow: 2px 3px 10px #ddd;
        &:active, &:focus {
            outline:0;
        }

                 
    }

}

.title{
    color:$color-lightblue;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

html{
    font-size: 100%;
}

Ricardo Celis

Profesor

Excelente JoshDev! no olvides darle feedback a otro de los usuarios!

Johan Armando Villamil Gaitan

Estudiante

que significa esta sintaxis amigo &#{-btn)?

Carlos Andrés Millan Satizabal

Javier Eduardo Morón Mendoza

Omar Flores Grimontt

Juan Camilo Avila

Fernando Schlottmann

Luis Alvarez Ollarvez

Miguel Angel Reyes Moreno

Jhasmany Roque Chambi

Sergio Castro García

Nicolás F. Ormeño Rojas

Nacho Anaya

Carolina Fernandez

Carlos David Marciglia Gomez

Joel Hostilio Lopez Detrinidad

Fabian Gutierrez

David Alejandro Abreu Abreu

Harold David Carhuancho Aquino

Andres Pinzon

Karen Ocampo

Victor Roberto López Marroquín

Ayda Yineth Montoya Henao

Lucas Guzmán

Diego Alvaro Parra Abad

Diseño de Mockups: Práctica y Colaboración en Comunidad

Introducción

Aplicaciones profesionales con Vue.js

Vue como framework progresivo y reactivo

CLI y Dev Tools

Instalación de Vue.js: Node, Dev Tools y CLI

Crear una aplicación Vue con CLI y webpack

Cómo funciona webpack.config.js

Babel: transpilador de JavaScript moderno

ESLint con Standard JS: linteo automático en webpack

Configuración de Sass y Bulma en Vue

Cómo configurar Pug en Vue con webpack