Optimización de Formularios y Estilos CSS en HTML
Contenido del curso
Roberto Carlos Landázuri Estrella
rebeca Narvaez
Beto Toro
Jonathan Martin Brizio
Carolina Fernandez Gonzalez
Claudia Z. González Sáenz
Efraín Hernández García
Hugo Gomez Tinoco
Pedro Andrés Chaparro Quintero
Axel Enrique Galeed Gutierrez
Victor R Vele
Usuario anónimo
User
Pedro Isaac Aguilar
Marta
Carolina Gómez
luimarco daniel Carrascal Diaz
Christian David Sánchez
Sergio Estrella
Profesor
Arantxa Giovanna Rosas Del Valle
Naldo Duran
Difícil los retos, los hice toditos pero si me costaron sobre todo porque no soy front end programmer pero super interesante desde el punto que necesito que es para hacer auditoria de estos temas ... super bueno
Te recomiendo que hagas el curso de programación básica y así se entiende un poco mejor todo el proceso y as estructuras. Yo soy diseñadora y tengo muy poquitos conocimientos de programación, pero como había hecho ese curso entiendo bastante mejor :)
Para los compañeros que de pronto no entrado en el mundo del frontend o llevan poco tiempo, quisiera que tuvieran en cuenta un consejo de buenas prácticas para cuando escriban CSS.
El orden de las propiedades dentro de los selectores si importa y tienen un orden:
ejemplo:
.button { display: block; width: 220px; height: 40px; position: relative; text-transform: uppercase; background-color: #fff; @extend h1; }
No existe definido un standard para ordenar las propiedades dentro de la hoja de estilos. Esto es puramente una convención que cada uno puede tomar como desee.
Totalmente de acuerdo con el comentario de Jonathan, no hay un orden específico y no existe una regla para eso. En mi caso lo hago en orden alfabético por que es un poco más sencillo para mi encontrar el estilo que busco sin tener que recordar jerarquías, y es más fácil de entender para personas que no saben tanto de CSS y necesitan leer mis hojas de estilo. Pero es mi forma y no quiere decir que sea la correcta tampoco, pero si trato de hacerlo más fácil para los demás.
Me gusta que Juliana deja los retos clases atrás y en una los hace todos. Esto permite ver otras formas de solucionar algo o aprender una nueva solución
En otros cursos cursos que he tomado en platzi los profesores dicen: Te reto y deja así...
Muy buenos Retos! me tomo poco tiempo pero lo logré al fin
Acá un tema que no se tocó y creo que es importante, el tamaño de fuente, tengo entendido que si alguien con problemas visuales decide incrementar el tamaño de la fuente y nosotros lo manejamos en pixeles con nuestro css, esto lo sobreescribirá y el usuario tendrá los mismos problemas. Por esto se recomienda usar medidas como rem y em. ¿Cómo sería en este caso?
Creo que en estos casos se debería usar rem, ya que el tamaño de la fuente cambiaría según el tamaño que el usuario tenga configurado en su navegador. Lo que se debe evitar hacer algo como lo siguiente, ya que se sobreescribirían las preferencias del usuaruio:
html{ font-size: 16px; }
Hola, @Hugo_Gomez.
Sí, lo recomendable es siempre usar medidas relativas cuando hablamos de los estilos de nuestros proyectos.
En el caso de las fuentes es recomendable un tamaño mínimo, para un texto de un párrafo, de 16px. En mi caso utilizo esta configuración:
html { /*font size default(16px) * 62.5% = 10px*/ font-size: 62.5%; } body { font-size: 1.6rem; }
yo los solucione de esta manera los inptu .form-label, .message-input, .contact-section button { color: white; font-size: 1.5rem;
Este curso me ha despertado mayor interés por la programación Frontend. La maestra es amena, su tono de voz agradable, domina bien los temas y sabe transmitir sus conocimientos de manera óptima.
Buenos retos, pero deberían advertir que para tomar este curso hay que tener conocimientos básicos de CSS.
En esta clase se trabajan varios retos de CSS aplicados a un formulario y a los enlaces sociales. Primero se reutiliza una clase en el CSS para unificar estilos como color y tipografía, asegurando buen contraste y coherencia visual. Luego se corrigen estilos que no se aplicaban debido a diferencias entre las clases del HTML y el CSS.
Después se ajustan los estilos del botón y de los íconos de redes sociales, reorganizando el HTML y corrigiendo tamaños de imagen que afectaban el diseño. Finalmente, se mejora la accesibilidad del sitio agregando estilos de foco y outline al skip link, usando variables de color para mantener consistencia.
tamalito
Vamos bien, aprendiendo sobre todo :)
Me costó sobre todo el de focus-within 😅 Pero los pude hacer todos! :D
Cómo puedo hacer para que el foco lo reciba un elemento hijo y no el elemento padre, por ejemplo tengo una etiqueta <a> que adentro tiene un <svg> quiero que el foco lo reciba <svg> y no <a> cómo puedo hacerlo?
👌
