Skip to content

webcode-tk Docs

A collection of functions designed by a Web Design teacher for checking front-end web documents (in particular HTML and CSS files). It can automatically check validation on HTML and CSS.

The way I use it is to create a GitHub template with a project folder and a README file indicating which elements must be present. I deploy these templates on GitHub Classroom. Each template has a project folder with a README file both in the main repo folder as well as the project folder to indicate what I'll be testing for.

For HTML checks, I use it to make sure the project does not have any validation errors, meets the required number of elements, and can even check for a minimum number of image files.

For CSS, you can check validation, check to make sure specific properties are addressed, check for color contrast, and check to see if font families have been targetted. I also have a check that identifies if style attributes have been employed or not.

I have other helper tools that work with the html_tools and css_tools. I have included a ux_tools library that reports back on words per sentence, sentences per paragraph, list items in list, and readability scores. I have an animation_tools that can report back on the keyframe animations that are employed.

Table Of Contents

  1. Tutorials
  2. html_tools.py
  3. css_tools.py
  4. cascade_tools.py
  5. color_tools.py
  6. color_keywords.py
  7. animation_tools.py
  8. ux_tools.py
  9. utils.py
  10. validator_tools.py
  11. Explanation

Quickly find what you're looking for depending on your use case by looking at the different pages.

Project Overview

Deals with html and css documents to check their code.

Modules exported by this package:

  • animation_tools: a library used to report back on animations applied. As of now, we are focusing entirely on keyframe animations (not) transitions.

  • cascade_tools: library to calculate how the cascade affects font-size and background color and color through inheritance and will be used for calculating color contrast.

  • color_keywords: helper library to align color keywords with their properties and hex and rgb values.

  • color_tools: processes CSS color related properties and values.

  • css_tools: creates Stylesheet objects that store CSS information.

  • font_tools: A collection of functions used to process font-related styles.

  • html_tools: gets html files from a project folder, gets the HTML code from files, gets number of a particular element in a file or folder, gets elements as tags, and much more.

  • ux_tools: gets readability stats for paragraphs of text (could be from just p tags or a list of other tags e.g. li, div, etc.).

  • utils.py: a library of helper functions to reduce the workload of the other libraries.

  • validator_tools: sends HTML or CSS code to the W3C Validator to check for errors.

Web Design Class Project Templates

Below are a few examples of how I use webcode-tk in a class project. If you look at the test files, you can see how I set it up.

I use webcode-tk to inspect all files in the project folder, and pytest looks at the reports and other tools to determine whether students' projects have met all the goals:

One Pager Project contains two pytest files:

Image Gallery Project contains four pytest files (I use the exceeds tests to determine the difference between a B or an A):

Acknowledgements

I'd like to thank Guido van Rossum for his love of Monty Python and creating the Python programming language (pseudo-code that works) as well as the Python community and PyCon for running Development Sprints and giving rookies like me the chance to learn how to contribute to open-source projects.

I'd also like to thank Real Python for being my go-to source for expanding my toolset.

If you can read this, it's because Real Python came through yet again by publishing Build Your Python Project Documentation With MkDocs, written by Martin Breuss and his trusty team of developers who helped work on the tutorial.