├── .devcontainer └── devcontainer.json ├── .github └── workflows │ └── learnpack-audit.yml ├── .gitignore ├── .gitpod.Dockerfile ├── .gitpod.yml ├── .learn └── assets │ ├── 03-bootstrap-grid-result.png │ ├── 05-sidebar-with-menu-result.png │ ├── 06-hero-section-and-three-boxes-result.png │ ├── 07-buttons-alert-and-table-img1.png │ ├── 07-buttons-alert-and-table-result.png │ ├── 08-bootstrap-forms-result.png │ └── grid.png ├── .vscode └── settings.json ├── LICENSE.md ├── README.es.md ├── README.md ├── bootstrap-badge.png ├── exercises ├── 00-Welcome │ ├── README.es.md │ └── README.md ├── 01-Add-Bootstrap-To-Your-Website │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 02-Bootstrap-Skeleton │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 03-Bootstrap-Grid │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 04-Navbar │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 05-Sidebar-With-Menu │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 06-Hero-Section-And-Three-Boxes │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 07-Buttons-Alert-And-Table │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js └── 08-Bootstrap-Forms │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── learn.json └── preview.png /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | 2 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 3 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 4 | { 5 | "name": "Node.js", 6 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 7 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16", 8 | "customizations": { 9 | "vscode": { 10 | "settings": { 11 | "editor.defaultFormatter": "esbenp.prettier-vscode", 12 | "workbench.editorAssociations": { 13 | "*.md": "vscode.markdown.preview.editor" 14 | } 15 | }, 16 | "extensions": ["learn-pack.learnpack-vscode"] 17 | } 18 | }, 19 | 20 | // Features to add to the dev container. More info: https://containers.dev/features. 21 | // "features": {}, 22 | 23 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 24 | // "forwardPorts": [], 25 | 26 | "onCreateCommand": "npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g && npm i @learnpack/learnpack@5.0.13 -g && learnpack plugins:install @learnpack/html@1.1.7" 27 | 28 | // Use 'postCreateCommand' to run commands after the container is created. 29 | // "postCreateCommand": "yarn install", 30 | 31 | // Configure tool-specific properties. 32 | // "customizations": {}, 33 | 34 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 35 | // "remoteUser": "root" 36 | } 37 | -------------------------------------------------------------------------------- /.github/workflows/learnpack-audit.yml: -------------------------------------------------------------------------------- 1 | # This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node 2 | # For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions 3 | 4 | name: Learnpack audit 5 | 6 | on: 7 | push: 8 | branches: [ main ] 9 | pull_request: 10 | branches: [ main ] 11 | 12 | jobs: 13 | build: 14 | 15 | runs-on: ubuntu-latest 16 | 17 | strategy: 18 | matrix: 19 | node-version: [20.x] 20 | # See supported Node.js release schedule at https://nodejs.org/en/about/releases/ 21 | 22 | steps: 23 | - uses: actions/checkout@v2 24 | - name: Use Node.js ${{ matrix.node-version }} 25 | uses: actions/setup-node@v2 26 | with: 27 | node-version: ${{ matrix.node-version }} 28 | - run: npm install @learnpack/learnpack@latest -g 29 | - run: learnpack audit -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | 2 | # Ignore everything 3 | /* 4 | 5 | !.gitignore 6 | !.gitpod.yml 7 | !.gitpod.Dockerfile 8 | !bc.json 9 | !learn.json 10 | !README.md 11 | !README.es.md 12 | !.vscode 13 | 14 | !/exercises 15 | !/exercises/* 16 | 17 | !/.learn 18 | /.learn/** 19 | !/.learn/resets 20 | !/.learn/resets/** 21 | !/.learn/assets 22 | !/.learn/assets/** 23 | -------------------------------------------------------------------------------- /.gitpod.Dockerfile: -------------------------------------------------------------------------------- 1 | FROM gitpod/workspace-full:latest 2 | 3 | USER gitpod 4 | 5 | RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g 6 | RUN npm i @learnpack/learnpack@2.1.47 -g && learnpack plugins:install @learnpack/html@1.1.7 7 | -------------------------------------------------------------------------------- /.gitpod.yml: -------------------------------------------------------------------------------- 1 | image: 2 | file: .gitpod.Dockerfile 3 | 4 | ports: 5 | - port: 3000 6 | onOpen: ignore 7 | 8 | vscode: 9 | extensions: 10 | - learn-pack.learnpack-vscode 11 | 12 | 13 | github: 14 | prebuilds: 15 | # enable for the master/default branch (defaults to true) 16 | master: true 17 | # enable for pull requests coming from this repo (defaults to true) 18 | pullRequests: false 19 | # add a "Review in Gitpod" button as a comment to pull requests (defaults to true) 20 | addComment: false 21 | -------------------------------------------------------------------------------- /.learn/assets/03-bootstrap-grid-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/03-bootstrap-grid-result.png -------------------------------------------------------------------------------- /.learn/assets/05-sidebar-with-menu-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/05-sidebar-with-menu-result.png -------------------------------------------------------------------------------- /.learn/assets/06-hero-section-and-three-boxes-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/06-hero-section-and-three-boxes-result.png -------------------------------------------------------------------------------- /.learn/assets/07-buttons-alert-and-table-img1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/07-buttons-alert-and-table-img1.png -------------------------------------------------------------------------------- /.learn/assets/07-buttons-alert-and-table-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/07-buttons-alert-and-table-result.png -------------------------------------------------------------------------------- /.learn/assets/08-bootstrap-forms-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/08-bootstrap-forms-result.png -------------------------------------------------------------------------------- /.learn/assets/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/.learn/assets/grid.png -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "files.autoSave": "afterDelay", 3 | "files.autoSaveDelay": 700, 4 | "editor.minimap.enabled": false, 5 | "workbench.editorAssociations": { 6 | "*.md": "vscode.markdown.preview.editor" 7 | } 8 | } -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | # TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 2 | 3 | By accessing Breathe Code we assume you accept these terms and conditions. Do not continue to use Breathe Code's content, applications or tutorials if you do not agree to take all of the terms and conditions stated on this page. 4 | 5 | Unless otherwise stated, Breathe Code and/or its licensors own the intellectual property rights for all material on Breathe Code. All intellectual property rights are reserved. You may access this from Breathe Code for your own personal use subjected to restrictions set in these terms and conditions. 6 | 7 | You must not: 8 | 9 | * Republish material from Breathe Code 10 | * Sell, rent or sub-license material from Breathe Code 11 | * Reproduce, duplicate or copy material from Breathe Code 12 | * Redistribute content from Breathe Code 13 | 14 | You can read the full version of Breathe Code's terms and conditions here: [Terms and Conditions](http://breatheco.de/terms-and-conditions) 15 | -------------------------------------------------------------------------------- /README.es.md: -------------------------------------------------------------------------------- 1 | 2 | # Tutorial de ejercicios Bootstrap en 4Geeks Academy 3 | 4 | 5 | follow on Twitter 6 | 7 | 8 | ¡Hola! Soy Alejandro Sanchez @alesanchezr, estoy muy emocionado de tenerte aquí! 🎉 😂 Aprender a codificar es difícil, ¡necesitas entrenamiento! Envíame un DM en twitter si tienes alguna pregunta. 9 | 10 | 11 | 12 | ## Aprenderás los siguientes conceptos: 13 | 14 | 1. ¿Cómo aplicar Bootstrap a tu sitio web? 15 | 16 | 2. Seleccionar elementos HTML de tu sitio web para aplicar los estilos de Bootstrap. 17 | 18 | 3. Aplicar clases de Bootstrap a esos elementos. 19 | 20 | 4. Uso de las reglas de Bootstrap más populares. 21 | 22 | 5. Los trucos de Bootstrap más populares. 23 | 24 | #### Antes de empezar... hay otros tutoriales relacionados 25 | 26 |
    27 |
  1. Aprende HTML
    2. 28 |
  2. Aprende Formularios HTML5
    3. 29 |
  3. Aprende CSS
    4. 30 |
  4. Aprende CSS Layouts
    5. 31 |
  5. Aprender Bootstrap← 🔥 Estás aquí
    6. 32 |
33 | 34 | Una completa selección de ejercicios autograduados sobre CSS ¡para cualquier interesado en aprender CSS! 35 | 36 | ## Instalación en un clic (recomendado) 37 | 38 | Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/bootstrap-exercises-tutorial) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial). 39 | 40 | > Una vez ya tengas abierto VSCode los ejercicios de LearnPack deberían empezar automáticamente, si esto no sucede puedes intentar empezar los ejercicios escribiendo este comando en tu terminal: `$ learnpack start` 41 | 42 | ## Instalación local: 43 | 44 | Clona el repositorio en tu ambiente local y sigue los siguientes pasos: 45 | 46 | 1. Instala LearnPack, el package manager para los tutoriales interactivos y el node compiler plugin para LearnPack, asegúrate también de tener node.js 14+: 47 | 48 | ```bash 49 | $ npm i learnpack -g 50 | $ learnpack plugins:install learnpack-html 51 | ``` 52 | 53 | 2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta: 54 | 55 | ```bash 56 | $ learnpack download bootstrap-exercises-tutorial 57 | $ cd bootstrap-exercises-tutorial 58 | ``` 59 | 60 | > Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios. 61 | 62 | 3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json: 63 | 64 | ```bash 65 | $ npm i jest@24.8.0 -g 66 | $ learnpack start 67 | ``` 68 | 69 | 70 | 71 | ## ¿Cómo están organizados los ejercicios? 72 | 73 | Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos: 74 | 75 | 1. **index.html:** Representa el archivo de entrada para toda la aplicación. 76 | 2. **README.md:** Contiene las instrucciones de los ejercicios. 77 | 3. **test.js:** No tienes que abrir este archivo, contiene el script del test para el ejercicio. 78 | 79 | > Nota: Los ejercicios son autograduados, pero los tests son muy rígidos y estrictos, mi recomendación es que no prestes demasiada atención a los tests y los uses solo como una sugerencia o podrías frustrarte. 80 | 81 | ## Colaboradores 82 | 83 | Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 84 | 85 | 1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖 86 | 87 | Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! 88 | 89 | Este y otros ejercicios son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning). 90 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Bootstrap Exercises Tutorial at 4Geeks Academy 2 | 3 | 4 | 5 | follow on Twitter 6 | 7 | 8 | Hi! I'm Alejandro Sanchez @alesanchezr, I'm thrilled to have you here! 🎉 😂 Learning to code is hard; you need coaching! DM me on Twitter if you have any question. You'll be learning the following concepts: 9 | 10 | 11 | 12 | ## You'll be learning the following concepts: 13 | 14 | 1. How to apply Bootstrap to your website. 15 | 16 | 2. Selecting HTML Elements from your website to apply the Bootstrap styles. 17 | 18 | 3. Apply Bootstrap classes to those elements. 19 | 20 | 4. Use the most popular Bootstrap rules. 21 | 22 | 5. Learn the most popular Bootstrap tricks. 23 | 24 | 25 | #### Before we start... other related tutorials 26 |
    27 |
  1. Learn HTML
    2. 28 |
  2. Learn HTML Forms
    3. 29 |
  3. Learn CSS
    4. 30 |
  4. Learn CSS Layouts
    5. 31 |
  5. Learn Bootstrap← 🔥 You are here now
    6. 32 |
33 | Complete selection of autograded CSS exercises, anyone interested in learning CSS! 34 | 35 | 36 | ## One click installation (recommended): 37 | 38 | You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/bootstrap-exercises-tutorial) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/bootstrap-exercises-tutorial.git). 39 | 40 | > Once you have VSCode open, the LearnPack exercises should start automatically. If exercises don't run automatically you can try typing on your terminal: `$ learnpack start` 41 | 42 | ## Local installation: 43 | 44 | Clone the repository in your local environment and follow the steps below: 45 | 46 | 1. Install LearnPack, the package manager for learning tutorials and the node compiler plugin for LearnPack, make sure you also have node.js 14+: 47 | 48 | ```bash 49 | $ npm i learnpack -g 50 | $ learnpack plugins:install learnpack-html 51 | ``` 52 | 53 | 2. Download these particular exercises using LearnPack and `cd` into the folder: 54 | 55 | ```bash 56 | $ learnpack download bootstrap-exercises-tutorial 57 | $ cd bootstrap-exercises-tutorial 58 | ``` 59 | 60 | > Note: Once you finish downloading, you will find an "exercises" folder that contains all the exercises within. 61 | 62 | 3. Start the tutorial/exercises by running the following command at the same level where your learn.json file is: 63 | 64 | ```bash 65 | $ npm i jest@24.8.0 -g 66 | $ learnpack start 67 | ``` 68 | 69 | 70 | 71 | 72 | ## How are the exercises organized? 73 | 74 | Each exercise is a small React application containing the following files: 75 | 76 | 1. **index.html:** represents the entry file for the entire exercise. 77 | 2. **README.md:** contains exercise instructions. 78 | 3. **test.js:** you don't have to open this file, it contains the testing script for the exercise. 79 | 80 | > Note: The exercises have automatic grading, but it's very rigid and strict, my recommendation is to not take the tests too serious and use them only as a suggestion, or you may get frustrated. 81 | 82 | ## Contributors 83 | 84 | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 85 | 86 | 1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 87 | (build-tutorial) ✅ (documentation) 📖 88 | 89 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! 90 | 91 | This and many other exercises are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sánchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning). 92 | -------------------------------------------------------------------------------- /bootstrap-badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/bootstrap-exercises-tutorial/52a6b406e29010f08622c6a2540e330ef126e0bf/bootstrap-badge.png -------------------------------------------------------------------------------- /exercises/00-Welcome/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | intro: "https://www.youtube.com/watch?v=328yx6t-RTY" 3 | --- 4 | 5 | # Bienvenido a los Ejercicios de Bootstrap!! 6 | 7 | Mi nombre es [Alejandro Sanchez](https://twitter.com/alesanchezr). Estoy realmente emocionado de tenerte aquí!! 🎉 😂 Aprender a programar es difícil, necesitas apoyo! Si tienes una pregunta envíame un mensaje directo por Twitter o Slack. 8 | 9 | Durante este curso vas a aprender los siguientes conceptos: 10 | 11 | 1. Como aplicar Bootstrap a tu sitio web. 12 | 13 | 2. Seleccionar elementos HTML de tu website para aplicarle los estilos de Bootstrap. 14 | 15 | 3. Aplicar a esos elementos las clases de Bootstrap. 16 | 17 | 4. Uso de las reglas de Bootstrap más populares. 18 | 19 | 5. Aprender los trucos más populares de Bootstrap. 20 | 21 | Como habrás notado, HTML solo te permite crear websites básicos. Nadie quiere ver un website blanco con un montón de texto en él. ¡Entonces es tiempo de aprender sobre que trata Bootstrap! Aprender Bootstrap para hacer bonito tu website. ¡Vamos a hacerlo brillar! 22 | 23 | ## Colaboradores 24 | 25 | Gracias a estas maravillosas personas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 26 | 27 | 1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀, (build-tutorial) ✅, (documentation) 📖. 28 | 2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) ⚠️ 29 | 3. [Charly Chacón (charlytoc)](https://github.com/charlytoc), contribution: (coder) 💻, (video-tutorials) 👀 30 | 31 | Este proyecto sigue la [all-contributors](https://github.com/kentcdodds/all-contributors) specification. ¡Colaboraciones de cualquier tipo son bienvenidas! 32 | -------------------------------------------------------------------------------- /exercises/00-Welcome/README.md: -------------------------------------------------------------------------------- 1 | # Welcome to Bootstrap Exercises!! 2 | 3 | My name is [Alejandro Sanchez](https://twitter.com/alesanchezr). I'm really excited to have you here!! 🎉 😂 Learning to code is hard, you probably will need coaching! DM me on Twitter if you have any question. 4 | 5 | During this course you will be learning the following concepts: 6 | 7 | 1. How to apply Bootstrap to your website. 8 | 9 | 2. Selecting HTML Elements from your website to apply the Bootstrap styles. 10 | 11 | 3. Apply Bootstrap classes to those elements. 12 | 13 | 4. Use the most popular Bootstrap rules. 14 | 15 | 5. Learn the most popular Bootstrap tricks. 16 | 17 | As you may have noticed, HTML allows you to create only basic websites. Nobody wants to see a white website with some horrible text on it. So it's time to learn what Bootstrap is all about! Learn Bootstrap to make your website beautiful. Let's make it shine! 18 | 19 | ## Contributors 20 | 21 | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 22 | 23 | 1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️, (pull-request-review) 👀 (build-tutorial) ✅ (documentation) 📖 24 | 2. [Paolo Lucano (plucodev)](https://github.com/plucodev), contribution: (coder), (build-tests) ⚠️ 25 | 26 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! 27 | -------------------------------------------------------------------------------- /exercises/01-Add-Bootstrap-To-Your-Website/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://youtu.be/X1KzQa83Hb0" 3 | --- 4 | 5 | # `01` Add Bootstrap To Your Website 6 | 7 | Hay dos formas de agregar Bootstrap a tu sitio web: **Remoto** o **Local** (como cualquier otro archivo CSS), la única diferencia será la ruta URL que especifiques en la etiqueta `` (para los archivos .CSS de Bootstrap) o la etiqueta ` 53 | 54 | ``` 55 | 56 | ## 💡 Pista: 57 | 58 | + El botón debe ser rojo si todo salió bien. 59 | 60 | -------------------------------------------------------------------------------- /exercises/01-Add-Bootstrap-To-Your-Website/README.md: -------------------------------------------------------------------------------- 1 | # `01` Add Bootstrap To Your Website 2 | 3 | There are two ways to add Bootstrap into your website: 4 | **Remote** or **Local** (just like any other CSS file), the only difference will be the URL path you specify on the `` tag (for Bootstrap's .CSS files) or ` 51 | 52 | ``` 53 | 54 | ## 💡 Hint: 55 | 56 | + The button should be red if everything went well. 57 | -------------------------------------------------------------------------------- /exercises/01-Add-Bootstrap-To-Your-Website/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 01 Add Bootstrap To Your Website 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /exercises/01-Add-Bootstrap-To-Your-Website/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 01 Add Bootstrap To Your Website 14 | 15 | 16 | 17 | 18 | 23 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /exercises/01-Add-Bootstrap-To-Your-Website/tests.js: -------------------------------------------------------------------------------- 1 | const fs=require("fs"); 2 | const path=require("path"); 3 | const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); 4 | 5 | jest.dontMock("fs"); 6 | 7 | describe("All the tests should pass", function () { 8 | beforeEach(() => { 9 | //here I import the HTML into the document 10 | document.documentElement.innerHTML=html.toString(); 11 | 12 | }); 13 | afterEach(() => { 14 | jest.resetModules(); 15 | }); 16 | it("You should not change or delete the existing elements in the tag", function () { 17 | let head = document.querySelector('head') 18 | expect(head).toBeTruthy(); 19 | 20 | let meta1 = head.innerHTML.toString().indexOf(" { 32 | //here I import the HTML into the document 33 | document.documentElement.innerHTML=html.toString(); 34 | }); 35 | afterEach(() => {jest.resetModules();}); 36 | it('The tag should contain the tag for Bootstrap', function () { 37 | let bodyContent=document.querySelector("head").innerHTML 38 | // we can read from the source code 39 | // console.log(html.toString()); 40 | expect(bodyContent.toString().indexOf(``)>-1).toBeTruthy(); 41 | }); 42 | it('The body should contain 2 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /exercises/02-Bootstrap-Skeleton/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 13 | 14 | 02 Bootstrap Skeleton 15 | 16 | 17 |
18 |

This is my first example using bootstrap

19 |

I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.

20 |
21 | 22 | 23 | 28 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /exercises/02-Bootstrap-Skeleton/tests.js: -------------------------------------------------------------------------------- 1 | const fs=require("fs"); 2 | const path=require("path"); 3 | const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); 4 | 5 | jest.dontMock("fs"); 6 | 7 | describe("All the tests should pass", function () { 8 | beforeEach(() => { 9 | //here I import the HTML into the document 10 | document.documentElement.innerHTML=html.toString(); 11 | 12 | //apply the styles from the stylesheet if needed 13 | 14 | }); 15 | afterEach(() => { 16 | jest.resetModules(); 17 | }); 18 | it("You should not change or delete the existing elements in the tag", function () { 19 | let meta1 = document.querySelector('head').innerHTML.toString().indexOf(" tag", function (){ 29 | let style = document.querySelector('style') 30 | expect(style).toBe(null) 31 | }) 32 | }); 33 | describe('1. All the rules in the instructions should be applied', function () { 34 | beforeEach(() => { 35 | //here I import the HTML into the document 36 | document.documentElement.innerHTML=html.toString(); 37 | }); 38 | afterEach(() => {jest.resetModules();}); 39 | 40 | it('The tag should contain the tag for Bootstrap', function () { 41 | let head = document.querySelector("head").innerHTML 42 | expect(head.toString().indexOf(``)>-1).toBeTruthy(); 43 | }); 44 | 45 | it('The body should contain a
tag with the class container-fluid and bg-secondary', function () { 46 | let div = document.querySelector("div") 47 | expect(div).toBeTruthy(); 48 | expect(div.classList.contains("container-fluid")).toBeTruthy(); 49 | expect(div.classList.contains("bg-secondary")).toBeTruthy(); 50 | }); 51 | 52 | it('The
tag should wrap the existing

and

tags', function () { 53 | let h1 = document.querySelector("div").querySelector("h1") 54 | let p = document.querySelector("div").querySelector("p") 55 | expect(h1).toBeTruthy(); 56 | expect(p).toBeTruthy(); 57 | }); 58 | 59 | it('The

should contain the same innerHTML', function(){ 60 | let h1 = document.querySelector("div").querySelector("h1").innerHTML 61 | expect(h1).toBe("This is my first example using bootstrap") 62 | }) 63 | 64 | it('The

should contain the same innerHTML', function(){ 65 | let p = document.querySelector("div").querySelector("p").innerHTML 66 | expect(p).toBe("I can't believe that bootstrap is so easy, now HTML and CSS are a simple but very useful technology.") 67 | }) 68 | }); 69 | -------------------------------------------------------------------------------- /exercises/03-Bootstrap-Grid/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://youtu.be/OikbBoNvvps" 3 | --- 4 | 5 | # `03` Bootstrap Grid 6 | 7 | Ahora hablemos del *grid* (sistema de columnas y filas): como sabes, cada fila tiene **12 cajas** con un ancho de **8.33%** del sitio web, una columna puede ocupar de **1 a 12 espacios** de ancho, y todos dentro de la misma fila no pueden sumar más de **12 espacios**. 8 | 9 | Con Bootstrap 5, simplemente tienes que agregar la clase `.col` y distribuirá automáticamente las columnas de manera uniforme en los 12 espacios dentro de la fila. 10 | 11 | Si deseas que una columna ocupe un número específico de espacios, debes especificarlo en la propiedad `class` del `

` que contiene la columna. 12 | 13 | Por ejemplo: 14 | 15 | ```html 16 |
.col-2
17 |
.col-4
18 |
.col-6
19 | ``` 20 | 21 | En Bootstrap 5, la propiedad `justify-content` se agrega a las clases para mover las columnas a la posición deseada. 22 | 23 | > Más información sobre el *grid*: https://getbootstrap.com/docs/5.0/layout/grid/ 24 | 25 | 26 | ## 📝 Instrucciones: 27 | 28 | 1. Haz que la segunda fila tenga 3 columnas del mismo ancho (`width`) (divida la fila en 3). 29 | 30 | 2. Agrega una tercera fila con solo una columna de 12 espacios. 31 | 32 | 3. Cambia el color de fondo (`background-color`) de la fila recién creada a rojo (`red`), y agrega tu nombre adentro del `
`. 33 | 34 | 4. Cambia la clase del `
` principal de `container` a `container-fluid`. 35 | 36 | 37 | ## 💡 Pistas: 38 | 39 | + Establece las propiedades de clase de cada columna y especifica cuántos espacios deseas que tome cada columna. 40 | 41 | + Consulta la documentación de Bootstrap para cambiar el color de fondo a rojo. 42 | 43 | 44 | ## 💻 Resultado Esperado: 45 | 46 | ![Example Image](../../.learn/assets/03-bootstrap-grid-result.png?raw=true) 47 | -------------------------------------------------------------------------------- /exercises/03-Bootstrap-Grid/README.md: -------------------------------------------------------------------------------- 1 | # `03` Bootstrap Grid 2 | 3 | Now let's talk about the grid - as you know, every row has **12 boxes** with about **8.33%** of the website's width, a column can take from **1 to 12 slots of width**, and all within the same row cannot add up to more than **12 slots**. 4 | 5 | With Bootstrap 5, you simply have to add the `.col` class, and it will automatically distribute the columns evenly throughout the 12 slots within the row. 6 | 7 | If you want a column to take up a specific number of slots, you must specify it in the `class` property of the `
` that holds the column. 8 | 9 | For example: 10 | 11 | ```html 12 |
.col-2
13 |
.col-4
14 |
.col-6
15 | ``` 16 | 17 | In Bootstrap 5, the `justify-content` property is added to the classes to move the columns into the desired position. 18 | 19 | > More information on the grid: https://getbootstrap.com/docs/5.0/layout/grid/ 20 | 21 | 22 | ## 📝 Instructions: 23 | 24 | 1. Make the second row have 3 columns of the same `width` (split the row in 3). 25 | 26 | 2. Add a third row with only one column of 12 slots. 27 | 28 | 3. Change the `background-color` of the row you just created to `red`, and add your name inside of the `
`. 29 | 30 | 4. Change the class of the main `
` from `container` to `container-fluid`. 31 | 32 | 33 | ## 💡 Hints: 34 | 35 | + Set the class properties of each column and specify how many slots you want each column to take. 36 | 37 | + Check the Bootstrap documentation to change the background color to red. 38 | 39 | 40 | ## 💻 Expected result: 41 | 42 | ![Example Image](../../.learn/assets/03-bootstrap-grid-result.png?raw=true) 43 | -------------------------------------------------------------------------------- /exercises/03-Bootstrap-Grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 03 Bootstrap Grid 8 | 9 | 10 |
11 |

Let's test the grid baby!

12 |
13 |
First col
14 |
Second col
15 |
16 |
17 |
Third col
18 |
Fourth col
19 |
20 |
21 | 22 | -------------------------------------------------------------------------------- /exercises/03-Bootstrap-Grid/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 03 Bootstrap Grid 13 | 14 | 15 |
16 |

Let's test the grid baby!

17 |
18 |
First col
19 |
Second col
20 |
21 |
22 |
Third col
23 |
Fourth col
24 |
Fifth col
25 |
26 |
27 |
Maria
28 |
29 |
30 | 31 | 32 | -------------------------------------------------------------------------------- /exercises/03-Bootstrap-Grid/tests.js: -------------------------------------------------------------------------------- 1 | const fs=require("fs"); 2 | const path=require("path"); 3 | const html=fs.readFileSync(path.resolve(__dirname, "./index.html"), "utf8"); 4 | jest.dontMock("fs"); 5 | 6 | describe("All the tests should pass", function () { 7 | beforeEach(() => { 8 | //here I import the HTML into the document 9 | document.documentElement.innerHTML=html.toString(); 10 | 11 | //apply the styles from the stylesheet if needed 12 | 13 | }); 14 | afterEach(() => { 15 | jest.resetModules(); 16 | }); 17 | 18 | it("You should not change or delete the existing elements in the tag", function () { 19 | let meta1 = document.querySelector('head').innerHTML.toString().indexOf("`) 23 | 24 | expect(meta1).not.toBe(-1) 25 | expect(meta2).not.toBe(-1) 26 | expect(title).toBeTruthy(); 27 | expect(bootstrapLink>-1).toBeTruthy(); 28 | }) 29 | 30 | it("You should not use the