As someone who does web development on the side. I’m a huge advocate for flexbox and teaching the idea that web design needs to be flexible. Having said that, if you want to promote web development (IMO) get rid of this topic. On the surface it’s not hard, but it is incredibly confusing to the students. Flexbox is an advanced topic at best and should be treated as such. I have high level students struggling with this, my lower level just gave up.
The sequence of progression makes no sense. Lesson 14 Project has students creating CSS for margin and padding, the students don’t understand the difference between the two. The Box Model should be a prerequisite before we use margin/padding properties.
How about a lesson on CSS Pseudo-Classes instead? This would be way more engaging for the beginner learner and much easier for them to understand.
I feel like Flexbox is a unit all on to itself if your going to cover this, there is way too much in the two lessons plus the chapter project.
I agree that the way it is presented is problematic, but topic is beneficial. I keep trying to find better ways to scaffold and get them capable of the lesson 14 project. It’s gotten better, but to do it justice, it is very time-consuming. I feel like I’m much further behind than I used to be for this time of year. At the very least, let’s do away with the lesson on flexbox children. I ended up skipping that this year, and modified lesson Lesson 14 project so that the the content is already in for them in the right places without needing children properties and they just have to add the div classes and style to make it work close to what the user requested. Even just getting all of the div containers in the right places and giving them class names and styles is a lengthy process.
I am also glad it’s there. i use some graphic organizers and just build a few simple flexbox projects with them to help them get the concept. To me the basics are:
Create a container (could be body, could be main, could be a navbar or could be a div), create a small number of elements inside (ie. images, buttons, links, etc.), use the basic flexbox-direction command to have them be in a row or a column, and then use “justify-content” to equalize the spacing.
It can do more than that, like wrap, etc, but I think that’s a good start for them and it can be made less confusing.
Before flexbox was a topic, the content was organized with floats, that are far more confusing and far more difficult to use (and are deprecated anyway).
Hi Katherine! Would you mind sharing your modifications? Did you choose option 1 and then reduce from there? Or did you do one of the other project options?
I will say that I try to keep it super simple. I don’t give them the whole poster. WE just use a few concrete examples like making a simple navbar and organizing some photos in a single container…
As I’ve stated from the start, I don’t have an issue with Flexbox. The issue is the sequencing in the curriculum. It makes no sense to jump from CSS Classes to Flexbox and back to linking pages when they get back to the development part of the curriculum. If you go to w3schools.com and follow their sequence of teaching the topics Flexbox gets its own category all together. I don’t understand the logic of teaching Flexbox and yet not one mention of the box model which should be a prerequisite for Flexbox. It doesn’t make sense IMO.
Here’s an updated handout I made for them to glue in their notebooks as a reference:
For the Lesson 14 project, I remixed each of the bubble one client projects but deleted away the div containers and HTML and CSS comments so they would have to add those on their own. I didn’t want a lot of time wasted copying/pasting the content or uploading images when I already knew they could do that. I also had to reorder a few things that they wanted flexbox children to reorder. I think that method worked well for us this year. Ken’s starter project
I get it. I agree. I wasn’t involved in the updating of this unit when it happened a few years ago, but I am fairly sure it was an attempt at giving some ability to students to do layouts without using the very hard to use floats. Box model would also be good, but the floats were so difficult for kids to use and understand and they tried using parameters that don’t even exist such as float:center. I’m sure the curriculum will even get better the next go around with feedback like this.
Here’s a Div and Flexbox Styling sandbox tool I created to help students play around with flexbox concepts, discover how the properties affect one another, and prototype layouts before applying to their own projects. Plan is to update in the future to also help students visualize and play around with margin and padding.
I hope it’s helpful for your students.
PS - I am not a web developer - just a self-taught nerd who vibe-coded this with ChatGPT, so please don’t hesitate to point out any faux pas or redundancy in my code.
Thank you for this tool, it’s awesome. My issue is how does this fit into the curriculum. The Box Model is a logical prerequisite before teaching flexbox concepts.
