{"id":18792353,"url":"https://github.com/kplanisphere/web-dev-exercises","last_synced_at":"2025-09-22T18:02:26.953Z","repository":{"id":243305117,"uuid":"812062653","full_name":"KPlanisphere/web-dev-exercises","owner":"KPlanisphere","description":"Examen - Desarrollo de Aplicaciones Web","archived":false,"fork":false,"pushed_at":"2024-06-07T21:55:34.000Z","size":12,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-12-29T15:26:02.755Z","etag":null,"topics":["annual-sales-report","calendars","css","embedded-styles","external-stylesheets","html","inline-styles","rubiks-cube","web-design","web-development"],"latest_commit_sha":null,"homepage":"https://linktr.ee/planisphere.kgz","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KPlanisphere.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-07T21:55:06.000Z","updated_at":"2024-06-07T21:57:20.000Z","dependencies_parsed_at":"2024-06-07T23:07:00.013Z","dependency_job_id":null,"html_url":"https://github.com/KPlanisphere/web-dev-exercises","commit_stats":null,"previous_names":["kplanisphere/web-dev-exercises"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exercises","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exercises/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exercises/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KPlanisphere%2Fweb-dev-exercises/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KPlanisphere","download_url":"https://codeload.github.com/KPlanisphere/web-dev-exercises/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239718371,"owners_count":19685725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["annual-sales-report","calendars","css","embedded-styles","external-stylesheets","html","inline-styles","rubiks-cube","web-design","web-development"],"created_at":"2024-11-07T21:19:37.392Z","updated_at":"2025-09-22T18:02:26.777Z","avatar_url":"https://github.com/KPlanisphere.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Web Development Exercises\n\n### Description\n\nThis repository contains various exercises completed as part of learning HTML, CSS, and basic web design. Each exercise focuses on different aspects of web development, from embedding styles to creating structured layouts. The exercises demonstrate the application of HTML tags and basic CSS styling.\n\n### Project Structure\n\n- **Exercise 1: Calendars**\n  - **Files:**\n    - `Calendario (LINEA).html`: HTML file using inline styles to create a calendar.\n    - `Calendario (EMBEBIDO).html`: HTML file using embedded styles to create a calendar.\n    - `Calendario (ARCHIVO).html`: HTML file using an external CSS file for styling.\n    - `CalendarioStyle.css`: External CSS file used for styling the calendar in `Calendario (ARCHIVO).html`.\n\n  - **Description:**\n    - These files demonstrate the creation of a calendar for the year 2023 using different styling techniques. The `Calendario (LINEA).html` file uses inline styles, `Calendario (EMBEBIDO).html` uses embedded styles, and `Calendario (ARCHIVO).html` uses an external stylesheet.\n\n- **Exercise 2: Rubik's Cube**\n  - **File:**\n    - `Rubik.html`: HTML file that represents a Rubik's Cube using tables and embedded styles.\n\n  - **Description:**\n    - This exercise focuses on using tables to create a visual representation of a Rubik's Cube. It includes different colored cells to mimic the cube's appearance and demonstrates the use of embedded styles.\n\n- **Exercise 3: Annual Sales Report**\n  - **File:**\n    - `Ventas Anuales.html`: HTML file that presents an annual sales report using tables and embedded styles.\n\n  - **Description:**\n    - This exercise showcases the use of tables to display data in a structured format. The file includes a summary of annual sales across different branches, comparing data from 2020 and 2021, and highlights differences in performance.\n\n### Notable Code Snippets\n\n#### Calendario (LINEA).html\nInline styles are used to create and style the calendar.\n\n```html\n\u003cdiv align=\"center\" style=\"background-color: #003b5c; color: white;\"\u003e\n    \u003cheader\u003e\n        \u003ch1\u003eEXAMEN PRACTICO UNIDAD 2: CALENDARIO USANDO ESTILOS EN LINEA\u003c/h1\u003e\n    \u003c/header\u003e\n\u003c/div\u003e\n\u003ch1 style=\"color: #262626; font-size: 400%;\"\u003eCALENDARIO 2023\u003c/h1\u003e\n```\n\n#### CalendarioStyle.css\n\nExternal CSS file used for styling the calendar.\n\n```css\n.bold { font-weight: bold; }\n.header { text-align: center; background-color: #003b5c; color: white; }\n.titulo { text-align: center; color: #262626; font-size: 200%; }\n/* Additional styles for various background colors and text colors */\n```\n\n#### Rubik.html\n\nEmbedded styles are used to create the Rubik's Cube visual.\n\n```html\n\u003cstyle\u003e .header { text-align: center; background-color: #003b5c; color: white; }\n    .rubik { text-align: center; background-color: black; }\n    .ficha td { width: 100px; height: 100px; } \u003c/style\u003e\n\u003ctable align=\"center\" border=\"4\" cellspacing=\"2\" class=\"rubik ficha\"\u003e\n    \u003ctr\u003e\u003ctd class=\"amarilloBG\"\u003e\u003c/td\u003e\u003ctd class=\"amarilloBG\"\u003e\u003c/td\u003e\u003ctd class=\"cafeBG\"\u003e\u003c/td\u003e\u003c/tr\u003e\n    \u003c!-- Additional rows to complete the Rubik's Cube --\u003e\n\u003c/table\u003e\n``` \n\n#### Ventas Anuales.html\n\nDisplays a structured table for the annual sales report with embedded styles.\n\n```html\n\u003cstyle\u003e .header { text-align: center; background-color: #003b5c; color: white; }\n    .centerGeneral { text-align: center; }\n    .azulBG { background-color: #5c97f7; }\n    .rojoTXT { color: #b80000; } \u003c/style\u003e\n\u003ctable border=\"2\" align=\"center\"\u003e\n    \u003ctr class=\"blancoTXT bold azulBG\"\u003e\n        \u003cth\u003eTOTAL SUCURSALES\u003c/th\u003e\u003cth\u003eGANANCIAS AÑO 2020\u003c/th\u003e\u003cth\u003eGANANCIAS AÑO $ 2021\u003c/th\u003e\u003cth\u003eDIFERENCIAS\u003c/th\u003e\n    \u003c/tr\u003e\n    \u003ctr class=\"azulClaroBG\"\u003e\n        \u003ctd\u003e50\u003c/td\u003e\u003ctd\u003e$1,456,234,556.56\u003c/td\u003e\u003ctd\u003e$1,246,704,344.12\u003c/td\u003e\u003ctd class=\"rojoTXT bold\"\u003e-$209,530,212.44\u003c/td\u003e\n    \u003c/tr\u003e\n\u003c/table\u003e\n ```\n\n### Setup and Usage\n\n1.  **Clone the Repository:**\n    \n\t```sh\n    git clone https://github.com/KPlanisphere/web-dev-exercises.git\n    cd web-dev-exercises\n    ```\n    \n2.  **Open the HTML Files:**\n    \n    -   Open any of the HTML files in your preferred web browser to view the exercises.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkplanisphere%2Fweb-dev-exercises","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkplanisphere%2Fweb-dev-exercises","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkplanisphere%2Fweb-dev-exercises/lists"}