Learn how to use HTML5 to build web applications that work on iOS and Android devices, as well as standard web browsers.
Author: Jennifer Kyrnin
Jennifer Kyrnin has been writing about HTML and web design since 1995, and has been building large and small websites for even longer. She finds HTML5 very useful for creating advanced web applications as well as good looking designs that are semantic and friendly to users and computers.
You can find out more about Jennifer's latest work at her home page HTMLJenn or her Google+ profile: Jennifer Kyrnin.
I find that web design is often about the colors that make up the site. But sites are not always made with the designer’s favorite colors. For example, many of the sites I’ve built have blue or red as their base colors. While I like red better than blue, neither is my favorite color.
Instead, I love the color purple. My son will tell you that purple is my favorite color. But purple is not my only favorite color.
I also love dark greens, especially the vivid deep greens of a coniferous forest.
Do you design sites based solely on the color or colors of the theme? Or do you only design sites using your favorite colors?
Share your favorite colors, up to three. If your favorite isn’t listed, why not share in the comments?
HTML5 is the greatest version of HTML ever! (Well, at least until the next awesome version comes out). I just learned how trivially easy it is to force downloads with HTML5.
Forcing Downloads is Easy—HTML5 to the Rescue!
Not only is there a better way, but it’s trivially easy to implement. I just add the keyword download to my anchor and BAM! the browser will pop a dialog box. I haven’t tested it in a lot of browsers (or devices), but it’s still huge! I mean, as a fallback I can attach a download function only to links that have the download keyword in them.
Now my download links look like this:
<a href="link to file" download="">Download the PDF</a>
When I first started creating video backgrounds I was surprised to learn that making the video for the backgrounds was the hardest part. So as part of my new video series “Learn Responsive Web Design LiveLessons” I included a lesson on building video backgrounds. And it’s available for you to watch for free.
Video Backgrounds are a Fun and Easy Way to Enhance Your Designs
If you answered yes to both these questions, then you’ll be thrilled to learn that my latest video series “Learning Responsive Web Design LiveLessons” will be out soon. This is a 12-lesson video series based on my book Sams Teach Yourself Responsive Web Design in 24 Hours.
I am currently working on the final edits and I hope to see it on the virtual shelves of Informit.com within the next few weeks. This has been a fun project for me to work on as it combines my love of web design with my driving desire to help people make web pages as responsive and accessible as possible.
What “Learning Responsive Web Design” will teach you
The other day, I got this question about the meta charset tag in the mail:
“Would you be so kind as to explain to me, in logical terms, how in 7 hecks does the presence of: <meta charset=”utf-8″>
is supposed to affect a ‘hacker attack’ in accordance to your book?
I literally cannot imagine hackers caring much about which charset you display on the UI side when attacking.”
This is a great question. The book he’s referencing is Sams Teach Yourself Bootstrap in 24 Hours, and in it I emphasize the importance of using the meta charset tag and placing it as the first element of your <head> element. But while I explain that leaving it out can leave a page vulnerable to hacks, I don’t explain why. But I will now.
I used to try to clip images using the CSS clip property, but that was so difficult that I typically gave up and got out my image editor. What is the point of spending four hours trying to force an image to clip in CSS when I can do the same thing in Acorn in less than five minutes? But now that clip is deprecated, I don’t have to use it anymore. But better yet, the new CSS clip-path property works so much better!
The clip-path property includes features like:
You can apply it to any element, not just absolutely positioned ones
As I’ve been writing my next book on forgotten features of CSS, I have been coming across some really cool things. It’s been hard to keep up the writing as I get so excited about actually using the features that CSS provides. Today I was working on image-set() and in doing my testing I realized that my dual monitor setup was well equipped for testing this tool.
What is Image-Set()?
You’re probably asking what the heck image-set() even is as it isn’t used very often and most designers don’t know much about it. In a nutshell: it is a CSS notation that allows you to define multiple image sources based on the resolution of those sources. The most common usage is for providing a Retina image and a non-Retina image. This way Retina devices see a crisp clean image, and non-Retina devices can show an image that is (hopefully) smaller and better optimized for their viewing.
Things are moving slowly, but they are moving. I have gotten the Bootstrap book code samples up on GitHub. So those of you who wanted to download them all at once, you now can. I’ll be adding the code from my other books to GitHub as soon as I can.
If you notice an error (and they do creep in!) please feel free to let me know by email, comment, or pull request.
Once I get the older books up on GitHub, I’ll start working on getting my latest book’s code up on GitHub. Of course, that book isn’t done writing itself, so one thing at a time.