https://github.com/kplanisphere/web-dev-exercises
Examen - Desarrollo de Aplicaciones Web
https://github.com/kplanisphere/web-dev-exercises
annual-sales-report calendars css embedded-styles external-stylesheets html inline-styles rubiks-cube web-design web-development
Last synced: 9 months ago
JSON representation
Examen - Desarrollo de Aplicaciones Web
- Host: GitHub
- URL: https://github.com/kplanisphere/web-dev-exercises
- Owner: KPlanisphere
- Created: 2024-06-07T21:55:06.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-06-07T21:55:34.000Z (about 2 years ago)
- Last Synced: 2024-12-29T15:26:02.755Z (over 1 year ago)
- Topics: annual-sales-report, calendars, css, embedded-styles, external-stylesheets, html, inline-styles, rubiks-cube, web-design, web-development
- Language: HTML
- Homepage: https://linktr.ee/planisphere.kgz
- Size: 11.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Development Exercises
### Description
This 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.
### Project Structure
- **Exercise 1: Calendars**
- **Files:**
- `Calendario (LINEA).html`: HTML file using inline styles to create a calendar.
- `Calendario (EMBEBIDO).html`: HTML file using embedded styles to create a calendar.
- `Calendario (ARCHIVO).html`: HTML file using an external CSS file for styling.
- `CalendarioStyle.css`: External CSS file used for styling the calendar in `Calendario (ARCHIVO).html`.
- **Description:**
- 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.
- **Exercise 2: Rubik's Cube**
- **File:**
- `Rubik.html`: HTML file that represents a Rubik's Cube using tables and embedded styles.
- **Description:**
- 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.
- **Exercise 3: Annual Sales Report**
- **File:**
- `Ventas Anuales.html`: HTML file that presents an annual sales report using tables and embedded styles.
- **Description:**
- 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.
### Notable Code Snippets
#### Calendario (LINEA).html
Inline styles are used to create and style the calendar.
```html
EXAMEN PRACTICO UNIDAD 2: CALENDARIO USANDO ESTILOS EN LINEA
CALENDARIO 2023
```
#### CalendarioStyle.css
External CSS file used for styling the calendar.
```css
.bold { font-weight: bold; }
.header { text-align: center; background-color: #003b5c; color: white; }
.titulo { text-align: center; color: #262626; font-size: 200%; }
/* Additional styles for various background colors and text colors */
```
#### Rubik.html
Embedded styles are used to create the Rubik's Cube visual.
```html
.header { text-align: center; background-color: #003b5c; color: white; }
.rubik { text-align: center; background-color: black; }
.ficha td { width: 100px; height: 100px; }
```
#### Ventas Anuales.html
Displays a structured table for the annual sales report with embedded styles.
```html
.header { text-align: center; background-color: #003b5c; color: white; }
.centerGeneral { text-align: center; }
.azulBG { background-color: #5c97f7; }
.rojoTXT { color: #b80000; }
TOTAL SUCURSALESGANANCIAS AÑO 2020GANANCIAS AÑO $ 2021DIFERENCIAS
50$1,456,234,556.56$1,246,704,344.12-$209,530,212.44
```
### Setup and Usage
1. **Clone the Repository:**
```sh
git clone https://github.com/KPlanisphere/web-dev-exercises.git
cd web-dev-exercises
```
2. **Open the HTML Files:**
- Open any of the HTML files in your preferred web browser to view the exercises.