17
votes
Explaining why styling should not be done directly in HTML
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. ...
- 10.7k
11
votes
Explaining why styling should not be done directly in HTML
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 ...
- 36k
10
votes
Explaining why styling should not be done directly in HTML
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 ...
- 1,379
9
votes
Accepted
Explaining basic html structure
How did you begin to teach Java to your students? I bet you didn't start by showing them the Backus-Naur form that the Java parser follows. Instead, you probably introduced a simple "Hello, world" ...
- 3,506
9
votes
Accepted
How can you efficiently assess students web coding?
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, ...
- 5,435
8
votes
How can you efficiently assess students web coding?
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 ...
- 36k
7
votes
Accepted
Introductory html, css, javascript online course
I would say that you should use w3schools.com it nicely covers the basics of HTML, CSS, JavaScript and a few other related things(I would really suggest looking at MySQL/PHP if you want to go in to ...
- 336
7
votes
Explaining basic html structure
I would avoid starting with something this abstract if the aren't used to it. Doing so might, in my experience, turn away students, especially since the beginning is usually the easiest. If the ...
- 638
6
votes
Explaining why styling should not be done directly in 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. Preferably an explanation.
As richard says, ...
- 181
6
votes
Explaining why styling should not be done directly in HTML
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 ...
- 191
5
votes
Explaining why styling should not be done directly in HTML
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 ...
- 219
5
votes
Beginner Javascript course - recommended books
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 ...
- 435
5
votes
Accepted
How to "teach" CSS for students?
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 ...
- 1,398
4
votes
Explaining basic html structure
To elaborate on my comment, I suggest approaching both (but HTML first) by way of the DOM. W3 Schools has a tutorial on both HTML and XML using this model for conceptualizing the structure of HTML/XML ...
- 9,082
4
votes
Explaining basic html structure
I think that it's relevant to mention the ADEPT method of teaching here...
Perhaps one of the best ways I've found to explain these concepts to students is that of human anatomy... head, body, feet (...
- 149
4
votes
Accepted
Explaining why styling should not be done directly in HTML
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?
...
- 5,430
3
votes
Explaining why styling should not be done directly in HTML
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 ...
- 199
3
votes
Explaining why styling should not be done directly in HTML
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,...
- 2,319
3
votes
Explaining basic html structure
Use Russian dolls
Russian dolls nest inside each other, much line block of code in almost all modern programming language (maybe all post “goto considered harmful” languages).
Russian dolls nest ...
- 10.7k
3
votes
How to "teach" CSS for students?
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 ...
- 4,795
2
votes
Explaining basic html structure
My students are already familiar with Word documents by the time I get them (Grade 6 is when I start them on HTML) so those are the most common analogy that I use in my classes. I explain that HTML ...
- 696
2
votes
Explaining why styling should not be done directly in HTML
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 ...
- 29
2
votes
Introductory html, css, javascript online course
Trying to keep up with web development is hard. Every year there are new tools , new frameworks, new way to do things. But surprisingly I find the following Dinosaurs serials Peter Jang wrote in 2017 &...
- 848
1
vote
games for teaching html
W3Schools have exercises that go up in small steps that go along with their tutorials https://www.w3schools.com/html/exercise.asp
For some project based exercises Raspberry Pi is good and I've used ...
- 81
1
vote
How to learn web design if backround is on mathematics and data analysis?
Just about everything you need can be found in one or another book. O'Reilly has a large selection of reputable work. (No affiliation) But a topical search online or at Amazon will get you what you ...
- 36k
1
vote
How can you efficiently assess students web coding?
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 ...
- 711
1
vote
Explaining why styling should not be done directly in HTML
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:
...
- 4,795
1
vote
Explaining why styling should not be done directly in HTML
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 ...
- 471
1
vote
Explaining basic html structure
Use Snap to model it.
— see this code here http://snap.berkeley.edu/snapsource/snap.html#present:Username=rdelorenzi&ProjectName=html
- 10.7k
Only top scored, non community-wiki answers of a minimum length are eligible