├── .devcontainer └── devcontainer.json ├── .github └── workflows │ └── learnpack-audit.yml ├── .gitignore ├── .gitpod.Dockerfile ├── .gitpod.yml ├── .learn └── assets │ ├── 5xKY0rI.png │ ├── BCp1oWy.png │ ├── Hl9RhW1.gif │ ├── NGmLdal.png │ ├── animation.gif │ ├── badge.png │ └── preview.png ├── .vscode └── settings.json ├── LICENSE.md ├── README.es.md ├── README.md ├── exercises ├── 01-welcome │ ├── README.es.md │ └── README.md ├── 02-hello-world │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 03-Type-Radio │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── tests.js ├── 04-fieldsets-labels-and-styles │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.css │ └── style.css ├── 05-HTML-five-forms │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.html │ └── style.css ├── 06-Replicate-simple-form │ ├── README.es.md │ ├── README.md │ ├── index.html │ └── solution.hide.html ├── 07-Style-without-id-class │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.css │ └── style.css └── 08-Spectacular-login-form │ ├── README.es.md │ ├── README.md │ ├── index.html │ ├── solution.hide.css │ └── style.css ├── learn.json └── preview.jpeg /.devcontainer/devcontainer.json: -------------------------------------------------------------------------------- 1 | // For format details, see https://aka.ms/devcontainer.json. For config options, see the 2 | // README at: https://github.com/devcontainers/templates/tree/main/src/javascript-node 3 | { 4 | "name": "Node.js", 5 | // Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile 6 | "image": "mcr.microsoft.com/devcontainers/javascript-node:0-16", 7 | "customizations": { 8 | "vscode": { 9 | "settings": { 10 | "editor.defaultFormatter": "esbenp.prettier-vscode", 11 | "workbench.editorAssociations": { 12 | "*.md": "vscode.markdown.preview.editor" 13 | } 14 | }, 15 | "extensions": ["learn-pack.learnpack-vscode"] 16 | } 17 | }, 18 | 19 | // Features to add to the dev container. More info: https://containers.dev/features. 20 | // "features": {}, 21 | 22 | // Use 'forwardPorts' to make a list of ports inside the container available locally. 23 | // "forwardPorts": [], 24 | 25 | "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" 26 | 27 | // Use 'postCreateCommand' to run commands after the container is created. 28 | // "postCreateCommand": "yarn install", 29 | 30 | // Configure tool-specific properties. 31 | // "customizations": {}, 32 | 33 | // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root. 34 | // "remoteUser": "root" 35 | } 36 | -------------------------------------------------------------------------------- /.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 | # Ignore everything 2 | /* 3 | 4 | !.gitignore 5 | !.gitpod.yml 6 | !.gitpod.Dockerfile 7 | !bc.json 8 | !learn.json 9 | !README.md 10 | !README.es.md 11 | !.vscode 12 | 13 | !/exercises 14 | !/exercises/* 15 | 16 | !/.learn 17 | /.learn/** 18 | !/.learn/resets 19 | !/.learn/resets/** 20 | !/.learn/assets 21 | !/.learn/assets/** 22 | -------------------------------------------------------------------------------- /.gitpod.Dockerfile: -------------------------------------------------------------------------------- 1 | 2 | FROM gitpod/workspace-full:latest 3 | 4 | USER gitpod 5 | 6 | RUN npm i jest@29.7.0 jest-environment-jsdom@29.7.0 -g 7 | RUN npm i @learnpack/learnpack@4.0.8 -g && learnpack plugins:install @learnpack/html@1.1.7 8 | -------------------------------------------------------------------------------- /.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/5xKY0rI.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/5xKY0rI.png -------------------------------------------------------------------------------- /.learn/assets/BCp1oWy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/BCp1oWy.png -------------------------------------------------------------------------------- /.learn/assets/Hl9RhW1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/Hl9RhW1.gif -------------------------------------------------------------------------------- /.learn/assets/NGmLdal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/NGmLdal.png -------------------------------------------------------------------------------- /.learn/assets/animation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/animation.gif -------------------------------------------------------------------------------- /.learn/assets/badge.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/badge.png -------------------------------------------------------------------------------- /.learn/assets/preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/.learn/assets/preview.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 & Ejercicios de Formularios HTML5 3 | 4 | 5 | 6 | > Por [@alesanchezr](https://twitter.com/alesanchezr) y [otros colaboradores](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/graphs/contributors) de [4Geeks Academy](https://4geeksacademy.co/) 7 | 8 | ![last commit](https://img.shields.io/github/last-commit/4geeksacademy/html-forms-tutorial-exercises) 9 | [![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de) 10 | [![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy) 11 | 12 | 13 | 14 | Los formularios son tan importantes en el mundo de HTML, CSS y JavaScript que decidí dedicarles un tutorial especial para enfocarme en todas las entradas/inputs, botones y elementos que HTML trae por defecto para centrarme en la interacción. En estos ejercicios aprenderás: 15 | 16 | 1. Uso de entradas/inputs de texto, text areas, entradas/inputs de fecha y entradas/inputs numéricas. 17 | 18 | 2. Uso de dropdowns. 19 | 20 | 3. Validaciones de formulario. 21 | 22 | 4. Dar estilos a un formulario. 23 | 24 | 25 | #### Antes de empezar... hay otros tutoriales 26 | 27 |
    28 |
  1. Aprende HTML
    2. 29 |
  2. Aprende Formularios HTML5← 🔥 Estás aquí
    3. 30 |
  3. Aprende CSS
    4. 31 |
  4. Aprende CSS Layouts
    5. 32 |
  5. Aprende Bootstrap
    6. 33 |
34 | 35 | ## Instalación en un clic (recomendado) 36 | 37 | Puedes empezar estos ejercicios en pocos segundos haciendo clic en: [Abrir en Codespaces](https://codespaces.new/?repo=4GeeksAcademy/html-forms-tutorial-exercises) (recomendado) o [Abrir en Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git). 38 | 39 | > 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` 40 | 41 | ## Instalación local: 42 | 43 | Clona el repositorio en tu ambiente local y sigue los siguientes pasos: 44 | 45 | 1. Instala LearnPack, el package manager para tutoriales de aprendizaje y el HTML compiler plugin para LearnPack, asegúrate también de tener node.js 14+: 46 | 47 | ```bash 48 | $ npm i @learnpack/learnpack -g 49 | ``` 50 | 51 | 2. Descarga estos ejercicios en particular usando LearnPack y luego `cd` para entrar en la carpeta: 52 | 53 | ```bash 54 | $ git clone https://github.com/4GeeksAcademy/html-forms-tutorial-exercises 55 | $ cd html-forms-tutorial-exercises 56 | ``` 57 | 58 | > Nota: Una vez que termines de descargar, encontrarás una carpeta "exercises" que contiene todos los ejercicios. 59 | 60 | 3. Inicializa el tutorial/ejercicios ejecutando el siguiente comando en el mismo nivel donde se encuentra tu archivo learn.json: 61 | 62 | ```bash 63 | $ learnpack start 64 | ``` 65 | 66 | 67 | ## ¿Cómo están organizados los ejercicios? 68 | 69 | Cada ejercicio es una pequeña aplicación de React que contiene los siguientes archivos: 70 | 71 | 1. **index.js:** representa el archivo de entrada para toda la aplicación. 72 | 2. **README.md:** contiene las instrucciones de los ejercicios. 73 | 3. **test.js:** no tienes que abrir este archivo, contiene el script del test para el ejercicio. 74 | 75 | > 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. 76 | 77 | ## Colaboradores 78 | 79 | Gracias a estas personas maravillosas ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 80 | 81 | 1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribución: (codificador) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 (tutorial de compilación) ✅ (documentación) 📖 82 | 83 | Este proyecto sigue la especificación [all-contributors](https://github.com/kentcdodds/all-contributors). ¡Todas las contribuciones son bienvenidas! 84 | 85 | 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). 86 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # HTML5 Forms Tutorial & Exercises 3 | 4 | 5 | > By [@alesanchezr](https://twitter.com/alesanchezr) and [other contributors](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/graphs/contributors) at [4Geeks Academy](https://4geeksacademy.co/) 6 | 7 | ![last commit](https://img.shields.io/github/last-commit/4geeksacademy/html-forms-tutorial-exercises) 8 | [![build by developers](https://img.shields.io/badge/build_by-Developers-blue)](https://breatheco.de) 9 | [![build by developers](https://img.shields.io/twitter/follow/4geeksacademy?style=social&logo=twitter)](https://twitter.com/4geeksacademy) 10 | 11 | > *Estas instrucciones [están disponibles en 🇪🇸 español](https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/README.es.md) :es:* 12 | 13 | 14 | 15 | Forms are so important in the world of HTML, CSS and Javascript that I decided to give them a special course to focus in all the inputs, buttons and elements that HTML brings by default to focus on interaction. During these exercises you will learn the following: 16 | 17 | 1. How to use text inputs, text areas, date inputs and numeric inputs. 18 | 19 | 2. How to use dropdowns. 20 | 21 | 3. How to form preventive validations. 22 | 23 | 4. The difference between GET and POST. 24 | 25 | 5. Styling a form. 26 | 27 | 28 | #### Before we start... other related tutorials 29 | 30 |
    31 |
  1. Learn HTML
    2. 32 |
  2. Learn HTML5 Forms← 🔥 You are here now
    3. 33 |
  3. Learn CSS
    4. 34 |
  4. Learn CSS Layouts
    5. 35 |
  5. Learn Bootstrap
    6. 36 |
37 | 38 | ## One click installation (recommended): 39 | 40 | You can open these exercises in just a few seconds by clicking: [Open in Codespaces](https://codespaces.new/?repo=4GeeksAcademy/html-forms-tutorial-exercises) (recommended) or [Open in Gitpod](https://gitpod.io#https://github.com/4GeeksAcademy/html-forms-tutorial-exercises.git). 41 | 42 | > 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` 43 | 44 | ## Local installation 45 | 46 | Clone the repository in your local environment and follow the steps below: 47 | 48 | 1. Install LearnPack, the package manager for learning tutorials and the HTML compiler plugin for LearnPack, make sure you also have node.js 14+: 49 | 50 | ```bash 51 | $ npm i @learnpack/learnpack -g 52 | ``` 53 | 54 | 2. Download these particular exercises using LearnPack and `cd` into the folder: 55 | 56 | ```bash 57 | $ git clone https://github.com/4GeeksAcademy/html-forms-tutorial-exercises 58 | $ cd html-forms-tutorial-exercises 59 | ``` 60 | 61 | > Note: Once you finish downloading, you will find an "exercises" folder that contains all the exercises within. 62 | 63 | 3. Start the tutorial/exercises by running the following command at the same level where your learn.json file is: 64 | 65 | ```bash 66 | $ learnpack start 67 | ``` 68 | 69 | 70 | ## How are the exercises organized? 71 | 72 | Each exercise is a small React application containing the following files: 73 | 74 | 1. **index.html:** represents the entry file for the entire exercise. 75 | 2. **README.md:** contains exercise instructions. 76 | 3. **test.js:** you don't have to open this file, it contains the testing script for the exercise. 77 | 78 | > 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. 79 | 80 | ## Contributors 81 | 82 | Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)): 83 | 84 | 1. [Alejandro Sanchez (alesanchezr)](https://github.com/alesanchezr), contribution: (coder) 💻 (idea) 🤔, (build-tests) ⚠️ , (pull-request-review) 🤓 85 | (build-tutorial) ✅ (documentation) 📖 86 | 87 | This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind are welcome! 88 | 89 | 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). 90 | -------------------------------------------------------------------------------- /exercises/01-welcome/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | intro: "https://www.youtube.com/watch?v=tCI20Ueo6Q8" 3 | --- 4 | 5 | 6 | # `01` Bienvenido al mundo de HTML 😆 !! 7 | 8 | Hola, mi nombre es [Alejandro Sánchez](http://alesanchezr.com) y soy uno de los fundadores de @4GeeksAcademy (bootcamp de programación). Estos ejercicios y muchos otros tutoriales interactivos se han liberado al público a través del [Sitio web de 4Geeks](https://4geeks.com). 9 | 10 | Estos ejercicios son para cualquier persona interesada en dominar los formularios HTML. Vamos a abordar los siguientes conceptos: 11 | 12 | 1. Uso de entradas/inputs de texto, text areas, entradas/inputs de fecha y entradas/inputs numéricas 13 | 14 | 2. Uso de dropdowns 15 | 16 | 3. Validaciones de formulario 17 | 18 | 4. Dar estilos a un formulario 19 | 20 | ## ➡️ Incremental & ✔️ Autoevaluado 21 | 22 | - He construido los ejercicios de forma gradual, deberías sentir el progreso poco a poco, y con suerte, el incremento de dificultad entre cada ejercicio nunca será demasiado grande para frustrarte. 23 | 24 | - Todos los ejercicios han sido calificados automáticamente gracias a [@haydavid23](https://github.com/haydavid23) 25 | 26 | Presiona `Next ->` en la parte superior de estas instrucciones para comenzar con el primer ejercicio. 27 | -------------------------------------------------------------------------------- /exercises/01-welcome/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | intro: "https://www.youtube.com/watch?v=83HxtkBq7Yc" 3 | --- 4 | 5 | 6 | # `01` Welcome to the world of HTML 😆 !! 7 | 8 | Hello, my name is [Alejandro Sánchez](http://alesanchezr.com), and I'm one of the founders of @4GeeksAcademy. These exercises and many other interactive tutorials have been open sourced and released through the [4Geeks Website](https://4geeks.com). 9 | 10 | These exercises are for anyone interested in mastering HTML Forms, we will go over the following concepts: 11 | 12 | 1. Using text inputs, text areas, date inputs and numeric inputs 13 | 14 | 2. Using dropdowns 15 | 16 | 3. Form preventive validations 17 | 18 | 4. Styling a form 19 | 20 | ## ➡️ Incremental & ✔️ Autograded 21 | 22 | - I've built the exercises incrementally, you should feel the progress little by little, and hopefully, the difficulty raising between exercises will never be too big to get you frustrated. 23 | 24 | - All exercises have been automatically graded thanks to [@haydavid23](https://github.com/haydavid23) 25 | 26 | Click the `Next ->` button on the top of these instructions to begin with the first exercise. 27 | -------------------------------------------------------------------------------- /exercises/02-hello-world/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=cST3349NjPg" 3 | --- 4 | 5 | # `02` Hello World 6 | 7 | ## 📝 Instrucciones: 8 | 9 | 1. Añade la estructura básica de HTML para cualquier sitio web (doctype, html, head y body). 10 | 11 | 2. Añade "Hello World" dentro de la etiqueta del título `` de la página web. 12 | 13 | ## 💡 Pista: 14 | 15 | + Puedes leer sobre la estructura típica de un sitio web aquí: 16 | 17 | https://4geeks.com/es/lesson/what-is-html-learn-html-es#estructura-de-pgina 18 | 19 | ## 📎 Nota: 20 | 21 | + El título aparecerá en el contenido de la página web, se mostrará en la pestaña del navegador. 22 | -------------------------------------------------------------------------------- /exercises/02-hello-world/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=ytIzazz6q5Y" 3 | --- 4 | 5 | # `02` Hello World 6 | 7 | ## 📝 Instructions: 8 | 9 | 1. Add the basic HTML structure for any website (doctype, html, head and body) 10 | 11 | 2. Add "Hello World" inside the `<title>` tag of the website. 12 | 13 | ## 💡 Hint: 14 | 15 | + You can read about a typical website structure here: 16 | 17 | https://4geeks.com/lesson/what-is-html-learn-html#page-structure 18 | 19 | ## 📎 Note: 20 | 21 | + The title is not going to show on the content of the website, it will show on the browser tab. 22 | -------------------------------------------------------------------------------- /exercises/02-hello-world/index.html: -------------------------------------------------------------------------------- 1 | <!-- your code below here --> 2 | -------------------------------------------------------------------------------- /exercises/02-hello-world/solution.hide.html: -------------------------------------------------------------------------------- 1 | <!-- your code below here --> 2 | <!DOCTYPE html> 3 | <html lang="en"> 4 | <head> 5 | <meta charset="UTF-8" /> 6 | <meta http-equiv="X-UA-Compatible" content="IE=edge" /> 7 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 8 | <title>Hello World 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /exercises/02-hello-world/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('basic HTML structure', function () { 8 | beforeEach(() => { document.documentElement.innerHTML = html.toString(); }); 9 | afterEach(() => { jest.resetModules(); }); 10 | 11 | it('Correct order of HTML tags', function () { 12 | let a = document.documentElement.innerHTML = html.toString() 13 | let b = a.indexOf("") 14 | let c = a.indexOf("") 16 | let e = a.indexOf("") 17 | let f = a.indexOf("<body>") 18 | 19 | //here we check for the order of the tags 20 | expect(b).toBeLessThan(c) 21 | expect(c).toBeLessThan(d) 22 | expect(d).toBeLessThan(e) 23 | expect(e).toBeLessThan(f) 24 | 25 | }) 26 | 27 | it('<!DOCTYPE html> tag should exist', function () { 28 | let a = document.documentElement.innerHTML = html.toString() 29 | expect(a.indexOf("<!DOCTYPE html>")).not.toBe(-1) 30 | }) 31 | it('<html> tag should exist', function () { 32 | let a = document.documentElement.innerHTML = html.toString() 33 | expect(a.indexOf("<html")).not.toBe(-1) 34 | }) 35 | it('<head> tag should exist', function () { 36 | let a = document.documentElement.innerHTML = html.toString() 37 | expect(a.indexOf("<head>")).not.toBe(-1) 38 | }) 39 | it('<title> tag exists and the innerHTML should be "Hello World"', function () { 40 | let a = document.documentElement.innerHTML = html.toString() 41 | expect(a.indexOf("<title>")).not.toBe(-1) 42 | expect(document.querySelector("title").innerHTML).toBe("Hello World") 43 | }) 44 | it('<body> tag exists', function () { 45 | let a = document.documentElement.innerHTML = html.toString() 46 | expect(a.indexOf("<body")).not.toBe(-1) 47 | }) 48 | 49 | 50 | }); 51 | -------------------------------------------------------------------------------- /exercises/03-Type-Radio/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=FnU4xUkNHh0" 3 | --- 4 | 5 | # `03` Type Radio 6 | 7 | El campo `input type=radio` se usa cuando el usuario solo puede escoger una opción y no más. 8 | 9 | Para agrupar varios radios en un mismo grupo de opciones debes asignarles el mismo nombre. 10 | 11 | ## 📝 Instrucciones: 12 | 13 | 1. Crea 2 input `type=radio` para elegir los valores de sexo: Masculino o Femenino. 14 | 15 | 2. Crea otros 2 input `type=radio` para elegir las orientaciones sexuales: Heterosexual o LGTBI. 16 | 17 | ## 💡 Pistas: 18 | 19 | + Investiga sobre las etiquetas `<input>` y `<label>`. 20 | 21 | + Prueba tu formulario, solo se debe poder elegir un género y una orientación sexual. 22 | -------------------------------------------------------------------------------- /exercises/03-Type-Radio/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=I-pvy3crrA4" 3 | --- 4 | 5 | # `03` Type Radio 6 | 7 | The `input type=radio` is used when the user is not allowed to pick more than one option. 8 | 9 | To bind different radios into the same group of options you need to assign them the same name. 10 | 11 | ## 📝 Instructions: 12 | 13 | 1. Create 2 input `type=radio` to pick the sex values: Male or Female. 14 | 15 | 2. Create another 2 input `type=radio` to pick sexual orientation: Heterosexual or LGBTI. 16 | 17 | ## 💡 Hints: 18 | 19 | + Search about `<input>` and `<label>` tags. 20 | 21 | + Test your form, only one gender and one sexual orientation should be allowed to pick. 22 | -------------------------------------------------------------------------------- /exercises/03-Type-Radio/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html> 3 | 4 | <head> 5 | <meta charset="utf-8"> 6 | <meta name="viewport" content="width=device-width"> 7 | <title>4Geeks Academy 8 | 9 | 10 | 11 |
12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /exercises/03-Type-Radio/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4Geeks Academy 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /exercises/03-Type-Radio/tests.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | // const { it } = require('node:test'); 3 | const path = require('path'); 4 | const html = fs.readFileSync(path.resolve(__dirname, './index.html'), 'utf8'); 5 | 6 | jest.dontMock('fs'); 7 | 8 | describe('basic HTML structure', function () { 9 | beforeEach(() => { document.documentElement.innerHTML = html.toString(); }); 10 | afterEach(() => { jest.resetModules(); }); 11 | 12 | it('Correct order of HTML tags', function () { 13 | let a = document.documentElement.innerHTML = html.toString() 14 | let b = a.indexOf("") 15 | let c = a.indexOf("") 17 | let e = a.indexOf("") 18 | let f = a.indexOf("<body>") 19 | 20 | //here we check for the order of the tags 21 | expect(b).toBeLessThan(c) 22 | expect(c).toBeLessThan(d) 23 | expect(d).toBeLessThan(e) 24 | expect(e).toBeLessThan(f) 25 | 26 | }) 27 | 28 | test("There should be four input elements of type radio", function () { 29 | let inpts = document.querySelectorAll("input[type=radio]") 30 | 31 | expect(inpts.length).toEqual(4) 32 | }) 33 | test("The radio inputs should have the requested values: Male, Female, Heterosexual, LGBTI", function () { 34 | let inpts = document.querySelectorAll("input[type=radio]") 35 | let requestedValues_en = ["Male", "Female", "Heterosexual", "LGBTI"] 36 | let requestedValues_es = ["Masculino", "Femenino", "Heterosexual", "LGTBI"] 37 | 38 | let check_en = false 39 | let check_es = false 40 | 41 | for(let idx = 0; idx < inpts.length; idx++) { 42 | check_en = inpts[idx].getAttribute("value") === requestedValues_en[idx]; 43 | 44 | if (!check_en){ 45 | break; 46 | } 47 | } 48 | 49 | for(let idx = 0; idx < inpts.length; idx++) { 50 | check_es = inpts[idx].getAttribute("value") === requestedValues_es[idx]; 51 | if (!check_es){ 52 | break; 53 | } 54 | } 55 | 56 | let expected = check_en || check_es 57 | 58 | inpts.forEach((e,idx) => { 59 | expect(expected).toBeTruthy() 60 | }) 61 | }) 62 | test("There should only be two unique names, one per pair of radio inputs", function () { 63 | let inpts = document.querySelectorAll("input[type=radio]") 64 | let firstName = inpts[0].getAttribute("name") 65 | let secondName = inpts[2].getAttribute("name") 66 | 67 | 68 | inpts.forEach((e,idx) => { 69 | expect(e.getAttribute("name")).toBe(idx < 2 ? firstName : secondName); 70 | }) 71 | }) 72 | 73 | 74 | 75 | 76 | 77 | }); 78 | -------------------------------------------------------------------------------- /exercises/04-fieldsets-labels-and-styles/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=TtRiVNatHUY" 3 | --- 4 | 5 | # `04` Fieldsets, labels and styles 6 | 7 | Darle estilo a un formulario es aburrido y tedioso, pero si usas ciertas etiquetas, tu vida puede ser más fácil. 8 | 9 | `<label>`: Una de las cosas recurrentes que debes hacer es agregar una etiqueta `<label>`. Las etiquetas `<label>` se suelen poner junto a un `<input>` y le dicen al usuario qué representa esa entrada/input. 10 | 11 | `<fieldset>`: Son ideales para añadir varias entradas en el mismo grupo lógico (por ejemplo, agrupar a los input radio -hombre y mujer- en un conjunto de campos de sexo). 12 | 13 | `<legend>`: Es el nombre del grupo de campos que se van a mostrar al usuario. 14 | 15 | ## 📝 Instrucciones: 16 | 17 | 1. Da estilo al formulario aplicando al `<body>` esta fuente: 18 | 19 | ```css 20 | font-family: "Lato", sans-serif; 21 | ``` 22 | 23 | 2. Establece el `display` de la etiqueta `<form>` a `inline-block`. 24 | 25 | 3. Elimina los bordes (`border`) y los márgenes (`margin`) de todos los `<fieldset>`. 26 | 27 | 4. Aplica un relleno (`padding`) de `10px` en la parte superior e inferior y de `0px` a la izquierda y derecha de todos los `<fieldset>` 28 | 29 | 5. Aplicar un grosor de fuente (`font-weight`) de `800` en todos los `<fieldset>`. 30 | 31 | 6. Disminuye el grosor de la fuente (`font-weight`) de todas las `<label>` a `400`. 32 | 33 | 7. Aplica estas reglas a todas las entradas (inputs) de texto. 34 | 35 | ```css 36 | input[type=text] { 37 | border: none; 38 | border-bottom: 1px solid black; 39 | font-size: 16px; 40 | } 41 | ``` 42 | 43 | 8. Aplica este estilo al botón de envío (submit button). 44 | 45 | ```css 46 | input[type=submit] { 47 | cursor: pointer; 48 | border: none; 49 | padding: 10px; 50 | background-color: #f65252; 51 | color: white; 52 | width: 100%; 53 | } 54 | ``` 55 | 56 | ## 💻 Resultado Esperado: 57 | 58 | ![06-fieldsets-labels-and-styles](../../.learn/assets/NGmLdal.png?raw=true) 59 | -------------------------------------------------------------------------------- /exercises/04-fieldsets-labels-and-styles/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=G8RtzrhoFfU" 3 | --- 4 | 5 | # `04` Fieldsets, labels and styles 6 | 7 | Styling a form is boring and tedious, but if you use certain tags, your life can be easier. 8 | 9 | `<label>`: One of the typical things you need to do is add a "label" to your `<input>`, labels tell the end-user what the input stands for. 10 | 11 | `<fieldset>`: They are ideal to add several inputs into the same logical group (for example grouping radios -male and female- into a gender fieldset). 12 | 13 | `<legend>`: It's the name of the fieldset group that is going to be shown to the end-user. 14 | 15 | ## 📝 Instructions: 16 | 17 | 1. Give style to this form by applying this font to the `<body>`: 18 | 19 | ```css 20 | font-family: "Lato", sans-serif; 21 | ``` 22 | 23 | 2. Set the `display` of the `<form>` tag to `inline-block`. 24 | 25 | 3. Remove `borders` and `margins` from all the `<fieldset>` tags. 26 | 27 | 4. Apply a `padding` of `10px` to the top and bottom and a `padding` of `0px` to the left and right of all the `<fieldset>` tags. 28 | 29 | 5. Apply a `font-weight` of `800` to all the `<fieldset>` tags. 30 | 31 | 6. Decrease the `font-weight` of all the `<label>` tags to `400`. 32 | 33 | 7. Apply these rules to all the text inputs: 34 | 35 | ```css 36 | input[type=text] { 37 | border: none; 38 | border-bottom: 1px solid black; 39 | font-size: 16px; 40 | } 41 | ``` 42 | 43 | 8. Apply this style to the submit button: 44 | 45 | ```css 46 | input[type=submit] { 47 | cursor: pointer; 48 | border: none; 49 | padding: 10px; 50 | background-color: #f65252; 51 | color: white; 52 | width: 100%; 53 | } 54 | ``` 55 | 56 | ## 💻 Expected Result: 57 | 58 | ![06-fieldsets-labels-and-styles](../../.learn/assets/NGmLdal.png?raw=true) 59 | -------------------------------------------------------------------------------- /exercises/04-fieldsets-labels-and-styles/index.html: -------------------------------------------------------------------------------- 1 | <!DOCTYPE html> 2 | <html> 3 | <head> 4 | <meta charset="utf-8" /> 5 | <meta name="viewport" content="width=device-width" /> 6 | <title>4Geeks Academy 7 | 8 | 9 | 10 |
11 |
12 | Full Name 13 | 14 | 15 | 16 | 17 |
18 |
19 | Email 20 | 21 |
22 |
23 | Gender 24 | 25 | 26 | 27 | 28 |
29 | 30 |
31 | 32 | 33 | -------------------------------------------------------------------------------- /exercises/04-fieldsets-labels-and-styles/solution.hide.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Lato", sans-serif; 3 | } 4 | 5 | form { 6 | display: inline-block; 7 | } 8 | 9 | fieldset { 10 | border: none; 11 | margin: 0; 12 | padding: 10px 0px; 13 | font-weight: 800; 14 | } 15 | 16 | label { 17 | font-weight: 400; 18 | } 19 | 20 | input[type="text"] { 21 | border: none; 22 | border-bottom: 1px solid black; 23 | font-size: 16px; 24 | } 25 | 26 | input[type="submit"] { 27 | cursor: pointer; 28 | border: none; 29 | padding: 10px; 30 | background-color: #f65252; 31 | color: white; 32 | width: 100%; 33 | } 34 | -------------------------------------------------------------------------------- /exercises/04-fieldsets-labels-and-styles/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/exercises/04-fieldsets-labels-and-styles/style.css -------------------------------------------------------------------------------- /exercises/05-HTML-five-forms/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=22_c9unj6-8" 3 | --- 4 | 5 | # `05` HTML Form 6 | 7 | HTML5 trae algunos trucos muy interesantes para los formularios, aquí hay algunos: 8 | 9 | - Estamos usando marcadores de posición (`placeholders`) para ayudar al usuario a entender cómo llenar cada entrada específica. 10 | 11 | - Ahora hay un input `type=email`, úsala en el formulario. 12 | 13 | - Ahora hay un input `type=tel`, úsala en el formulario para el número de teléfono. 14 | 15 | - Ahora hay un input `type=url`, úsala en el formulario para el sitio web 16 | 17 | - Puedes utilizar un atributo `required` para que sea obligatorio. Aplica el atributo obligatorio (`required`) solo al correo electrónico (el formulario no se enviará hasta que no esté completo). 18 | 19 | - El uso del atributo `autofocus`, enfocará el cursor en ese input en particular cuando se cargue el sitio web. Aplica el atributo `autofocus` al correo electrónico. 20 | -------------------------------------------------------------------------------- /exercises/05-HTML-five-forms/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=7yLgHC3my3Y" 3 | --- 4 | 5 | # `05` HTML Form 6 | 7 | HTML5 brings some more cool tricks to forms, here is a few: 8 | 9 | - We are using placeholders to help the user understand how to fill each specific input. 10 | 11 | - There is now an input `type=email`, use it on the form. 12 | 13 | - There is now an input `type=tel`, use it on the form for the phone number. 14 | 15 | - There is now an input `type=url`, use it on the form for the website 16 | 17 | - You can use the `required` attribute to make it mandatory. Apply the `required` attribute to the email only (the form won't submit until is not complete). 18 | 19 | - Using the `autofocus` attribute it will focus the cursor in that particular input when the website loads. Apply the `autofocus` attribute to the email. 20 | 21 | -------------------------------------------------------------------------------- /exercises/05-HTML-five-forms/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4Geeks Academy 7 | 8 | 9 | 10 |
11 |
12 | Full Name 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | Contact information 22 | 23 | 24 | 25 |
26 |
27 | Gender 28 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /exercises/05-HTML-five-forms/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4Geeks Academy 7 | 8 | 9 | 10 |
11 |
12 | Full Name 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |
21 | Contact information 22 | 23 | 24 | 25 |
26 |
27 | Gender 28 | 29 | 30 | 31 | 32 |
33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /exercises/05-HTML-five-forms/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Lato", sans-serif; 3 | } 4 | 5 | form { 6 | display: inline-block; 7 | } 8 | 9 | fieldset { 10 | border: none; 11 | margin: 0; 12 | padding: 10px 0; 13 | font-weight: 800; 14 | } 15 | 16 | label { 17 | font-weight: 400; 18 | } 19 | 20 | input[type="text"], 21 | input[type="email"], 22 | input[type="tel"], 23 | input[type="url"] { 24 | border: none; 25 | border-bottom: 1px solid black; 26 | font-size: 16px; 27 | } 28 | 29 | input[type="submit"] { 30 | cursor: pointer; 31 | border: none; 32 | padding: 10px; 33 | background-color: #f65252; 34 | color: white; 35 | width: 100%; 36 | } 37 | -------------------------------------------------------------------------------- /exercises/06-Replicate-simple-form/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=uMwe4QHAyE8" 3 | --- 4 | 5 | # `06` Replicate Simple Form 6 | 7 | ## 📝 Instrucciones: 8 | 9 | 1. Usando una tabla, replica exactamente este mismo formulario: 10 | 11 | ![Formulario HTML](../../.learn/assets/5xKY0rI.png?raw=true) 12 | 13 | ## 💡 Pistas: 14 | 15 | + Usa las etiquetas ` 13 | 14 | 15 | 16 |
17 | 18 | 19 |
20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /exercises/06-Replicate-simple-form/solution.hide.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4Geeks Academy 7 | 8 | 47 | 48 | 49 | 50 |
51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 74 | 75 | 76 | 77 | 78 | 85 | 86 | 87 | 88 | 89 | 99 | 100 | 101 | 102 | 107 | 108 |
NameValue
Name
Sex 65 |
66 | 67 | 68 |
69 |
70 | 71 | 72 |
73 |
Eye color 79 | 84 |
Check all that apply 90 |
91 | 92 | 93 |
94 |
95 | 96 | 97 |
98 |
103 | 104 | 105 | 106 |
109 |
110 | 111 | 112 | -------------------------------------------------------------------------------- /exercises/07-Style-without-id-class/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=UPY4gcBTUBE" 3 | --- 4 | 5 | # `07` Style without ID or Class 6 | 7 | Aquí tienes un hermoso formulario de inscripción, puedes leer el código para entender cómo se hizo. 8 | 9 | ## 📝 Instrucciones: 10 | 11 | Reemplaza todos los selectores `.class` y `#id` del `index.html` y sustitúyelos por otros tipos de selectores para lograr la misma referencia. Por ejemplo: 12 | 13 | Para este HTML: 14 | 15 | ```html 16 |
Aquí hay un anchor
17 | ``` 18 | 19 | En lugar de: 20 | 21 | ```css 22 | .myAnchor { background: red; } 23 | ``` 24 | 25 | Podrías hacer esto: 26 | 27 | ```css 28 | a { background:red; } 29 | ``` 30 | 31 | El único selector de clase que puedes seguir usando es `.active`. 32 | 33 | Al final, tu formulario debe verse exactamente igual al original. Así: 34 | 35 | ![08-Style-without-id-class](../../.learn/assets/Hl9RhW1.gif?raw=true) 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /exercises/07-Style-without-id-class/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=BBBPCxXDQsw" 3 | --- 4 | 5 | 6 | # `07` Style without ID or Class 7 | 8 | Here you have a beautiful signup form, you can read the code to understand how it was made. 9 | 10 | ## 📝 Instructions: 11 | 12 | Replace all the `.class` and `#id` selectors from `index.html` with other types of selectors to accomplish the same reference. For example: 13 | 14 | For this HTML: 15 | 16 | ```html 17 |
Here is an anchor
18 | ``` 19 | 20 | Instead of doing: 21 | 22 | ```css 23 | .myAnchor { background: red; } 24 | ``` 25 | 26 | You could do: 27 | 28 | ```css 29 | a { background:red; } 30 | ``` 31 | 32 | The only class selector you can keep using is `.active` 33 | 34 | At the and your form needs to look exactly the same as the original one, like this: 35 | 36 | ![08-Style-without-id-class](../../.learn/assets/Hl9RhW1.gif?raw=true) 37 | 38 | 39 | -------------------------------------------------------------------------------- /exercises/07-Style-without-id-class/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 4Geeks Academy 7 | 8 | 9 | 10 | 11 |
12 | 13 |
    14 |
  • Basic Info
    • 15 |
  • Social Media
    • 16 |
  • Profile Image
    • 17 |
18 | 19 |
20 |

Sign Up Form

21 |

This is step 1

22 | 23 | 24 | 25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /exercises/07-Style-without-id-class/solution.hide.css: -------------------------------------------------------------------------------- 1 | /*custom font*/ 2 | @import url(http://fonts.googleapis.com/css?family=Montserrat); 3 | 4 | /*basic reset*/ 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | body { 10 | background-color: rgb(64, 64, 64); 11 | font-family: montserrat, arial, verdana; 12 | } 13 | /*form styles*/ 14 | form { 15 | width: 400px; 16 | margin: 50px auto; 17 | text-align: center; 18 | position: relative; 19 | } 20 | form fieldset { 21 | background: white; 22 | border: 0 none; 23 | border-radius: 3px; 24 | box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 25 | padding: 20px 30px; 26 | 27 | box-sizing: border-box; 28 | width: 80%; 29 | margin: 0 10%; 30 | 31 | /*stacking fieldsets above each other*/ 32 | position: absolute; 33 | } 34 | /*inputs*/ 35 | form input { 36 | padding: 15px; 37 | border: 1px solid rgba(0, 0, 0, 0.05); 38 | border-radius: 3px; 39 | margin-bottom: 10px; 40 | width: 100%; 41 | box-sizing: border-box; 42 | font-family: montserrat; 43 | color: #2c3e50; 44 | font-size: 13px; 45 | } 46 | form input.error, 47 | form textarea.error { 48 | border-color: rgb(255, 99, 71); 49 | } 50 | /*buttons*/ 51 | form input[type="button"] { 52 | width: 100px; 53 | background: rgb(64, 64, 64); 54 | font-weight: bold; 55 | color: white; 56 | border: 0 none; 57 | border-radius: 2px; 58 | cursor: pointer; 59 | padding: 10px 5px; 60 | margin: 10px 5px; 61 | transition: all 0.4s; 62 | } 63 | form input[type="button"]:hover, 64 | form input[type="button"]:focus { 65 | box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(255, 99, 71); 66 | background-color: rgb(255, 99, 71); 67 | } 68 | /*headings*/ 69 | h2 { 70 | font-size: 15px; 71 | text-transform: uppercase; 72 | color: #2c3e50; 73 | margin-bottom: 10px; 74 | } 75 | h3 { 76 | font-weight: normal; 77 | font-size: 13px; 78 | color: #666; 79 | margin-bottom: 20px; 80 | } 81 | /*progressbar*/ 82 | ul { 83 | overflow: hidden; 84 | /*CSS counters to number the steps*/ 85 | counter-reset: step; 86 | width: 60%; 87 | margin: 0 auto 30px; 88 | } 89 | ul li { 90 | list-style-type: none; 91 | color: white; 92 | text-transform: uppercase; 93 | font-size: 9px; 94 | width: 33.33%; 95 | float: left; 96 | position: relative; 97 | } 98 | ul li:before { 99 | content: counter(step); 100 | counter-increment: step; 101 | width: 20px; 102 | line-height: 20px; 103 | display: block; 104 | font-size: 10px; 105 | color: #333; 106 | background: white; 107 | border-radius: 50%; 108 | margin: 0 auto 5px auto; 109 | } 110 | /*ul connectors*/ 111 | ul li:after { 112 | content: ""; 113 | width: 100%; 114 | height: 2px; 115 | background: white; 116 | position: absolute; 117 | left: -50%; 118 | top: 9px; 119 | z-index: -1; /*put it behind the numbers*/ 120 | } 121 | ul li:first-child:after { 122 | /*connector not needed before the first step*/ 123 | content: none; 124 | } 125 | /*marking active/completed steps green*/ 126 | /*The number of the step and the connector before it = green*/ 127 | ul li.active:before, 128 | ul li.active:after { 129 | background: rgb(255, 99, 71); 130 | color: white; 131 | } 132 | -------------------------------------------------------------------------------- /exercises/07-Style-without-id-class/style.css: -------------------------------------------------------------------------------- 1 | /*custom font*/ 2 | @import url(http://fonts.googleapis.com/css?family=Montserrat); 3 | 4 | /*basic reset*/ 5 | * { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | body { 10 | background-color: rgb(64, 64, 64); 11 | font-family: montserrat, arial, verdana; 12 | } 13 | /*form styles*/ 14 | .msform { 15 | width: 400px; 16 | margin: 50px auto; 17 | text-align: center; 18 | position: relative; 19 | } 20 | .msform fieldset { 21 | background: white; 22 | border: 0 none; 23 | border-radius: 3px; 24 | box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); 25 | padding: 20px 30px; 26 | 27 | box-sizing: border-box; 28 | width: 80%; 29 | margin: 0 10%; 30 | 31 | /*stacking fieldsets above each other*/ 32 | position: absolute; 33 | } 34 | /*inputs*/ 35 | .msform input { 36 | padding: 15px; 37 | border: 1px solid rgba(0, 0, 0, 0.05); 38 | border-radius: 3px; 39 | margin-bottom: 10px; 40 | width: 100%; 41 | box-sizing: border-box; 42 | font-family: montserrat; 43 | color: #2c3e50; 44 | font-size: 13px; 45 | } 46 | .msform input.error, 47 | .msform textarea.error { 48 | border-color: rgb(255, 99, 71); 49 | } 50 | /*buttons*/ 51 | .msform .action-button { 52 | width: 100px; 53 | background: rgb(64, 64, 64); 54 | font-weight: bold; 55 | color: white; 56 | border: 0 none; 57 | border-radius: 2px; 58 | cursor: pointer; 59 | padding: 10px 5px; 60 | margin: 10px 5px; 61 | transition: all 0.4s; 62 | } 63 | .msform .action-button:hover, 64 | .msform .action-button:focus { 65 | box-shadow: 0 0 0 2px white, 0 0 0 3px rgb(255, 99, 71); 66 | background-color: rgb(255, 99, 71); 67 | } 68 | /*headings*/ 69 | .fs-title { 70 | font-size: 15px; 71 | text-transform: uppercase; 72 | color: #2c3e50; 73 | margin-bottom: 10px; 74 | } 75 | .fs-subtitle { 76 | font-weight: normal; 77 | font-size: 13px; 78 | color: #666; 79 | margin-bottom: 20px; 80 | } 81 | /*progressbar*/ 82 | .progressbar { 83 | overflow: hidden; 84 | /*CSS counters to number the steps*/ 85 | counter-reset: step; 86 | width: 60%; 87 | margin: 0 auto 30px; 88 | } 89 | .progressbar li { 90 | list-style-type: none; 91 | color: white; 92 | text-transform: uppercase; 93 | font-size: 9px; 94 | width: 33.33%; 95 | float: left; 96 | position: relative; 97 | } 98 | .progressbar li:before { 99 | content: counter(step); 100 | counter-increment: step; 101 | width: 20px; 102 | line-height: 20px; 103 | display: block; 104 | font-size: 10px; 105 | color: #333; 106 | background: white; 107 | border-radius: 50%; 108 | margin: 0 auto 5px auto; 109 | } 110 | /*progressbar connectors*/ 111 | .progressbar li:after { 112 | content: ""; 113 | width: 100%; 114 | height: 2px; 115 | background: white; 116 | position: absolute; 117 | left: -50%; 118 | top: 9px; 119 | z-index: -1; /*put it behind the numbers*/ 120 | } 121 | .progressbar li:first-child:after { 122 | /*connector not needed before the first step*/ 123 | content: none; 124 | } 125 | /*marking active/completed steps green*/ 126 | /*The number of the step and the connector before it = green*/ 127 | .progressbar li.active:before, 128 | .progressbar li.active:after { 129 | background: rgb(255, 99, 71); 130 | color: white; 131 | } 132 | -------------------------------------------------------------------------------- /exercises/08-Spectacular-login-form/README.es.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=_m9jFVKiCLs" 3 | --- 4 | 5 | # `08` Spectacular login form 6 | 7 | ## 📝 Instrucciones: 8 | 9 | 1. Sin siquiera tocar el HTML, haz que el formulario HTML se vea así: 10 | 11 | ![09-Spectacular-login-form](../../.learn/assets/BCp1oWy.png?raw=true) 12 | -------------------------------------------------------------------------------- /exercises/08-Spectacular-login-form/README.md: -------------------------------------------------------------------------------- 1 | --- 2 | tutorial: "https://www.youtube.com/watch?v=x6gwC16Kch8" 3 | --- 4 | 5 | # `08` Spectacular login form 6 | 7 | ## 📝 Instructions: 8 | 9 | 1. Without even touching the HTML, make this HTML form look like this: 10 | 11 | ![09-Spectacular-login-form](../../.learn/assets/BCp1oWy.png?raw=true) 12 | -------------------------------------------------------------------------------- /exercises/08-Spectacular-login-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 4Geeks Academy 8 | 9 | 10 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /exercises/08-Spectacular-login-form/solution.hide.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | font-size: 24px; 5 | font-family: Arial, Helvetica, sans-serif; 6 | } 7 | 8 | .login { 9 | padding: 0; 10 | background-color: rgb(14, 41, 117); 11 | width: 100vw; 12 | height: 100vh; 13 | 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: center; 17 | align-items: center; 18 | } 19 | 20 | form { 21 | display: flex; 22 | flex-direction: column; 23 | } 24 | 25 | form * { 26 | margin: 12px 0 0 0; 27 | } 28 | 29 | input { 30 | background-color: rgb(7, 38, 87); 31 | border: 1px solid rgb(5, 26, 51); 32 | border-radius: 2px; 33 | 34 | width: 400px; 35 | height: 40px; 36 | font-size: 18px; 37 | 38 | padding: 2px 10px; 39 | 40 | color: white; 41 | } 42 | 43 | h1 { 44 | color: white; 45 | margin-bottom: 10px; 46 | } 47 | 48 | .btn { 49 | cursor: pointer; 50 | color: white; 51 | border-radius: 5px; 52 | font-weight: 500; 53 | width: inherit; 54 | height: 40px; 55 | font-size: 18px; 56 | padding: 5px; 57 | 58 | border: none; 59 | background-color: rgb(71, 116, 215); 60 | } 61 | -------------------------------------------------------------------------------- /exercises/08-Spectacular-login-form/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/exercises/08-Spectacular-login-form/style.css -------------------------------------------------------------------------------- /learn.json: -------------------------------------------------------------------------------- 1 | { 2 | "slug": "html-forms-tutorial-exercises", 3 | "title": { 4 | "us": "Learn how to use and interact with HTML Forms", 5 | "es": "Aprende cómo usar e interactuar con Formularios en HTML" 6 | }, 7 | "preview": "https://github.com/4GeeksAcademy/html-forms-tutorial-exercises/blob/master/preview.jpeg?raw=true", 8 | "description": { 9 | "us": "Master the art of HTML forms with interactive exercises that cover text inputs, text areas, date and numeric inputs, dropdowns, and more. Learn form validation, styling, and the key differences between GET and POST methods. Perfect for enhancing your front-end skills with incremental, autograded challenges.", 10 | "es": "Domina el arte de los formularios HTML con ejercicios interactivos que abarcan entradas de texto, áreas de texto, entradas de fecha y números, menús desplegables y más. Aprende validación de formularios, estilos y las diferencias clave entre los métodos GET y POST. Ideal para mejorar tus habilidades frontend con retos progresivos y autocalificados." 11 | }, 12 | "video": { 13 | "intro": { 14 | "en": "https://www.youtube.com/watch?v=83HxtkBq7Yc", 15 | "es": "https://www.youtube.com/watch?v=tCI20Ueo6Q8" 16 | } 17 | }, 18 | "duration": 3, 19 | "difficulty": "easy", 20 | "language": "html", 21 | "skills": ["html-forms"], 22 | "videoSolutions": true, 23 | "bugsLink": "https://github.com/learnpack/learnpack/issues/new", 24 | "projectType": "tutorial", 25 | "autoPlay": "true", 26 | "repository": "https://github.com/4GeeksAcademy/html-forms-tutorial-exercises", 27 | "config": { 28 | "disableGrading": true 29 | 30 | }, 31 | "editor": { 32 | "version": "4.0", 33 | "agent": "vscode" 34 | }, 35 | "telemetry": { 36 | "batch": "https://breathecode.herokuapp.com/v1/assignment/me/telemetry?asset_id=150" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /preview.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/4GeeksAcademy/html-forms-tutorial-exercises/462db9982dc51ec8d20506f5ff9e09aa6cb420d8/preview.jpeg --------------------------------------------------------------------------------