Web Design Diary & Learning Resources

Join me in the Sandbox where I play with HTML & CSS

Galley Proof

Chris Coyier Fan Club

I haven't ordered a tee-shirt or hat yet, but I am a fanatic fan of Chris Coyier and CSS-Tricks. My hero complex began a year ago while surfing YouTube for tutorials.

In 2015, I stumbled across Chris's presentation at a WordPress conference in 2012 on work flow. Sold. Loved his entire approach. Clarity with humor.

I subscribed to his YouTube channel, and watch and re-watch his videos.

His website, CSS-Tricks, is solid gold for web designers.

Not only does it include a great forum and blog, but Chris has an extensive library of video tutorials on the Lodge tab.

The Almanac tab includes an alphabetical listing of CSS Selectors and CSS Properties with links to know-how.

CSS-Tricks has become my go-to resource when my brain is rattled or when I am ready to learn something new.

I am just one of 2-million plus visitors who follow this Pied Piper of coding!

Check out Lodge, Full Training Courses on Web Design & Development. I love the Snippets tab at CSS-Tricks. What an amazing resource. Thanks, Chris!

And of course, subscribe to the CSS-Tricks newsletter and Shop for tee-shirts and hats.

Re-Design of Swim Yellow Duck

Antique doll from German doll maker Armand Marseille, marked AIM DRGM 201013

Antique Armand Marseille Doll Inspired My New Color Palette

I fell in love with this antique doll by German doll maker Armand Marseille the instant I saw her. Her Frenchy face and bulbous cheeks made me wish she were real so that we could have tea and she would tell me about her travels over the past century.

She made her entrance into my life, dressed in a velvet-trimmed bolero jacket, accented with a lace bib. Her chapeau was trimmed in matching velvet and accented with stylish plumage in delicate colors.

She was a lovely acquaintance, but we sold her on eBay.

Her bisque shoulder head is mounted on a leather body. Not all shoulder head dolls are marked, but she had incised manufacturer's markings of AIM DRGM 201013.

She stands a stately 20-inches tall. She also has an intriguing large, metal, clip at the back of her neck that controls a mechanism for talking.

Color Palette Picks by Adobe CC

Darrell photographed the AM doll for me, and I uploaded the photo to Adobe Color CC.

I went through the steps to create a color palette from a photo and up popped these five colors, which became my base color palette.

color palette block #ff9098 palette color block #403528 palette color block e49658 palette color block #006f68 palette color block #ff7900

Next, I expanded my color palette with brights and lights.

palette color block #ff2626 palette color block #04e8da palette block of light teal #94ebf3 palette block of light orange #fcae68

Finally, I invited a blue friend along to play in my new color palette.

palette color block #8dbffa

Frankly, I was going for a mellow, neutral palette when I chose Darrell's photo of the antique Armand doll for inspiration. I had determined to abandon my wild color choices in search of neutrals.

In the end, Adobe CC knew me well and found the only bright colors in what I judged to be a muted photograph.

Swim Yellow Duck logo
I applaud designers and Web authors who take images and text and make them beautiful on a page. That skill is an art form.

Re-designing Estates Trinkets & Treasures

image of the Estate Trinkets and Treasures website on antiques and collectibles

In December 2015, I completed a re-design of Estate Trinkets & Treasures, an online reference guide to antiques. The website was 12 years old. The re-design was arduous because it was a dinosaur and because of the number of pages and my lack of ability.

After months of work, I was proud to finish and could not wait to see the Google stats recording the new visitors who would flock to my site due to its better coding, more information, and better navigation.

However, when I viewed the stats, the chart recording visits to my site had flat-lined. In re-designing my website, I had lost visitors. I don't know why.

It was nothing to cry about.

Nevertheless, it underscored to me the necessity to learn more about designing a website that offers logical navigation and a good user interface for visitors, i.e.:

  • Ease of navigation
  • Clear writing
  • Great images
  • Accurate coding
  • Quality content
  • Responsive design

In my period of grief, I am proceeding with my re-design of SwimYellowDuck.com. My journey to create a nifty website continues in my Sandbox of HTML.

“I want a gold star!” She said as she stamped her feet!

In grade school, I always worked for that shiny, yellow, gummy star at the top of my homework. Naturally, I want my websites to earn a gold star as well.

Recently, I validated my HTML and CSS – for the first time – which is Step One towards earning that gold star.