├── 11-centering-things ├── .gitignore ├── .stylelintrc.json ├── center │ ├── 01-marginAuto.html │ ├── 02-textAlignCenter.html │ ├── 03-positionAbsolute.html │ ├── 04-flex.html │ └── 05-grid.html ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ ├── _grid.scss │ ├── _marginAuto.scss │ ├── _positionAbsolute.scss │ ├── _textAlignCenter.scss │ └── index.scss ├── 12-flex-and-grid ├── .gitignore ├── .stylelintrc.json ├── examples │ ├── flex-and-grid.html │ ├── flex.html │ └── grid.html ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ ├── _grid-with-flex.scss │ ├── _grid.scss │ └── index.scss ├── 21-flex-direction ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 22-flex-wrap ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 23-align-content-and-justify-content ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 31-aling-items ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 32-order ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 33-flex-items ├── .gitignore ├── .stylelintrc.json ├── images │ └── game_maker.jpg ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 41-flex-basis-and-flex-wrap ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 42-justify-content-values ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ └── index.scss ├── 43-responsive-layout ├── .gitignore ├── .stylelintrc.json ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _flex.scss │ ├── _layout.scss │ └── index.scss ├── 51-codely-page-menu ├── .gitignore ├── .stylelintrc.json ├── assets │ ├── api-http-go-hexagonal.jpg │ ├── css-grid.jpg │ ├── de-javascript-a-typescript.png │ ├── domain-driven-design.jpg │ ├── js-moderno.jpg │ ├── light-dark-themes.jpg │ ├── logo-codelytv.png │ ├── php-8.jpg │ ├── setup-linux.jpg │ └── testing-frontend.jpg ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _header.scss │ └── index.scss ├── 52-codely-page-course-list ├── .gitignore ├── .stylelintrc.json ├── assets │ ├── api-http-go-hexagonal.jpg │ ├── css-grid.jpg │ ├── de-javascript-a-typescript.png │ ├── domain-driven-design.jpg │ ├── js-moderno.jpg │ ├── light-dark-themes.jpg │ ├── logo-codelytv.png │ ├── php-8.jpg │ ├── setup-linux.jpg │ └── testing-frontend.jpg ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _courses.scss │ ├── _header.scss │ └── index.scss ├── 53-codely-page-pricing ├── .gitignore ├── .stylelintrc.json ├── assets │ ├── api-http-go-hexagonal.jpg │ ├── css-grid.jpg │ ├── de-javascript-a-typescript.png │ ├── domain-driven-design.jpg │ ├── js-moderno.jpg │ ├── light-dark-themes.jpg │ ├── logo-codelytv.png │ ├── php-8.jpg │ ├── setup-linux.jpg │ └── testing-frontend.jpg ├── index.html ├── package-lock.json ├── package.json ├── readme.md └── scss │ ├── _base.scss │ ├── _courses.scss │ ├── _header.scss │ ├── _pricing.scss │ └── index.scss ├── 61-old-browsers ├── .gitignore ├── .stylelintrc.json ├── float.html ├── inline-block.html ├── package-lock.json ├── package.json ├── readme.md ├── scss │ ├── _base.scss │ ├── _float.scss │ ├── _inline_block.scss │ ├── _table_cell.scss │ └── index.scss └── table-cell.html └── README.md /11-centering-things/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /11-centering-things/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-scss" 4 | ], 5 | "extends": [ 6 | "stylelint-config-standard" 7 | ], 8 | "rules": { 9 | "at-rule-no-unknown": null, 10 | "scss/at-rule-no-unknown": true 11 | } 12 | } -------------------------------------------------------------------------------- /11-centering-things/center/01-marginAuto.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

margin: 0 auto

16 | 17 |
18 | 19 | 🦄 20 | 21 |
22 | 23 |
24 | 25 | 26 | -------------------------------------------------------------------------------- /11-centering-things/center/02-textAlignCenter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

text-align: center

16 | 17 |
18 | 19 | 🦄 20 | 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /11-centering-things/center/03-positionAbsolute.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

position: absolute

16 | 17 |
18 | 19 | 🦄 20 | 21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /11-centering-things/center/04-flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

flex

16 | 17 |
18 |
19 | 🦄 20 |
21 |
22 | 🦄 23 |
24 |
25 | 🦄 26 |
27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /11-centering-things/center/05-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

grid

16 | 17 |
18 |
19 | 🦄 20 |
21 |
22 |
23 | 24 | 25 | -------------------------------------------------------------------------------- /11-centering-things/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
    16 |
  1. 17 | margin: 0 auto 18 |
    2. 19 |
  2. 20 | text align: center 21 |
    3. 22 |
  3. 23 | position: absolute 24 |
    4. 25 |
  4. 26 | flex 27 |
    5. 28 |
  5. 29 | grid 30 |
    6. 31 | 32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /11-centering-things/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /11-centering-things/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /11-centering-things/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | 67 | .center { 68 | font-size: 5rem; 69 | 70 | span { 71 | border: 3px solid tomato; 72 | border-radius: 0.5rem; 73 | padding: 0.5rem; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /11-centering-things/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .flex { 2 | .center { 3 | height: 400px; 4 | border-top: 1px solid tomato; 5 | border-bottom: 1px solid tomato; 6 | 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /11-centering-things/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | .center { 3 | height: 400px; 4 | border-top: 1px solid tomato; 5 | border-bottom: 1px solid tomato; 6 | 7 | display: grid; 8 | 9 | .grid-item { 10 | align-self: center; 11 | justify-self: center; 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /11-centering-things/scss/_marginAuto.scss: -------------------------------------------------------------------------------- 1 | .marginAuto { 2 | .center { 3 | width: fit-content; 4 | margin: 0 auto; 5 | } 6 | } -------------------------------------------------------------------------------- /11-centering-things/scss/_positionAbsolute.scss: -------------------------------------------------------------------------------- 1 | .positionAbsolute { 2 | .center { 3 | position: absolute; 4 | top: 50%; 5 | left: 50%; 6 | transform: translate(-50%, -50%); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /11-centering-things/scss/_textAlignCenter.scss: -------------------------------------------------------------------------------- 1 | .textAlignCenter { 2 | .center { 3 | height: 400px; 4 | border-top: 1px solid tomato; 5 | border-bottom: 1px solid tomato; 6 | 7 | text-align: center; 8 | line-height: 400px; 9 | } 10 | } -------------------------------------------------------------------------------- /11-centering-things/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./marginAuto"; 3 | @import "./textAlignCenter"; 4 | @import "./positionAbsolute"; 5 | @import "./grid"; 6 | @import "./flex"; 7 | -------------------------------------------------------------------------------- /12-flex-and-grid/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /12-flex-and-grid/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": [ 3 | "stylelint-scss" 4 | ], 5 | "extends": [ 6 | "stylelint-config-standard" 7 | ], 8 | "rules": { 9 | "at-rule-no-unknown": null, 10 | "scss/at-rule-no-unknown": true 11 | } 12 | } -------------------------------------------------------------------------------- /12-flex-and-grid/examples/flex-and-grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex and Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Grid with flex layout

16 |
17 |
Header
18 |
19 | Sidebar 20 |
21 |
22 |
23 |
24 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 30 | Actualización en GameMaker 31 | 32 |

33 |

34 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 35 | llegada a Linux 36 |

37 |
38 | 51 |
52 |
53 | Captura de la home page de Babel 55 |
56 | 57 |

58 | 59 | Nueva versión de Babel: 7.15.0 60 | 61 |

62 |

63 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y 64 | "Hash-style 65 | pipeline operator". 66 |

67 |
68 |
69 |
70 | Imagen del nuevo DNI 4.0 71 |
72 | 73 |

74 | 76 | Llega el DNI 4.0 77 | 78 |

79 |

80 | 81 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 82 |

83 |
84 |
85 |
Ads
86 |
87 | Footer 88 |
89 |
90 |
91 | 92 | 93 | -------------------------------------------------------------------------------- /12-flex-and-grid/examples/flex.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Flex layout

16 |
17 |
18 |
19 | Captura del programa GameMaker 20 |
21 | 22 |

23 | 25 | Actualización en GameMaker 26 | 27 |

28 |

29 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 30 | llegada a Linux 31 |

32 |
33 | 46 |
47 |
48 | Captura de la home page de Babel 50 |
51 | 52 |

53 | 54 | Nueva versión de Babel: 7.15.0 55 | 56 |

57 |

58 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style 59 | pipeline operator". 60 |

61 |
62 |
63 |
64 | Imagen del nuevo DNI 4.0 65 |
66 | 67 |

68 | 70 | Llega el DNI 4.0 71 | 72 |

73 |

74 | 75 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 76 |

77 |
78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /12-flex-and-grid/examples/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

Grid layout

16 |
17 |
18 |
19 | Captura del programa GameMaker 20 |
21 | 22 |

23 | 25 | Actualización en GameMaker 26 | 27 |

28 |

29 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 30 | llegada a Linux 31 |

32 |
33 | 46 |
47 |
48 | Captura de la home page de Babel 50 |
51 | 52 |

53 | 54 | Nueva versión de Babel: 7.15.0 55 | 56 |

57 |

58 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style 59 | pipeline operator". 60 |

61 |
62 |
63 |
64 | Imagen del nuevo DNI 4.0 65 |
66 | 67 |

68 | 70 | Llega el DNI 4.0 71 | 72 |

73 |

74 | 75 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 76 |

77 |
78 |
79 |
80 | 81 | 82 | -------------------------------------------------------------------------------- /12-flex-and-grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Flex and Grid 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 | 19 | -------------------------------------------------------------------------------- /12-flex-and-grid/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /12-flex-and-grid/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /12-flex-and-grid/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } 66 | 67 | .center { 68 | font-size: 5rem; 69 | 70 | span { 71 | border: 3px solid tomato; 72 | border-radius: 0.5rem; 73 | padding: 0.5rem; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /12-flex-and-grid/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | gap: 1rem; 5 | 6 | article { 7 | flex: 1; 8 | min-width: 15rem; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /12-flex-and-grid/scss/_grid-with-flex.scss: -------------------------------------------------------------------------------- 1 | .grid-layout { 2 | display: grid; 3 | gap: 1rem; 4 | grid-template-columns: 200px auto; 5 | grid-template-rows: 75px auto 100px 75px; 6 | grid-template-areas: 7 | "header header" 8 | "sidebar content" 9 | "ads ads" 10 | "footer footer"; 11 | 12 | @media screen and (min-width: 40rem) { 13 | grid-template-columns: 200px auto 150px; 14 | grid-template-rows: 75px auto 75px; 15 | grid-template-areas: 16 | "header header header" 17 | "sidebar content ads" 18 | "footer footer footer"; 19 | } 20 | 21 | .header { 22 | grid-area: header; 23 | background-color: tomato; 24 | text-align: center; 25 | line-height: 75px; 26 | font-size: 2rem; 27 | } 28 | 29 | .sidebar { 30 | grid-area: sidebar; 31 | background-color: tomato; 32 | text-align: center; 33 | font-size: 2rem; 34 | } 35 | 36 | .ads { 37 | grid-area: ads; 38 | background-color: tomato; 39 | text-align: center; 40 | font-size: 2rem; 41 | } 42 | 43 | .footer { 44 | grid-area: footer; 45 | background-color: tomato; 46 | text-align: center; 47 | font-size: 2rem; 48 | line-height: 75px; 49 | } 50 | 51 | .content { 52 | grid-area: content; 53 | display: flex; 54 | flex-wrap: wrap; 55 | gap: 1rem; 56 | 57 | article { 58 | flex: 1; 59 | min-width: 10rem; 60 | } 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /12-flex-and-grid/scss/_grid.scss: -------------------------------------------------------------------------------- 1 | .grid { 2 | display: grid; 3 | gap: 1rem; 4 | grid-auto-rows: 30rem; 5 | grid-template-columns: repeat(auto-fill, minmax(min(calc(50% - 1rem), 15rem), 1fr)); 6 | } -------------------------------------------------------------------------------- /12-flex-and-grid/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./grid"; 3 | @import "./flex"; 4 | @import "./grid-with-flex"; 5 | -------------------------------------------------------------------------------- /21-flex-direction/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /21-flex-direction/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard", "stylelint-config-idiomatic-order"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /21-flex-direction/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 |

36 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 37 |

38 |
39 | 57 |
58 |
59 | Captura de la home page de Babel 63 |
64 | 65 |

66 | 70 | Nueva versión de Babel: 7.15.0 71 | 72 |

73 |

74 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 75 |

76 |
77 |
78 |
79 | Imagen del nuevo DNI 4.0 83 |
84 | 85 |

86 | 90 | Llega el DNI 4.0 91 | 92 |

93 |

94 | 95 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 96 |

97 |
98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /21-flex-direction/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-idiomatic-order": "^8.1.0", 13 | "stylelint-config-standard": "^20.0.0", 14 | "stylelint-scss": "^3.18.0" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /21-flex-direction/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /21-flex-direction/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /21-flex-direction/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-direction: row; 5 | 6 | .card { 7 | min-width: 15rem; 8 | } 9 | } -------------------------------------------------------------------------------- /21-flex-direction/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /22-flex-wrap/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /22-flex-wrap/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /22-flex-wrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 |

36 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 37 |

38 |
39 | 57 |
58 |
59 | Captura de la home page de Babel 63 |
64 | 65 |

66 | 70 | Nueva versión de Babel: 7.15.0 71 | 72 |

73 |

74 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 75 |

76 |
77 |
78 |
79 | Imagen del nuevo DNI 4.0 83 |
84 | 85 |

86 | 90 | Llega el DNI 4.0 91 | 92 |

93 |

94 | 95 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 96 |

97 |
98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /22-flex-wrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /22-flex-wrap/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /22-flex-wrap/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /22-flex-wrap/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | // flex-direction: row; 5 | // flex-wrap: wrap; 6 | 7 | flex-flow: row wrap; 8 | 9 | .card { 10 | width: 40%; 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /22-flex-wrap/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /23-align-content-and-justify-content/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /23-align-content-and-justify-content/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /23-align-content-and-justify-content/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 |

36 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 37 |

38 |
39 | 57 |
58 |
59 | Captura de la home page de Babel 63 |
64 | 65 |

66 | 70 | Nueva versión de Babel: 7.15.0 71 | 72 |

73 |

74 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 75 |

76 |
77 |
78 |
79 | Imagen del nuevo DNI 4.0 83 |
84 | 85 |

86 | 90 | Llega el DNI 4.0 91 | 92 |

93 |

94 | 95 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 96 |

97 |
98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /23-align-content-and-justify-content/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /23-align-content-and-justify-content/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /23-align-content-and-justify-content/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /23-align-content-and-justify-content/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-direction: row; 5 | flex-wrap: wrap; 6 | justify-content: space-evenly; 7 | height: 100vh; 8 | align-content: space-around; 9 | 10 | .card { 11 | width: 40%; 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /23-align-content-and-justify-content/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /31-aling-items/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /31-aling-items/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /31-aling-items/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 |

36 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 37 |

38 |
39 | 57 |
58 |
59 | Captura de la home page de Babel 63 |
64 | 65 |

66 | 70 | Nueva versión de Babel: 7.15.0 71 | 72 |

73 |

74 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 75 |

76 |
77 |
78 |
79 | Imagen del nuevo DNI 4.0 83 |
84 | 85 |

86 | 90 | Llega el DNI 4.0 91 | 92 |

93 |

94 | 95 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 96 |

97 |
98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /31-aling-items/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /31-aling-items/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /31-aling-items/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | font-size: 1.2rem; 58 | font-weight: 400; 59 | line-height: 1.3; 60 | 61 | a { 62 | text-decoration: none; 63 | } 64 | } 65 | } -------------------------------------------------------------------------------- /31-aling-items/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-direction: row; 5 | align-items: center; 6 | 7 | .card { 8 | width: 20rem; 9 | } 10 | 11 | .card:nth-child(1) { 12 | align-self: flex-end; 13 | } 14 | 15 | .card:nth-child(3) { 16 | align-self: stretch; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /31-aling-items/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /32-order/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /32-order/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /32-order/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 | 💻 Software 36 |

37 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 38 |

39 |
40 | 59 |
60 |
61 | Captura de la home page de Babel 65 |
66 | 67 |

68 | 72 | Nueva versión de Babel: 7.15.0 73 | 74 |

75 | 🔨 Herramientas 76 |

77 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 78 |

79 |
80 |
81 |
82 | Imagen del nuevo DNI 4.0 86 |
87 | 88 |

89 | 93 | Llega el DNI 4.0 94 | 95 |

96 | 📰 Actualidad 97 |

98 | 99 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 100 |

101 |
102 |
103 |
104 | 105 | -------------------------------------------------------------------------------- /32-order/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /32-order/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /32-order/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | 39 | &__img { 40 | display: block; 41 | width: calc(100% + 2rem); 42 | height: 12rem; 43 | border-bottom: 3px solid #9191e9; 44 | margin: -1rem -1rem 0; 45 | background: #9191e9; 46 | 47 | img { 48 | display: block; 49 | width: 100%; 50 | height: 100%; 51 | object-fit: cover; 52 | } 53 | } 54 | 55 | &__title { 56 | margin-bottom: 0.5rem; 57 | margin-top: 0.5rem; 58 | font-size: 1.5rem; 59 | font-weight: 400; 60 | line-height: 1.3; 61 | 62 | a { 63 | text-decoration: none; 64 | } 65 | } 66 | 67 | &__category { 68 | text-decoration: underline; 69 | } 70 | } -------------------------------------------------------------------------------- /32-order/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-direction: row; 5 | 6 | .card { 7 | width: 20rem; 8 | display: flex; 9 | flex-direction: column; 10 | gap: 0.5rem; 11 | 12 | &__img { 13 | order: -2; 14 | } 15 | 16 | &__category { 17 | order: -1; 18 | align-self: flex-end; 19 | } 20 | } 21 | 22 | .card:nth-child(1) { 23 | order: 1; 24 | } 25 | 26 | .card:nth-child(3) { 27 | order: 3; 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /32-order/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /33-flex-items/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /33-flex-items/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /33-flex-items/images/game_maker.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/33-flex-items/images/game_maker.jpg -------------------------------------------------------------------------------- /33-flex-items/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 |

36 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 37 |

38 |
39 | 57 | 98 |
99 |
100 | 101 | -------------------------------------------------------------------------------- /33-flex-items/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /33-flex-items/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /33-flex-items/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | width: 20rem; 39 | 40 | &__img { 41 | display: block; 42 | width: calc(100% + 2rem); 43 | height: 12rem; 44 | border-bottom: 3px solid #9191e9; 45 | margin: -1rem -1rem 0; 46 | background: #9191e9; 47 | 48 | img { 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | object-fit: cover; 53 | } 54 | } 55 | 56 | &__title { 57 | margin-bottom: 0.5rem; 58 | margin-top: 0.5rem; 59 | font-size: 1.5rem; 60 | font-weight: 400; 61 | line-height: 1.3; 62 | 63 | a { 64 | text-decoration: none; 65 | } 66 | } 67 | 68 | &__category { 69 | text-decoration: underline; 70 | } 71 | } -------------------------------------------------------------------------------- /33-flex-items/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-direction: row; 5 | 6 | .card { 7 | flex: 2 1 20rem; 8 | // flex-grow: 1; 9 | // flex-shrink: 1; 10 | flex-basis: 20rem; 11 | } 12 | 13 | .card:nth-child(2) { 14 | flex: 1 2 20rem; 15 | // flex-grow: 1; 16 | // flex-shrink: 2; 17 | flex-basis: 20rem; 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /33-flex-items/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Café con Codely News 7 | 11 | 12 | 13 | 14 | 15 | 16 |
17 |

☕ Café con Codely News

18 |
19 |
20 |
21 | Captura del programa GameMaker 25 |
26 | 27 |

28 | 32 | Actualización en GameMaker 33 | 34 |

35 |

36 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su llegada a Linux 37 |

38 |
39 | 57 |
58 |
59 | Captura de la home page de Babel 63 |
64 | 65 |

66 | 70 | Nueva versión de Babel: 7.15.0 71 | 72 |

73 |

74 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 75 |

76 |
77 |
78 |
79 | Imagen del nuevo DNI 4.0 83 |
84 | 85 |

86 | 90 | Llega el DNI 4.0 91 | 92 |

93 |

94 | 95 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 96 |

97 |
98 |
99 |
100 | Captura de la home page de Babel 104 |
105 | 106 |

107 | 111 | Nueva versión de Babel: 7.15.0 112 | 113 |

114 |

115 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style pipeline operator". 116 |

117 |
118 |
119 |
120 | Imagen del nuevo DNI 4.0 124 |
125 | 126 |

127 | 131 | Llega el DNI 4.0 132 | 133 |

134 |

135 | 136 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 137 |

138 |
139 |
140 |
141 | 142 | -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .card { 32 | overflow: hidden; 33 | padding: 1rem; 34 | background: #fff; 35 | border-radius: 0.3rem; 36 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 37 | color: #333; 38 | width: 20rem; 39 | 40 | &__img { 41 | display: block; 42 | width: calc(100% + 2rem); 43 | height: 12rem; 44 | border-bottom: 3px solid #9191e9; 45 | margin: -1rem -1rem 0; 46 | background: #9191e9; 47 | 48 | img { 49 | display: block; 50 | width: 100%; 51 | height: 100%; 52 | object-fit: cover; 53 | } 54 | } 55 | 56 | &__title { 57 | margin-bottom: 0.5rem; 58 | margin-top: 0.5rem; 59 | font-size: 1.5rem; 60 | font-weight: 400; 61 | line-height: 1.3; 62 | 63 | a { 64 | text-decoration: none; 65 | } 66 | } 67 | 68 | &__category { 69 | text-decoration: underline; 70 | } 71 | } -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-flow: row wrap; 5 | align-items: stretch; 6 | 7 | .card { 8 | flex-grow: 1; 9 | flex-basis: 25rem; 10 | } 11 | 12 | .card:nth-child(3n) { 13 | flex-basis: 100%; 14 | } 15 | } -------------------------------------------------------------------------------- /41-flex-basis-and-flex-wrap/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /42-justify-content-values/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /42-justify-content-values/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /42-justify-content-values/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

☕ Café con Codely News

16 |
17 |
18 |
19 | Captura del programa GameMaker 20 |
21 | 22 |

23 | 25 | Actualización en GameMaker 26 | 27 |

28 |

29 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 30 | llegada a Linux 31 |

32 |
33 | 46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /42-justify-content-values/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /42-justify-content-values/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /42-justify-content-values/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | line-height: 1.8; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | max-width: 72rem; 27 | padding: 1rem; 28 | margin: 0 auto; 29 | } 30 | 31 | .gallery { 32 | margin-top: 1rem; 33 | } 34 | 35 | .card { 36 | overflow: hidden; 37 | padding: 1rem; 38 | background: #fff; 39 | border-radius: 0.3rem; 40 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 41 | color: #333; 42 | width: 20rem; 43 | 44 | &__img { 45 | display: block; 46 | width: calc(100% + 2rem); 47 | height: 12rem; 48 | border-bottom: 3px solid #9191e9; 49 | margin: -1rem -1rem 0; 50 | background: #9191e9; 51 | 52 | img { 53 | display: block; 54 | width: 100%; 55 | height: 100%; 56 | object-fit: cover; 57 | } 58 | } 59 | 60 | &__title { 61 | margin-bottom: 0.5rem; 62 | margin-top: 0.5rem; 63 | font-size: 1.5rem; 64 | font-weight: 400; 65 | line-height: 1.3; 66 | 67 | a { 68 | text-decoration: none; 69 | } 70 | } 71 | 72 | &__category { 73 | text-decoration: underline; 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /42-justify-content-values/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-direction: column; 5 | direction: rtl; 6 | align-items: self-end; 7 | 8 | .card:nth-child(2) { 9 | direction: ltr; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /42-justify-content-values/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; -------------------------------------------------------------------------------- /43-responsive-layout/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /43-responsive-layout/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /43-responsive-layout/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

☕ Café con Codely News

16 |
17 |
18 |
19 | 33 |
34 |
35 |
36 |
37 | Captura del programa GameMaker 38 |
39 | 40 |

41 | 43 | Actualización en GameMaker 44 | 45 |

46 |

47 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 48 | llegada a Linux 49 |

50 |
51 | 64 |
65 |
66 | Captura de la home page de Babel 68 |
69 | 70 |

71 | 72 | Nueva versión de Babel: 7.15.0 73 | 74 |

75 |

76 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style 77 | pipeline operator". 78 |

79 |
80 |
81 |
82 | Imagen del nuevo DNI 4.0 83 |
84 | 85 |

86 | 88 | Llega el DNI 4.0 89 | 90 |

91 |

92 | 93 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 94 |

95 |
96 |
97 |
98 | 99 | 100 | -------------------------------------------------------------------------------- /43-responsive-layout/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /43-responsive-layout/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /43-responsive-layout/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | max-width: 72rem; 13 | line-height: 1.8; 14 | margin: 0 auto; 15 | } 16 | 17 | a { 18 | color: #2d5d7b; 19 | text-decoration: underline; 20 | 21 | &:hover, 22 | &:focus { 23 | color: #457eac; 24 | } 25 | } 26 | 27 | .container { 28 | padding: 1rem; 29 | } 30 | 31 | .gallery { 32 | margin-top: 1rem; 33 | } 34 | 35 | .card { 36 | overflow: hidden; 37 | padding: 1rem; 38 | background: #fff; 39 | border-radius: 0.3rem; 40 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 41 | color: #333; 42 | width: 20rem; 43 | 44 | &__img { 45 | display: block; 46 | width: calc(100% + 2rem); 47 | height: 12rem; 48 | border-bottom: 3px solid #9191e9; 49 | margin: -1rem -1rem 0; 50 | background: #9191e9; 51 | 52 | img { 53 | display: block; 54 | width: 100%; 55 | height: 100%; 56 | object-fit: cover; 57 | } 58 | } 59 | 60 | &__title { 61 | margin-bottom: 0.5rem; 62 | margin-top: 0.5rem; 63 | font-size: 1.5rem; 64 | font-weight: 400; 65 | line-height: 1.3; 66 | 67 | a { 68 | text-decoration: none; 69 | } 70 | } 71 | 72 | &__category { 73 | text-decoration: underline; 74 | } 75 | } 76 | 77 | .menu { 78 | ul { 79 | list-style-type: none; 80 | padding-left: 0; 81 | 82 | li { 83 | margin-bottom: 0.3rem; 84 | border: 1px solid tomato; 85 | text-align: center; 86 | border-radius: 0.2rem; 87 | color: #2d5d7b; 88 | background-color: white; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /43-responsive-layout/scss/_flex.scss: -------------------------------------------------------------------------------- 1 | .gallery { 2 | display: flex; 3 | gap: 1rem; 4 | flex-wrap: wrap; 5 | 6 | .card { 7 | flex: 1 1 40%; 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /43-responsive-layout/scss/_layout.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-wrap: wrap; 4 | gap: 1rem; 5 | 6 | .menu { 7 | flex-basis: 20rem; 8 | flex-grow: 1; 9 | } 10 | 11 | .gallery { 12 | flex-basis: 0; 13 | flex-grow: 999; 14 | min-width: 60%; 15 | } 16 | } 17 | 18 | .menu { 19 | ul { 20 | display: flex; 21 | flex-wrap: wrap; 22 | gap: .5rem; 23 | 24 | li { 25 | flex-grow: 1; 26 | flex-basis: 20rem; 27 | } 28 | } 29 | } -------------------------------------------------------------------------------- /43-responsive-layout/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./flex"; 3 | @import "./layout"; -------------------------------------------------------------------------------- /51-codely-page-menu/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /51-codely-page-menu/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /51-codely-page-menu/assets/api-http-go-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/api-http-go-hexagonal.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/css-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/css-grid.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/de-javascript-a-typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/de-javascript-a-typescript.png -------------------------------------------------------------------------------- /51-codely-page-menu/assets/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/domain-driven-design.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/js-moderno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/js-moderno.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/light-dark-themes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/light-dark-themes.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/logo-codelytv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/logo-codelytv.png -------------------------------------------------------------------------------- /51-codely-page-menu/assets/php-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/php-8.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/setup-linux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/setup-linux.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/assets/testing-frontend.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/51-codely-page-menu/assets/testing-frontend.jpg -------------------------------------------------------------------------------- /51-codely-page-menu/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Logo de Codely 17 |
18 | 40 | Subscríbete 41 |
42 | 43 |
44 |
45 |
46 | Portada curso De JavaScript a TypeScript 47 |
48 |

🏗️ De JavaScript a TypeScript

49 |

50 | 🏍️ Aprende TypeScript partiendo de un ejemplo de JavaScript en el que haremos el proceso de refactor poco a 51 | poco y analizando las principales características de TypeScript. 52 |

53 |

¡Después de este curso no querrás volver a JavaScript!

54 |
55 | 56 |
57 |
58 | Portada curso CSS Grid a fondo 59 |
60 |

🍱 CSS Grid a fondo

61 |

62 | Aprende a sacar provecho de CSS Grid para crear layouts flexibles sin necesidad de recurrir a frameworks. 63 |

64 |
65 | 66 |
67 |
68 | Portada curso Light and Dark themes accesibles 69 |
70 |

🌚🌝 Light & Dark themes accesibles

71 |

72 | Aprende a implementar temas claros y oscuros en una página web de forma accesible, cómo integrarlo en tu 73 | arquitectura CSS y cómo adaptar los diseños para que te queden unos temas finísimos. 74 |

75 |
76 | 77 |
78 |
79 | Portada curso Domain-Drive Design 80 |
81 |

🕋 Domain-Driven Design

82 |

83 | Aprende a modelar tus aplicaciones centrándote en tu dominio, definir Bounded Contexts, agregados, value 84 | objects, y mucho más. Todo de forma práctica y con ejemplos de código ⚡ 85 |

86 |
87 | 88 |
89 |
90 | Portada curso PHP 9 Ejemplos para el Mundo Real 91 |
92 |

🐘 PHP 8: Novedades y ejemplos para el Mundo Real™

93 |

94 | Migra tus aplicaciones a PHP 8 paso a paso, consigue tests más mantenibles gracias a Named Arguments, Value 95 | Objects más simples con Constructor Property Promotion, reemplaza PECL (obsoleto), y mucho más. 96 |

97 |
98 | 99 |
100 |
101 | Portada curso API HTTP en Go con arquitectura hexagonal 103 |
104 |

⛳ API HTTP en Go aplicando Arquitectura Hexagonal

105 |

106 | Aprende a desarrollar tu primera API HTTP en Go aplicando algunos de los fundamentos de la Arquitectura 107 | Hexagonal. 108 |

109 |

110 | !Sin olvidarnos de su adorable mascota! 111 |

112 |
113 | 114 |
115 |
116 | Portada curso Setup Linux para programar 117 |
118 |

🐧 Setup Linux para Programar

119 |

120 | Configura tu ordenador con Linux tal y cómo lo tiene Dani para programar lo más cómodamente posible. 121 |

122 |
123 | 124 |
125 |
126 | Portada curso JavaScript moderno 127 |
128 |

🐥 JavaScript moderno: Buenas prácticas para empezar y refactorizar aplicaciones 129 |

130 |

131 | Aprende buenas prácticas para empezar aplicaciones JavaScript vanilla desde 0 y refactorizar código legacy dando 132 | soporte a navegadores antiguos. 133 |

134 |
135 | 136 |
137 |
138 | Portada curso Testing en frontend 139 |
140 |

🐙 Testing en frontend

141 |

142 | Aprende cómo testear tus aplicaciones frontend, aplicando buenas prácticas para conseguir unos tests mantenibles 143 | que aporten confianza. 144 |

145 |
146 |
147 | 148 |
149 |
150 |
151 |

Plan Individual

152 |

¡Ahorra 50€!

153 |

299€ / año

154 | 157 |
158 |
159 |
    160 |
  • 161 | ✅ Acceso a todos los cursos. 162 |
    • 163 |
  • 164 | ✅ Centraliza todo en un único pago. 165 |
    • 166 |
  • 167 | ✅ El mejor ahorro para el plan individual. 168 |
    • 169 |
  • 170 | ✅ Contenido de calidad impartido por profesionales. 171 |
    • 172 |
  • 173 | ✅ Nuevo contenido cada semana. 174 |
    • 175 |
  • 176 | ✅ Acceso a la comunidad CodelyTV 177 |
    • 178 |
  • 179 | ✅ Certificados al completar los cursos 180 |
    • 181 |
182 |
183 |
184 | 185 |
186 |
187 |

Plan Individual

188 |

29€ / mes

189 | 192 |
193 |
194 |
    195 |
  • 196 | ✅ Acceso a todos los cursos. 197 |
    • 198 |
  • 199 | ✅ Contenido de calidad impartido por profesionales. 200 |
    • 201 |
  • 202 | ✅ Nuevo contenido cada semana. 203 |
    • 204 |
  • 205 | ✅ Acceso a la comunidad CodelyTV 206 |
    • 207 |
  • 208 | ✅ Certificados al completar los cursos 209 |
    • 210 |
211 |
212 |
213 | 214 |
215 |
216 |

Plan Empresas

217 |

desde 168€

218 | 221 |
222 |
223 |
    224 |
  • 225 | ✅ Gestión centralizada de cuentas. 226 |
    • 227 |
  • 228 | ✅ Todo los beneficios del plan individual. 229 |
    • 230 |
  • 231 | ✅ Reducción de precios por incremento de cuentas. 232 |
    • 233 |
  • 234 | ✅ Informe trimestral de progreso. 235 |
    • 236 |
  • 237 | ✅ Y muchos más beneficios. 238 |
    • 239 |
240 |
241 |
242 |
243 | 244 | 245 | -------------------------------------------------------------------------------- /51-codely-page-menu/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /51-codely-page-menu/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /51-codely-page-menu/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | font-size: 1rem; 10 | max-width: 72rem; 11 | line-height: 1.8; 12 | margin: 0 auto; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | padding: 1rem; 27 | } 28 | 29 | .gallery { 30 | margin-top: 1rem; 31 | } 32 | -------------------------------------------------------------------------------- /51-codely-page-menu/scss/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: #181818; 3 | display: flex; 4 | flex-wrap: wrap; 5 | align-items: center; 6 | padding: 1rem; 7 | 8 | a { 9 | color: white; 10 | text-decoration: none; 11 | } 12 | 13 | &__menu { 14 | flex-basis: 100%; 15 | order: 1; 16 | 17 | @media screen and (min-width: 60rem) { 18 | order: 0; 19 | flex-basis: auto; 20 | } 21 | 22 | ul { 23 | display: flex; 24 | flex-wrap: wrap; 25 | padding-left: 0; 26 | margin: 0; 27 | 28 | li { 29 | flex: 1; 30 | list-style-type: none; 31 | text-align: center; 32 | padding: 0.25rem 1rem; 33 | } 34 | } 35 | } 36 | 37 | &__subscribe { 38 | border: 1px solid #69e081; 39 | border-radius: 0.25rem; 40 | padding: 0.25rem 1rem; 41 | } 42 | 43 | &__image { 44 | flex: 1; 45 | text-align: center; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | 50 | img { 51 | max-width: none; 52 | max-height: 2.3em; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /51-codely-page-menu/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./header"; 3 | -------------------------------------------------------------------------------- /52-codely-page-course-list/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /52-codely-page-course-list/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/api-http-go-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/api-http-go-hexagonal.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/css-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/css-grid.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/de-javascript-a-typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/de-javascript-a-typescript.png -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/domain-driven-design.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/js-moderno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/js-moderno.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/light-dark-themes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/light-dark-themes.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/logo-codelytv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/logo-codelytv.png -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/php-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/php-8.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/setup-linux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/setup-linux.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/assets/testing-frontend.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/52-codely-page-course-list/assets/testing-frontend.jpg -------------------------------------------------------------------------------- /52-codely-page-course-list/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Logo de Codely 17 |
18 | 40 | Subscríbete 41 |
42 | 43 |
44 |
45 |
46 | Portada curso De JavaScript a TypeScript 47 |
48 |

🏗️ De JavaScript a TypeScript

49 |

50 | 🏍️ Aprende TypeScript partiendo de un ejemplo de JavaScript en el que haremos el proceso de refactor poco a 51 | poco y analizando las principales características de TypeScript. 52 |

53 |

¡Después de este curso no querrás volver a JavaScript!

54 |
55 | 56 |
57 |
58 | Portada curso CSS Grid a fondo 59 |
60 |

🍱 CSS Grid a fondo

61 |

62 | Aprende a sacar provecho de CSS Grid para crear layouts flexibles sin necesidad de recurrir a frameworks. 63 |

64 |
65 | 66 |
67 |
68 | Portada curso Light and Dark themes accesibles 69 |
70 |

🌚🌝 Light & Dark themes accesibles

71 |

72 | Aprende a implementar temas claros y oscuros en una página web de forma accesible, cómo integrarlo en tu 73 | arquitectura CSS y cómo adaptar los diseños para que te queden unos temas finísimos. 74 |

75 |
76 | 77 |
78 |
79 | Portada curso Domain-Drive Design 80 |
81 |

🕋 Domain-Driven Design

82 |

83 | Aprende a modelar tus aplicaciones centrándote en tu dominio, definir Bounded Contexts, agregados, value 84 | objects, y mucho más. Todo de forma práctica y con ejemplos de código ⚡ 85 |

86 |
87 | 88 |
89 |
90 | Portada curso PHP 9 Ejemplos para el Mundo Real 91 |
92 |

🐘 PHP 8: Novedades y ejemplos para el Mundo Real™

93 |

94 | Migra tus aplicaciones a PHP 8 paso a paso, consigue tests más mantenibles gracias a Named Arguments, Value 95 | Objects más simples con Constructor Property Promotion, reemplaza PECL (obsoleto), y mucho más. 96 |

97 |
98 | 99 |
100 |
101 | Portada curso API HTTP en Go con arquitectura hexagonal 103 |
104 |

⛳ API HTTP en Go aplicando Arquitectura Hexagonal

105 |

106 | Aprende a desarrollar tu primera API HTTP en Go aplicando algunos de los fundamentos de la Arquitectura 107 | Hexagonal. 108 |

109 |

110 | !Sin olvidarnos de su adorable mascota! 111 |

112 |
113 | 114 |
115 |
116 | Portada curso Setup Linux para programar 117 |
118 |

🐧 Setup Linux para Programar

119 |

120 | Configura tu ordenador con Linux tal y cómo lo tiene Dani para programar lo más cómodamente posible. 121 |

122 |
123 | 124 |
125 |
126 | Portada curso JavaScript moderno 127 |
128 |

🐥 JavaScript moderno: Buenas prácticas para empezar y refactorizar aplicaciones 129 |

130 |

131 | Aprende buenas prácticas para empezar aplicaciones JavaScript vanilla desde 0 y refactorizar código legacy dando 132 | soporte a navegadores antiguos. 133 |

134 |
135 | 136 |
137 |
138 | Portada curso Testing en frontend 139 |
140 |

🐙 Testing en frontend

141 |

142 | Aprende cómo testear tus aplicaciones frontend, aplicando buenas prácticas para conseguir unos tests mantenibles 143 | que aporten confianza. 144 |

145 |
146 |
147 | 148 |
149 |
150 |
151 |

Plan Individual

152 |

¡Ahorra 50€!

153 |

299€ / año

154 | 157 |
158 |
159 |
    160 |
  • 161 | ✅ Acceso a todos los cursos. 162 |
    • 163 |
  • 164 | ✅ Centraliza todo en un único pago. 165 |
    • 166 |
  • 167 | ✅ El mejor ahorro para el plan individual. 168 |
    • 169 |
  • 170 | ✅ Contenido de calidad impartido por profesionales. 171 |
    • 172 |
  • 173 | ✅ Nuevo contenido cada semana. 174 |
    • 175 |
  • 176 | ✅ Acceso a la comunidad CodelyTV 177 |
    • 178 |
  • 179 | ✅ Certificados al completar los cursos 180 |
    • 181 |
182 |
183 |
184 | 185 |
186 |
187 |

Plan Individual

188 |

29€ / mes

189 | 192 |
193 |
194 |
    195 |
  • 196 | ✅ Acceso a todos los cursos. 197 |
    • 198 |
  • 199 | ✅ Contenido de calidad impartido por profesionales. 200 |
    • 201 |
  • 202 | ✅ Nuevo contenido cada semana. 203 |
    • 204 |
  • 205 | ✅ Acceso a la comunidad CodelyTV 206 |
    • 207 |
  • 208 | ✅ Certificados al completar los cursos 209 |
    • 210 |
211 |
212 |
213 | 214 |
215 |
216 |

Plan Empresas

217 |

desde 168€

218 | 221 |
222 |
223 |
    224 |
  • 225 | ✅ Gestión centralizada de cuentas. 226 |
    • 227 |
  • 228 | ✅ Todo los beneficios del plan individual. 229 |
    • 230 |
  • 231 | ✅ Reducción de precios por incremento de cuentas. 232 |
    • 233 |
  • 234 | ✅ Informe trimestral de progreso. 235 |
    • 236 |
  • 237 | ✅ Y muchos más beneficios. 238 |
    • 239 |
240 |
241 |
242 |
243 | 244 | 245 | -------------------------------------------------------------------------------- /52-codely-page-course-list/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /52-codely-page-course-list/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /52-codely-page-course-list/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | font-size: 1rem; 10 | max-width: 72rem; 11 | line-height: 1.8; 12 | margin: 0 auto; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | padding: 1rem; 27 | } 28 | 29 | .gallery { 30 | margin-top: 1rem; 31 | } 32 | -------------------------------------------------------------------------------- /52-codely-page-course-list/scss/_courses.scss: -------------------------------------------------------------------------------- 1 | .courses { 2 | margin-top: 1.5rem; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | gap: 1rem; 7 | align-content: center; 8 | 9 | @media screen and (min-width: 50rem) { 10 | flex-wrap: wrap; 11 | height: 1500px; 12 | 13 | &::before, 14 | &::after { 15 | content: ""; 16 | flex-basis: 100%; 17 | width: 0; 18 | order: 2; 19 | } 20 | } 21 | 22 | .course-card { 23 | width: 80%; 24 | 25 | &__image { 26 | img { 27 | width: 100%; 28 | height: 100%; 29 | } 30 | } 31 | 32 | &__title { 33 | color: #238b53; 34 | } 35 | 36 | @media screen and (min-width: 50rem) { 37 | width: 28%; 38 | 39 | &:nth-child(3n + 1) { 40 | order: 1; 41 | } 42 | 43 | &:nth-child(3n + 2) { 44 | order: 2; 45 | } 46 | 47 | &:nth-child(3n) { 48 | order: 3; 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /52-codely-page-course-list/scss/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: #181818; 3 | display: flex; 4 | flex-wrap: wrap; 5 | align-items: center; 6 | padding: 1rem; 7 | 8 | a { 9 | color: white; 10 | text-decoration: none; 11 | } 12 | 13 | &__menu { 14 | flex-basis: 100%; 15 | order: 1; 16 | 17 | @media screen and (min-width: 60rem) { 18 | order: 0; 19 | flex-basis: auto; 20 | } 21 | 22 | ul { 23 | display: flex; 24 | flex-wrap: wrap; 25 | padding-left: 0; 26 | margin: 0; 27 | 28 | li { 29 | flex: 1; 30 | list-style-type: none; 31 | text-align: center; 32 | padding: 0.25rem 1rem; 33 | } 34 | } 35 | } 36 | 37 | &__subscribe { 38 | border: 1px solid #69e081; 39 | border-radius: 0.25rem; 40 | padding: 0.25rem 1rem; 41 | } 42 | 43 | &__image { 44 | flex: 1; 45 | text-align: center; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | 50 | img { 51 | max-width: none; 52 | max-height: 2.3em; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /52-codely-page-course-list/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./header"; 3 | @import "./courses"; 4 | -------------------------------------------------------------------------------- /53-codely-page-pricing/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /53-codely-page-pricing/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/api-http-go-hexagonal.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/api-http-go-hexagonal.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/css-grid.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/css-grid.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/de-javascript-a-typescript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/de-javascript-a-typescript.png -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/domain-driven-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/domain-driven-design.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/js-moderno.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/js-moderno.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/light-dark-themes.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/light-dark-themes.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/logo-codelytv.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/logo-codelytv.png -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/php-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/php-8.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/setup-linux.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/setup-linux.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/assets/testing-frontend.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CodelyTV/css-flex-course/5eb2827f7ffb58e15ad623297b2a52be7d2fcf1c/53-codely-page-pricing/assets/testing-frontend.jpg -------------------------------------------------------------------------------- /53-codely-page-pricing/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |
16 | Logo de Codely 17 |
18 | 40 | Subscríbete 41 |
42 | 43 |
44 |
45 |
46 | Portada curso De JavaScript a TypeScript 47 |
48 |

🏗️ De JavaScript a TypeScript

49 |

50 | 🏍️ Aprende TypeScript partiendo de un ejemplo de JavaScript en el que haremos el proceso de refactor poco a 51 | poco y analizando las principales características de TypeScript. 52 |

53 |

¡Después de este curso no querrás volver a JavaScript!

54 |
55 | 56 |
57 |
58 | Portada curso CSS Grid a fondo 59 |
60 |

🍱 CSS Grid a fondo

61 |

62 | Aprende a sacar provecho de CSS Grid para crear layouts flexibles sin necesidad de recurrir a frameworks. 63 |

64 |
65 | 66 |
67 |
68 | Portada curso Light and Dark themes accesibles 69 |
70 |

🌚🌝 Light & Dark themes accesibles

71 |

72 | Aprende a implementar temas claros y oscuros en una página web de forma accesible, cómo integrarlo en tu 73 | arquitectura CSS y cómo adaptar los diseños para que te queden unos temas finísimos. 74 |

75 |
76 | 77 |
78 |
79 | Portada curso Domain-Drive Design 80 |
81 |

🕋 Domain-Driven Design

82 |

83 | Aprende a modelar tus aplicaciones centrándote en tu dominio, definir Bounded Contexts, agregados, value 84 | objects, y mucho más. Todo de forma práctica y con ejemplos de código ⚡ 85 |

86 |
87 | 88 |
89 |
90 | Portada curso PHP 9 Ejemplos para el Mundo Real 91 |
92 |

🐘 PHP 8: Novedades y ejemplos para el Mundo Real™

93 |

94 | Migra tus aplicaciones a PHP 8 paso a paso, consigue tests más mantenibles gracias a Named Arguments, Value 95 | Objects más simples con Constructor Property Promotion, reemplaza PECL (obsoleto), y mucho más. 96 |

97 |
98 | 99 |
100 |
101 | Portada curso API HTTP en Go con arquitectura hexagonal 103 |
104 |

⛳ API HTTP en Go aplicando Arquitectura Hexagonal

105 |

106 | Aprende a desarrollar tu primera API HTTP en Go aplicando algunos de los fundamentos de la Arquitectura 107 | Hexagonal. 108 |

109 |

110 | !Sin olvidarnos de su adorable mascota! 111 |

112 |
113 | 114 |
115 |
116 | Portada curso Setup Linux para programar 117 |
118 |

🐧 Setup Linux para Programar

119 |

120 | Configura tu ordenador con Linux tal y cómo lo tiene Dani para programar lo más cómodamente posible. 121 |

122 |
123 | 124 |
125 |
126 | Portada curso JavaScript moderno 127 |
128 |

🐥 JavaScript moderno: Buenas prácticas para empezar y refactorizar aplicaciones 129 |

130 |

131 | Aprende buenas prácticas para empezar aplicaciones JavaScript vanilla desde 0 y refactorizar código legacy dando 132 | soporte a navegadores antiguos. 133 |

134 |
135 | 136 |
137 |
138 | Portada curso Testing en frontend 139 |
140 |

🐙 Testing en frontend

141 |

142 | Aprende cómo testear tus aplicaciones frontend, aplicando buenas prácticas para conseguir unos tests mantenibles 143 | que aporten confianza. 144 |

145 |
146 |
147 | 148 |
149 |
150 |
151 |

Plan Individual

152 |

¡Ahorra 50€!

153 |

299€ / año

154 | 157 |
158 |
159 |
    160 |
  • 161 | ✅ Acceso a todos los cursos. 162 |
    • 163 |
  • 164 | ✅ Centraliza todo en un único pago. 165 |
    • 166 |
  • 167 | ✅ El mejor ahorro para el plan individual. 168 |
    • 169 |
  • 170 | ✅ Contenido de calidad impartido por profesionales. 171 |
    • 172 |
  • 173 | ✅ Nuevo contenido cada semana. 174 |
    • 175 |
  • 176 | ✅ Acceso a la comunidad CodelyTV 177 |
    • 178 |
  • 179 | ✅ Certificados al completar los cursos 180 |
    • 181 |
182 |
183 |
184 | 185 |
186 |
187 |

Plan Individual

188 |

29€ / mes

189 | 192 |
193 |
194 |
    195 |
  • 196 | ✅ Acceso a todos los cursos. 197 |
    • 198 |
  • 199 | ✅ Contenido de calidad impartido por profesionales. 200 |
    • 201 |
  • 202 | ✅ Nuevo contenido cada semana. 203 |
    • 204 |
  • 205 | ✅ Acceso a la comunidad CodelyTV 206 |
    • 207 |
  • 208 | ✅ Certificados al completar los cursos 209 |
    • 210 |
211 |
212 |
213 | 214 |
215 |
216 |

Plan Empresas

217 |

desde 168€

218 | 221 |
222 |
223 |
    224 |
  • 225 | ✅ Gestión centralizada de cuentas. 226 |
    • 227 |
  • 228 | ✅ Todo los beneficios del plan individual. 229 |
    • 230 |
  • 231 | ✅ Reducción de precios por incremento de cuentas. 232 |
    • 233 |
  • 234 | ✅ Informe trimestral de progreso. 235 |
    • 236 |
  • 237 | ✅ Y muchos más beneficios. 238 |
    • 239 |
240 |
241 |
242 |
243 | 244 | 245 | -------------------------------------------------------------------------------- /53-codely-page-pricing/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /53-codely-page-pricing/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /53-codely-page-pricing/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | font-family: sans-serif; 9 | font-size: 1rem; 10 | max-width: 72rem; 11 | line-height: 1.8; 12 | margin: 0 auto; 13 | } 14 | 15 | a { 16 | color: #2d5d7b; 17 | text-decoration: underline; 18 | 19 | &:hover, 20 | &:focus { 21 | color: #457eac; 22 | } 23 | } 24 | 25 | .container { 26 | padding: 1rem; 27 | } 28 | 29 | .gallery { 30 | margin-top: 1rem; 31 | } 32 | -------------------------------------------------------------------------------- /53-codely-page-pricing/scss/_courses.scss: -------------------------------------------------------------------------------- 1 | .courses { 2 | margin-top: 1.5rem; 3 | display: flex; 4 | flex-direction: column; 5 | align-items: center; 6 | gap: 1rem; 7 | align-content: center; 8 | 9 | @media screen and (min-width: 50rem) { 10 | flex-wrap: wrap; 11 | height: 1500px; 12 | 13 | &::before, 14 | &::after { 15 | content: ""; 16 | flex-basis: 100%; 17 | width: 0; 18 | order: 2; 19 | } 20 | } 21 | 22 | .course-card { 23 | width: 80%; 24 | 25 | &__image { 26 | img { 27 | width: 100%; 28 | height: 100%; 29 | } 30 | } 31 | 32 | &__title { 33 | color: #238b53; 34 | } 35 | 36 | @media screen and (min-width: 50rem) { 37 | width: 28%; 38 | 39 | &:nth-child(3n + 1) { 40 | order: 1; 41 | } 42 | 43 | &:nth-child(3n + 2) { 44 | order: 2; 45 | } 46 | 47 | &:nth-child(3n) { 48 | order: 3; 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /53-codely-page-pricing/scss/_header.scss: -------------------------------------------------------------------------------- 1 | .header { 2 | background-color: #181818; 3 | display: flex; 4 | flex-wrap: wrap; 5 | align-items: center; 6 | padding: 1rem; 7 | 8 | a { 9 | color: white; 10 | text-decoration: none; 11 | } 12 | 13 | &__menu { 14 | flex-basis: 100%; 15 | order: 1; 16 | 17 | @media screen and (min-width: 60rem) { 18 | order: 0; 19 | flex-basis: auto; 20 | } 21 | 22 | ul { 23 | display: flex; 24 | flex-wrap: wrap; 25 | padding-left: 0; 26 | margin: 0; 27 | 28 | li { 29 | flex: 1; 30 | list-style-type: none; 31 | text-align: center; 32 | padding: 0.25rem 1rem; 33 | } 34 | } 35 | } 36 | 37 | &__subscribe { 38 | border: 1px solid #69e081; 39 | border-radius: 0.25rem; 40 | padding: 0.25rem 1rem; 41 | } 42 | 43 | &__image { 44 | flex: 1; 45 | text-align: center; 46 | display: flex; 47 | justify-content: center; 48 | align-items: center; 49 | 50 | img { 51 | max-width: none; 52 | max-height: 2.3em; 53 | } 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /53-codely-page-pricing/scss/_pricing.scss: -------------------------------------------------------------------------------- 1 | .pricing { 2 | display: flex; 3 | flex-direction: column; 4 | gap: 1rem; 5 | padding: 1rem; 6 | 7 | @media screen and (min-width: 50rem) { 8 | flex-direction: row; 9 | align-items: center; 10 | max-width: 90%; 11 | margin: 0 auto; 12 | } 13 | 14 | .pricing-tier { 15 | display: flex; 16 | border: 1px solid black; 17 | border-radius: 0.25rem; 18 | 19 | @media screen and (min-width: 50rem) { 20 | flex-direction: column; 21 | } 22 | 23 | &__title { 24 | background-color: #181818; 25 | flex: 1; 26 | color: white; 27 | display: flex; 28 | flex-direction: column; 29 | justify-content: center; 30 | align-items: center; 31 | padding: 1rem; 32 | text-align: center; 33 | 34 | h3 { 35 | font-size: 2rem; 36 | font-weight: bold; 37 | margin: 0; 38 | } 39 | 40 | p { 41 | margin: 0; 42 | font-size: 2rem; 43 | } 44 | } 45 | 46 | &__subscribe { 47 | color: black; 48 | background-color: #69e081; 49 | align-self: stretch; 50 | border: none; 51 | font-size: 1.5rem; 52 | padding: 0.5rem; 53 | 54 | &:hover { 55 | cursor: pointer; 56 | background-color: transparentize($color: #69e081, $amount: 0.5); 57 | } 58 | } 59 | 60 | &__perks { 61 | flex: 1; 62 | align-self: center; 63 | padding: 1rem; 64 | 65 | ul { 66 | padding: 0; 67 | 68 | li { 69 | list-style-type: none; 70 | } 71 | } 72 | } 73 | 74 | @media screen and (min-width: 50rem) { 75 | &:nth-child(2) { 76 | order: -1; 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /53-codely-page-pricing/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./header"; 3 | @import "./courses"; 4 | @import "./pricing"; 5 | -------------------------------------------------------------------------------- /61-old-browsers/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | css 3 | dist -------------------------------------------------------------------------------- /61-old-browsers/.stylelintrc.json: -------------------------------------------------------------------------------- 1 | 2 | { 3 | "plugins": ["stylelint-scss"], 4 | "extends": ["stylelint-config-standard"], 5 | "rules": { 6 | "at-rule-no-unknown": null, 7 | "scss/at-rule-no-unknown": true 8 | } 9 | } -------------------------------------------------------------------------------- /61-old-browsers/float.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

☕ Café con Codely News

16 |
17 |
18 |
19 |
20 |
21 | Captura del programa GameMaker 22 |
23 | 24 |

25 | 27 | Actualización en GameMaker 28 | 29 |

30 |

31 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 32 | llegada a Linux 33 |

34 |
35 | 48 |
49 |
50 | Captura de la home page de Babel 52 |
53 | 54 |

55 | 56 | Nueva versión de Babel: 7.15.0 57 | 58 |

59 |

60 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style 61 | pipeline operator". 62 |

63 |
64 |
65 |
66 | Imagen del nuevo DNI 4.0 67 |
68 | 69 |

70 | 72 | Llega el DNI 4.0 73 | 74 |

75 |

76 | 77 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 78 |

79 |
80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /61-old-browsers/inline-block.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

☕ Café con Codely News

16 |
17 |
18 |
19 |
20 |
21 | Captura del programa GameMaker 22 |
23 | 24 |

25 | 27 | Actualización en GameMaker 28 | 29 |

30 |

31 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 32 | llegada a Linux 33 |

34 |
35 | 48 |
49 |
50 | Captura de la home page de Babel 52 |
53 | 54 |

55 | 56 | Nueva versión de Babel: 7.15.0 57 | 58 |

59 |

60 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style 61 | pipeline operator". 62 |

63 |
64 |
65 |
66 | Imagen del nuevo DNI 4.0 67 |
68 | 69 |

70 | 72 | Llega el DNI 4.0 73 | 74 |

75 |

76 | 77 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 78 |

79 |
80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /61-old-browsers/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-flex-course", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "sass scss:css", 7 | "watch": "sass scss:css --watch" 8 | }, 9 | "devDependencies": { 10 | "sass": "^1.29.0", 11 | "stylelint": "^13.8.0", 12 | "stylelint-config-standard": "^20.0.0", 13 | "stylelint-scss": "^3.18.0" 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /61-old-browsers/readme.md: -------------------------------------------------------------------------------- 1 | # CSS Flex 2 | 3 | ## To run this project 4 | 5 | ```bash 6 | npm install 7 | 8 | # To watch scss files 9 | npm run watch 10 | 11 | # To compile scss files 12 | npm run build 13 | 14 | # To start static server 15 | npx serve 16 | ``` -------------------------------------------------------------------------------- /61-old-browsers/scss/_base.scss: -------------------------------------------------------------------------------- 1 | *, 2 | *::before, 3 | *::after { 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background: mediumturquoise; 9 | color: #fff; 10 | font-family: sans-serif; 11 | font-size: 1rem; 12 | max-width: 72rem; 13 | line-height: 1.8; 14 | margin: 0 auto; 15 | } 16 | 17 | a { 18 | color: #2d5d7b; 19 | text-decoration: underline; 20 | 21 | &:hover, 22 | &:focus { 23 | color: #457eac; 24 | } 25 | } 26 | 27 | .container { 28 | padding: 1rem; 29 | } 30 | 31 | .gallery { 32 | margin-top: 1rem; 33 | } 34 | 35 | .card { 36 | overflow: hidden; 37 | padding: 1rem; 38 | background: #fff; 39 | border-radius: 0.3rem; 40 | box-shadow: 0 0.2rem 0.3rem rgba(0, 0, 0, 0.4); 41 | color: #333; 42 | width: 20rem; 43 | 44 | &__img { 45 | display: block; 46 | width: calc(100% + 2rem); 47 | height: 12rem; 48 | border-bottom: 3px solid #9191e9; 49 | margin: -1rem -1rem 0; 50 | background: #9191e9; 51 | 52 | img { 53 | display: block; 54 | width: 100%; 55 | height: 100%; 56 | object-fit: cover; 57 | } 58 | } 59 | 60 | &__title { 61 | margin-bottom: 0.5rem; 62 | margin-top: 0.5rem; 63 | font-size: 1.5rem; 64 | font-weight: 400; 65 | line-height: 1.3; 66 | 67 | a { 68 | text-decoration: none; 69 | } 70 | } 71 | 72 | &__category { 73 | text-decoration: underline; 74 | } 75 | } 76 | 77 | .menu { 78 | ul { 79 | list-style-type: none; 80 | padding-left: 0; 81 | 82 | li { 83 | margin-bottom: 0.3rem; 84 | border: 1px solid tomato; 85 | text-align: center; 86 | border-radius: 0.2rem; 87 | color: #2d5d7b; 88 | background-color: white; 89 | } 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /61-old-browsers/scss/_float.scss: -------------------------------------------------------------------------------- 1 | .gallery.float { 2 | display: flex; 3 | gap: 1rem; 4 | flex-wrap: wrap; 5 | 6 | .card { 7 | flex: 1 1 40%; 8 | float: left; 9 | height: 25rem; 10 | 11 | @supports (display: flex) { 12 | height: auto; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /61-old-browsers/scss/_inline_block.scss: -------------------------------------------------------------------------------- 1 | .gallery.inline_block { 2 | display: flex; 3 | gap: 1rem; 4 | flex-wrap: wrap; 5 | 6 | .card { 7 | flex: 1 1 40%; 8 | height: 25rem; 9 | display: inline-block; 10 | 11 | @supports (display: flex) { 12 | height: auto; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /61-old-browsers/scss/_table_cell.scss: -------------------------------------------------------------------------------- 1 | .gallery.table_cell { 2 | display: flex; 3 | gap: 1rem; 4 | flex-wrap: wrap; 5 | 6 | .card { 7 | flex: 1 1 40%; 8 | display: table-cell; 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /61-old-browsers/scss/index.scss: -------------------------------------------------------------------------------- 1 | @import "./base"; 2 | @import "./float"; 3 | @import "./inline_block"; 4 | @import "./table_cell"; -------------------------------------------------------------------------------- /61-old-browsers/table-cell.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Café con Codely News 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 |

☕ Café con Codely News

16 |
17 |
18 |
19 |
20 |
21 | Captura del programa GameMaker 22 |
23 | 24 |

25 | 27 | Actualización en GameMaker 28 | 29 |

30 |

31 | El motor de creación de videojuegos GameMaker ofrece una versión gratuita sin límite de tiempo y anuncia su 32 | llegada a Linux 33 |

34 |
35 | 48 |
49 |
50 | Captura de la home page de Babel 52 |
53 | 54 |

55 | 56 | Nueva versión de Babel: 7.15.0 57 | 58 |

59 |

60 | La nueva versión incluye cosas molonas como "top level await", "TypeScript const enums supports" y "Hash-style 61 | pipeline operator". 62 |

63 |
64 |
65 |
66 | Imagen del nuevo DNI 4.0 67 |
68 | 69 |

70 | 72 | Llega el DNI 4.0 73 | 74 |

75 |

76 | 77 | El DNI 4.0 entra hoy en vigor: ya está aquí el nuevo formato europeo que se integrará en el móvil 78 |

79 |
80 |
81 |
82 | 83 | 84 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # CSS Flex course examples 2 | 3 | - [CSS Flex course](https://pro.codely.tv/library/css-flex-a-fondo/about/) (Spanish) 4 | - [CSS Grid course](https://pro.codely.tv/library/css-grid/about/) (Spanish) 5 | --------------------------------------------------------------------------------