Pilot - U2L11 - Styling Elements with CSS

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!

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)

@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.

@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.

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

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?

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.