We’re rewarding the question askers & reputations are being recalculated! Read more.
23

I find that the best introductory IDE is a lack thereof because, for the most part, the features that an IDE offers (code completion, organization, etc.) are more hurt than help and tend to promote completely unrelated questions, for example, "What is this dropdown under the word I just typed" and other questions about IDE function rather than language ...


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


14

Make it into an assignment/game. Each student creates a project that is passed to another, randomly chosen student, to hack. Give points for both the project and the "hacking" results. The hacking assignment should also be graded. Security has to be taught and the value learned, usually painfully. I have lived through many "no one will do that!" only to ...


11

The latest generation of text editors, e.g. Sublime, Atom, Visual Studio Code, are great, and seem to offer all that one might want from an IDE. I've a soft spot for Atom, but don't rule the others out. Another option might be to try Jupyter Notebooks in the web browser. Not an IDE in the traditional sense, but a good introduction to playing with code and ...


11

I also have this problem frequently. I use the example of Microsoft Word, and I would say something like this: "Word allows you to give a document the appearance that you'd like. You can bold, you can center, you can change font sizes. Word is creating a markup (in this case, it is generating a type of markup called XML). "Markups" mark up text, just ...


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


9

In the context of front-end development, I suggest looking into CodePen. For each "pen" you can get an instant visual as to how your HTML/CSS/JS affect your page. Additionally, you can immediately begin working in a pen without having to create an account, which may be a factor given the age of your students. At the very least, it might be a good teaching ...


8

I don't think the tool (or learning the tool) should get in the way of learning the initial core of the subject. If students are already comfortable with NotePad (or TextEdit, et.al.), why add to their cognitive load (7+-2) and the number of steps needed in getting their first few lines of Javascript running? The IDE can come later, when the code no ...


8

As a student I would find this assignment uninteresting and a waste of my skills. I would feel the professor is just trying to be lazy and not having to properly grade assignments. If they really should know HTML and CSS by now, don't treat them like babies. Just ask them to build a complex responsive page that works as their resume and/or portfolio. They ...


8

In a few days there is almost nothing you can do. Certainly you can't change their habits and attitudes about how to learn in just a few days. You can try, however, to change their behavior by making their current behavior unprofitable. If it is still possible, make the final work an important part of the evaluation. But that is only a band-aid on the ...


7

If you want to teach students programming concepts along with web-development (HTML/CSS/JS) you should consider lacing programming examples or lessons with examples of HTML/CSS/JS or similar concepts in both. You could also have HTML/CSS/JS as an extra credit assignment or something the class can do if they're ahead of schedule. This will keep the class ...


7

As a student, I get a lot more from blogs. Many of the videos I have seen are pretty hit or miss. With a blog, I can scan it in a minute or so and be able to tell if it holds the answers/info I am looking for or curious about. With a video, there seems to be a much longer time commitment due to more forwarding, searching and hunting for an overview of the ...


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


6

Videos or Articles? I learned about web development on my own. I preferred videos to show me what was capable/ the end result of implementing a new technology. Then I used blog posts, articles, and tutorials to actually implement everything. My answer: do both. Pros and Cons? You asked about pros and cons. There are a lot based on what you want to do. Since ...


6

In places that use the ideas of agile software development, the usual way is to just let the newcomers pair with the more experienced members in all tasks. In your case it would consist of a lot of pair programming. But you would need to do it correctly. It isn't one person programming and the other person watching. Both participate, but in different ways. ...


5

I think it depends on what the goals for the course are. You are teaching an intro programming course, so what are the students expected to know when they finish? Data types and structures, loops, functions, syntax, etc? If so you don't need to teach web development skills as part of this since arguably HTML, CSS, etc. are not really "programming" in the ...


5

As Choirbean noted, this is fundamentally a question of motivation. I don't think it's about making something more "exciting." That is, the secret is not in something extrinsic, which is what makes this such a challenging issue whether it be front-end development or really any topic. I draw on Daniel Pink's TED Talk whenever I think about getting students ...


5

I teach game programming, and I have a very similar issue. Day 1: They want to make Overwatch, and on Day 2-End of the year, they want to play overwatch. I usually start the year with an explanation of the parts that go into professional development and then explain that we are only scratching the surface of what is required to develop an AAA game, you ...


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

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


5

I am posting this answer as a complement to @Buffy's answer, which suggests a deep restructuring of the course and you may not be willing, able or allowed to to do it. This answer is useful if you want to start small but still give incentives for self-learning. I tried to present examples that do not take more than one class. Write exercises that require ...


4

You are correct in considering Sublime text, or atom text editor as they are light weight and more importantly will be hassle free for school kids. But one should also keep in mind considering school kids IDEs are too much to learn or get to know how to work on it therefore at these initial stages text-editors like said above and VScode which at least for ...


4

I go for simple. This year we used either an online editor or the free version of JCreator specifically because they don't have autocomplete. What I noticed last year using NetBeans is that students become dependent on autocomplete. When writing code on paper - I teach mostly AP CompSci so paper is necessary - kids would struggle to remember method names ...


4

As mentioned in other answer making education like a game is good idea. You can use SQL Injection as one of the examples, other like password to be word from the web page itself, other can be default username/passwords like root/root, admin/admin and so on. During the class you mention this keyword (SQL for example) and give them as home work URL to dig. ...


4

Markup languages are for giving names to things. How can be different between 'languages', with, for example, HTML and XML using <tags></tags>, Markdown using special characters around text, and $\LaTeX$ using dollar signs ($) around text and key words. No matter how it's done, all the markup language is doing is giving some kind of name to the ...


4

The AP CS Principles curriculum defines three elements of an algorithm: Sequencing Selection Iteration This can be a point of divergence between a markdown language and a programming language. Selection via conditionals and Boolean operators and iteration via loops are constitutive elements of a program, not a document styled with a markup language. A ...


4

Assuming that you have reasonably motivate students in the first place, the first rule of motivation is to explain the goal, and where that fits into a larger framework. So, if you're teaching CSS, you might show the kind of final product that you expect them to be able to make by the end of the course on day 1. You can also explain the limits. Something ...


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