HTML Dog: Tutorials For Web Development

I have experience working with HTML and CSS, being a senior Computer Science major and having had a couple jobs doing web development. That being said, I opted to take the more advanced HTML and CSS tutorials with HTML Dog, and I ended up learning quite a bit of cool new stuff!

HTML Advanced Tutorial

Time

The first new thing that I came across in the HTML tutorial was the <time> tag. I had never encountered this tag before, and I didn’t feel that I got a good sense of why it would be used from the HTML Dog page, so I did a little extra research. One useful case that I found, after some digging, involves “user agents” looking for dates on a web page – I’m picturing a Javascript program parsing the page in search of times and dates to add to your calendar, but I can imagine other scenarios as well. The<time> tag with its datetime attribute make this much easier, as they can provide both the user with an easily recognizable date or event, as well as the computer a machine-readable date that can be processed much more easily. For example,

<time datetime="2019-11-28"> Thanksgiving Day </time>

Provides the (assumedly American) human reader with an easily recognizable day – Thanksgiving -, but also provides any program trying to parse the file with an easily machine-readable date.

CSS Advanced Tutorial

Gradients

Gradient backgrounds look like a cool way of spicing up web pages. I had seen this done through the use of image assets, where the background of a web page is set to be an image of a gradient (or some other cool patter) that is also stored on the server, but I didn’t know this could be done in plain CSS! And its a simple as just setting the background property.

background: linear-gradient(to right, orange, red);

where the first argument of this linear-gradientfunction is the direction of the gradient, the next is the starting color, and the last is the end color. And you don’t even have to stop at two colors, although you probably don’t want to do as many as the tutorial did…

Author: Aidan

3 thoughts on “HTML Dog: Tutorials For Web Development

  1. That’s neat that you can do gradients right in CSS! I suppose this might be a way to future proof some design so that you don’t have to worry about low image resolution down the road.

  2. The time tag concept is really neat. As someone who knows neat to nothing about these programs, it is really cool to see what is possible at more advanced levels.

  3. Glad you found some new things in the advanced tutorials Aidan! Your post presents them with enthusiasm and great code and image examples.

Leave a Reply

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