Learning From the Web With HTML Dog

As I explore more digital humanities projects, something that I find interesting is the way their websites are designed. Each project uses a different layout catered to its specific goal. To me, revisiting the fundamentals of the web, HTML, and CSS allows you to reverse engineer these projects. I have basic experience with HTML and CSS but I often find myself revisiting w3schools or using Chrome’s dev tools to study a particular style or feature of a site I like.

HTML Dog is a great site for web developers of all skill levels. Their tutorials cover a wide range of concepts in HTML, CSS, and Javascript. It was easy to hop into an intermediate HTML tutorial and get started on a new project.

One thing I like about HTML Dog as opposed to w3schools or other web dev. sites are Alert boxes that give you an idea of HTML conventions or maximizing the accessibility of your page.

I found this helpful in understanding how websites work in practice.

I was immediately drawn to the tutorial on HTML canvas. I figured I should get the most out of HTML5 features and learn a thing or two about web media design. I also took this as an opportunity to get more comfortable with my Javascript syntax.

It took a little bit of work to get started, but I soon had a basic HTML skeleton and a little bit of CSS Styling. Feeling encouraged, I started to add in the javascript from HTML Dog’s canvas tutorial. The code displayed on the website displayed a basic animation like that of the infamous DVD logo that bounces off the walls of a bounding box. I then played around with the Javascript to add a color change on the wall bounces, to be true. The results were pretty nostalgic.

A screenshot of the simple website I built following HTML Dog’s tutorials

Here are my files for reference. Unfortunately, I couldn’t use pre tags to display my code without WordPress throwing me an error.

One last thing I would suggest is getting comfortable with browser developer modes or tools. I found it was a great way to get real time response from your code and really get the perspective of the user. It also has a lot of great tools to see what’s executing and what’s not, which helps out when you’re debugging your code.

HTML Code
CSS
Js

Author: Cole

1 thought on “Learning From the Web With HTML Dog

Leave a Reply

Your email address will not be published. Required fields are marked *