punkfairie/odin-css-exercises
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge remote into local

Browse source
This commit is contained in:
thatblindgeye 2021-08-30 18:14:05 -04:00
commit 19dc8900dd
6 changed files with 17 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
foundations/01-css-methods/README.md
View file

@ -10,7 +10,8 @@ The properties you need to add to each element are:
* `button`: an orange background and a font size of 18px
## Desired Outcome
<!-- Insert Outcome Image -->
![outcome](https://user-images.githubusercontent.com/70952936/131268832-f3a3bbde-c9e6-4e73-9b99-79ffa3d2144a.png)
### Self Check
- Did you use all three methods of adding CSS to an HTML file?

3
foundations/02-class-id-selectors/README.md
View file

@ -13,7 +13,8 @@ It isn't entirely important what class or ID values you use, as the focus here i
Quick tip: in VS Code, you can change which format colors are displayed in (RGB, HEX, or HSL) by hovering over the color value in the CSS and clicking the top of the popup that appears!
## Desired Outcome
<!-- Insert Outcome Image -->
![outcome](https://user-images.githubusercontent.com/70952936/131268858-5360bb32-27ba-4ce0-be59-5fda97f5eb12.png)
### Self Check
- Do the odd numbered `div` elements share a class?

3
foundations/03-grouping-selectors/README.md
View file

@ -11,7 +11,8 @@ This will help you further practice adding classes and using class selectors, so
* **Both elements**: a font size of 28px and a list of fonts containing `Helvetica` and `Times New Roman`, with `sans-serif` as a fallback
## Desired Outcome
<!-- Insert Outcome Image -->
![outcome](https://user-images.githubusercontent.com/70952936/131268881-369972f3-b6b6-4242-965f-512c1335cc3a.png)
### Self Check
- Does each element have a unique class name?

3
foundations/04-chaining-selectors/README.md
View file

@ -12,7 +12,8 @@ The properties you need to add to each element are:
* Make the element with both the `avatar` and `distorted` classes 200 pixels wide, then make its height twice as big as its width (here you should hardcode in a pixel value)
## Desired Outcome
<!-- Insert Outcome Image -->
![outcome](https://user-images.githubusercontent.com/70952936/131268893-f2e0b302-ea2e-44b8-ba30-b555a35023c9.jpg)
### Self Check
- Did you properly chain class selectors for each rule?

3
foundations/05-descendant-combinator/README.md
View file

@ -10,7 +10,8 @@ The properties you need to add are:
* Only the `p` elements that are descendants of the `div` element should have a yellow background, red text, a font size of 20px, and center aligned
## Desired Outcome
<!-- Insert Outcome Image -->
![outcome](https://user-images.githubusercontent.com/70952936/131268923-75916744-d57f-4609-92f0-4f7ce031726a.png)
### Self Check
- Do the elements that contain the text "This should be styled" have the correct styles applied?

2
foundations/06-cascade-fix/README.md
View file

@ -8,7 +8,7 @@ There are multiple ways to solve this exercise, and we did our best to include a
Issues with the cascade can be the bane for many when it comes to CSS, and while you won't be an expert from this exercise alone and there are other ways to deal with these issues, it is still super helpful to see how these issues affect our final styles and why its important to order rules carefully.
## Desired Outcome
<!-- Insert Outcome Image -->
![outcome](https://user-images.githubusercontent.com/70952936/131411210-47ff21dd-6d0c-4a7f-b6b1-1ec40f93dd8c.jpg)
### Self Check
- Did you make sure to not edit the HTML file?