learn-co-curriculum / phase-0-css-kitten-lab

BONUS: CSS Kitten Wheelbarrow

Learning Goals

• Position elements absolutely
• Practice using CSS selectors

Introduction

Oh no! All of our kittens have escaped from the wheelbarrow and we need to get them back in. Help collect all the kittens and put them into the wheelbarrow using CSS selectors and absolute positioning.

Getting Started

Fork and clone this lesson into your local environment. Navigate into its directory in the terminal, then run code . to open the files in Visual Studio Code.

Position Elements Absolutely

There are a few different ways we can use CSS to position elements in our web pages. Absolute positioning means placing the element in its containing element in a certain location that will stay the same no matter where other elements are placed. We can use absolute positioning to specify exactly where in the document layout we want an element to be placed:

Here's an example of what absolute positioning looks like in CSS:

.parent-element {
  position: relative;
}

.child-element {
  position: absolute;
  top: 50px;
  left: 50px;
}

Note When using position: absolute, the browser calculates the position using top/left from the closest parent element that has a position specified — that's why in the example, we're specifying position: relative for the parent element. Check out the resources on positioning for more info on this if you're interested!

For this lab, we've done the work of calculating the absolute positions and creating CSS rules for a bunch of different kitten image elements. It's your job to use CSS selectors to apply the correct positioning to each of these elements.

To get started with this lab, open the index.html file in the browser. Use the comments in css/place-kitty.css to write the correct selectors to move each kitty into the wheelbarrow.

Conclusion

Nice work getting practice with more CSS selectors, and learning about absolute positioning along the way! Now that you've seen absolute positioning in action, you'll have a better sense of when you might need to use it to build more complex CSS layouts in the future.

Resources

• Mozilla Developer Network: CSS Selectors
• W3 CSS Selector Reference
• Mozilla Developer Network: Positioning

phase-0-css-kitten-lab's Issues

Place kitty 4 error

Canvas Link

https://learning.flatironschool.com/courses/5639/assignments/179023?module_item_id=395647

Concern

//putting this in shows an error:

#ball+img {
position: absolute;
z-index: 4;
top: 260px;
left: 455px;
}

//error:

1. place-kitty.css
   selects the image based on the respective sibling element:
   AssertionError: Make sure you have a CSS selector that selects the image based on the respective sibling element: expected undefined to exist
   at Context. (test/place-kitty.css.test.js:48:26)
   at processImmediate (node:internal/timers:466:21)

Additional Context

No response

Suggested Changes

No response

Missing word 'alt' in the CSS comment

Canvas Link

https://my.learn.co/courses/647/assignments/32740?module_item_id=82775

Concern

Line 33 of place-kitty.css says
/* Select the image that has an attribute value matching "Kitty 5" (using attribute selector) */

I believe it should say
/* Select the image that has an alt attribute value matching "Kitty 5" (using attribute selector) */

(add the word 'alt' before 'attribute')

Additional Context

No response

Suggested Changes

No response

Not enough information, lessons dont provide too much help

Canvas Link

https://learning.flatironschool.com/courses/5055/assignments/152491?module_item_id=324529

Concern

All the lessons are really hard to follow. The lessons dont explain at all how to code correctly. You provide us only with do this and do that. Wish you could provide us with the right codes but we must decide where to put them. This is only a pre-work we are not suppose to know all, since everyone comes with no IT background. And doing it online and asking help in the Slack doestn help either. I could be sitting for days trying to figure out the problem with one assignment. Sometimes even Google doesnt help. I can only imagine when the actual course starts, how hard its going to be.

Additional Context

No response

Suggested Changes

Provide us with the correct codes, and we figure out where to code them. Not just, or <Select the image that has an attribute value matching "Kitty 5" (using attribute selector)> This is really hard to know because in the lesson prior you didnt really provide us with the right codes. And each lesson should have the right codes on the side. We are suppose to learn not figure out how to do this from the start.

Having trouble getting the npm.test to pass despite selecting the right CSS selectors

Canvas Link

https://learning.flatironschool.com/courses/6709/assignments/231413?module_item_id=541721

Concern

This is my saved complete css file. I have selected the right kitties and they are in the wheelbarrow if you run the index.html file. But I still don't pass the tests npm.

Additional Context

No response

Suggested Changes

No response