Web Design Tutorials

This section of Impressive Webs contains articles and tutorials that describe a particular front-end development technique in detail with code samples and often a demo page and download links. Some tutorials are step by step, and others are more generic.

What is JSON? An Introduction and Guide for Beginners

What is JSON? An Introduction and Guide for BeginnersIf you’re new to web development and have some basic knowledge of HTML, CSS, and possibly a little bit of JavaScript, a practical area in which to expand your front-end skills is JSON.

But even if you already have a basic understanding of what JSON is and have used it in some of your projects, there might be a few things you weren’t aware of. So in this JSON tutorial and guide, I’m attempting to provide a fairly comprehensive discussion of JSON, its history, and its usefulness. I’ll close with a list of some practical JSON tools that might come in handy in future projects.

npm for Beginners: A Guide for Front-end Developers

npm for BeginnersUnless you’ve been under a transpiler-sized rock for the past five years or you’re an absolute beginner to front-end coding, then you’ve probably heard of npm.

Maybe you’ve clicked through to the GitHub repo of a tool of some kind, and you noticed the installation instructions had a couple of different possibilities, including something like this:

CSS Positioning Basics (Screencast)

CSS PositioningA couple of years ago I wrote an article for a company called Thinkful on CSS positioning, which also included a screencast that I hosted on my ImpressiveWebs YouTube channel. The video was “unlisted” but I’ve now made it public, and since some time has passed I thought I would post the video here.

It’s pretty basic stuff for most experienced CSS developers, but if anyone wants a quick primer on CSS positioning, this should be a good guide. The video is embedded below and I’ve summarized the content here in this post.

Animating from “display: block” to “display: none”

Animating display: block to display: noneAs you might already know, CSS3 transitions and animations allow you to animate a specific set of CSS properties. One of the properties that cannot be animated is the display property.

It would be great if we could do it, but it’s not currently possible and I’m guessing it never will be (e.g. how would you animate to “display: table”?). But there are ways to work around it, and I’ll present one way here.

Vertical Percentages in CSS

Vertical Percentages in CSSI don’t think this happens very often. To be honest, I don’t think I’ve ever used a percentage value on a top padding/margin, or a bottom padding/margin value. Even for height values, I may have used a 100% value for a hack, but nothing else.

Nonetheless, using percentages on those vertical parts of a page are somewhat different in the way they are calculated, compared to other properties that take percentage values.

Language-wide Features in CSS

Language-wide Features in CSSIn addition to the unique property/value pairs that CSS offers, there are also a small handful of language-wide features that can come in handy, including a few that are brand new in the spec.

These often go unnoticed, especially by beginners, because when CSS properties and their possible values are discussed (in tutorials, books, or even in the spec), these features are usually omitted for brevity.

The Minimum Code for a CSS Transition

transition-durationHere’s something interesting that you may not have realized about CSS3 transitions. Normally, you’ll see a transition declared by utilizing three different properties, either in longhand or shorthand.

In both cases, we’re explicitly declaring three of the four transition-related properties (leaving out transition-delay). Can a transition occur with less code than that? Well, yes.

HTML5 History API: A Syntax Primer

History WheelAs most of us probably are aware, a significant part of the HTML5 spec is the expansion of the History API.

This post will not be a super extensive discussion of this subject, especially since it’s something that I’m only now just getting into understanding better. But I thought I would put down the main components of the API, for my own quick reference, and I hope it will prove useful to my readers and those searching via Google.