Hot answers tagged

16

I like the idea of producing a few style sheets, and having the pupils apply them to their HTML. They can then see the power of having separate style sheets. Start with a style sheet that you made. Use the new grid layout, have some college styling. But at first get them only creating the html. They can then start editing the style sheets. They will see ...


11

If you only want to build a page that is simple and ad-hoc and will never change in the future and will only ever be seen on one kind of device, then, sure, build the styling directly into html. It is the same when you write a program that will only be run once on one device to get an answer, after which the program becomes obsolete. There is, then, no ...


10

To make them really understand what you can do with CSS alone - with only substituting another CSS file - take them to the CSS Zen Garden. With exactly the same HTML for each page, and only the .css file replaced, you get absurdly wild pages. From serene small nothingness to 3D-scrolling cubes... Then explain to them that the skillset needed to make the ...


8

Much less detail than the excellent post by Buffy, but directly to the question. Replace unit tests with validations and linters. Have the students create all content in distinct files: HTML, CSS, and JS. Any styles or JavaScript in the .html file is invalid for the project(s). There are many validators and linters for all three, as well as for any other "...


8

For me, 60 is a very large class. Let me focus on a course design, extrapolated from other areas, in my case, the compiler course. The intent here is to make assessment feasible, rather than to say how to do it explicitly. I would have two projects for the course. The first is individual and lasts two weeks. It would be to extend a framework that I provide ...


6

To narrow it down, I'm looking for examples or explanations of how teaching it explicitly might make it easier for the students to style their webpages. Preferably an explanation. As richard says, the pupils can see how one simple edit of the style can change every element. As an example, you could let your pupils 'feel' the benefit of separation of the ...


6

Well ask yourself: Why do we separate anything in any form of code? In almost every single programming/scripting language there is separation and delegation. We do this to make sure that we are more easily able to keep track of all the code and are able to more easily identify issues (that will inevitably sprout because no programmer is infallible) So I ...


5

A slightly different way of looking at it might be to introduce DRY code (Don't Repeat Yourself). By using CSS to do the styling, you know that by simply adding a class to a HTML element, the styling should take hold. If you had to manually add it all, then when you need to change one part, you need to change many, many more. To steal an idea of ...


5

If you are struggling with "design" and "beautiful" and artistic mumbojumbo, you can still teach CSS while avoiding trying to turn them into pro designers. The simplest example task I can think of is having your students create a simple website with a basic style and another style for the visually impaired (and a button to change between the two styles). ...


5

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


4

Would explicitly teaching the difference between setting the style attribute of an html tag, and doing it through CSS useful for increasing the students' understanding of the joining of CSS and HTML? To narrow it down, I'm looking for examples or explanations of how teaching it explicitly might make it easier for the students to style their webpages. ...


4

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


3

A great resource to learn JavaScript is Eloquent JavaScript by Marijn Haverbeke: https://eloquentjavascript.net/. You can download the pdf for free, or you can read it online, and this is probably a better choice since you can take advantage of the code sandbox. It is definitely suitable for beginners but a wide range of topics is covered, included Node.js ...


3

We teach that there are three layers to a web page: structure, appearance, and behavior. Structure is determined by the DOM, which is created with well-formed HTML5 markup. When we learn about HTML, we immediately begin drawing the document tree, so we can understand how elements on a page relate to each other. Appearance is determined by CSS, which ...


3

Make a project in which the result is TWO completely different views of the same document, eg a version that looks great on a big monitor and another that looks great on an iPhone. Using not a static webpage but computer-generated, updateable documents will drive the point home even more, since embedding style information in the document generator will make ...


3

I'll let another answerer address the creativity part, but for the design part of your question I can share some insight. I find it useful to ask them to emulate some site that they commonly use, and them make it better in some way. This allows them to practice design by working on and improving already well designed websites. The only qualifier is that you ...


2

It seems that many answers here are not addressing the point of inheritance on styling, as this should also be taught. The basic rule is what's read last will be applied. the first to load is usually the external sheet in the head of the document. A style sheet linked in the head of the document will be over ridden by styles placed inline in the html body,...


1

Assessing web dev courses at scale can be tricky because you have to consider the following: ensure that the resulting web app looks as expected all functionalities should work as expected with the correct logic the code quality to make everything work should meet the industry standard With 60 students (or any number over 20 really), this can get really ...


1

An important reason why inline styles are bad is code readability, plain and simple. In this case, an example should be enough to prove your point: <style> body { padding:0; margin:0; } article { margin:0.8em; background-color:rgba(255,50,60,0.7); } article span { font-family:sans-serif; color:grey; padding:0.5em; text-indent:5em; } ...


1

There are lots of good answers here. One point I haven't seen made yet is that content and design are often created by separate people or teams, and so having each defined with its own tools and language allows for the necessary separate workflows. I would use an analogy. Automotive engineers don't choose car colors. Screenwriters don't generally do ...


Only top voted, non community-wiki answers of a minimum length are eligible