mirror of
https://github.com/microsoft/Web-Dev-For-Beginners.git
synced 2025-08-31 18:32:16 +02:00
folder names
This commit is contained in:
Jen Looper
21
3-terrarium/2-intro-to-css/.github/post-lecture-quiz.md
vendored
Normal file
21
3-terrarium/2-intro-to-css/.github/post-lecture-quiz.md
vendored
Normal file
@@ -0,0 +1,21 @@
|
||||
*Complete this quiz after the lesson by checking one answer per question.*
|
||||
|
||||
You will need to reference the following learn module to complete the quiz:
|
||||
|
||||
[Work with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
1. [You can write CSS directly in the head section of your HTML file]
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
|
||||
1. [It's always necessary to include CSS in your app]
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
- [ ] [false, but if you want it to look good you need CSS]
|
||||
|
||||
1. [Which browser tool can be used to inspect CSS?]
|
||||
- [ ] [Elements]
|
||||
- [ ] [Styles]
|
||||
- [ ] [Network]
|
||||
18
3-terrarium/2-intro-to-css/.github/pre-lecture-quiz.md
vendored
Normal file
18
3-terrarium/2-intro-to-css/.github/pre-lecture-quiz.md
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
*A warm-up quiz about CSS*
|
||||
|
||||
Complete this quiz in class
|
||||
|
||||
1. HTML elements must have either a class or an id in order to be styled
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
|
||||
2. CSS stands for 'Complete Style Sheets'
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
|
||||
3. CSS can be used to create animations
|
||||
|
||||
- [ ] [true]
|
||||
- [ ] [false]
|
||||
259
3-terrarium/2-intro-to-css/README.md
Normal file
259
3-terrarium/2-intro-to-css/README.md
Normal file
@@ -0,0 +1,259 @@
|
||||
# Terrarium Project Part 2: Introduction to CSS
|
||||
|
||||
|
||||
> Sketchnote by [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture quiz](.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introduction:
|
||||
|
||||
CSS, or Cascading Style Sheets, solve an important problem of web development: how to make your web site look nice. Styling your apps makes them more usable and nicer-looking; you can also use CSS to create Responsive Web Design (RWD) - allowing your apps to look good no matter what screen size they are displayed on. CSS is not only about making your app look nice; its spec includes animations and transforms that can enable sophisticated interactions for your apps. The CSS Working Group helps maintain current CSS specifications; you can follow their work at [World Wide Web Consortium's site](https://www.w3.org/Style/CSS/members).
|
||||
|
||||
> Note, CSS is a language that evolves, like everything on the web, and not all browsers support newer parts of the specification. Always check your implementations by consulting [CanIUse.com](caniuse.com).
|
||||
|
||||
In this lesson, we're going to add styles to our online terrarium and learn more about several CSS concepts: the cascade, inheritance, and the use of selectors, positioning, and using CSS to build layouts. In the process we will layout the terrarium and create the actual terrarium itself.
|
||||
|
||||
### Prequisite:
|
||||
|
||||
You should have the HTML for your terrarium built and ready to be styled.
|
||||
|
||||
### Task:
|
||||
|
||||
In your terrarium folder, create a new file called `style.css`. Import that file in the `<head>` section:
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. The Cascade
|
||||
|
||||
Cascading Style Sheets incorporate the idea that the styles 'cascade' such that the application of a style is guided by its priority. Styles set by a web site author take priority over those set by a browser. Styles set 'inline' take priority over those set in an external style sheet.
|
||||
|
||||
### Task:
|
||||
|
||||
Add the inline style "color: red" to your `<h1>` tag:
|
||||
|
||||
```HTML
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
Then, add the following code to your `style.css` file:
|
||||
|
||||
```CSS
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
✅ Which color displays in your web app? Why? Can you find a way to override styles? When would you want to do this, or why not?
|
||||
|
||||
---
|
||||
|
||||
## 2. Inheritance
|
||||
|
||||
Styles are inherited from an ancestor style to a descendent, such that nested elements inherit the styles of their parents.
|
||||
|
||||
### Task:
|
||||
|
||||
Set the body's font to a given font, and check to see a nested element's font:
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Open your browser's console to the 'Elements' tab and observe the H1's font. It inherits its font from the body, as stated within the browser:
|
||||
|
||||
|
||||
|
||||
✅ Can you make a nested style inherit a different property?
|
||||
|
||||
---
|
||||
|
||||
## 3. CSS Selectors
|
||||
|
||||
### Tags
|
||||
|
||||
So far, your `style.css` file has only a few tags styled, and the app looks pretty strange:
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3a241d;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
This way of styling a tag gives you control over unique elements, but you need to control the styles of many plants in your terrarium. To do that, you need to leverage CSS selectors.
|
||||
|
||||
### Ids
|
||||
|
||||
Add some style to layout the left and right containers. Since there is only one left container and only one right container, they are given ids in the markup. To style them, use `#`:
|
||||
|
||||
```
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
Here, you have placed these containers with absolute positioning to the far left and right of the screen, and used percentages for their width so that they can scale for small mobile screens.
|
||||
|
||||
✅ This code is quite repeated, thus not "DRY" (Don't Repeat Yourself); can you find a better way to style these ids, perhaps with an id and a class? You would need to change the markup and refactor the CSS:
|
||||
|
||||
```html
|
||||
<div id="left-container" class="container"></div>
|
||||
```
|
||||
|
||||
### Classes
|
||||
|
||||
In the example above, you styled two unique elements on the screen. If you want styles to apply to many elements on the screen, you can use CSS classes. Do this to layout the plants in the left and right containers.
|
||||
|
||||
Notice that each plant in the HTML markup has a combination of ids and classes. The ids here are used by the JavaScript that you will add later to manipulate the terrarium plant placement. The classes, however, give all the plants a given style.
|
||||
|
||||
```html
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Add the following to your `style.css` file:
|
||||
|
||||
```css
|
||||
.plant-holder {
|
||||
position: relative;
|
||||
height: 13%;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
max-width: 150%;
|
||||
max-height: 150%;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
Notable in this snippet is the mixture of relative and absolute positioning, which we'll cover in the next section. Take a look at the way heights are handled by percentages:
|
||||
|
||||
You set the height of the plant holder to 13%, a good number to ensure that all the plants are displayed in each vertical container without need for scrolling.
|
||||
|
||||
You set the plant holder to move to the left to allow the plants to be more centered within their container. The images have a large amount of transparent background so as to make them more draggable, so need to be pushed to the left to fit better on the screen.
|
||||
|
||||
Then, the plant itself is given a max-width of 150%. This allows it to scale down as the browser scales down. Try resizing your browser; the plants stay in their containers but scale down to fit.
|
||||
|
||||
Also notable is the use of z-index, which controls the relative altitude of an element (so that the plants sit on top of the container and appear to sit inside the terrarium).
|
||||
|
||||
✅ Why do you need both a plant holder and a plant CSS selector?
|
||||
|
||||
## 4. CSS Positioning
|
||||
|
||||
Mixing position properties (there are static, relative, fixed, absolute, and sticky positions) can be a little tricky, but when done properly it gives you good control over the elements on your pages.
|
||||
|
||||
Absolute positioned elements are positioned relative to their nearest positioned ancestors, and if there are none, it is positioned according to the document body.
|
||||
|
||||
Relative positioned elements are positioned based on the CSS's directions to adjust its placement away from its initial position.
|
||||
|
||||
In our sample, the `plant-holder` is a relative-positioned element that is positioned within an absolute-positioned container. The resultant behavior is that the side bar containers are pinned left and right, and the plant-holder is nested, adjusting itself within the side bars, giving space for the plants to be placed in a vertical row.
|
||||
|
||||
> The `plant` itself also has absolute positioning, necessary to making it draggable, as you will discover in the next lesson.
|
||||
|
||||
✅ Experiment with switching the types of positioning of the side containers and the plant-holder. What happens?
|
||||
|
||||
## 5. CSS Layouts
|
||||
|
||||
Now you will use what you learned to build the terrarium itself, all using CSS!
|
||||
|
||||
First, style the `.terrarium` div children as a rounded rectangle using CSS:
|
||||
|
||||
```css
|
||||
.jar-walls {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
background: #d1e1df;
|
||||
border-radius: 10%;
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 20%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-top {
|
||||
width: 50%;
|
||||
height: 5%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 80.5%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-bottom {
|
||||
width: 50%;
|
||||
height: 1%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dirt {
|
||||
width: 58%;
|
||||
height: 5%;
|
||||
background: #3a241d;
|
||||
position: absolute;
|
||||
border-radius: 0 0 4rem 4rem;
|
||||
bottom: 1%;
|
||||
left: 21%;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
Note the use of percentages here, even for the `border-radius`. If you scale your browser down, you can see how the jar corners scale as well. Also notice the widths and height percentages for the jar elements and how each element is absolutely positioned in the center, pinned to the bottom of the viewport.
|
||||
|
||||
✅ Try changing the jar colors and opacity vs. those of the dirt. What happens? Why?
|
||||
|
||||
---
|
||||
|
||||
## 🚀Challenge
|
||||
|
||||
Add a 'bubble' shine to the left bottom area of the jar to make it look more glasslike. You will be styling the `.jar-glossy-long` and `.jar-glossy-short` to look like a reflected shine. Here's how it would look:
|
||||
|
||||
|
||||
|
||||
To complete the post-lecture quiz, go through this Learn module: [Style your HTML app with CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
## [Post-lecture quiz](.github/post-lecture-quiz.md)
|
||||
|
||||
## Review & Self Study
|
||||
|
||||
CSS seems deceptively straightforward, but there are many challenges when trying to style an app perfectly for all browsers and all screen sizes. CSS-Grid and Flexbox are tools that have been developed to make the job a little more structured and more reliable. Learn about these tools by playing [Flexbox Froggy](https://flexboxfroggy.com/) and [Grid Garden](https://codepip.com/games/grid-garden/).
|
||||
|
||||
## Assignment
|
||||
|
||||
[CSS Refactoring](assignment.md)
|
||||
11
3-terrarium/2-intro-to-css/assignment.md
Normal file
11
3-terrarium/2-intro-to-css/assignment.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# CSS Refactoring
|
||||
|
||||
## Instructions
|
||||
|
||||
Restyle the terrarium using either Flexbox or CSS Grid, and take screenshots to show that you have tested it on several browsers. You might need to change the markup so create a new version of the app with the art in place for your refactor. Don't worry about making the elements draggable; only refactor the HTML and CSS for now.
|
||||
|
||||
## Rubric
|
||||
|
||||
| Criteria | Exemplary | Adequate | Needs Improvement |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Present a completely restyled terrarium using Flexbox or CSS Grid | Restyle a few of the elements | Fail to restyle the terrarium at all |
|
||||
BIN
3-terrarium/2-intro-to-css/images/1.png
Normal file
BIN
3-terrarium/2-intro-to-css/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 9.3 KiB |
BIN
3-terrarium/2-intro-to-css/images/terrarium-final.png
Normal file
BIN
3-terrarium/2-intro-to-css/images/terrarium-final.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 919 KiB |
BIN
3-terrarium/2-intro-to-css/images/webdev101-css.png
Normal file
BIN
3-terrarium/2-intro-to-css/images/webdev101-css.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 MiB |
258
3-terrarium/2-intro-to-css/translations/README.es.md
Normal file
258
3-terrarium/2-intro-to-css/translations/README.es.md
Normal file
@@ -0,0 +1,258 @@
|
||||
# Terrarium Project Parte 2: Introducción a CSS
|
||||
|
||||
|
||||
> Sketchnote por [Tomomi Imura](https://twitter.com/girlie_mac)
|
||||
|
||||
## [Pre-lecture prueba](.github/pre-lecture-quiz.md)
|
||||
|
||||
### Introducción:
|
||||
|
||||
CSS, o Cascading Style Sheets, resuelve un problema importante del desarrollo web: cómo hacer que su sitio web se vea bien. Diseñar tus aplicaciones las hace más útiles y atractivas; También puede usar CSS para crear un diseño web receptivo (RWD), lo que permite que sus aplicaciones se vean bien sin importar en qué tamaño de pantalla se muestren. CSS no se trata solo de hacer que su aplicación se vea bien; su especificación incluye animaciones y transformaciones que pueden permitir interacciones sofisticadas para sus aplicaciones. El grupo de trabajo CSS ayuda a mantener las especificaciones CSS actuales; puede seguir su trabajo en el [sitio del World Wide Web Consortium](https://www.w3.org/Style/CSS/members).
|
||||
|
||||
> Tenga en cuenta que CSS es un lenguaje que evoluciona, como todo en la web, y no todos los navegadores admiten partes más nuevas de la especificación. Siempre verifique sus implementaciones consultando [CanIUse.com](caniuse.com).
|
||||
|
||||
En esta lección, agregaremos estilos a nuestro terrario en línea y aprenderemos más sobre varios conceptos de CSS: la cascada, la herencia y el uso de selectores, posicionamiento y uso de CSS para crear diseños. En el proceso, diseñaremos el terrario y crearemos el terrario en sí.
|
||||
|
||||
### Requisito previo:
|
||||
|
||||
Debería tener el HTML para su terrario construido y listo para darle estilo.
|
||||
|
||||
### Tarea:
|
||||
|
||||
En su carpeta de terrario, cree un nuevo archivo llamado `style.css`. Importe ese archivo en la sección `<head>`:
|
||||
|
||||
```
|
||||
<link rel="stylesheet" href="./style.css" />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## 1. La cascada
|
||||
|
||||
Las hojas de estilo en cascada incorporan la idea de que los estilos 'se mueven en cascada' de manera que la aplicación de un estilo está guiada por su prioridad. Los estilos establecidos por el autor de un sitio web tienen prioridad sobre los establecidos por un navegador. Los estilos configurados 'en línea' tienen prioridad sobre los configurados en una hoja de estilo externa.
|
||||
|
||||
### Tarea:
|
||||
|
||||
Agrega el estilo en línea "color: red" a tu etiqueta `<h1>`:
|
||||
|
||||
```HTML
|
||||
<h1 style="color: red">My Terrarium</h1>
|
||||
```
|
||||
|
||||
Luego, agregue el siguiente código a su archivo `style.css`:
|
||||
|
||||
```CSS
|
||||
h1 {
|
||||
color: blue;
|
||||
}
|
||||
```
|
||||
|
||||
✅ ¿Qué color se muestra en su aplicación web? ¿Por qué? ¿Puedes encontrar una forma de anular estilos? ¿Cuándo querría hacer esto o por qué no?
|
||||
|
||||
---
|
||||
|
||||
## 2. Herencia
|
||||
|
||||
Los estilos se heredan de un estilo antepasado a un estilo descendiente, de modo que los elementos anidados heredan los estilos de sus padres.
|
||||
|
||||
### Tarea:
|
||||
|
||||
Establezca la fuente del cuerpo en una fuente determinada y verifique para ver la fuente de un elemento anidado:
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
```
|
||||
|
||||
Abra la consola de su navegador en la pestaña 'Elementos' y observe la fuente H1. Hereda su fuente del cuerpo, como se indica en el navegador:
|
||||
|
||||
|
||||
|
||||
✅ ¿Puede hacer que un estilo anidado herede una propiedad diferente?
|
||||
|
||||
---
|
||||
|
||||
## 3. Selectores CSS
|
||||
|
||||
### Etiquetas
|
||||
|
||||
Hasta ahora, su archivo `style.css` tiene solo algunas etiquetas con estilo, y la aplicación se ve bastante extraña:
|
||||
|
||||
```
|
||||
body {
|
||||
font-family: helvetica, arial, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #3a241d;
|
||||
text-align: center;
|
||||
}
|
||||
```
|
||||
|
||||
Esta forma de diseñar una etiqueta te da control sobre elementos únicos, pero necesitas controlar los estilos de muchas plantas en tu terrario. Para hacer eso, necesita aprovechar los selectores de CSS.
|
||||
|
||||
### ID
|
||||
|
||||
Agregue un poco de estilo para diseñar los contenedores izquierdo y derecho. Dado que solo hay un contenedor izquierdo y solo un contenedor derecho, se les dan identificadores en el marcado. Para diseñarlos, use `#`:
|
||||
|
||||
```
|
||||
#left-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#right-container {
|
||||
background-color: #eee;
|
||||
width: 15%;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
```
|
||||
|
||||
HAquí, ha colocado estos contenedores con posicionamiento absoluto en el extremo izquierdo y derecho de la pantalla, y ha utilizado porcentajes para su ancho para que puedan escalar para pantallas móviles pequeñas.
|
||||
|
||||
✅ Este código se repite bastante, por lo tanto, no "DRY" (Don't Repeat yourself: No se repita); ¿Puede encontrar una mejor manera de diseñar estos identificadores, tal vez con un id y una clase? Necesitaría cambiar el marcado y refactorizar el CSS:
|
||||
|
||||
```html
|
||||
<div id="left-container" class="container"></div>
|
||||
```
|
||||
|
||||
### Clases
|
||||
|
||||
En el ejemplo anterior, diseñó dos elementos únicos en la pantalla. Si desea que los estilos se apliquen a muchos elementos en la pantalla, puede usar clases CSS. Haga esto para colocar las plantas en los contenedores izquierdo y derecho.
|
||||
|
||||
Observe que cada planta en el marcado HTML tiene una combinación de identificadores y clases. Los identificadores aquí son utilizados por JavaScript que agregará más adelante para manipular la ubicación de la planta del terrario. Las clases, sin embargo, dan a todas las plantas un estilo determinado.
|
||||
|
||||
```html
|
||||
<div class="plant-holder">
|
||||
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
|
||||
</div>
|
||||
```
|
||||
|
||||
Agrega lo siguiente a tu archivo `style.css`:
|
||||
|
||||
```css
|
||||
.plant-holder {
|
||||
position: relative;
|
||||
height: 13%;
|
||||
left: -10px;
|
||||
}
|
||||
|
||||
.plant {
|
||||
position: absolute;
|
||||
max-width: 150%;
|
||||
max-height: 150%;
|
||||
z-index: 2;
|
||||
}
|
||||
```
|
||||
|
||||
En este fragmento se destaca la mezcla de posicionamiento relativo y absoluto, que cubriremos en la siguiente sección. Eche un vistazo a la forma en que se manejan las alturas por porcentajes:
|
||||
|
||||
Establece la altura del soporte de la planta en 13%, un buen número para garantizar que todas las plantas se muestren en cada contenedor vertical sin necesidad de desplazarse.
|
||||
|
||||
Configura el soporte de la planta para que se mueva hacia la izquierda para permitir que las plantas estén más centradas dentro de su contenedor. Las imágenes tienen una gran cantidad de fondo transparente para que se puedan arrastrar más, por lo que es necesario empujarlas hacia la izquierda para que quepan mejor en la pantalla.
|
||||
|
||||
Luego, a la planta en sí se le asigna un ancho máximo del 150%. Esto permite que se reduzca a medida que el navegador se reduce. Intente cambiar el tamaño de su navegador; las plantas permanecen en sus contenedores pero se reducen para adaptarse.
|
||||
|
||||
También es notable el uso del índice z, que controla la altitud relativa de un elemento (de modo que las plantas se sientan en la parte superior del contenedor y parezcan sentarse dentro del terrario).
|
||||
|
||||
✅ ¿Por qué necesita tanto un soporte para plantas como un selector CSS de plantas?
|
||||
|
||||
## 4. Posicionamiento CSS
|
||||
|
||||
Mezclar propiedades de posición (hay posiciones estáticas, relativas, fijas, absolutas y pegajosas) puede ser un poco complicado, pero cuando se hace correctamente, te da un buen control sobre los elementos de tus páginas.
|
||||
|
||||
Los elementos de posición absoluta se colocan en relación con sus antepasados colocados más cercanos y, si no hay ninguno, se colocan de acuerdo con el cuerpo del documento.
|
||||
|
||||
Los elementos de posición relativa se colocan según las direcciones del CSS para ajustar su ubicación lejos de su posición inicial.
|
||||
|
||||
En nuestra muestra, el "plant-holder" es un elemento de posición relativa que se coloca dentro de un contenedor de posición absoluta. El comportamiento resultante es que los contenedores de las barras laterales se sujetan a izquierda y derecha, y el portaplantas se encaja, ajustándose dentro de las barras laterales, dando espacio para que las plantas se coloquen en una fila vertical.
|
||||
|
||||
> La `planta` en sí también tiene un posicionamiento absoluto, necesario para que sea arrastrable, como descubrirás en la siguiente lección.
|
||||
|
||||
✅ Experimente cambiando los tipos de colocación de los contenedores laterales y el portaplantas. ¿Lo que pasa?
|
||||
|
||||
## 5. Diseños CSS
|
||||
|
||||
Ahora usará lo que aprendió para construir el terrario en sí, ¡todo usando CSS!
|
||||
|
||||
Primero, diseñe los elementos secundarios `.terrarium` div como un rectángulo redondeado usando CSS:
|
||||
|
||||
```css
|
||||
.jar-walls {
|
||||
height: 80%;
|
||||
width: 60%;
|
||||
background: #d1e1df;
|
||||
border-radius: 10%;
|
||||
position: absolute;
|
||||
bottom: 0.5%;
|
||||
left: 20%;
|
||||
opacity: 0.5;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-top {
|
||||
width: 50%;
|
||||
height: 5%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 80.5%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.jar-bottom {
|
||||
width: 50%;
|
||||
height: 1%;
|
||||
background: #d1e1df;
|
||||
position: absolute;
|
||||
bottom: 0%;
|
||||
left: 25%;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.dirt {
|
||||
width: 58%;
|
||||
height: 5%;
|
||||
background: #3a241d;
|
||||
position: absolute;
|
||||
border-radius: 0 0 4rem 4rem;
|
||||
bottom: 1%;
|
||||
left: 21%;
|
||||
opacity: 0.7;
|
||||
z-index: -1;
|
||||
}
|
||||
```
|
||||
|
||||
Tenga en cuenta el uso de porcentajes aquí, incluso para el `border-radius`. Si reduce la escala de su navegador, también puede ver cómo se escalan las esquinas del frasco. Observe también los porcentajes de ancho y alto de los elementos del tarro y cómo cada elemento está absolutamente posicionado en el centro, fijado a la parte inferior de la ventana gráfica.
|
||||
|
||||
✅ Intente cambiar los colores y la opacidad del frasco frente a los de la suciedad. ¿Lo que pasa? ¿Por qué?
|
||||
|
||||
---
|
||||
|
||||
🚀 Desafío: agregue un brillo de 'burbuja' al área inferior izquierda del frasco para que se vea más parecido al vidrio. Estarás diseñando el `.jar-glossy-long` y el` .jar-glossy-short` para que parezca un brillo reflejado. Así es como se vería:
|
||||
|
||||
! [terrario terminado](./images/terrarium-final.png)
|
||||
|
||||
## [Post-lecture prueba](.github/post-lecture-quiz.md)
|
||||
|
||||
## Revisión y autoestudio
|
||||
|
||||
CSS parece engañosamente sencillo, pero existen muchos desafíos cuando se trata de diseñar una aplicación perfectamente para todos los navegadores y todos los tamaños de pantalla. CSS-Grid y Flexbox son herramientas que se han desarrollado para hacer el trabajo un poco más estructurado y más confiable. Aprende sobre estas herramientas jugando a [Flexbox Froggy](https://flexboxfroggy.com/) y [Grid Garden](https://codepip.com/games/grid-garden/).
|
||||
|
||||
**Asignación**: [Refactorización CSS] (asignación.md)
|
||||
|
||||
Complete los siguientes módulos de aprendizaje para completar el [cuestionario posterior a la conferencia](. Github / post-lecture-quiz.md):
|
||||
|
||||
[Diseñe su aplicación HTML con CSS](https://docs.microsoft.com/en-us/learn/modules/build-simple-website/4-css-basics)
|
||||
|
||||
11
3-terrarium/2-intro-to-css/translations/assignment.es.md
Normal file
11
3-terrarium/2-intro-to-css/translations/assignment.es.md
Normal file
@@ -0,0 +1,11 @@
|
||||
# Refactorización CSS
|
||||
|
||||
## Instrucciones
|
||||
|
||||
Cambie el estilo del terrario usando Flexbox o CSS Grid, y tome capturas de pantalla para mostrar que lo ha probado en varios navegadores. Es posible que deba cambiar el marcado, así que cree una nueva versión de la aplicación con el arte en su lugar para su refactorización. No se preocupe por hacer que los elementos se puedan arrastrar; solo refactorice el HTML y CSS por ahora.
|
||||
|
||||
## Rúbrica
|
||||
|
||||
| Criterios | Ejemplar | Adecuada | Necesita mejorar |
|
||||
| -------- | ----------------------------------------------------------------- | ----------------------------- | ------------------------------------ |
|
||||
| | Presenta un terrario completamente rediseñado usando Flexbox o CSS Grid | Modifique algunos de los elementos | No cambiar el estilo del terrario en absoluto |
|
||||
Reference in New Issue
Block a user