Maquetación de la NavBar

Clase 17 de 41 • Curso de HTML y CSS 2019

Clase anteriorSiguiente clase

Juan Castro

teacher•

Notas de la clase:

💦 Los navegadores tienen reglas y estilos que, en la mayoría de casos, no nos sirven; por eso también debemos escribir algo de código CSS para conseguir el estilos que diseñamos
🎫 La etiqueta <title> nos sirve para darle nombre a nuestro producto digital (este es el nombre que debe aparecer cuando busquemos nuestro sitio web en Google 😎)
👾 Podemos añadir 2 o 4 espacios cada vez que escribimos una etiqueta debajo de otra para identificar cuál es hija de cuál 🍼
⚠️ También podemos añadir comentarios para indicar dónde comienzan o terminan secciones especiales de nuestra página ()
🐬 Para acomodar elementos vertical o horizontalmente podemos agruparlos en una sola etiqueta y utilizar los estilos display: flex;, justify-content y align-items 🔦

Daniel Aarón Pipa Aguirre

student•

Buen resumen!

Juan Sebastian Lopez Diaz

student•

Un buen resumen y un gran aporte Gracias amigo

Eduardo Reyes

student•

Para la gente que usa ADobe XD, si usan la opción de Compartir y lueg Compartir Con desarrolladores, les dará una versión web con todo lo que necesitan, desde medidas hasta los colores y tamaños en CSS para que sólo lo pasen a código.

Sebastian Camilo Nope Trujillo

student•

Gran aporte !!!!

Pablo Díaz de Valdés

student•

Buena información. Gracias

Beatriz Pérez Santana

student•

Si prefieren dejar el padding-right se puede especificar que el último elemento de la lista no tenga un padding-right de 20px de la siguiente manera:

nav li:last-child {
  padding-right: 0px;
}

Roger Carlos Ariel Alba

student•

Hola a todos!
Saber usar flexbox es indispensable. Les recomiendo visitar este juego y practicar mucho, mucho.

Danilo Fernandez

student•

Gracias por el aporte, aprendí mucho.

Kalos Lazo Mera

student•

Gran aporte, me sirvió!

Stiven Jiménez

student•

yo uso una extensión de vscode para hacer autorefresh para optimizar el proceso de desarrollo y agilizar más todo Aqui les dejo el link si a alguien le interesa https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer

Christian Gómez

student•

Gracias por el aporte, ya lo instale

!sos un crack!

Stiven Jiménez

student•

no sabia que podias poner gifs en los comentarios de platzi jaja

Diego Chuquiyauri

student•

esta clase pan comido para los que vienen de Curso de Desarrollo Web Online.

Manuel Felipe Alzate Salazar

student•

Sabelo, el último proyecto lo hice con el classic layout, es decir, con display block e inline. Fue un bardo!! Pero bueno, finalmente lo logré a modo de práctica y ya con flexbox y Grid todo es mucho más sencillo :)

Nestor Gonzalez Jerez

student•

Les dejo esta herramienta por si necesitan usar otro estilo con sus colores, aquí te los genera de forma gradient.

https://mycolor.space/[](url)

Israel Acetori

student•

COLOR DEL NAV
#7ACC2D

Alan Salinas de los Santos

student•

Gracias!!

Sebastián Riátiga

student•

En una recomendación de un post de un usuario leí que tener dos pantallas era súper útil, este es un gran ejemplo.
En HTML y Body siempre quitar el padding y el margin (CSS) → padding y margin 0px.
Realizar comentarios para tener presente las secciones de la página (Ctrl+shift+7 → shortcut).
Paddings con números redondeados para que tengan una composición uniforme.
La ñ y acentos generan errores.
Importante: siempre cerrar con ; en css.

Daniel Hidalgo

student•

lo ideal (más actual) es que aprendan display-grid en lugar de display-flex

Rafael Alvarez Cardona

student•

Hola, es enserio mejor aprender Grid que Flex? por que? pd: yo aun no he hecho el curso de css layout y grid

Christian Maticorena

student•

Es correcto, es lo ideal. Sin embargo para los que recién inician creo que seria muy educativo que aprendan display-flex pues así descubrirán cuales son sus limitantes. Así mismo a veces toca desarrollar un proyecto web el cual con display-flex es suficiente para lograr el diseño que deseamos. Según la dificultad del proyecto, despliega el setup y/o usa la tecnología que necesitas.

JuanC M

student•

TE SIETES PERDID@ EN EL CURSO???

https://platzi.com/cursos/html5-css3/ https://platzi.com/cursos/responsive-design/ https://platzi.com/cursos/css-grid-layout/

Mercy María Ix Ballote

student•

Cap demasiado rápido para principiantes y utiliza mucho atajo de emet que no explica, para la gente que están empezando es confuso

Luis Liñan

student•

Si deseas ver más a profundidad todos los conceptos, te recomiendo el curso de diseño web online con el profe leónidas LInk .Aca te explica mucho más cada etiqueta

Never Andrés Aparicio Hernandéz

student•

eso también pensé pero al principio del curso dice te recomendamos que antes veas estos cursos

Luis Glex

student•

Excelente clase, yo estoy maquetando uno de mis últimos diseños.

Jerry Gil Contreras

student•

Hola Luis, ¿Cómo defines qué tamaño debe tener tu sitio web?

Alejandro Tangarife Rivas

student•

Amigos. Les voy a dar un aporte interesante para complementar el :hover. Esto que les voy a compartir es una propiedad que define el tiempo que va a durar la animación del cambio de color durante un evento hover.

Se llama: transition-duration. Con ejemplo

nav li a {
    text-decoration: none;
    color: var(--white);
}

nav li a:hover {
    transition-duration: .3s;
    color: var(--brown-vtg-hover);
}

ese transition-duration va hacer que cuando pases el puntero por ensima de un link, el link cambie de color con una animación de .3s.

Si se sienten curiosos respecto a 'qué es eso de var(--texto-texto) los invito a que revisen este video para que lo conozcan y lo comprendan de la mejor manera.

Exitos, compañeros! :)

Fernando Enrique Nuevo Alcalá

student•

¿Alguien sabe como puedo bajar el logo en formato PNG?, lo intento pero solo baja en formato WEB

Juan Camilo Lezcano Benitez

student•

Hola, intenta bajarlo usando un navegador diferente a Chrome, por ejemplo a mi me tocó bajarlo con Firefox.

Anthony Damián López Pedrozo

student•

Descarga el loco en ese formato igual Y utiliza este convertidor aqui https://imagen.online-convert.com/es/convertir/webp-a-png y listo! Tendras tu imagen en formato png

David Antonio Garcia Saaib

student•

¿Qué aprendí de esta clase?

Que hay un método secreto nunca antes visto para simplificar código (o al menos yo no sabía).
Que es mas fácil maquetar cuando ya tenemos el diseño hecho, porque no le inventamos.
Se ve mas pro (personalmente) el código con un letrero hecho en ascii generator.
Repaso de HTML y CSS.
Aprovechar el UI kit y los assets.

¿Poner  es buena practica cuando se está en un equipo de programadores?

Facundo Nicolás García Martoni

teacher•

Yo comento exactamente de la misma forma, es muy útil!

Luis Abdel Rangel Castro

student•

Me gusta mucho la metodología de Rulotico!

Christian David Sánchez

student•

Atajos en VSCODE: https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf

Jose Rueda

student•

yo normalmente uso el reset.css que lo aprendi en un curso anterior de platzi... ya no es una buena practica utilizarlo??

Erik Elyager

student•

Hay diferencias entre reset.css y normalize.css que hay que tomar en cuenta. Normalize por ejemplo preserva los defaults en lugar de quitar el estilo a todo como lo hace reset, además arregla algunos bugs para navegadores viejos.

Al final es cuestión de gustos, trabaja con el que mejor se acomode a tu proyecto pero yo he visto que es mucho más usado normalize y lo prefiero.

Edwar Baron

Team Platzi•

Si, sigue siendo una buena practica, ya que normaliza los estilos de tu app en los diferentes navegadores y cuando escribes tu css, sabes que se vera igual.

Máximo Conejo

student•

Aprendí demasiado solo en esta clase, muy genial.

Maquetación de la NavBar

Internet

¿Dónde aprender HTML y CSS modernos?

Pasos para aprender HTML y CSS

¿Qué conocimientos necesito para tomar este curso?

¿Cómo se construye la tecnología web?

¿Cómo instalar ATOM?

Comprendamos Internet

Los básicos del web

¿Cómo funciona HTML?

Etiquetas y sus atributos

Reto 1: crea tu fiesta de gifs

¿Cómo funciona CSS?

¿Cómo funciona JavaScript?

Hola mundo y estructura del proyecto

Listado de las etiquetas más usadas

Construcción de un producto digital

Paper wireframe

¿Cómo instalar XD?

Diseño de interfaces

Maquetación de la NavBar

Maquetación de main_section y agregando estilos CSS

Maquetación de tarjetas de producto

Fuentes personalizadas y variables de CSS

Categorizando etiquetas según nuestra estructura en HTML

Reto 2: Maquetar el home del producto digital

Reglas responsive

Animaciones y transiciones

Integrando otras herramientas

Atributos especiales de las etiquetas para mejorar el funcionamiento de nuestros formularios

Librería vs Framework

Sistema de Grillas

Completando el Sistema de Grillas

Reto 3: implementación del sistema de grillas

Maquetación del formulario

Creación de formulario: inputs

Creación de formulario: botones

¿Cómo crear tu cuenta en Paypal?

Configuración del botón de pago con Paypal

Autofill del formulario de PayPal

Maquetación de pantalla de éxito y error

Deploy

Testing con el Navegador

Cómo crear tu cuenta en Github

Subiendo nuestro proyecto a Internet con Github

Conclusión

Conclusiones

Bonus

Librería vs Framework