2
$\begingroup$

I'm teaching a student how to create website front ends. This student comes from a SNAP/Scratch/AppLab type environment where they learned basic programming concepts, but to position visual elements they had to either drag and drop or set an x and y coordinate.

This student has an issue where they make every HTML element positioned absolutely, so they can specify x and y (with left and top). This is not considered "best practice" in HTML and makes modifications to their work challenging, and causes other issues in their work. Generally, this is a bad habit I'd like to break them of.

How can I get this student to understand and utilize the normal document flow instead of just thinking about it as x and y coordinates?

Improve this question
$\endgroup$
4
  • $\begingroup$ Have they been introduced to CSS? $\endgroup$
    – Jed Schneider
    Mar 7, 2018 at 3:20
  • $\begingroup$ @JedSchneider Yes, they have. It's in their stylesheets where they consistently use absolute positioning. Also, when I ask them to avoid it, they can't seem to do it unless I effectively feed them the code. And in that case, they're just copying what I say, not learning anything. $\endgroup$
    – thesecretmaster ♦
    Mar 7, 2018 at 3:32
  • $\begingroup$ In my experience, even feeding them code eventually takes root. And some students have to be fed in this way for a long time before that light goes on in their heads. If you can, continue to patiently remind and explain. $\endgroup$
    – Java Jive
    Mar 7, 2018 at 12:46
  • 1
    $\begingroup$ Perhaps the students were introduced to the absolute positioning properties too early? It's very hard to learn to do something in-place-of something else you already know how to do. If course time permits, maybe you need to re-introduce the topic of layout with some very simple examples, such as those on this page: w3schools.com/css/css_positioning.asp $\endgroup$
    – Gorchestopher H
    Mar 7, 2018 at 18:44

2 Answers 2

Reset to default
5
$\begingroup$

Absolute positioning as bad practice

Referencing the StackOverflow question, "Is it considered bad practice to use absolute positioning?", the consensus is, just like nearly everything in CSS, "it depends".

But let's just throw some data at the topic:

  • More than 50% of website traffic is presumed to be from a mobile device. Using absolute positioning (especially when positioning from body) will impact how mobile viewers see your content.
  • There are literally thousands of possible combinations for screen sizes and resolutions. Positioing absolutely will break on most viewports.

These are the two biggest reasons to rely on document flow as opposed to positioning the elements yourself. But obviously, the student(s) are trying to solve a problem they have with the hammer they have.

So, maybe instead of trying to convince them not to, show them how bad it performs under real world situations and provide some alternatives.

Define the problem

  • Open a browser like Chrome, and using the bottom left corner of the browser window, resize the window. Elements positioned to flow around constraints will reposition, absolute elements will not.
  • Also in Chrome, open the developer tools and open the "device tool bar". This will allow you to look at the page in a simulated screen resolution for a number of devices.
  • Visit the web page on the student's phone. Switch the phone between horizontal and vertical views.

Better Practice

  • Use a grid. There a number of grids available like those that come standard with Bootstrap, but sites like css-tricks.com also have a number of smaller implementations that actually describe the basics of a grid, like this nice one from Chris Coyer.
  • Be right on the cutting edge and teach grid layout directives that are only in draft proposal (but work in some canary browser releases) this other tutorial on the Mozilla Dev Network.
  • Be less on the cutting edge and teach Flex.
  • Introduce viewports to trigger css changes at certain screen size

After some or all of these, reflect by going through browser resizing, etc. explained above.

Some other talking points

I'm not sure what kind of project the student is creating, but some other things to consider under certain circumstances:

  • Their experience with x, y coordinates will help them a lot if they are doing game development or graphics within a canvas tag or creating SVGs. Discuss when those are appropriate to use in HTML (SVG icons for links under certain viewports, eg).
  • Discuss content visibility and re-flow on devices of different resolution. Moving or hiding information based on user context (are they on a desktop with lots of viewable space and a mouse, or are they on an iphone 4 and just want to click the 'buy' button?).
Improve this answer
$\endgroup$
2
  • $\begingroup$ Great points here. Show the students why absolute positioning isn't great for the web where the viewport could be any set of dimensions. $\endgroup$
    – Gorchestopher H
    Mar 7, 2018 at 18:29
  • $\begingroup$ I just tried this page in responsive design mode. It is a mess, unless you trick the server into thinking you are on a phone. If it thinks you have a desktop, then in assumes that you have a wide (>1024) screen. The style sets min-width multiple times. I am going to look in to setting the browser name to some phone permanently to trick the server. $\endgroup$
    – ctrl-alt-delor
    Mar 7, 2018 at 23:42
4
$\begingroup$

I'm not sure how you teach these things, but you may have a misconception about learning that is getting in the way. This seems to be common with newer teachers who don't yet show the scars of many student engagements.

I suspect that you see the relationship between theory and practice fairly clearly. So you explain something to students (possibly at a fairly high, conceptual level) and think that they will be able to make the same connections that you do. But they likely won't, since they don't have your background and experience.

In this particular case, I'd suggest that you give them lots of sample CSS that they can emulate and also (a smaller set) of poor examples and show them the consequences when change is needed. Do this as part of your introduction to creating HTML docs, not as an after-the-action correction. Integrate it into your teaching.

Some of the students will be able to make the leap immediately without this, of course, but many need to learn by example, not by inference. You need to reach all of the students in any teaching situation and all of them learn differently (learning "modalities").

I once wrote a book on a topic important to me, but did so soon after becoming thoroughly familiar with it. It was important to me, in that book, to be able to connect with the beginner's mindset before I forgot how hard it was for me to get started with the topic. Teacher's too often forget how hard their own path was and expect others to have an easier time. New teachers also often don't yet realize that their students aren't like themselves, with different motivations and different ways of thinking.

In general, you need to repeat yourself when teaching, but not in the same words and not with the same tools. Each explanation will, one hopes, reach a large fraction of the students. Each re-teaching (explanation, demonstration, exercise, ...) will likely reach more. Ultimately you want to reach them all, but no one thing will reach more than a fraction.

As a young teacher I once thought that my explanations were so clear and brilliant that no-one could possibly misinterpret them, and that deep ideas (in this case in Statistics) would become immediately clear to all. In actually, I probably got through to about 5% of them. Luckily I learned not to do that anymore.

Improve this answer
$\endgroup$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.