Sesión 24: Códigos / bootstrap
Revisamos nuestro landing y continuamos adaptando nuestra página con Queries. Para insertar galerías y otras características en html y css es necesario conocer Bootstrap. Para instalarlo en necesario ir a la documentación de inicio. https://getbootstrap.com/docs/5.2/getting-started/introduction/
Sesión 23: Aplicación media queries
4 de Junio 2022. La clase continúa con el desarrollo del código para los breakpoints. Se trabaja con todos los elementos del sitio para la resolución de 400px de ancho. Las media queries actúan como contenedor de las reglas y selectores a aplicar, por lo tanto, todo lo que engloba empieza con la apertura de una llave […]
Sesión 22: Breakpoints / lenguajes / metodologías agiles.
3 de Junio 2022. Una herramienta que se hace muy necesaria para nuestro curso es manipular correctamente el inspector de elementos, es muy útil para desarrollar el diseño responsive. Para los brakpoints es necesario conocer las medidas estándar. Se debe decidir a que grupo de pantallas se adaptará el diseño. El desktop first (escritorio primero), es como […]
Sesión 21: CSS Media Queries
La clase inicia con una introducción a las plataformas web mas utilizadas, entre ellas la que mas destaca es WordPress con su complemento Elementor. Plataformas de estudios Moodle Es una herramienta de gestión de aprendizajes o más concretamente de Learning Content Management (LCMS), de distribución libre, escrita en PHP. Está concebida para ayudar a los docentes a crear comunidades de aprendizaje en […]
Sesión 20: Landing page / Edición
Miércoles 1 de Junio 2022 continuamos con nuestro trabajo de código en html y Css. La landing page avanza con nuevos recursos desarrollados en clases. Ya hay un mayor control del html y css con sus clasificaciones de ID y CLASS, se logra mas armonía y orden en el diseño backend. ¿Qué es backend? Backend […]
Sesión 19: Trabajando en el código html + Css del layout
Martes 31 Mayo 2022, comenzamos con un repaso de lo visto en clases anteriores y nos pasamos a las salas para revisar nuestro código para lograr la landing page . codigo landin personal Mi código se encuentra mejor seccionado con la ayuda de los comentarios que aparecen en color verde, esto es de mucha utilidad […]
Sesión 18: Orden en la estructura html y CSS
Aquí algunos Tips para ordenar el código de mis archivos: El primero es separar bloques de código con la etiqueta de comentario <!– INICIO DEL HEAD –> la idea es que se puedan diferenciar del resto . Para comentar en CSS se requiera de la siguiente etiqueta: /* Aquí puedes escribir tu comentario */ Etiqueta […]
Sesión 17: Propiedades Flex
Comenzamos trabajando en nuestro proyecto conociendo los atributos de display; flex cargándolos en nuestro documento html. Flexbox representa un modelo básico de maquetación que supone la existencia de una caja padre llamada contenedor flexible o caja flex. Los elementos hijos situados dentro del contenedor flexible llevan el nombre de elementos o ítems flex. Los elementos flex tienen la capacidad de redimensionarse […]
Sesión 16: Display; Flex
Cuando se comienza a traspasar el diseño o se extrae de su maquetado se debe identificar todos los bloques del sitio escribiendo el html desde arriba y bajando: de body, cabecera, nav, div, articule, section, footer etc. Qué es Flex Flex es uno de los nuevos valores HTML5 para propiedad CSS display, que nos permite maquetar […]
Sesión 15: Estilos de caja Box-model
Todo en CSS tiene una caja alrededor, comprenderlo es clave para poder crear diseños con CSS o para alinear elementos con otros, la diagramación del contenido ahora se piensa en bloques y rectángulos, un diseño de compaginación. En el modelo de cajas todos los elementos HTML se pueden considerar como cuadros. En CSS, el término «modelo […]