I have a question about website design that I struggle with every semester, it seems. This student is wanting to set up his site so the images are on the right and the text is on the left. The text for the attribution needs to be underneath the image, though. To me, the HTML code is all in the correct place but it just isn’t displaying the way he wants it to. I don’t see any problems on his CSS page, either. Could anyone help me out? Thank you! Here is the link to the project:
Hi @buyskej ,
The link to the project is not working. I am hopeful I can give some advice without seeing it.
I will assume you are using float:right to move the image to the right? My students have found the figcaption tag useful. Notice that the figure tag wraps around the image and figcaption tag. You can then float the figure tag to the right. It worked in my mock up (below).
If this doesn’t solve your problem - let us know with a shared link to the project.
~Michelle
Shoot! Not sure why it didn’t work. Here is a working link.
@buyskej -
So yes. Your images are to the right because of a float:right on the css sheet for the img tag. So I would remove the float:right from the image selector in the css sheet, add a figure selector to the css sheet with a float:right property, and add the figure and figurecaption tags to the html sheet as in the remix below.
In this remix, I reworked the basketball image as an example.
~Michelle
Thank you for the information. My question is, how are we/the students supposed to know how to do that when it isn’t explicitly taught in any of the lessons? I am not a programmer, so my knowledge is basically limited to what is contained within the curriculum and what I can possibly search up and find out.
Oh my gosh. I understand the frustration! My students are so creative and are constantly pushing beyond the curriculum! I am actually encouraged by that - it means that they were motivated to go above and beyond:) I try to remember that I don’t have to know how to answer every question and that I am just the lead learner as I teach this introductory computer science course.
I do find this happens often in Unit 2 because the content is so accessible and creative that students often want to apply their own ideas. My favorite resource for those questions is w3schools. FYI - there are probably many ways to answer this question. This is just the solution my students and I have found to answer this one.
~Michelle
Thank you, I appreciate it. I have also started turning to Chat-GPT to answer some of these questions as it is amazingly accurate at answering coding questions. It’s not foolproof, but it works well enough for our needs.
1 Like
I am running into a new issue with that site and what the student wants. He wants the text to be to the left of the image in a paragraph. In the preview window it looks somewhat like what he wants, but on the full-sized view of the page it doesn’t. Here is the link with the updated code. Ideally, the paragraph would be grouped closer together and be to the left of the image. We’ve tried using <br> within the paragraph tag but that didn’t do anything. Any help would be appreciated.
I also have another student whose site isn’t displaying correctly. She wants to have the images centered but the float property isn’t working for some reason. I can’t see any problem with her code, so I need some help. Here is the link to that project.
To get more advanced control of layout, you need to use more advanced layout tools. Two popular ones are grid layout and flex-box layout. They aren’t taught in the code.org introductory courses, but you can find good information about them on w3schools or in other places on the internet.
I remixed your 1st students’ project and used the flexbox layout to style it so the text would be to the left of the image. I left comment codes in both the html and css files explaining how it works, but basically, you create a container (a div) that the paragraph and the figure box can go inside of. Then, you group them together side by side by using some flex-box css rules. Have your student read my comments in both files where I explain it.
I’ll look at the other one and create a separate response.
Mike
On this one, I have a few things that could help. First of all, float can only be left or right (not center), so that line of code is being ignored.
However, one way to center an image is to use text-align: center on a container that contains the image. In their case, the body contains the image (and a lot of other things), but your student uses text-align: left on the body. This is what is making the image go to the left (and it probably would anyway if there wasn’t a text-align at all).
If they change that line of code in the body css to text-align: center; the image is centered and the only other change I noticed was that it centers the unordered list as well.
That’s a quick fix, though. Add a section of code to style the unordered list like this:
ul {text-align: left;}
So, the body aligns everything to the center, but putting specific alignment on the ul of left will override the center setting.
Hope this helps!
Mike
Great, thank you! Both suggestions will work great. I will share those with my students.
1 Like
So I’m going thru the new curriculum now and there are a few new lessons incorporating this. However, this is not easy for a teacher who is new to this. Are there any instructional videos for myself as well as the students coming down the pike?
Hi @kbardelli,
I can see where videos would be helpful for the new lessons. Videos are listed in the lesson plans. Also, from from the Unit home page (like here for Unit 2), you can go to “Teacher Resources” to “All Resources”. This gives you a quick glance at all resources, including videos, for all lessons. At a quick glance, I did see videos for CSS Part 1 and Part2! Hope that helps!
~Michelle
The lessons I am referring to in Unit 2 are newly added this year. Complicated concepts that I’m a little confused with…
1 Like
Yes, I’m working through the new lessons on div, flexbox and psedo classes myself and am finding them a challenge - but prob just because they’re new! I’m working through the bubbles as if I’m a student. I appreciate these new lessons because there are always a few students who want to layout their webpages more than the previous 23-24 lessons had instructed. But it was always just a few, not the whole class. Right now I’m thinking I might stick with the 23-24 version and point those students to the div, flexbox tutorials on www3schools (HTML Div Tutorial). My thinking right now is that these new lessons for 24-25 may make it very frustrating for the majority of the students. I could be wrong since I haven’t tried them with students yet!
I absolutely agree! I did decide to stick with last year’s curriculum until I figured out what I myself was doing! Hopefully code.org will get a little more detailed and break this up better
@kbardelli and @GordonBrune,
I know adopting new curriculum content can be so hard! And technology teachers have to do it so often!! Just wanted to make sure you saw the really helpful tools under the instructions “Show me how to complete this level” (saw this on lesson 12 level 2) and “Show me how to get started” (lesson 12 and most other levels). These reveal a very detailed animated gif on how to complete the level. Just making sure you saw that support and consider giving the content a try as it is a very modern way of controlling content on a webpage 
.
Best wishes this year!
~Michelle
1 Like
I have seen those, but not for these new lessons. I will admit I didn’t get through them all because it was taking me too long to figure out how to do them.
This is good feedback. Please send it to support@code.org so they get it on their radar. Personally, I greatly appreciate the new content as it is a much better way to do layouts than the previous lessons, but I can see how it would be a little confusing until you learn it yourself.
Mike
Yup… I’m driving the struggle bus… I didn’t anticipate it being so tricky… it’s too bad because I really like it but I think it was a little too much too quickly… especially after the very gradual progression with the previous lessons.
1 Like