# Pilot - U2L11 - Styling Elements with CSS

**URL:** <https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887>\
**Category:** Unit and Lesson Discussion\
**Tags:** csd-unit-2, csd-unit-2-lesson-11\
**Created:** [October 28, 2016, 1:12am UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887 "2016-10-28T01:12:56Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![dani](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/dani/32/285_2.png) [@dani](https://forum.code.org/u/dani)\
**Post date:** [October 28, 2016, 1:12am UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/1 "2016-10-28T01:12:56Z")

</div>

Please leave any feedback, thoughts, or resources for the lesson here. As a reminder, good feedback has the following elements:

- description of your school and classroom context
- details on what went well when teaching this lesson
- details on what **didn’t** go well when teaching this lesson
- a description of the changes you would recommend to improve the lesson (including formative assessment opportunities you added to the lesson)
- details on the types of deviations you made from the lesson

For more details on what good feedback looks like, check out the [feedback guide](https://docs.google.com/document/d/1Nv7072tzl3ZaOLdE7pii3i0fXzCiYdxO4mzHrmJcw6U/edit#)!

---

<div class="post-metadata">

**Author:** ![nicole](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/nicole/32/1671_2.png) [@nicole](https://forum.code.org/u/nicole)\
**Post date:** [April 4, 2017, 5:29am UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/2 "2017-04-04T05:29:02Z")

</div>

The Multi-Page Websites stage was one I was really looking forward to, where my students would be able to bring their different pages together, however, it ended up not working out as well as I’d planned.

On this stage they need to create 3 html files, 4 css files and then copy code from stage 4 and 5 to put in the html files and css files. This was very confusing for my students. They kept wanting to leave the second tab open from where they were copying, which resulted in the pasted code on the first tab not saving and loosing their work (the environment doesn’t know what to do with two tabs open of the same files so it doesn’t save)

So be sure to remind the students to only have 1 tab open at a time (open the second tab to quickly copy the code and then immediately close the second tab before pasting)

---

<div class="post-metadata">

**Author:** ![josh](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/josh/32/868_2.png) [@josh](https://forum.code.org/u/josh)\
**Post date:** [April 4, 2017, 6:54pm UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/3 "2017-04-04T18:54:38Z")

</div>

@nicole sounds like the way we asked students to develop these pages is a bit at odds with how the tool works. I’d be interested if folks have thoughts about how to simplify this process so that students don’t need to keep navigating across multiple tabs.

---

<div class="post-metadata">

**Author:** ![nicole](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/nicole/32/1671_2.png) [@nicole](https://forum.code.org/u/nicole)\
**Post date:** [April 4, 2017, 8:45pm UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/4 "2017-04-04T20:45:55Z")

</div>

@josh

Can you give some more specifics on how the tool was intended to work? Here are the instructions from U2 Stage 9, Puzzle 12.

 ![](https://us1.discourse-cdn.com/flex016/uploads/codeorgforum/original/2X/b/b723692e27546bd3b1b2cfc5f11e72263879464b.JPG)

---

<div class="post-metadata">

**Author:** ![dani](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/dani/32/285_2.png) [@dani](https://forum.code.org/u/dani)\
**Post date:** [April 5, 2017, 10:58pm UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/5 "2017-04-05T22:58:25Z")

</div>

Hey @nicole,

The tool in the future will hopefully not have issues having multiple projects open at once but thats probably not going to be completely fixed before the end of the pilot. Our engineers are working hard on making improvements to Web Lab so that it will be more reliable for the full launch of the course.

-Dani

---

<div class="post-metadata">

**Author:** ![edavis](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/edavis/32/4927_2.png) [@edavis](https://forum.code.org/u/edavis)\
**Post date:** [May 12, 2017, 6:17pm UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/6 "2017-05-12T18:17:12Z")

</div>

I’m stuck on how to get images to be blocked with text. Many students want to style their pages similarly to Lesson 8 Puzzle 2 where the images are lined up with the text, but the sections remain separate. I can’t figure it out. Any suggestions?

---

<div class="post-metadata">

**Author:** ![gtwrobel](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/gtwrobel/32/3576_2.png) [@gtwrobel](https://forum.code.org/u/gtwrobel)\
**Post date:** [May 15, 2017, 12:03am UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/7 "2017-05-15T00:03:22Z")

</div>

Hey @edavis I think what you’re talking about is the `float` property in CSS. If you look through the code in that level you’ll see inside index.css that images have `float: left` as a property.

Here’s a link since after the weekend that level has been moved to CSD old.

> **[Code.org](https://studio.code.org/users/sign_in)**
>
> Anyone can learn computer science. Make games, apps and art with code.

---

<div class="post-metadata">

**Author:** ![dani](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/dani/32/285_2.png) [@dani](https://forum.code.org/u/dani)\
**Post date:** [June 12, 2017, 5:50pm UTC](https://forum.code.org/t/pilot-u2l11-styling-elements-with-css/5887/8 "2017-06-12T17:50:42Z")

</div>


