<p>Assessing web dev courses at scale can be tricky because you have to consider the following:</p>

<ul>
<li>ensure that the resulting web app <strong>looks</strong> as expected</li>
<li>all functionalities should work as expected with the <strong>correct logic</strong></li>
<li>the <strong>code quality</strong> to make everything work should meet the industry standard</li>
</ul>

<p>With 60 students (or any number over 20 really), this can get really tricky.</p>

<hr>

<p>My recommendation would be to find tools that help you do the following:</p>

<ul>
<li>Asses the looks: You should be able to preview the submission without downloading and running anything locally (<a href="https://codesandbox.io/" rel="nofollow noreferrer">CodeSandbox</a>)</li>
<li>Correct logic: Either run E2E tests and/or unit tests (<a href="https://pptr.dev/" rel="nofollow noreferrer">Puppeteer</a>, <a href="https://jestjs.io/" rel="nofollow noreferrer">Jest</a>)</li>
<li>Code quality: linters (<a href="https://eslint.org/" rel="nofollow noreferrer">ESLint</a>)</li>
</ul>

<hr>

<p>I would also recommend giving a try to <a href="https://autogradr.com" rel="nofollow noreferrer">AutoGradr</a> that does all of the above in a single tool and is built specifically for educators such as yourself. (Disclaimer: I'm the author of this free tool)</p>

CC BY-SA 4.0
2019-06-04T15:25:25.253Z
I'm trying AutoGradr right now.  Currently waiting for the HTML/CSS stack to be unlocked, but it looks good so far
mpcsf
CC BY-SA 4.0
2019-06-02T17:00:46.873Z
2019-06-02T17:00:46.873Z
tusharsoni
<p>I think Buffy's answer is an excellent philosophy of how to solve this, but I would add a specific thing to it: dependency breaks.</p>

<p>Back when I was learning Compiler Construction, we were supposed to develop a Pascal compiler in several steps, each building on the next bit. If you couldn't solve part A, you couldn't even begin to work on part B. Or of your implementation of B was poor, you'd be hobbled in part C too. That's sliding towards "either you do this class excellently or you fail miserably". Not great for students.</p>

<p>So to avoid that, use dependency breaks. The first project should give you a setup for the next project, and that one for the last project. But after the first project has been handed in, graded, and feedback given, there's also a code skeleton available from which to start working on the second project, if you're not so happy with your first project.</p>

<p>Having explicit dependency breaks also makes it easier to reshuffle teams in between projects, in case students drop out of the class or members of a team have a falling out.</p>

<p>In summary: dependency breaks make the class more robust.</p>

CC BY-SA 4.0
2019-12-26T19:20:07.547Z
Not to mention the tremendous benefits to students who did the assignment, but now get to see a bug-free version with better coding style, or to the students who almost got there, and now get to understand what they missed while they were working on the lab itself.
Ben I.
CC BY-SA 4.0
2019-12-26T16:41:31.103Z
2019-12-26T16:41:31.103Z
ObscureOwl
<p>Another thought that comes to mind is that you can, to some extent, automate checking of web pages with <a href="https://www.seleniumhq.org/" rel="nofollow noreferrer">selenium</a>.  It would be a very large lift and your students would be forced to follow certain conventions in building their web pages but that may be an approach which could automate part of the work for you.</p>

<p>Just to insure I'm being clear, I'd envision you writing a set of tests which could automatically be run against the student web pages to check for the presence or absence of certain elements. </p>

CC BY-SA 4.0
2019-06-06T14:08:17.777Z
2019-06-06T14:08:17.777Z
Onorio Catenacci
<p>Much less detail than the excellent <a href="https://cseducators.stackexchange.com/a/5730/104">post</a> by <a href="https://cseducators.stackexchange.com/users/1293">Buffy</a>, but directly to the question. Replace unit tests with validations and linters. </p>

<p>Have the students create all content in distinct files: HTML, CSS, and JS. Any styles or JavaScript in the <code>.html</code> file is <em>invalid</em> for the project(s). There are many validators and linters for all three, as well as for any other "code" you choose to use/allow, such as PHP, Ruby, etc.</p>

<p>Since a unit test only gives go/no-go results, a validator is at least as effective. A visual check of the resulting page/site shouldn't take but a few moments as well. If it validates and looks correct, it must be "right."</p>

<p>If you also wish to instill, or enforce, coding standards, comments, indentation, etc., a linter may help.</p>

<p>Running a series of validators and linters, checking the operations of the page/site, and visually scanning the code should take much less time than grading a paper-based exam, so you are still time ahead. If the students are provided access to similar tools, if not the exact ones, or exact settings you use, they can develop the habit of applying the "test" to their own code as part of their development work-flow.</p>

<hr>

<p>As an extra note, if you need to compare versions/iterations of their code, you can use a system such as <code>git</code>, which need not be based on GitHub, or even use remote repos at all. Each student can be required to create a GPG key for their project work, and sign their commits. With that system, you can use the built-in diff function to see the changes and be certain who committed what.</p>

CC BY-SA 4.0
2019-05-30T23:28:11.530Z
Thanks for the feedback, it was exactly what I'm looking for.  Do you have a recommendation for a linter? As an aside, I currently use GitHub Classroom for all of my programming courses and utilize diff frequently.
mpcsf
CC BY-SA 4.0
2019-05-31T02:20:30.823Z
Since I never got the automated linter habit, I have no recommendations. A good place to start looking might be on [GitHub](https://github.com/caramelomartins/awesome-linters). As an alternative, you could consider asking a new question about how to evaluate/look for in a linter for classroom/grading use. Do mind the idea that shopping list questions [aren't received well](https://stackoverflow.blog/2010/11/23/qa-is-hard-lets-go-shopping/) on most SE sites. There is, however, a sister site [softwarerecs.se] that handles them, within limits.
Gypsy Spellweaver
CC BY-SA 4.0
2019-06-01T14:43:38.273Z
I'm won't say you must unit test but I'd hate anyone to get the impression that validators and linters give you the same thing unit testing does. A unit test gives you an automated test that proves your code performs as you expected. It documents the abstraction you need. It makes promises about what it will do that using code can depend on. You can't buy that off the shelf. You have to write it yourself. Yes you can inspect what the page looks like but thats manual testing. There are [many JavaScript unit testing tools](https://www.guru99.com/javascript-unit-testing-frameworks.html).
candied_orange
CC BY-SA 4.0
2019-06-01T18:04:11.960Z
@candied_orange You cannot "unit test" HTML, it's not executable code. If it renders as intended on the web page, it's "correct". Validating the DOM in the HTML is the only way to "automate" the testing of the HTML markup.
Gypsy Spellweaver
CC BY-SA 4.0
2019-06-01T19:27:15.610Z
@GypsySpellweaver you're forgetting the JS that the op mentioned.
candied_orange
CC BY-SA 4.0
2019-06-01T20:01:41.740Z
Since OP uses unit testing already, I have to presume that they already have a preferred option for JS unit testing. The HTML seems to be their problem.
Gypsy Spellweaver
CC BY-SA 4.0
2019-05-30T23:19:22.323Z
2019-05-30T23:19:22.323Z
Gypsy Spellweaver
<p>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. </p>

<p>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 and when completed would contain in the simplest way, the elements required for the larger project. It would count for a small portion of grading. But, I'd have to actually grade it. To make this feasible, I'd have them high light all changes from my base code. </p>

<p>The second project is done in teams. I'd choose the teams so that the total number is reasonable. Maybe five people per team, giving you about a dozen projects being done at once. I would also specify this project and possibly supply some base code giving a framework. Each team works separately on the project in parallel. It isn't a division of a larger project, but a "competition" of teams working on the same thing. With everyone working on the same project structure, I only have one thing to think about when grading. </p>

<p>I'd give them clear instructions about now NOT to manage their projects. No "dividing up the work" for example. Everyone is responsible for every part. I would try to convince them that dividing the work is actually more work for everyone since they need to integrate at some point. For beginners this is almost always a bad thing to do. </p>

<p>I would teach them how to run an agile team using something like XP. Iterations can be weekly or every other week. In particular, no one is permitted to commit code that only they worked on, avoiding the "prima donna" problem. I've had the teams name themselves, or I've named them, to build esprit d'corps: Fire, Ice, Wind, .... </p>

<p>I would also want to look at their code, but I now have a more reasonable work load. I would, again, have them highlight any changes they make from previous versions and include all past work (along with my comments) whenever they turn in the next iteration. It is now easy for me to see their progress. Each team turns in a folder each iteration. </p>

<p>I would (probably) require public demos of the projects at the end of the course, with each team having a few minutes to show their results. I normally require that everyone participate in the demo, but with five members per team it might be impossible. </p>

<p>I would use peer assessment within each team to get an idea about how people behave when not under my view. Peer assessment is always positive. "What is the main contribution of each team member? What is your own chief contribution?". Actually I usually, for a team of five, would have everyone give positive assessments of each of the top three contributors. If no one labels "jimmy" as a top contributor, I learn something. If everyone mentions "jimmy" I learn something else. But a positive assessment is more likely to be accurate and avoids the problem of people not wanting to say negative things about their friends. </p>

<p>Everyone gets the same grade on the big project unless there are serious reasons to do otherwise. </p>

<p>I have sometimes created (randomly) a "leader" of each team. The leader is not a manager, but is simply my main contact with each team so that I can get and give feedback when necessary. Try to do interventions early, if needed. </p>

<p>I usually use an asynchronous communication mechanism (a mailing list) so that anyone can ask a question at any time. I encourage others to answer questions as well as ask them, so I don't need to answer every question. </p>

<p>The goal is to reduce the load to a manageable level and still give individual feedback periodically. I haven't tried to automate grading in any way, but just made the scope of my problem more feasible. </p>

<p>Most of the course grade would be on the second project not the final exam (if any). </p>

<p>I could either use face time for lectures, or I could flip the classroom, letting the teams work together in lab and providing "content" through videos or readings done after hours. With a flipped design, I get to monitor each team in real time. </p>

CC BY-SA 4.0
2019-05-30T23:18:31.377Z
Thank you for taking the time to go over an approach to tackle my problem.  I'll definitely take it into consideration when approaching the class.  

However, I'm looking for tools or techniques for grading automation.  I would really like to be able to learn from approaches that other instructors use to make a first pass at assessment of HTML, CSS, and JavaScript code for Web Development projects.
mpcsf
CC BY-SA 4.0
2019-05-30T20:51:56.917Z
2019-05-30T21:12:36.977Z
2019-05-30T21:12:36.977Z
Buffy
<p>I've been teaching Java and C# for years and I'll be picking up a web development (HTML, CSS, JS) course in the fall semester because our department is down a faculty member and won't be filling the position.</p>

<p>I can run unit tests on Java and C# to make sure the code students are submitting is correct without an issue, but I don't know how to efficiently assess websites. My school uses Cengage for curriculum delivery and their MindTap product does assessments, but I don't want to rely on that for the primary driver in class for a number of reasons.</p>

<p>How can I efficiently and effectively assess student work other than reading through all their code and observing every web page? There has to be some tool out there that I can work with to do an initial sweep for me... right?</p>

CC BY-SA 4.0
2019-05-30T19:07:04.383Z
Say something about scale. How many students? How many projects? Team based projects or no?
Buffy
CC BY-SA 4.0
2019-05-30T19:14:57.027Z
Not a whole lot, 60 students max.  Although I'm inclined to teach writing code through project-based curriculum, the specific amount will be based on what options I have available to me.  I feel the same way about team-based projects as well, I'd like to include a lot of them, but they can be very messy to assess if the right structure isn't available on my end.
mpcsf
CC BY-SA 4.0
2019-05-31T08:13:09.317Z
selenium is a tool for testing web-site functionality https://en.wikipedia.org/wiki/Selenium_(software)
ctrl-alt-delor
CC BY-SA 4.0
2019-10-08T00:54:02.723Z
I am using Code.org and I want to assess their projects differently and outside that platform too. I didn't know about the Linters to check the codes. However, I don't understand how to use it. I am reading the documentation in Github about it and my question is; Can I install on my computer the HtmlInt and having run on a text file that a student creates and I will be able to see the results like that? How do you use it? Thank you so much in advance and thank you for the different resources you mentioned. I am checking them all by now.
Beatrice Mendez Kennedy
CC BY-SA 4.0
2019-10-30T10:31:22.900Z
`I can run unit tests on Java and C# to make sure the code students are submitting is correct without an issue` I can write code that does what it's supposed to, passes every test, and will still be flagged as a massive issue in any reasonable code review (if you want an example, remove all newlines and tabs from your code and rename your variables to randomized 15 letter strings). Am I to infer from this that your lessons do not include readability of code? Because if readability was a lesson focus, quite obviously you should try to (and be able to) read your students' code as well.
Flater
<assessment><javascript><html><css>
How can you efficiently assess students web coding?
# How can you efficiently assess students web coding?

(Asked by: username_0 on 2019-05-30)

I've been teaching Java and C# for years and I'll be picking up a web development (HTML, CSS, JS) course in the fall semester because our department is down a faculty member and won't be filling the position.

I can run unit tests on Java and C# to make sure the code students are submitting is correct without an issue, but I don't know how to efficiently assess websites. My school uses Cengage for curriculum delivery and their MindTap product does assessments, but I don't want to rely on that for the primary driver in class for a number of reasons.

How can I efficiently and effectively assess student work other than reading through all their code and observing every web page? There has to be some tool out there that I can work with to do an initial sweep for me... right?

**Tags:** assessment, javascript, html, css

> **Comments:**
> **username_1**: Say something about scale. How many students? How many projects? Team based projects or no?  
> **username_0**: Not a whole lot, 60 students max.  Although I'm inclined to teach writing code through project-based curriculum, the specific amount will be based on what options I have available to me.  I feel the same way about team-based projects as well, I'd like to include a lot of them, but they can be very messy to assess if the right structure isn't available on my end.  
> **username_2**: selenium is a tool for testing web-site functionality https://en.wikipedia.org/wiki/Selenium_(software)  
> **username_3**: I am using Code.org and I want to assess their projects differently and outside that platform too. I didn't know about the Linters to check the codes. However, I don't understand how to use it. I am reading the documentation in Github about it and my question is; Can I install on my computer the HtmlInt and having run on a text file that a student creates and I will be able to see the results like that? How do you use it? Thank you so much in advance and thank you for the different resources you mentioned. I am checking them all by now.  
> **username_4**: `I can run unit tests on Java and C# to make sure the code students are submitting is correct without an issue` I can write code that does what it's supposed to, passes every test, and will still be flagged as a massive issue in any reasonable code review (if you want an example, remove all newlines and tabs from your code and rename your variables to randomized 15 letter strings). Am I to infer from this that your lessons do not include readability of code? Because if readability was a lesson focus, quite obviously you should try to (and be able to) read your students' code as well.  

---

## 5 answers

### Answer by username_9 on 2019-05-30. Score: 9 | Accepted answer

Much less detail than the excellent [post](https://cseducators.stackexchange.com/a/5730/104) by [username_1](https://cseducators.stackexchange.com/users/1293), 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 "code" you choose to use/allow, such as PHP, Ruby, etc.

Since a unit test only gives go/no-go results, a validator is at least as effective. A visual check of the resulting page/site shouldn't take but a few moments as well. If it validates and looks correct, it must be "right."

If you also wish to instill, or enforce, coding standards, comments, indentation, etc., a linter may help.

Running a series of validators and linters, checking the operations of the page/site, and visually scanning the code should take much less time than grading a paper-based exam, so you are still time ahead. If the students are provided access to similar tools, if not the exact ones, or exact settings you use, they can develop the habit of applying the "test" to their own code as part of their development work-flow.

---

As an extra note, if you need to compare versions/iterations of their code, you can use a system such as `git`, which need not be based on GitHub, or even use remote repos at all. Each student can be required to create a GPG key for their project work, and sign their commits. With that system, you can use the built-in diff function to see the changes and be certain who committed what.

> **Comments:**
> **username_0**: Thanks for the feedback, it was exactly what I'm looking for.  Do you have a recommendation for a linter? As an aside, I currently use GitHub Classroom for all of my programming courses and utilize diff frequently.  
> **username_9**: Since I never got the automated linter habit, I have no recommendations. A good place to start looking might be on [GitHub](https://github.com/caramelomartins/awesome-linters). As an alternative, you could consider asking a new question about how to evaluate/look for in a linter for classroom/grading use. Do mind the idea that shopping list questions [aren't received well](https://stackoverflow.blog/2010/11/23/qa-is-hard-lets-go-shopping/) on most SE sites. There is, however, a sister site [softwarerecs.se] that handles them, within limits.  
> **username_10**: I'm won't say you must unit test but I'd hate anyone to get the impression that validators and linters give you the same thing unit testing does. A unit test gives you an automated test that proves your code performs as you expected. It documents the abstraction you need. It makes promises about what it will do that using code can depend on. You can't buy that off the shelf. You have to write it yourself. Yes you can inspect what the page looks like but thats manual testing. There are [many JavaScript unit testing tools](https://www.guru99.com/javascript-unit-testing-frameworks.html).  
> **username_9**: @username_10 You cannot "unit test" HTML, it's not executable code. If it renders as intended on the web page, it's "correct". Validating the DOM in the HTML is the only way to "automate" the testing of the HTML markup.  
> **username_10**: @GypsySpellweaver you're forgetting the JS that the op mentioned.  
> **username_9**: Since OP uses unit testing already, I have to presume that they already have a preferred option for JS unit testing. The HTML seems to be their problem.  

---

### Answer by username_1 on 2019-05-30. Score: 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 and when completed would contain in the simplest way, the elements required for the larger project. It would count for a small portion of grading. But, I'd have to actually grade it. To make this feasible, I'd have them high light all changes from my base code.

The second project is done in teams. I'd choose the teams so that the total number is reasonable. Maybe five people per team, giving you about a dozen projects being done at once. I would also specify this project and possibly supply some base code giving a framework. Each team works separately on the project in parallel. It isn't a division of a larger project, but a "competition" of teams working on the same thing. With everyone working on the same project structure, I only have one thing to think about when grading.

I'd give them clear instructions about now NOT to manage their projects. No "dividing up the work" for example. Everyone is responsible for every part. I would try to convince them that dividing the work is actually more work for everyone since they need to integrate at some point. For beginners this is almost always a bad thing to do.

I would teach them how to run an agile team using something like XP. Iterations can be weekly or every other week. In particular, no one is permitted to commit code that only they worked on, avoiding the "prima donna" problem. I've had the teams name themselves, or I've named them, to build esprit d'corps: Fire, Ice, Wind, ....

I would also want to look at their code, but I now have a more reasonable work load. I would, again, have them highlight any changes they make from previous versions and include all past work (along with my comments) whenever they turn in the next iteration. It is now easy for me to see their progress. Each team turns in a folder each iteration.

I would (probably) require public demos of the projects at the end of the course, with each team having a few minutes to show their results. I normally require that everyone participate in the demo, but with five members per team it might be impossible.

I would use peer assessment within each team to get an idea about how people behave when not under my view. Peer assessment is always positive. "What is the main contribution of each team member? What is your own chief contribution?". Actually I usually, for a team of five, would have everyone give positive assessments of each of the top three contributors. If no one labels "jimmy" as a top contributor, I learn something. If everyone mentions "jimmy" I learn something else. But a positive assessment is more likely to be accurate and avoids the problem of people not wanting to say negative things about their friends.

Everyone gets the same grade on the big project unless there are serious reasons to do otherwise.

I have sometimes created (randomly) a "leader" of each team. The leader is not a manager, but is simply my main contact with each team so that I can get and give feedback when necessary. Try to do interventions early, if needed.

I usually use an asynchronous communication mechanism (a mailing list) so that anyone can ask a question at any time. I encourage others to answer questions as well as ask them, so I don't need to answer every question.

The goal is to reduce the load to a manageable level and still give individual feedback periodically. I haven't tried to automate grading in any way, but just made the scope of my problem more feasible.

Most of the course grade would be on the second project not the final exam (if any).

I could either use face time for lectures, or I could flip the classroom, letting the teams work together in lab and providing "content" through videos or readings done after hours. With a flipped design, I get to monitor each team in real time.

> **Comments:**
> **username_0**: Thank you for taking the time to go over an approach to tackle my problem.  I'll definitely take it into consideration when approaching the class.    However, I'm looking for tools or techniques for grading automation.  I would really like to be able to learn from approaches that other instructors use to make a first pass at assessment of HTML, CSS, and JavaScript code for Web Development projects.  

---

### Answer by username_5 on 2019-06-02. Score: 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 tricky.

---

My recommendation would be to find tools that help you do the following:

* Asses the looks: You should be able to preview the submission without downloading and running anything locally ([CodeSandbox](https://codesandbox.io/))
* Correct logic: Either run E2E tests and/or unit tests ([Puppeteer](https://pptr.dev/), [Jest](https://jestjs.io/))
* Code quality: linters ([ESLint](https://eslint.org/))

---

I would also recommend giving a try to [AutoGradr](https://autogradr.com) that does all of the above in a single tool and is built specifically for educators such as yourself. (Disclaimer: I'm the author of this free tool)

> **Comments:**
> **username_0**: I'm trying AutoGradr right now.  Currently waiting for the HTML/CSS stack to be unlocked, but it looks good so far  

---

### Answer by username_6 on 2019-12-26. Score: 0

I think username_1's answer is an excellent philosophy of how to solve this, but I would add a specific thing to it: dependency breaks.

Back when I was learning Compiler Construction, we were supposed to develop a Pascal compiler in several steps, each building on the next bit. If you couldn't solve part A, you couldn't even begin to work on part B. Or of your implementation of B was poor, you'd be hobbled in part C too. That's sliding towards "either you do this class excellently or you fail miserably". Not great for students.

So to avoid that, use dependency breaks. The first project should give you a setup for the next project, and that one for the last project. But after the first project has been handed in, graded, and feedback given, there's also a code skeleton available from which to start working on the second project, if you're not so happy with your first project.

Having explicit dependency breaks also makes it easier to reshuffle teams in between projects, in case students drop out of the class or members of a team have a falling out.

In summary: dependency breaks make the class more robust.

> **Comments:**
> **username_7**: Not to mention the tremendous benefits to students who did the assignment, but now get to see a bug-free version with better coding style, or to the students who almost got there, and now get to understand what they missed while they were working on the lab itself.  

---

### Answer by username_8 on 2019-06-06. Score: 0

Another thought that comes to mind is that you can, to some extent, automate checking of web pages with [selenium](https://www.seleniumhq.org/). It would be a very large lift and your students would be forced to follow certain conventions in building their web pages but that may be an approach which could automate part of the work for you.

Just to insure I'm being clear, I'd envision you writing a set of tests which could automatically be run against the student web pages to check for the presence or absence of certain elements.


---

