{"id":758,"date":"2023-07-26T03:33:21","date_gmt":"2023-07-26T03:33:21","guid":{"rendered":"https:\/\/cursos.misblogs.site\/?p=758"},"modified":"2023-07-26T03:33:22","modified_gmt":"2023-07-26T03:33:22","slug":"layout-web-con-css-grid-flexbox-y-otras-tecnicas-modernas","status":"publish","type":"post","link":"https:\/\/cursos.misblogs.site\/index.php\/layout-web-con-css-grid-flexbox-y-otras-tecnicas-modernas\/","title":{"rendered":"Layout web con CSS Grid, Flexbox y otras t\u00e9cnicas modernas"},"content":{"rendered":"\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-vivid-purple-background-color has-background\" href=\"https:\/\/domestika.sjv.io\/Y9Nm9K\" target=\"_blank\" rel=\"noreferrer noopener\">Ir al curso<\/a><\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Descubre las nuevas ret\u00edculas y otras formas de dise\u00f1ar una web con CSS Shapes, variables y efectos parallax<\/h2>\n\n\n\n<p>La web vive en un cambio constante y con la llegada de CSS Grid y Flexbox, las reglas del juego volvieron a cambiar. Javier Usobiaga \u2013dise\u00f1ador web, desarrollador FrontEnd y confundador del estudio Swwweet\u2013 tiene 13 a\u00f1os de experiencia creando diversos proyectos para clientes como el Ayuntamiento de Barcelona, y con su amplia experiencia, te invita a descubrir las t\u00e9cnicas y herramientas m\u00e1s modernas que est\u00e1n revolucionando al sector.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-vimeo wp-block-embed-vimeo wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<div class='embed-container'><iframe loading=\"lazy\" title=\"Layout web con CSS Grid, Flexbox y otras t\u00e9cnicas modernas \u2013 Un curso de Javier Usobiaga\" src=\"https:\/\/player.vimeo.com\/video\/320720871?dnt=1&amp;app_id=122963\" width=\"1920\" height=\"1080\" frameborder=\"0\" allow=\"autoplay; fullscreen; picture-in-picture\"><\/iframe><\/div>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-16018d1d wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-width wp-block-button__width-25\"><a class=\"wp-block-button__link has-vivid-purple-background-color has-background\" href=\"https:\/\/domestika.sjv.io\/Y9Nm9K\" target=\"_blank\" rel=\"noreferrer noopener\">Ir al curso<\/a><\/div>\n<\/div>\n\n\n\n<p>Si en el curso de\u00a0Introducci\u00f3n al Desarrollo Web Responsive con HTML y CSS, ya te iniciaste en el mundo del web responsive, en este aprender\u00e1s diversas t\u00e9cnicas avanzadas con herramientas como CSS Grid, Flexbox, CSS Shapes, las viewport units, las variables de CSS, las transformaciones 3D o los efectos tipo parallax.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets7.domestika.org\/course-images\/000\/004\/307\/4307-big.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfQu\u00e9 aprender\u00e1s en este curso online?<\/h3>\n\n\n\n<p>Lo primero que har\u00e1s ser\u00e1 conocer a Javier Usobiaga, su trayectoria profesional y sus proyectos m\u00e1s destacados.<\/p>\n\n\n\n<p>Empezar\u00e1s aprendiendo a darle forma al layout con las unidades relativas al viewport units, la propiedad de&nbsp;<em>object-fit<\/em>&nbsp;y c\u00f3mo distribuir texto en columnas con CSS columns. Ver\u00e1s c\u00f3mo las formas de la web pueden dejar de ser rectangulares con&nbsp;<em>clip-path<\/em>&nbsp;y CSS Shapes y adem\u00e1s, aprender\u00e1s a optimizar tu c\u00f3digo con las variables nativas custom properties.<\/p>\n\n\n\n<p>Descubrir\u00e1s la revoluci\u00f3n que ha supuesto Flexbox en el mundo del&nbsp;<em>layout web<\/em>. Javier te ense\u00f1ar\u00e1 todas las posibilidades de alineaci\u00f3n de elementos. Para ello, te explicar\u00e1 las propiedades del contenedor y del contenido, y las capacidades de alineaciones con un eje principal, uno cruzado y ejes alternativos.<\/p>\n\n\n\n<p>Continuar\u00e1s descubriendo las nuevas reglas del juego con CSS Grid cambiando por completo la forma en que estructuras tu c\u00f3digo y planteas el&nbsp;<em>layout<\/em>. Aprender\u00e1s algunas funciones de ret\u00edcula, las propiedades de distribuci\u00f3n y tama\u00f1o y c\u00f3mo puedes plantear una ret\u00edcula que se adapte a diferentes tama\u00f1os de pantalla con las funciones&nbsp;<em>repeat<\/em>&nbsp;y&nbsp;<em>minmax<\/em>.<\/p>\n\n\n\n<p>Javier te explicar\u00e1 m\u00e1s t\u00e9cnicas avanzadas con CSS Grid sobre las \u00e1reas de ret\u00edcula, la alineaci\u00f3n y orden, anidaci\u00f3n y por medio de un ejemplo, ver\u00e1s c\u00f3mo puedes usar Grid y Flexbox de forma combinada en un proyecto.<\/p>\n\n\n\n<p>Conocer\u00e1s brevemente las transformaciones 3D con un ejemplo pr\u00e1ctico de profundidad y efectos en&nbsp;<em>scroll<\/em>&nbsp;para finalmente ver proyectos, ejemplos y recursos seleccionados por Javier para que te sirvan de inspiraci\u00f3n.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfCu\u00e1l es el proyecto del curso?<\/h3>\n\n\n\n<p>Realizar\u00e1s un ejercicio libre con una o varias de las t\u00e9cnicas aprendidas. Javier realizar\u00e1 una p\u00e1gina informativa sobre la conquista del Polo Sur, t\u00fa puedes elegir la tem\u00e1tica y el proyecto que quieras.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets4.domestika.org\/course-images\/000\/004\/304\/4304-big.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">\u00bfA qui\u00e9n est\u00e1 dirigido este curso online?<\/h3>\n\n\n\n<p>A cualquier persona que tenga inter\u00e9s por el dise\u00f1o y las t\u00e9cnicas modernas de&nbsp;<em>layout<\/em>&nbsp;con CSS Grid, Flexbox y otras t\u00e9cnicas modernas.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Requisitos y materiales<\/h3>\n\n\n\n<p>Para realizar este curso es necesario tener conocimientos s\u00f3lidos de HTML y CSS, un ordenador y un editor de c\u00f3digo.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/assets8.domestika.org\/course-images\/000\/004\/308\/4308-big.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Descubre las nuevas ret\u00edculas y otras formas de dise\u00f1ar una web con CSS Shapes, variables y efectos parallax<\/p>\n","protected":false},"author":1,"featured_media":759,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[95,96,109,113],"tags":[],"class_list":["post-758","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-cursos_en_espanol","category-domestika","category-javascript","category-web"],"_links":{"self":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts\/758","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/comments?post=758"}],"version-history":[{"count":1,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts\/758\/revisions"}],"predecessor-version":[{"id":760,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/posts\/758\/revisions\/760"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/media\/759"}],"wp:attachment":[{"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/media?parent=758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/categories?post=758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cursos.misblogs.site\/index.php\/wp-json\/wp\/v2\/tags?post=758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}