Using HTML Dog Tutorials

While I know the basics of HTML and CSS, there is always more to learn! So I turned to HTML Dog tutorials, where I focused on bettering my knowledge of website accessibility and styling using color gradients.

From a quick browse of the list of HTML tutorials available on HTML Dog, I was immediately drawn to a tutorial on creating Accessible Links–which is essentially making sure that your webpage is easy for users with disabilities (lack of fine motor skills to use a mouse, deaf, blind, etc) to navigate. I was drawn to this tutorial because last fall I took a computer science course called “Software Design,” in which we had a unit on the importance of making webpages accessible to all users, and were challenged to uphold this accessibility-friendly mindset in all projects throughout the term.

In working through this tutorial, I learned that I can use “link titles” to offer more information about a given link when the user hovers over it, and that links can be accessed by clicking the “tab” key or any specified key on the keyboard. Below is the code I came up with after going through the tutorial:

Code view
Webpage the above code renders

After working with making links more accessible, I turned to styling the background of my webpage in a new way: using a color gradient. While there are many fades and infinite colors that you can choose from, I chose to do a top to bottom fade from pink to light blue.

CSS code to create a top-bottom fade

The result from completing these two tutorials was a 1990s-esque webpage that is in desperate need of some TLC to make it more 2019 appropriate.

The finished product!

From using a few HTML Dog tutorials, I was reminded just how many things you can do with the right combination of HTML, CSS, and JS–the possibilities are endless!

Author: Emilee

4 thoughts on “Using HTML Dog Tutorials

  1. Love your webpage background design! The details you included in your post are very useful. I wish I had looked at your post when I designed my webpage background.

  2. Emilee, I like what you did here. Web accessibility for people with disabilities is not a favorite topic, and I am glad you can use your exceptional skills to make a difference.

  3. Accessibility of websites is definitely important and overlooked. I like your use of tab-index! I have definitely used sites before where I’ve tried to “tab through” different elements and it did not work, or at least didn’t work as I would have expected.

  4. Great finds Emilee. Accessibility is very important and increasingly an area of energy and focus in the DH community as well as web development more generally.

Leave a Reply to ameliayd Cancel reply

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