Autograding HTML, CSS and JS websites using CodeGrade
October 13, 2021

Webinar: Autograding Web Development in CodeGrade

In 30 seconds...

With our latest webinar, you will learn everything you need to know to start manually and automatically grading your Web Development courses. We went over grading basic HTML and CSS websites, autograding JavaScript and autograding SQL in CodeGrade. We are also very excited to have had our first ever teacher showcase in this webinar: Johan Holmberg and Anton Tibblin from the Malmö University in Sweden showed how their teaching team uses Jest and Selenium to autograde user interfaces in a very powerful and flexible way! This webinar was part of our monthly Focus Groups and was recorded on October 8th 2021, it is available on demand now.

Learn more about the topics covered in this webinar:

Autograding User Interfaces and User Experience using Selenium and Jest

In this webinar, Johan Holmberg and Anton Tibblin discuss how they have used Selenium and Jest to set up automatic grading for their web development course. We have already covered this in a previous guide (which you can read here!), which was based on Johan's original GitHub page. You can find all setup scripts and example tests in Johan's public GitHub guide. Thank you very much Johan!

Autograding Databases in CodeGrade

At the end of this webinar, we discuss autograding databases courses in CodeGrade. It is very easily possible to install any SQL or NoSQL software on CodeGrade and use whichever software you prefer. In the webinar, we discuss how you can set up autograding for SQL queries using SQLite. You can find more information about autograding SQL in some of our blog posts, for instance: How to autograde MySQL assignments in CodeGrade or How to autograde using SQLite in CodeGrade.

Use CodeGrade to fully autograde your web development assignments now!

Using CodeGrade's Rendered View to manually grade Web Development

CodeGrade's Rendered View for a simple CSS, HTML and JS web page

In the webinar, we discuss how CodeGrade's Render Viewer makes it really easy to manually and visually assess websites that were handed in by students. Simply open the HTML file and press Render and CodeGrade will do its magic. If grading large numbers of students manually using the Rendered View, a good practice is to set the file to load first to `/index.html`, read more about that here.

Autograding JavaScript in CodeGrade

In the webinar, we discuss some best practices for autograding pure JavaScript inside CodeGrade. CodeGrade has a couple of convenient tools pre-installed:

  • Node.js to run JS code without loading a web page
  • Jest to unit test JS code
  • Mocha to unit test JS code
  • ESLint to check Code Quality of JS code

The above just lists a brief overview of what is discussed in the webinar. In the webinar, we also discussed more best practices for web development in CodeGrade. We are here to make your course with CodeGrade a success, so please do not hesitate to reach out to us on Discord or via with any question, feature request or if you would like some technical or educational consultancy. We are always more than happy to help you out!

Devin Hillenius

Devin Hillenius

Co-founder, Product Expert
Devin is co-founder and Product Expert at CodeGrade. During his studies Computer Science and work as a TA at the University of Amsterdam, he developed CodeGrade together with his co-founders to make their life easier. Devin supports instructors with their programming courses, focusing on both their pedagogical needs and innovative technical possibilities. He also hosts CodeGrade's monthly webinar.

Continue reading

Could Natural Language Programming change the future of coding for the better?

We can all agree, coding is hard. But, imagine if one tool could simplify the process? In this blog, Sam discusses OpenAI Codex, a platform that translates natural language into code, using AI. Could this be the start of a new era of coding?

Do you know the 3 types of coders and their needs?

Learn how to identify the three types of coders: students coding to understand, students coding as a skill and those learning coding as a career. We also explain the needs of these groups and how you can best tailor your code classroom to them.

New release CodeGrade PerfectlyNormal.2 and Happy Holidays from CodeGrade!

Happy Holidays from Team CodeGrade! We recap 2021 and would love to tell you about CodeGrade PerfectlyNormal.2, improving the Peer Feedback feature and making CodeGrade even more efficient!

Using NBGrader for Python Jupyter notebooks in CodeGrade

Learn how to autograde Python Jupyter Notebooks using the NBGrader tool in CodeGrade to give your students instant feedback.

Learn more about CodeGrade!

Grow your coding classroom
without compromise.