Special Characters in HTML vs CSS and Responsive Tables

Lots more frontend work on GFT. Through the process I learned some things.

Special Characters in HTML vs CSS

I’m trying to use as many free things as possible, one example being the special character of stars (★ ★ ★) instead of images. This site is a fantastic resource for finding the HTML code, unicode, and hex code versions of many characters.

But guess what—CSS requires even a different format yet! This article about the CSS content attribute explains it, and also led me to this entity converter which provides the CSS code version of HTML character codes.

I also came across a few helpful spacing units of different widths which could be helpful spacing out those special characters in CSS content, since this method wouldn’t allow them to be styled directly with padding/margin.

Responsive Tables

I also came across a great method for making tables responsive. Though my site uses Bootstrap, the Bootstrap solution to making a table responsive is to put a horizontal scroll on it when the screen width gets too narrow…yuck!

Instead, I wanted a way for table rows to wrap in a way that still allows the table to be easily read and understood. This article provides a few methods (as well as relevant pens) for doing so. I went for the semantic route for accessibility’s sake and styled my table, tr & td‘s instead of divs as the article suggests. And in the end, I only applied the flexbox solution to the mobile view…Bootstrap actually handles tables pretty well at greater widths.

In the end I’m happy with this solution!

Other Stuff

I RAN A HALF MARATHON ON SUNDAY!!! And I could still walk afterwards! 😆 I had a lot of fun and finished more than 5 minutes under the max time I’d hoped for. All the hard work paid off!